/* ===================================================
   SPRINKLERLOG.DK — Design System v1.1
   DBI Retningslinje 251/4001
   =================================================== */

/* === CSS CUSTOM PROPERTIES === */
:root {
  /* Farvepalette */
  --color-bg:          #0a1628;
  --color-bg2:         #0f1e38;
  --color-bg3:         #162444;
  --color-surface:     #1a2d4a;
  --color-border:      #1e3a5c;
  --color-border-light:#2a4a6c;

  /* Primær brand */
  --color-red:         #C41E3A;
  --color-red-dark:    #9e1830;
  --color-red-light:   #e02244;

  /* Status farver */
  --color-green:       #16a34a;
  --color-green-light: #22c55e;
  --color-orange:      #d97706;
  --color-orange-light:#f59e0b;
  --color-blue:        #1d6fa4;
  --color-blue-light:  #2d9cdb;
  --color-purple:      #7c3aed;

  /* Tekst */
  --color-text:        #e2e8f0;
  --color-text-muted:  #94a3b8;
  --color-text-faint:  #475569;
  --color-white:       #ffffff;

  /* Alias (bagudkompatibilitet) */
  --bg:        var(--color-bg);
  --bg2:       var(--color-bg2);
  --bg3:       var(--color-bg3);
  --border:    var(--color-border);
  --text:      var(--color-text);
  --muted:     var(--color-text-muted);
  --blue:      var(--color-blue-light);
  --blue-dark: var(--color-blue);
  --green:     var(--color-green-light);
  --red:       var(--color-red);
  --orange:    var(--color-orange-light);

  /* Spacing & radius */
  --radius:    8px;
  --radius-lg: 12px;
  --spacing:   16px;

}

/* === LIGHT MODE === */
html.light {
  --color-bg:          #f1f5f9;
  --color-bg2:         #ffffff;
  --color-bg3:         #f1f5f9;
  --color-surface:     #ffffff;
  --color-border:      #d1d9e0;
  --color-border-light:#94a3b8;
  --color-text:        #0f172a;
  --color-text-muted:  #475569;
  --color-text-faint:  #94a3b8;
  --bg:        var(--color-bg);
  --bg2:       var(--color-bg2);
  --bg3:       var(--color-bg3);
  --border:    var(--color-border);
  --text:      var(--color-text);
  --muted:     var(--color-text-muted);
}
html.light body { background: var(--color-bg); color: var(--color-text); }
html.light .navbar { background: #fff; border-bottom: 1px solid var(--color-border); }
html.light .sidebar { background: var(--color-bg2); border-right: 1px solid var(--color-border); }
html.light .card,
html.light .anlæg-card,
html.light .anlæg-main-card,
html.light .manifold-card,
html.light .reservoir-card,
html.light .anlæg-pump-card,
html.light .not-active-card,
html.light .zone-card,
html.light .alarm-row,
html.light .mqtt-bar,
html.light [class*="kort"],
html.light [class*="-card"] {
  background: #fff !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}
html.light .alarm-row:hover { background: #f8fafc !important; }
html.light .anlæg-card-title,
html.light .anlæg-card-header,
html.light .gauge-status-lbl,
html.light .alarm-row-title,
html.light .alarm-row-sub { color: var(--color-text) !important; }
html.light .valve-status-dot.ok      { background: #16a34a; }
html.light .valve-status-dot.offline { background: #94a3b8; }
html.light .container { background: var(--color-bg); }

/* === Light mode: manometer (gauge) fixes === */
/* Baggrunds-arc (track) — hvid er usynlig på lys baggrund */
html.light .gauge-svg circle:first-child {
  stroke: rgba(0,0,0,0.18) !important;
}
/* Tryk-tal tekst — hvid er usynlig på lys baggrund */
html.light .gauge-svg text:first-of-type {
  fill: #1e293b !important;
}
/* Info-punkt streger og labels: sort i light mode, hvid i dark mode */
[id^="gauge-ticks-"] line,
[id^="manifold-ticks-"] line,
[id^="anlæg-info-"] line,
[id^="manifold-info-"] line,
[id^="mano-info-"] line { stroke: #fff !important; }

[id^="gauge-ticks-"] text,
[id^="manifold-ticks-"] text,
[id^="anlæg-info-"] text,
[id^="manifold-info-"] text,
[id^="mano-info-"] text { fill: #fff !important; opacity: 1 !important; }

html.light [id^="gauge-ticks-"] line,
html.light [id^="manifold-ticks-"] line,
html.light [id^="anlæg-info-"] line,
html.light [id^="manifold-info-"] line,
html.light [id^="mano-info-"] line { stroke: #1e293b !important; }

html.light [id^="gauge-ticks-"] text,
html.light [id^="manifold-ticks-"] text,
html.light [id^="anlæg-info-"] text,
html.light [id^="manifold-info-"] text,
html.light [id^="mano-info-"] text { fill: #1e293b !important; }

/* Tilbagefald for :root variabler der ikke gendeklareres */
:root {
  /* Touch targets (DBI 251 kiosk krav) */
  --touch-min: 48px;

  /* Skrifttyper */
  --font-base:  16px;
  --font-input: 18px;
  --font-ui:    'Segoe UI', system-ui, -apple-system, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Noto Sans Symbols';
  --font-mono:  'Courier New', monospace;
}

/* RPi Touch Display (720-899px) */
@media (min-width: 720px) and (max-width: 899px) {
  :root {
    --font-base:  17px;
    --font-input: 20px;
    --touch-min:  52px;
    --spacing:    12px;
  }
}

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: var(--font-base); background: #0a1628; }

body {
  font-family: var(--font-ui);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-blue-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* === LOGIN SIDE === */
body.login-page {
  background: url('/sprinkler/assets/back1.png') center/cover fixed;
  min-height: 100vh;
}

.login-bg {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,22,40,0.85), rgba(26,26,46,0.7));
  z-index: 0;
}

.login-container {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ── Login layout med QR-kort ved siden af ── */
.login-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  width: auto;
}

/* Sørg for at login-box ikke strækker sig til fuld bredde i flex-kontekst */
.login-wrapper .login-box {
  width: 420px;
  max-width: 420px;
  flex-shrink: 0;
}

.login-qr-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 36px 28px;
  width: 220px;
  flex-shrink: 0;
  box-shadow: 0 25px 50px rgba(0,0,0,0.4);
}

.login-qr-icon {
  font-size: 2.2rem;
  line-height: 1;
}

.login-qr-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  text-align: center;
  line-height: 1.45;
}

#qrcode {
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  line-height: 0;
}

#qrcode canvas, #qrcode img {
  border-radius: 4px;
  display: block;
}

.login-qr-hint {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  text-align: center;
  line-height: 1.6;
}

.login-qr-hint strong {
  color: rgba(255,255,255,0.88);
  font-weight: 600;
}

.login-qr-sub {
  display: block;
  margin-top: 8px;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.32);
}

/* Skjul QR-kort på mobil — de er allerede på telefonen */
@media (max-width: 780px) {
  .login-qr-panel          { display: none; }
  .login-wrapper           { display: block; }
  .login-wrapper .login-box { width: 100%; max-width: 420px; }
}

.login-box {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 20px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}

.login-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
  width: 100%;
}
.login-logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.login-logo svg {
  width: 56px;
  height: 56px;
}

.login-logo h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-white);
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.login-logo h2 {
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
  margin: 0;
  letter-spacing: 0.3px;
}

.input-group {
  display: flex;
  align-items: center;
  position: relative;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 0 14px;
  height: var(--touch-min);
  transition: border-color 0.2s, background 0.2s;
}

.input-group:focus-within {
  border-color: rgba(196,30,58,0.6);
  background: rgba(255,255,255,0.12);
}

.input-group .input-icon {
  color: rgba(255,255,255,0.4);
  font-size: 1rem;
  flex-shrink: 0;
  margin-right: 10px;
  pointer-events: none;
}

.input-group input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  color: var(--color-white) !important;
  padding: 0;
  font-size: var(--font-input);
  font-family: var(--font-ui);
  height: 100%;
}

.input-group input::placeholder { color: rgba(255,255,255,0.35); }
.input-group input:focus { outline: none; }

.toggle-pw {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  padding: 8px;
  font-size: 1.1rem;
  line-height: 1;
  z-index: 2;
}
.toggle-pw:hover { color: rgba(255,255,255,0.7); }

.remember-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.remember-row input[type=checkbox] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-red);
  cursor: pointer;
}

.remember-row label {
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  cursor: pointer;
}

.login-btn {
  display: block;
  width: 100%;
  height: var(--touch-min);
  background: var(--color-red);
  color: var(--color-white);
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.2s, transform 0.1s;
}
.login-btn:hover { background: var(--color-red-dark); transform: translateY(-1px); }
.login-btn:active { transform: translateY(0); }

.forgot-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
}
.forgot-link:hover { color: rgba(255,255,255,0.8); text-decoration: none; }

.login-footer {
  text-align: center;
  margin-top: 24px;
  color: rgba(255,255,255,0.3);
  font-size: 0.72rem;
  letter-spacing: 0.5px;
}

/* Login error */
.login-error {
  background: rgba(196,30,58,0.2);
  border: 1px solid rgba(196,30,58,0.4);
  border-radius: 8px;
  color: #ff8fa3;
  padding: 12px 16px;
  font-size: 0.88rem;
  margin-bottom: 16px;
}

/* Responsivt login */
@media (max-width: 479px) {
  .login-box { padding: 16px 20px; max-width: 100%; }
  .login-logo h1 { font-size: 1.6rem; }
  .login-logo h2 { font-size: 1rem; }
  .lbox-tab { font-size: 1.4rem; padding: 18px 10px; }
  .input-group { height: 58px; border-radius: 12px; padding: 0 16px; }
  .input-group input { font-size: 1.15rem; }
  .input-group input::placeholder { font-size: 1.05rem; }
  .input-group .input-icon svg { width: 26px; height: 26px; }
  .toggle-pw { font-size: 1.3rem; }
  .remember-row label { font-size: 1.05rem; }
  .remember-row input[type=checkbox] { width: 24px; height: 24px; }
  .login-btn { height: 58px; font-size: 1.3rem; border-radius: 12px; letter-spacing: 1px; }
  .forgot-link { font-size: 1rem; margin-top: 12px; }
  .login-error { font-size: 1rem; padding: 12px 16px; }
  .login-footer { font-size: 0.85rem; }
}

/* ── Mobil login: 480–899px (Galaxy Fold cover, store telefoner) ── */
@media (min-width: 480px) and (max-width: 899px) {
  .login-container { padding: 48px 42px; align-items: center; }
  .login-wrapper   { width: 100%; justify-content: center; }
  .login-wrapper .login-box {
    width: 100%;
    max-width: 680px;
    padding: 84px 78px;
    border-radius: 42px;
  }
  .login-logo h1   { font-size: 1.4rem; margin-top: 0; }
  .login-logo h2   { font-size: 0.82rem; margin-top: 0; }
  .login-logo      { margin-bottom: 24px; }
  .input-group     { height: 132px; border-radius: 27px; padding: 0 39px; margin-bottom: 33px; }
  .input-group input { font-size: 2.55rem; }
  .input-group input::placeholder { font-size: 2.2rem; }
  .input-group .input-icon { font-size: 2.4rem; margin-right: 27px; }
  .toggle-pw       { font-size: 2.4rem; right: 39px; top: 50%; transform: translateY(-50%); }
  .remember-row    { gap: 24px; margin-bottom: 45px; }
  .remember-row input[type=checkbox] { width: 51px; height: 51px; }
  .remember-row label { font-size: 2rem; }
  .login-btn       { height: 135px; font-size: 2.3rem; border-radius: 27px; letter-spacing: 1px; }
  .forgot-link     { font-size: 1.8rem; margin-top: 36px; }
  .login-error     { font-size: 1.7rem; padding: 30px 36px; border-radius: 21px; margin-bottom: 36px; }
  .login-footer    { font-size: 1.4rem; margin-top: 48px; }
}

/* === NAVBAR / HEADER BAR === */
.navbar {
  background: var(--color-bg2);
  border-bottom: 1px solid var(--color-border);
  padding: 0 16px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 200;
  gap: 8px;
  overflow: hidden;
}
.navbar-left  { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.navbar-right { display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-shrink: 0; }

.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-fullscreen {
  flex-shrink: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.nav-fullscreen:hover { color: var(--color-white); background: var(--color-bg3); }

/* Dark/Light theme toggle */
.nav-theme-toggle {
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  transition: background .2s, border-color .2s;
}
.nav-theme-toggle:hover { background: var(--color-bg3); border-color: var(--color-border-light); }

/* Logout knap — eget element uden for nav-links */
.nav-logout {
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--color-red);
  color: #fff;
  padding: 0 18px;
  height: 36px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity .15s;
  border: none;
  cursor: pointer;
}
.nav-logout:hover { opacity: 0.82; color: #fff; }

.brand svg { color: var(--color-red); }

.brand-sub {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--color-text-muted);
  display: none;
  margin-left: 4px;
  opacity: 0.7;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.nav-links a {
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover { color: var(--color-text); background: var(--color-bg3); text-decoration: none; }
.nav-links a.active { color: var(--color-white); background: var(--color-surface); }

.lang-switcher {
  display: flex;
  gap: 3px;
  background: var(--color-surface);
  border-radius: 8px;
  padding: 3px;
  border: 1px solid var(--color-border);
}
.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 5px;
  border-radius: 5px;
  text-decoration: none;
  transition: all .15s;
  opacity: 0.45;
  filter: grayscale(30%);
}
.lang-btn img { display: block; border-radius: 2px; }
.lang-btn:hover { opacity: 0.8; filter: none; background: var(--color-bg3); }
.lang-btn.active { opacity: 1; filter: none; background: rgba(255,255,255,0.08); box-shadow: 0 0 0 1.5px var(--color-primary); }

.nav-user {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}
.nav-user span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.role-badge {
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.role-admin    { background: rgba(124,58,237,0.25); color: #a78bfa; }
.role-user     { background: rgba(29,111,164,0.25); color: #7dd3fc; }

/* === SIDEBAR LAYOUT (admin) === */
.layout {
  display: flex;
  min-height: calc(100vh - 56px);
}

.nav-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--color-bg2);
  border-right: 1px solid var(--color-border);
  padding: 12px 0;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.25s ease, padding 0.25s ease;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
.nav-sidebar::-webkit-scrollbar { width: 6px; }
.nav-sidebar::-webkit-scrollbar-track { background: transparent; }
.nav-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 3px;
}
.nav-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }
.sidebar-collapsed .nav-sidebar {
  width: 0;
  padding: 16px 0;
  border-right-color: transparent;
}

.sidebar-section {
  margin-bottom: 4px;
}

.sidebar-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text-faint);
  padding: 6px 20px 3px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  text-decoration: none;
  transition: all 0.15s;
  border-left: 3px solid transparent;
  min-height: 44px;
}
.sidebar-link:hover {
  color: var(--color-text);
  background: var(--color-bg3);
  text-decoration: none;
}
.sidebar-link.active {
  color: var(--color-white);
  background: rgba(196,30,58,0.12);
  border-left-color: var(--color-red);
}

.sidebar-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.8;
}
.sidebar-link.active svg { opacity: 1; }

.layout-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Hamburger-knap til sidebar-toggle */
.sidebar-toggle-btn {
  display: none;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.sidebar-toggle-btn:hover { background: var(--color-bg3); color: var(--color-white); }
.has-sidebar .sidebar-toggle-btn { display: flex; align-items: center; justify-content: center; }

/* Skjul sidebar på mobil */
@media (max-width: 899px) {
  .nav-sidebar { display: none !important; }
  .sidebar-toggle-btn { display: none !important; }
}
@media (min-width: 900px) {
  .layout { display: flex; }
}

/* === CONTAINER === */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px;
}

/* === PAGE HEADER === */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.page-header h1 { font-size: 1.5rem; color: var(--color-white); }
.page-header .breadcrumb {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.page-header .breadcrumb a { color: var(--color-text-muted); }
.page-header .breadcrumb a:hover { color: var(--color-text); }

/* === STATS KORT (top-kort) === */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--color-bg2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon svg { width: 24px; height: 24px; }
.stat-icon.green  { background: rgba(22,163,74,0.15);   color: #22c55e; }
.stat-icon.red    { background: rgba(196,30,58,0.15);   color: #e02244; }
.stat-icon.orange { background: rgba(217,119,6,0.15);   color: #f59e0b; }
.stat-icon.blue   { background: rgba(29,111,164,0.15);  color: #2d9cdb; }

.stat-info {}
.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
}
.stat-label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* === CARDS === */
.card {
  background: var(--color-bg2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.card-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text-faint);
}

/* === GRID === */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }

/* === KUNDE KORT === */
.customer-card {
  background: var(--color-bg2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  cursor: pointer;
}
.customer-card:hover {
  border-color: var(--color-red);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.customer-card h3 { font-size: 0.95rem; color: var(--color-white); margin-bottom: 8px; }
.customer-card .meta { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.7; }
.customer-card .badge-count {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.72rem;
  background: var(--color-bg3);
  color: var(--color-text-muted);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
}

/* === VENTIL KORT (realtid) === */
.valve-card {
  background: var(--color-bg2);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  text-align: center;
  transition: border-color 0.3s, box-shadow 0.3s;
  position: relative;
}
.valve-card.ok      { border-color: var(--color-green-light); }
.valve-card.alarm   { border-color: var(--color-red); animation: pulse-red 1.5s infinite; }
.valve-card.offline { border-color: var(--color-border); opacity: 0.55; }

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,30,58,0.3); }
  50%       { box-shadow: 0 0 0 8px rgba(196,30,58,0); }
}

.valve-number {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.valve-name {
  font-size: 0.88rem;
  color: var(--color-text);
  margin-bottom: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.valve-pressure {
  font-size: 2.4rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-white);
  line-height: 1;
}
.valve-pressure-unit {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.valve-status-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 6px;
}
.valve-status-dot.ok      { background: var(--color-green-light); animation: dot-pulse 2s ease-in-out infinite; }
.valve-status-dot.alarm   { background: var(--color-red); }
.valve-status-dot.offline { background: var(--color-text-muted); }
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  50%       { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}
.valve-status-label { font-size: 0.8rem; font-weight: 600; }
.valve-meta {
  margin-top: 12px;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-align: left;
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
  line-height: 1.8;
}

/* === TABELLER === */
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text-faint);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--color-bg3); }
.table-actions { display: flex; gap: 8px; }

/* === KNAPPER === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 20px;
  height: var(--touch-min);
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: var(--font-ui);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.1s, background 0.15s;
  white-space: nowrap;
}
.btn:hover { background: var(--color-blue) !important; color: var(--color-white) !important; text-decoration: none; transform: translateY(-1px); opacity: 1; }
.btn:active { transform: translateY(0); }
.btn-primary   { background: transparent; color: var(--color-white); border: 1px solid var(--color-border); }
.btn-success   { background: var(--color-green);  color: var(--color-white); }
.btn-danger    { background: var(--color-red);     color: var(--color-white); }
.btn-warning   { background: var(--color-orange);  color: var(--color-white); }
.btn-secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 0.8rem; }

/* Vis graf toggle-knap */
#btn-vis-graf {
  background: #1d4ed8;
  color: #fff;
  border: 1px solid #2563eb;
  font-weight: 600;
  transition: background .15s, border-color .15s;
}
#btn-vis-graf:hover { background: #2563eb; border-color: #3b82f6; }
#btn-vis-graf.graf-open {
  background: rgba(100,116,139,.18);
  color: #94a3b8;
  border: 1px solid #334155;
  font-weight: 400;
}
#btn-vis-graf.graf-open:hover { background: rgba(100,116,139,.28); color: #cbd5e1; }

/* === FORMULARER === */
.form-group { margin-bottom: 18px; }
label {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
input[type=text], input[type=email], input[type=password],
input[type=number], select, textarea {
  width: 100%;
  background: var(--color-bg3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  padding: 0 14px;
  height: var(--touch-min);
  font-size: var(--font-input);
  font-family: var(--font-ui);
  transition: border-color 0.2s, background 0.2s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-red);
  background: var(--color-surface);
}
select option { background: var(--color-bg3); }
textarea { min-height: 90px; resize: vertical; height: auto; padding: 12px 14px; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* === ALERTS === */
.alert {
  padding: 12px 18px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-success { background: rgba(22,163,74,0.12);  border: 1px solid rgba(22,163,74,0.35);   color: #4ade80; }
.alert-danger  { background: rgba(196,30,58,0.12);  border: 1px solid rgba(196,30,58,0.35);   color: #fb7185; }
.alert-info    { background: rgba(29,111,164,0.12); border: 1px solid rgba(29,111,164,0.35); color: #7dd3fc; }
.alert-warning { background: rgba(217,119,6,0.12);  border: 1px solid rgba(217,119,6,0.35);  color: #fbbf24; }

/* === MQTT STATUS BAR === */
.mqtt-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
  padding: 8px 14px;
  background: var(--color-bg2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

/* ── Alarm dæmpning ─────────────────────────── */
.alarm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.alarm-row:hover        { background: var(--color-surface); }
.alarm-row:active       { background: var(--color-bg3); }
.alarm-row.muted        { border-color: rgba(251,146,60,.35); }

.alarm-row-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Colored icon box — like iOS */
.alarm-row-icon-wrap {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: #34c759;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: background .25s;
  box-shadow: 0 2px 8px rgba(52,199,89,.35);
}
.alarm-row.muted .alarm-row-icon-wrap {
  background: #636366;
  box-shadow: none;
}

.alarm-row-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.alarm-row-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #f1f5f9;
  letter-spacing: .01em;
}
.alarm-row-sub {
  font-size: 0.75rem;
  color: #34c759;
  font-weight: 500;
  transition: color .25s;
}
.alarm-row.muted .alarm-row-sub { color: #fb923c; }

/* iPhone-style toggle — class-driven, ingen input */
.iphone-track {
  position: relative;
  width: 51px; height: 31px;
  border-radius: 16px;
  background: #34c759;
  flex-shrink: 0;
  transition: background .25s;
  cursor: pointer;
}
.iphone-track.off {
  background: #636366;
}
.iphone-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  transform: translateX(20px);
}
.iphone-track.off .iphone-knob {
  transform: translateX(0);
}

/* ── Alarm pause modal ───────────────────────── */
.alarm-modal-box {
  background: #1c2b47;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 28px 24px 22px;
  width: min(340px, 92vw);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.alarm-modal-icon {
  font-size: 2.4rem;
  margin-bottom: 10px;
  line-height: 1;
}
.alarm-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 6px;
}
.alarm-modal-sub {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0 0 22px;
}
.alarm-time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.alarm-time-btn {
  background: rgba(251,146,60,.12);
  border: 1px solid rgba(251,146,60,.3);
  border-radius: 14px;
  padding: 16px 10px;
  cursor: pointer;
  transition: background .15s, transform .1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  -webkit-tap-highlight-color: transparent;
}
.alarm-time-btn:hover  { background: rgba(251,146,60,.22); border-color: rgba(251,146,60,.5); }
.alarm-time-btn:active { transform: scale(.96); }
.alarm-time-num  { font-size: 1.6rem; font-weight: 700; color: #fb923c; line-height: 1; }
.alarm-time-unit { font-size: 0.72rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; }
.alarm-modal-cancel {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px;
  color: #9ca3af;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background .15s;
  margin-top: 4px;
}
.alarm-modal-cancel:hover { background: rgba(255,255,255,.1); color: #f1f5f9; }
.mqtt-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: background 0.3s;
  flex-shrink: 0;
}
.mqtt-dot.connected    { background: var(--color-green-light); }
.mqtt-dot.disconnected { background: var(--color-red); animation: mqttBlink 1s step-start infinite; }
.mqtt-dot.error        { background: #ff6600; }

@keyframes mqttBlink {
  50% { opacity: 0.2; }
}

/* === PUMP CARD — 2 gauges + fase === */
.pump-gauges {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.pump-gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pump-gauge-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.phase-section {
  margin-top: 14px;
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}
.phase-section-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  text-align: center;
}
.phase-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.phase-box {
  flex: 1;
  background: var(--color-bg3, rgba(255,255,255,0.04));
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 6px 8px;
  text-align: center;
  min-width: 60px;
}
.phase-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.phase-value {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: monospace;
  color: #e2e8f0;
  line-height: 1;
}
.phase-unit {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* === INFO GRID === */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 14px; }
.info-item .info-label { font-size: 0.68rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 1px; }
.info-item .info-value { font-size: 0.92rem; color: var(--color-text); margin-top: 3px; font-family: var(--font-mono); }

/* === STATUS DOTS === */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.green  { background: var(--color-green-light); }
.status-dot.yellow { background: var(--color-orange-light); }
.status-dot.red    { background: var(--color-red); }
.status-dot.gray   { background: var(--color-text-faint); }

/* === BADGES === */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
}
.badge-admin     { background: rgba(124,58,237,0.2); color: #a78bfa; }
.badge-user      { background: rgba(29,111,164,0.2); color: #7dd3fc; }
.badge-ok        { background: rgba(22,163,74,0.2);  color: #4ade80; }
.badge-alarm     { background: rgba(196,30,58,0.2);  color: #fb7185; }
.badge-warning   { background: rgba(217,119,6,0.2);  color: #fbbf24; }

/* === FOOTER === */
.footer {
  text-align: center;
  color: var(--color-text-faint);
  font-size: 0.72rem;
  padding: 20px;
  border-top: 1px solid var(--color-border);
  margin-top: 40px;
}

/* === RESPONSIVE === */
@media (max-width: 719px) {
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .container { padding: 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 479px) {
  .stats-grid { grid-template-columns: 1fr; }
  .nav-links a span { display: none; }
}

/* === MODAL (glemt kode) === */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex !important; }
.modal-box {
  background: var(--color-bg2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%;
  max-width: 400px;
}
.modal-box h3 { font-size: 1.1rem; color: var(--color-white); margin-bottom: 8px; }
.modal-box p  { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 20px; }

/* ===================================================
   CHAT / ALARM WIDGET
   =================================================== */
.chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.bell-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bell-label {
  white-space: nowrap;
  background: var(--color-red);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .03em;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(196,30,58,.35);
  opacity: 0;
  transform: translateX(16px);
}
.bell-label.show {
  animation: bellLabelSlide 3.6s ease forwards;
}
@keyframes bellLabelSlide {
  0%   { opacity: 0; transform: translateX(16px); }
  14%  { opacity: 1; transform: translateX(0); }
  72%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(16px); }
}

.chat-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-red);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 16px rgba(196,30,58,0.4);
  transition: transform 0.2s, background 0.2s;
  position: relative;
  flex-shrink: 0;
}
.chat-toggle:hover { background: var(--color-red-dark); transform: scale(1.05); }
.chat-toggle.ring { animation: siren-flash 1.4s ease-in-out 2; }
@keyframes siren-flash {
  0%,100% { transform: scale(1);    filter: brightness(1)   drop-shadow(0 0 0px rgba(255,180,180,0)); }
  18%     { transform: scale(1.15); filter: brightness(1.7) drop-shadow(0 0 14px rgba(255,160,160,.9)); }
  36%     { transform: scale(1);    filter: brightness(1)   drop-shadow(0 0 0px rgba(255,180,180,0)); }
  55%     { transform: scale(1.12); filter: brightness(1.6) drop-shadow(0 0 11px rgba(255,160,160,.8)); }
  72%     { transform: scale(1);    filter: brightness(1)   drop-shadow(0 0 0px rgba(255,180,180,0)); }
  88%     { transform: scale(1.08); filter: brightness(1.4) drop-shadow(0 0 8px rgba(255,160,160,.6)); }
}

.chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #f59e0b;
  color: #000;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}
.chat-badge.visible { display: flex; }

.chat-panel {
  width: 340px;
  height: 480px;
  background: var(--color-bg2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  display: none;
  animation: slideUp 0.2s ease;
}
.chat-panel.admin-panel { width: 440px; height: 600px; }
.chat-panel.open { display: flex; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-header {
  background: linear-gradient(135deg, #0f1e35 0%, #0d1b2e 100%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.chat-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
}
.chat-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: .01em;
}

.chat-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-text-faint);
}
.chat-status-dot.live { background: var(--color-green-light); animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.4} }

.chat-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  color: #64748b;
  cursor: pointer;
  transition: all .15s;
}
.chat-close:hover { background: rgba(248,113,113,.15); border-color: rgba(248,113,113,.3); color: #f87171; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}

.chat-msg {
  padding: 8px 12px;
  border-radius: 10px;
  max-width: 100%;
  font-size: 0.82rem;
  line-height: 1.4;
  word-break: break-word;
}
.chat-msg.chat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  align-self: flex-start;
}
.chat-msg.chat.own {
  background: rgba(29,111,164,0.2);
  border-color: rgba(29,111,164,0.35);
  align-self: flex-end;
}
.chat-msg.alarm {
  background: rgba(196,30,58,0.15);
  border: 1px solid rgba(196,30,58,0.4);
  color: #fb7185;
  align-self: flex-start;
}
.chat-msg.system {
  background: rgba(217,119,6,0.1);
  border: 1px solid rgba(217,119,6,0.3);
  color: #fbbf24;
  align-self: center;
  text-align: center;
  font-size: 0.75rem;
}

.chat-msg-header {
  display: flex;
  align-items: center;
  margin-bottom: 3px;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  gap: 6px;
}
.chat-msg-time { margin-left: auto; flex-shrink: 0; }

.chat-msg-sender { font-weight: 600; color: var(--color-text); }
.chat-msg.alarm .chat-msg-sender { color: #fb7185; }

.chat-input-area {
  border-top: 1px solid var(--color-border);
  padding: 10px;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  background: var(--color-bg3);
}

.chat-input {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  color: var(--color-white);
  padding: 8px 14px;
  font-size: 0.85rem;
  font-family: var(--font-ui);
  resize: none;
  outline: none;
  height: 38px;
  transition: border-color 0.2s;
}
.chat-input:focus { border-color: var(--color-red); }

.chat-send-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-red);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background 0.15s;
}
.chat-send-btn:hover { background: var(--color-red-dark); }


/* Chat: samtaleliste (admin) */
.chat-conv-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s;
}
.chat-conv-item:hover    { background: var(--color-bg3); }
.chat-conv-item.unread   { background: rgba(29,111,164,0.08); }
.chat-conv-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.chat-conv-name  { font-weight: 600; font-size: .88rem; color: var(--color-white); }
.chat-conv-time  { font-size: .7rem; color: var(--color-text-muted); flex-shrink: 0; }
.chat-conv-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.chat-conv-preview { font-size:.78rem; color:var(--color-text-muted); flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chat-conv-badge {
  background: var(--color-red); color:#fff; border-radius:10px;
  padding:1px 7px; font-size:.68rem; font-weight:700; flex-shrink:0;
}
.chat-conv-item.unread .chat-conv-name { color:#fff; }
.chat-conv-item.unread .chat-conv-preview { color: var(--color-text); }

/* Chat: back knap */
.chat-back-btn {
  background: none; border: none; color: var(--color-text-muted);
  cursor: pointer; font-size: .82rem; padding: 2px 8px;
  border-radius: 4px; white-space: nowrap;
}
.chat-back-btn:hover { color: var(--color-white); background: var(--color-surface); }

/* Chat: besked-animation */
.msg-animate { animation: slideUp 0.15s ease; }

/* Chat: slet-knap (admin) */
.chat-del-btn {
  display: inline-block;
  margin-top: 5px;
  background: none;
  border: 1px solid rgba(196,30,58,0.4);
  border-radius: 4px;
  cursor: pointer;
  font-size: .72rem;
  color: var(--color-danger, #C41E3A);
  padding: 2px 8px;
  transition: background .15s, border-color .15s;
}
.chat-del-btn:hover {
  background: rgba(196,30,58,0.15);
  border-color: #C41E3A;
}

/* Chat: tråd-visning flex */
#chatThreadView { display: flex; flex-direction: column; overflow: hidden; }

/* Chat: slet hel tråd (admin) */
.chat-del-thread-btn {
  background: none;
  border: 1px solid rgba(196,30,58,0.5);
  border-radius: 4px;
  color: #ef4444;
  cursor: pointer;
  font-size: .78rem;
  padding: 3px 8px;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.chat-del-thread-btn:hover {
  background: rgba(196,30,58,0.2);
  border-color: #ef4444;
}

/* Chat: billedknap (bruger) */
.chat-img-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.chat-img-btn:hover { background: var(--color-bg3); border-color: var(--color-text-muted); }

/* Chat: billede i besked */
.chat-msg-img {
  display: block;
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  margin-top: 6px;
  object-fit: contain;
  cursor: pointer;
}
.chat-msg-img:hover { opacity: 0.9; }

/* Mobilvenlig */
@media (max-width: 479px) {
  .chat-panel { width: calc(100vw - 24px); right: 0; }
  .chat-widget { right: 12px; }
}

/* ── Chat tabs ─────────────────────────────────── */
.chat-tabs {
  display: flex;
  width: 100%;
  padding: 0 10px;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.chat-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #475569;
  font-size: .8rem;
  font-weight: 600;
  padding: 8px 4px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  letter-spacing: .01em;
}
.chat-tab.active {
  color: #38bdf8;
  border-bottom-color: #38bdf8;
}
.chat-tab:hover:not(.active) { color: #94a3b8; }
.chat-tab-badge {
  display: inline-block;
  background: #ef4444;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 0 5px;
  margin-left: 4px;
  vertical-align: middle;
  min-width: 16px;
  text-align: center;
}
.chat-tab-badge.alarm { background: #f97316; }

/* ── Alarm log liste ───────────────────────────── */
.alarm-log-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.alarm-log-item {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background .15s;
}
.alarm-log-item:last-child { border-bottom: none; }
.alarm-log-item.ack { opacity: 0.5; }
.alarm-log-item:not(.ack) { background: rgba(239,68,68,0.06); }
.alarm-log-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.alarm-log-icon  { font-size: 1rem; flex-shrink: 0; }
.alarm-log-central { font-size: .8rem; font-weight: 700; color: var(--color-text); flex: 1; }
.alarm-log-time  { font-size: .72rem; color: var(--color-text-muted); white-space: nowrap; }
.alarm-log-tekst { font-size: .82rem; color: var(--color-text); line-height: 1.4; margin-bottom: 6px; }
.alarm-log-ack-info { font-size: .72rem; color: #4ade80; }
.alarm-ack-btn {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.35);
  color: #f87171;
  font-size: .75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}
.alarm-ack-btn:hover { background: rgba(239,68,68,0.28); }

/* === GAUGE LOADING === */
@keyframes gauge-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
.gauge-loading {
  animation: gauge-pulse 1.2s ease-in-out infinite;
  color: var(--color-text-muted) !important;
}

/* === RESERVOIR SVG === */
.res-tank-rect {
  fill: rgba(255,255,255,0.03);
  stroke: rgba(255,255,255,0.45);
  stroke-width: 2;
}
.res-level-line { stroke: rgba(255,255,255,0.30); }
.res-pct-text   { fill: rgba(255,255,255,0.35); }

html.light .res-tank-rect {
  fill: rgba(0,0,0,0.03);
  stroke: #374151;
  stroke-width: 2.5;
}
html.light .res-level-line { stroke: rgba(0,0,0,0.35); }
html.light .res-pct-text   { fill: rgba(0,0,0,0.40); }
/* dark mode colours */
.res-high-color { fill: #4ade80; stroke: #4ade80; }
.res-mid-color  { fill: #38bdf8; stroke: #38bdf8; }
.res-low-color  { fill: #fb923c; stroke: #fb923c; }
.res-marker-lbl { fill: #4ade80; }
.res-mid-color.res-marker-lbl  { fill: #38bdf8; }
.res-low-color.res-marker-lbl  { fill: #fb923c; }

/* light mode: alles sort */
html.light .res-high-color,
html.light .res-mid-color,
html.light .res-low-color  { fill: #111827 !important; stroke: #111827 !important; }
html.light .res-marker-lbl { fill: #111827 !important; }
html.light .res-pct-text   { fill: rgba(0,0,0,0.40) !important; }

/* ── Extracted from central.php ──────────────────────────────────────────── */
<style>
/* ══════════════════════════════════════════════════
   Full-screen dashboard layout — fylder skærmen
   i både bredde og højde
   ══════════════════════════════════════════════════ */
html, body { height: 100dvh; overflow: hidden; }

/* layout fylder fra bunden af navbar til bunden af skærmen */
.layout { height: calc(100dvh - 56px); overflow: hidden; }

/* layout-main scroller internt — scrollbar skjult på mobil/tablet, tynd på desktop */
.layout-main { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.layout-main::-webkit-scrollbar { display: none; }

@media (hover: hover) and (pointer: fine) {
  /* Kun enheder med mus (desktop) — ikke touch-skærme */
  .layout-main { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.35) transparent; }
  .layout-main::-webkit-scrollbar { display: block; width: 10px; }
  .layout-main::-webkit-scrollbar-track { background: transparent; }
  .layout-main::-webkit-scrollbar-thumb { background: rgba(248,250,252,.45); border-radius: 99px; }
  .layout-main::-webkit-scrollbar-thumb:hover { background: rgba(248,250,252,.75); }
}

/* Light mode scrollbar */
@media (hover: hover) and (pointer: fine) {
  html.light .layout-main { scrollbar-color: rgba(30,41,59,.5) transparent; }
  html.light .layout-main::-webkit-scrollbar-thumb { background: rgba(30,41,59,.5); }
  html.light .layout-main::-webkit-scrollbar-thumb:hover { background: rgba(30,41,59,.8); }
}

/* container: fuld bredde, ingen max-width begrænsning */
.container {
  max-width: 100%;
  padding: 14px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* page-header og mqtt/alarm-bar fylder kun hvad de behøver */
.page-header  { flex-shrink: 0; }
.mqtt-bar     { flex-shrink: 0; }
.alarm-row    { flex-shrink: 0; }
.anlæg-tabs-nav { flex-shrink: 0; }
.alert        { flex-shrink: 0; }

/* tab-content fylder resten af højden */
.anlæg-tab-content.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* top-grid strækker sig til resten af højden */
.anlæg-top-grid {
  flex: 1;
  min-height: 0;
  align-items: stretch;
  margin-bottom: 0;
}

/* alle anlæg-kort bruger fuld højde af deres grid-celle */
.anlæg-card {
  height: 100%;
  box-sizing: border-box;
}

/* ── Ensartet gauge-system ───────────────────────
   Alle .gauge-svg i ALLE kort er samme størrelse.
   .gauge-wrap  = enkelt gauge (anlæg, manifold, mano)
   .pump-gauge-wrap = gauge med label over (pumper)
   ─────────────────────────────────────────────── */
.gauge-wrap,
.pump-gauge-wrap {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 0;
}
.gauge-svg {
  display: block;
  /* Skalerer med skærmbredden: min 130px, max 280px, ellers 22vw.
     min(100%, ...) sikrer den aldrig overskrider sin wrapper. */
  width: min(100%, clamp(130px, 22vw, 280px));
  height: auto;
}

/* Top-kort: gauge sidder fast under header — ikke flydende */
.anlæg-main-card .gauge-wrap,
.manifold-card   .gauge-wrap,
.reservoir-card  .gauge-wrap,
.anlæg-pump-card .pump-gauge-wrap {
  flex: 0 0 auto;
  justify-content: flex-start;
}

/* Pumpe-kort: gauge-række er fast højde (card-info-table fylder resten) */
.anlæg-pump-card .pump-gauges-row { flex: 0 0 auto; }

/* Pumpe drift badge (kører/stoppet) */
.pump-run-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
}
.pump-run-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.pump-run-stopped {
  background: rgba(148,163,184,.15);
  color: #94a3b8;
  border: 1px solid rgba(148,163,184,.3);
}
.pump-run-stopped .pump-run-dot { background: #94a3b8; }
.pump-run-running {
  background: rgba(74,222,128,.18);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,.4);
}
.pump-run-running .pump-run-dot {
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  animation: pumpRunPulse 1.2s ease-in-out infinite;
}
.pump-run-test {
  background: rgba(251,146,60,.18);
  color: #fb923c;
  border: 1px solid rgba(251,146,60,.4);
}
.pump-run-test .pump-run-dot {
  background: #fb923c;
  box-shadow: 0 0 6px #fb923c;
  animation: pumpRunPulse 1.2s ease-in-out infinite;
}
@keyframes pumpRunPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .5; transform: scale(1.35); }
}

/* Zones-card scrolles ved behov */
.zones-card  { flex-shrink: 0; }
.graf-slot   { flex-shrink: 0; }

/* Mobile: tillad scroll igen (for lille skærm) */
@media (max-width: 700px) {
  html, body { height: auto; overflow: auto; }
  .layout    { height: auto; overflow: visible; }
  .layout-main { height: auto; overflow: visible; }
  .container { min-height: auto; padding: 10px 12px; }
  .anlæg-tab-content.active { flex: none; }
  .anlæg-top-grid { flex: none; align-items: start; }
  .anlæg-card { height: auto; }
  .gauge-wrap, .pump-gauge-wrap { flex: none; }
}

/* ── Anlægstype badge ───────────────────────────── */
.anlaeg-type-badge {
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: auto;
  white-space: nowrap;
}
.anlaeg-type-våd       { background:rgba(56,189,248,.15);  color:#38bdf8; border:1px solid rgba(56,189,248,.3); }
.anlaeg-type-tør       { background:rgba(148,163,184,.15); color:#94a3b8; border:1px solid rgba(148,163,184,.3); }
.anlaeg-type-deluge    { background:rgba(34,211,238,.15);  color:#22d3ee; border:1px solid rgba(34,211,238,.3); }
.anlaeg-type-atrium    { background:rgba(251,191,36,.15);  color:#fbbf24; border:1px solid rgba(251,191,36,.3); }
.anlaeg-type-preaction { background:rgba(251,146,60,.15);  color:#fb923c; border:1px solid rgba(251,146,60,.3); }
.anlaeg-type-trapperum { background:rgba(74,222,128,.15);  color:#4ade80; border:1px solid rgba(74,222,128,.3); }

/* ── Tab navigation ─────────────────────────────── */
.anlæg-tabs-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.anlæg-tab-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tab-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: .82rem;
  text-decoration: none;
  transition: all .2s;
  flex-shrink: 0;
}
.tab-edit-btn:hover { border-color: var(--color-primary); color: #fff; background: var(--color-primary); }
.anlæg-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.anlæg-tab-btn:hover { border-color: var(--color-primary); color: #fff; }
.anlæg-tab-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.tab-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #6b7280; flex-shrink: 0;
}
.tab-dot.ok     { background: #4ade80; box-shadow: 0 0 6px #4ade8080; }
.tab-dot.alarm  { background: #ef4444; box-shadow: 0 0 6px #ef444480; animation: blink 1s infinite; }

/* ── Tab content ────────────────────────────────── */
.anlæg-tab-content { display: none; }

/* ── Top kort grid (12-kolonne for fleksible spans) ──────
   Default: alle direkte børn fylder 4 kolonner (= 1/3 af bredden, samme
   som tidligere 3-kolonne layout for top-3 kort: anlæg, manifold,
   vandforsyning). Pumpe-kortene har specifikke spans:
     - Jockey:  2/12 (smal — typisk lille pumpe med få datapunkter)
     - El:      5/12 (bred — gauges, ikon, HW-bar)
     - Diesel:  5/12 (bred — gauges, ikon, HW-bar)
   Total: 2+5+5 = 12 (passer i én række over breakpoint). */
.anlæg-top-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 8px;
  align-content: start;
  margin-bottom: 0;
}
/* Default: alle kort = 4 kolonner */
.anlæg-top-grid > * {
  grid-column: span 4;
  min-width: 0;
  min-height: 0;
}
/* Pumpe-kort spans (overskrives af pump-solo / media queries) */
.anlæg-top-grid > [id^="pump-jockey-"] { grid-column: span 2; }
.anlæg-top-grid > [id^="pump-el-"]     { grid-column: span 5; }
.anlæg-top-grid > [id^="pump-diesel-"] { grid-column: span 5; }
/* Dynamiske fill-spans når kun 2 pumpe-typer er aktive — udvider de
   resterende så pumpe-rækken altid fylder hele 12/12 kolonner uden
   tomme felter. Ved jockey + el/diesel får jockey lidt ekstra plads
   (span 3) så indhold ikke ser klemt ud. */
.anlæg-top-grid > .pumprow-2-jockey-el[id^="pump-jockey-"]     { grid-column: span 3; }
.anlæg-top-grid > .pumprow-2-jockey-el[id^="pump-el-"]         { grid-column: span 9; }
.anlæg-top-grid > .pumprow-2-jockey-diesel[id^="pump-jockey-"] { grid-column: span 3; }
.anlæg-top-grid > .pumprow-2-jockey-diesel[id^="pump-diesel-"] { grid-column: span 9; }
.anlæg-top-grid > .pumprow-2-el-diesel { grid-column: span 6; }
/* Sundheds-kolonne (rorsundhed-col-wrap--full) skal stadig være fuld bredde */
.anlæg-top-grid > .rorsundhed-col-wrap--full { grid-column: 1 / -1; }
/* Pumpe-kortene har overflow:visible så manometer/HW-tekst ikke skæres */
.anlæg-top-grid > .anlæg-pump-card {
  overflow: visible;
}
/* Pumpe-kortene tager fuld bredde op til 1100px (mobil + iPad portrait).
   På bredere iPads/notebooks/desktops er de side-om-side med ovennævnte spans. */
@media (max-width: 1100px) {
  .anlæg-top-grid > .anlæg-pump-card { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .anlæg-top-grid { grid-template-columns: 1fr; }
  .anlæg-top-grid > * { grid-column: 1 / -1; }
}

/* ── Pumpe individuelle kort ── */

/* Solo pumpe (kun én type): fylder hele rækken */
.pump-solo { grid-column: 1 / -1; }

.pump-col-model {
  font-size: .73rem;
  color: var(--color-text-muted);
}

/* Gauge-række inde i pumpekortet */
.pump-gauges-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.pump-gauges-dual {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  column-gap: 4px;
  align-items: center;
  width: 100%;
}
.pump-gauges-dual .pump-gauge-wrap:nth-of-type(1) { grid-column: 2; }
.pump-gauges-dual .pump-icon-wrap                { grid-column: 3; }
.pump-gauges-dual .pump-gauge-wrap:nth-of-type(2) { grid-column: 4; }
.pump-gauges-dual .pump-gauge-wrap {
  width: clamp(120px, 18vw, 220px);
  flex: unset;
}

/* Pumpe-kort: kompakt padding/header så gauge/icon/HW kan være større */
.anlæg-pump-card .gauge-svg {
  width: min(100%, clamp(120px, 18vw, 220px));
}
.anlæg-pump-card { padding: 8px 6px; gap: 4px; }
.anlæg-pump-card .anlæg-card-header { min-height: 26px; }
.anlæg-pump-card .pump-gauge-label { font-size: .78rem; }
.anlæg-pump-card .pump-alarm-txt { font-size: .62rem; padding: 1px 4px; }
.anlæg-pump-card .pump-icon-lbl  { font-size: .66rem; }
.anlæg-pump-card .card-info-table { font-size: .82rem; }

/* Pumpe-ikon (mellem tryk og HW) — skalerer op med gauges */
.pump-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: clamp(90px, 14vw, 160px);
}
.pump-icon-svg {
  width: 100%;
  height: auto;
  color: #475569;
  transition: color .4s ease;
}
.pump-icon-svg .pump-housing { stroke: currentColor; }
.pump-icon-svg .pump-impeller path { fill: currentColor; }
.pump-icon-svg .pump-impeller { transform-origin: center; transform-box: fill-box; }
/* States */
/* Pumpe-ikon farver: grøn = standby (klar), rød = kører (Tommy 2026-04-29) */
.pump-icon-wrap[data-state="off"]     .pump-icon-svg { color: #475569; }
.pump-icon-wrap[data-state="idle"]    .pump-icon-svg { color: #22c55e; filter: drop-shadow(0 0 4px rgba(34,197,94,.35)); }
.pump-icon-wrap[data-state="running"] .pump-icon-svg { color: #ef4444; filter: drop-shadow(0 0 6px rgba(239,68,68,.55)); }
.pump-icon-wrap[data-state="running"] .pump-impeller  { animation: pump-spin .9s linear infinite; }
@keyframes pump-spin { to { transform: rotate(360deg); } }
.pump-icon-lbl {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}
.pump-icon-wrap[data-state="idle"]    .pump-icon-lbl { color: #22c55e; }
.pump-icon-wrap[data-state="running"] .pump-icon-lbl { color: #ef4444; }

/* Glødende rød alarm over pumpen når den kører */
.pump-alarm-txt {
  display: none;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fecaca;
  text-align: center;
  line-height: 1.1;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(127, 29, 29, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.5);
  text-shadow: 0 0 6px #ef4444, 0 0 12px #dc2626;
  box-shadow: 0 0 8px rgba(239,68,68,0.6), inset 0 0 4px rgba(239,68,68,0.4);
  animation: pump-alarm-pulse 1.1s ease-in-out infinite;
}
.pump-icon-wrap[data-state="running"]:not([data-test="true"]) .pump-alarm-run { display: block; }
.pump-icon-wrap[data-state="running"][data-test="true"]      .pump-alarm-test { display: block; }
/* Test-variant: orange glød i stedet for rød */
.pump-icon-wrap[data-test="true"] .pump-alarm-txt {
  color: #fed7aa;
  background: rgba(120, 53, 15, 0.25);
  border-color: rgba(251, 146, 60, 0.55);
  text-shadow: 0 0 6px #fb923c, 0 0 12px #ea580c;
  box-shadow: 0 0 8px rgba(251,146,60,0.6), inset 0 0 4px rgba(251,146,60,0.4);
}
.pump-icon-wrap[data-state="running"][data-test="true"] .pump-icon-svg {
  color: #fb923c;
  filter: drop-shadow(0 0 6px rgba(251,146,60,.5));
}
.pump-icon-wrap[data-state="running"][data-test="true"] .pump-icon-lbl { color: #fb923c; }

/* ── Rørsundhed + Pumpe sundhed kolonne ── */
.rorsundhed-col-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: start;
}
/* Full-width modifier: når både el- og diesel-pumpe vises, fylder de
   hele pumpe-rækken — så sundheds-kortene rykker ned og fordeles
   horisontalt med PRÆCIS LIGE bredde. minmax(0,1fr) + min-width:0
   på child-kortene tvinger matematisk lige fordeling også når canvas
   eller header har implicit min-width. */
.rorsundhed-col-wrap--full {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  align-self: stretch;
  gap: 8px;
}
.rorsundhed-col-wrap--full > .rorsundhed-card {
  min-width: 0;
  width: 100%;
  /* Override 'height: fit-content !important' så grid kan stretche
     alle kort til samme højde (= højeste kort i rækken) */
  height: auto !important;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.rorsundhed-col-wrap--full > .rorsundhed-card .rorsundhed-body {
  flex: 1 1 auto;
}
.rorsundhed-col-wrap--full > .rorsundhed-card .rorsundhed-canvas {
  min-width: 0;
  width: 100%;
}
@media (max-width: 700px) {
  .rorsundhed-col-wrap--full { grid-template-columns: 1fr; }
}
.rorsundhed-card {
  height: fit-content !important;
  align-self: stretch;
  align-items: stretch;
  padding: 0;
  gap: 0;
  border-left: 3px solid #38bdf8;
}
.rorsundhed-card.pumpsundhed-card-el {
  border-left-color: #fb923c;
}
.rorsundhed-card.pumpsundhed-card-diesel {
  border-left-color: #a78bfa;
}
.pumpsundhed-canvas {
  height: 90px !important;
}
.rorsundhed-card .anlæg-card-header {
  padding: 7px 12px 6px;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid var(--color-border);
}
.rorsundhed-badge {
  margin-left: auto;
  font-size: 0.72rem;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text);
}
.rorsundhed-body {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 0 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rorsundhed-canvas {
  display: block;
  width: 100%;
  height: 58px;
}
.rorsundhed-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 10px;
  padding-top: 3px;
  border-top: 1px solid var(--color-border);
}
.rorsundhed-footer-txt {
  font-size: 0.72rem;
  color: var(--color-text);
}
.rorsundhed-footer-txt b {
  color: var(--color-text);
  font-weight: 600;
}

@keyframes pump-alarm-pulse {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 6px #ef4444, 0 0 14px #dc2626, 0 0 22px #991b1b;
    box-shadow: 0 0 12px rgba(239,68,68,0.75), inset 0 0 6px rgba(239,68,68,0.5);
  }
  50% {
    opacity: .75;
    text-shadow: 0 0 3px #ef4444, 0 0 6px #dc2626;
    box-shadow: 0 0 4px rgba(239,68,68,0.35), inset 0 0 2px rgba(239,68,68,0.25);
  }
}
.pump-gauge-label { font-size: .68rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.pump-startlimits {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2px;
}
.pump-limit-tag {
  font-size: .65rem;
  color: #a78bfa;
  font-weight: 600;
}
.pump-limit-stop   { color: #34d399; }
.pump-limit-diesel { color: #fb923c; }
/* Fase måling row: label over, items centeret */
.card-info-row.fase-row {
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.card-info-row.fase-row .card-info-key { width: auto; }
.card-info-row.fase-row .card-info-val {
  width: 100%;
  justify-content: center;
  gap: 10px;
}
.pump-phase-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-bg3);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 8px 14px 7px;
  min-width: 60px;
}
.pump-phase-lbl  { font-size: .65rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); }
.pump-phase-val  { font-size: 1.35rem; font-weight: 700; font-family: monospace; color: #e2e8f0; line-height: 1.1; }
.pump-phase-unit { font-size: .65rem; color: var(--color-text-muted); }
.pump-col-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
}
.pump-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
}
.pump-badge-el     { background: rgba(45,156,219,0.18); color: #2d9cdb; border: 1px solid rgba(45,156,219,0.35); }
.pump-badge-diesel { background: rgba(251,146,60,0.18); color: #fb923c; border: 1px solid rgba(251,146,60,0.35); }
/* ── DBI risikoklasse badge ── */
.dbi-badge {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.8rem;
  font-weight: 700; letter-spacing: 0.04em; vertical-align: middle;
}
.dbi-badge-lh  { background: rgba(74,222,128,.15); color: #4ade80; border: 1px solid rgba(74,222,128,.3); }
.dbi-badge-oh1 { background: rgba(250,204,21,.15); color: #facc15; border: 1px solid rgba(250,204,21,.3); }
.dbi-badge-oh2 { background: rgba(251,146,60,.15); color: #fb923c; border: 1px solid rgba(251,146,60,.3); }
.dbi-badge-oh3 { background: rgba(248,113,113,.15); color: #f87171; border: 1px solid rgba(248,113,113,.3); }
.dbi-badge-oh4 { background: rgba(196,30,58,.2);   color: #ff6b6b; border: 1px solid rgba(196,30,58,.4); }
.dbi-badge-hhp, .dbi-badge-hhs { background: rgba(139,92,246,.15); color: #a78bfa; border: 1px solid rgba(139,92,246,.3); }
/* ── Vandforsyning tabt banner puls ── */
@keyframes pulse-icon { from { opacity: 1; } to { opacity: .4; } }
/* ── HW vertikal søjle måler ── */
.hw-vbar-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
/* bar + labels side om side */
.hw-vbar-container {
  position: relative;
  display: flex; flex-direction: row; align-items: flex-end; gap: 0;
}
/* selve søjlen */
.hw-vbar-track {
  position: relative;
  display: flex; flex-direction: column;
  width: 26px; height: 220px;
  border-radius: 13px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.hw-vzone { width: 100%; flex-shrink: 0; }
/* Zone-højder sættes dynamisk af initHwVbarZones() via data-zone attribut */
.hw-vzone-ror { background: rgba(239,68,68,.22);  }
.hw-vzone-brd { background: rgba(251,146,60,.18); }
.hw-vzone-hov { background: rgba(250,204,21,.15); }
.hw-vzone-lak { background: rgba(59,130,246,.18); }
/* fill vokser fra bunden */
.hw-flow-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: #1e293b;
  transition: height .6s ease, background .4s ease;
  opacity: 0.78; border-radius: 0 0 11px 11px; pointer-events: none;
}
/* nål inde i søjlen */
.hw-flow-needle {
  position: absolute; left: 0; right: 0; height: 2px; bottom: 0%;
  background: rgba(255,255,255,.95); border-radius: 1px; opacity: 0;
  transition: bottom .6s ease, opacity .3s ease;
  box-shadow: 0 0 6px rgba(255,255,255,.8); pointer-events: none;
}
/* labels til venstre — absolut, så container-bredden = kun søjle (26px) */
.hw-vbar-labels {
  position: absolute;
  right: calc(100% + 3px); bottom: 0;
  width: 74px; height: 180px;
}
.hw-vbar-tick {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 3px;
  font-size: 0.58rem; color: #64748b; white-space: nowrap;
  transform: translateY(50%);
  line-height: 1;
}
/* streg til højre for tekst (peger mod søjlen) */
.hw-vbar-tick::after {
  content: ''; display: inline-block; flex-shrink: 0;
  width: 5px; height: 1px; background: #475569;
}
/* tal + enhed under søjlen */
.hw-vbar-num  { display: flex; align-items: baseline; gap: 2px; }
.hw-flow-num  { font-family: monospace; font-size: 1rem; font-weight: 700; color: #e2e8f0; }
.hw-vbar-unit { font-size: 0.62rem; color: #475569; }
/* kategori-badge */
.hw-flow-cat {
  display: inline-block; padding: 2px 6px; border-radius: 6px; font-size: 0.65rem;
  font-weight: 700; letter-spacing: 0.04em; text-align: center; white-space: nowrap;
}
.hw-cat-0 { background: rgba(71,85,105,.2);   color: #94a3b8; border: 1px solid rgba(71,85,105,.3); }
.hw-cat-1 { background: rgba(59,130,246,.15); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
.hw-cat-2 { background: rgba(250,204,21,.15); color: #facc15; border: 1px solid rgba(250,204,21,.3); }
.hw-cat-3 { background: rgba(251,146,60,.2);  color: #fb923c; border: 1px solid rgba(251,146,60,.4); }
.hw-cat-4 { background: rgba(239,68,68,.2);   color: #f87171; border: 1px solid rgba(239,68,68,.4); }
/* HW søjle — light mode overrides */
html.light .hw-vbar-track   { border-color: rgba(0,0,0,.15); }
html.light .hw-flow-fill    { background: #cbd5e1; opacity: .85; }
html.light .hw-flow-needle  { background: rgba(15,23,42,.85); box-shadow: 0 0 6px rgba(15,23,42,.35); }
html.light .hw-vbar-tick    { color: #475569; }
html.light .hw-vbar-tick::before { background: #94a3b8; }
html.light .hw-flow-num     { color: #0f172a; }
html.light .hw-vbar-unit    { color: #64748b; }
html.light .hw-cat-0 { background: rgba(71,85,105,.12);  color: #475569; border-color: rgba(71,85,105,.3); }
html.light .hw-cat-1 { background: rgba(59,130,246,.12); color: #1d4ed8; border-color: rgba(59,130,246,.35); }
html.light .hw-cat-2 { background: rgba(234,179,8,.15);  color: #854d0e; border-color: rgba(234,179,8,.4); }
html.light .hw-cat-3 { background: rgba(251,146,60,.15); color: #9a3412; border-color: rgba(251,146,60,.45); }
html.light .hw-cat-4 { background: rgba(239,68,68,.15);  color: #b91c1c; border-color: rgba(239,68,68,.45); }
/* ── Vandforbrug kort ──────────────────────────────────── */
.wc-card    { grid-column: 1 / -1; }
.wc-card    { margin: 0; }
.zones-card { margin: 0; }

.wc-stats-row {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.wc-stat-box {
  background: var(--color-bg3);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wc-stat-live { border-color: rgba(56,189,248,0.3); }
.wc-stat-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.wc-live-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wc-flow-bar-track {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.wc-flow-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  border-radius: 3px;
  width: 0%;
  transition: width .5s ease;
}
.wc-live-val {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.wc-flow-num {
  font-size: 1.6rem;
  font-weight: 700;
  font-family: monospace;
  color: #38bdf8;
  line-height: 1;
}
.wc-flow-unit {
  font-size: .75rem;
  color: var(--color-text-muted);
}
.wc-live-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.wc-session-badge {
  font-size: .72rem;
  color: #4ade80;
  font-weight: 600;
  animation: wcPulse 1.5s ease-in-out infinite;
}
@keyframes wcPulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.wc-stat-val {
  font-size: 1.35rem;
  font-weight: 700;
  font-family: monospace;
  color: var(--color-text);
  line-height: 1.1;
}
.wc-stat-cost {
  font-size: .9rem;
  color: #4ade80;
  font-weight: 600;
}
.wc-stat-sub {
  font-size: .72rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Sessions liste */
.wc-sessions-wrap {
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}
.wc-sessions-hdr {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.wc-session-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: .82rem;
  flex-wrap: wrap;
}
.wc-session-row:last-child { border-bottom: none; }
.wc-sess-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #38bdf8; flex-shrink: 0;
}
.wc-sess-time  { color: var(--color-text-muted); min-width: 90px; }
.wc-sess-liters{ font-weight: 700; color: var(--color-text); min-width: 60px; }
.wc-sess-dur   { color: var(--color-text-muted); min-width: 90px; }
.wc-sess-cost  { color: #4ade80; font-weight: 600; margin-left: auto; }
.wc-sessions-empty {
  color: var(--color-text-muted);
  font-size: .82rem;
  padding: 8px 0;
  text-align: center;
}
.wc-config-btn { font-size: .75rem; }

/* Prisinfo-linje */
/* Fritagelsesbanner */
.wc-exempt-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-radius: 8px; margin: 8px 0 2px;
  background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25);
  font-size: .82rem; color: #fbbf24; line-height: 1.5;
}
.wc-exempt-banner strong { color: #fde68a; }
.wc-exempt-icon { font-size: 1.3rem; flex-shrink: 0; }
.wc-exempt-note { color: rgba(251,191,36,.6); font-size: .75rem; }

.wc-price-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(56,189,248,.05); border: 1px solid rgba(56,189,248,.12);
  font-size: .78rem; color: var(--color-text-muted); width: 100%;
}
.wc-price-item strong { color: var(--color-text); }
.wc-price-total { color: #7dd3fc; }
.wc-price-total strong { color: #38bdf8; font-size: .95rem; }

/* Kildeopdeling */
.wc-src-row {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: .8rem; flex-wrap: wrap;
}
.wc-src-row:last-child { border-bottom: none; }
.wc-src-badge {
  font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  white-space: nowrap; min-width: 100px; text-align: center;
}
.wcs-sprinkler  { background: rgba(220,38,38,.2);  color: #fca5a5; border: 1px solid rgba(220,38,38,.3); }
.wcs-test       { background: rgba(167,139,250,.2); color: #c4b5fd; border: 1px solid rgba(167,139,250,.3); }
.wcs-rørbrud    { background: rgba(251,146,60,.2);  color: #fdba74; border: 1px solid rgba(251,146,60,.3); }
.wcs-paafyld    { background: rgba(56,189,248,.2);  color: #7dd3fc; border: 1px solid rgba(56,189,248,.3); }
.wcs-jockey     { background: rgba(250,204,21,.15); color: #fde047; border: 1px solid rgba(250,204,21,.25); }
.wcs-reservoir  { background: rgba(52,211,153,.15); color: #6ee7b7; border: 1px solid rgba(52,211,153,.25); }
.wcs-manuel     { background: rgba(148,163,184,.15);color: #94a3b8; border: 1px solid rgba(148,163,184,.25); }
.wcs-ukendt     { background: rgba(100,116,139,.12);color: #64748b; border: 1px solid rgba(100,116,139,.2); }

.wc-src-bar-wrap {
  flex: 1; min-width: 60px; height: 6px; background: rgba(255,255,255,.07);
  border-radius: 3px; overflow: hidden;
}
.wc-src-bar {
  height: 100%; background: linear-gradient(90deg, #38bdf8, #818cf8);
  border-radius: 3px; transition: width .4s ease;
}
.wc-src-vol  { font-weight: 600; color: var(--color-text); min-width: 70px; text-align: right; }
.wc-src-cost { color: #4ade80; font-weight: 600; min-width: 70px; text-align: right; }

@media (max-width: 700px) {
  .wc-stats-row { grid-template-columns: 1fr 1fr; }
  .wc-stat-live { grid-column: 1 / -1; }
}

/* ── Anlæg kort base ─────────────────────────────── */
.anlæg-card {
  background: var(--color-bg2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: border-color .2s;
}
.anlæg-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  width: 100%;
  min-height: 36px;   /* fast højde → manometer starter samme sted i alle kort */
}
.anlæg-card-icon { font-size: 1.2rem; }
.anlæg-card-title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Gauge ───────────────────────────────────────── */
.gauge-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.gauge-status-lbl {
  font-size: .85rem;
  font-weight: 600;
  color: #6b7280;
}
.gauge-status-lbl.ok    { color: #4ade80; }
.gauge-status-lbl.alarm { color: #ef4444; }
.gauge-limits {
  display: flex;
  gap: 14px;
  font-size: .75rem;
  padding: 7px 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.12);
  border-radius: 0 0 6px 6px;
  margin-top: 2px;
}
.limit-low    { color: #f87171; font-weight: 600; } /* Kritisk — rød */
.limit-high   { color: #fb923c; font-weight: 600; } /* Notifikation — orange */
.limit-normal { color: #94a3b8; font-weight: 500; } /* Normal — neutral */

/* ── Card info table (under gauge) ──────────────────── */
.card-info-table {
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.card-info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .8rem;
}
.card-info-row:last-child { border-bottom: none; }
html.light .card-info-table { border-top-color: rgba(0,0,0,.1); }
html.light .card-info-row   { border-bottom-color: rgba(0,0,0,.08); }
.card-info-key {
  flex-shrink: 0;
  width: 112px;
  color: #64748b;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-top: 2px;
}
.card-info-val {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #e2e8f0;
  font-size: .85rem;
}
.card-info-alarms {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.card-info-alarms span { font-size: .8rem; }

/* ── Side-by-side buttons row ───────────────────────── */
.fill-btns-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.fill-btns-row .fill-btn { flex: 1; }

.graf-btn { margin-top: 4px; }

/* ── Manifold ekstra sensorer ──────────────────────── */
.manifold-sensor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: .82rem;
}
.manifold-temp-row {
  border-top: 1px solid rgba(255,255,255,.07);
}
.manifold-sensor-icon { font-size: 1rem; flex-shrink: 0; }
.manifold-sensor-label { color: #6b7280; flex: 1; }
.manifold-sensor-value {
  font-weight: 700;
  font-size: .95rem;
  font-family: monospace;
  color: #e2e8f0;
}
.manifold-sensor-unit { color: #6b7280; font-size: .75rem; }

/* Vand på gulv statusfarver */
.manifold-floor-ok   { color: #4ade80; }
.manifold-floor-warn { color: #ef4444; }

/* Brint advarselsfarver */
.manifold-brint-ok   { color: #4ade80; }
.manifold-brint-warn { color: #fb923c; }
.manifold-brint-alarm{ color: #ef4444; }
.brint-danger-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.4);
  border-radius: 8px;
  color: #ef4444;
  font-size: .82rem;
  font-weight: 700;
  padding: 8px 12px;
  margin: 6px 0 2px;
  animation: brint-banner-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes brint-banner-pulse {
  from { background: rgba(239,68,68,.12); }
  to   { background: rgba(239,68,68,.28); }
}

/* Anlæg kort: alarm border */
.anlæg-main-card.alarm-active { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15); }

/* ── Placeholder (manifold / pumpe) kort ─────────── */
.not-active-card { opacity: .6; }
.not-active-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
  padding: 16px 0;
}
.not-active-text {
  font-size: .82rem;
  color: var(--color-text-muted);
  font-style: italic;
}
.not-active-sub {
  font-size: .78rem;
  color: var(--color-text-muted);
}

/* ── Anlæg tøm/påfyld knapper ───────────────────── */
.anlæg-actions {
  display: flex; gap: 8px; width: 100%; margin-top: 4px;
}
.btn-anlæg-action {
  flex: 1; padding: 9px 6px; font-size: .82rem; font-weight: 700;
  border-radius: 8px; border: none; cursor: pointer; transition: opacity .2s, transform .1s;
}
.btn-anlæg-action:active { transform: scale(.97); }
.btn.btn-warning  { background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #1a1a1a; }
.btn.btn-warning:hover { opacity: .85; }
.btn.btn-success  { background: linear-gradient(135deg,#16a34a,#4ade80); color: #fff; }
.btn.btn-success:hover { opacity: .85; }

/* ── Anlæg modal ─────────────────────────────────── */
#anlæg-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  z-index: 9000; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
#anlæg-modal-box {
  background: var(--color-bg2); border: 1px solid var(--color-border);
  border-radius: 16px; padding: 32px 28px; max-width: 400px; width: 90%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.anlæg-modal-icon  { font-size: 2.5rem; }
.anlæg-modal-title { font-size: 1.1rem; font-weight: 700; color: #fff; }
.anlæg-modal-body  { font-size: .88rem; color: var(--color-text-muted); line-height: 1.55; }
.anlæg-modal-btns  { display: flex; gap: 10px; margin-top: 8px; width: 100%; }
.anlæg-modal-btns .btn { flex: 1; }

/* ── Reservoir: kapacitet ───────────────────────── */
.res-capacity-row {
  display: flex; align-items: baseline; gap: 6px;
  font-size: .78rem; color: var(--color-text-muted);
  width: 100%; padding: 4px 2px;
  border-top: 1px solid var(--color-border);
}
.res-capacity-label { flex: 1; }
.res-capacity-value { font-weight: 700; color: #e5e7eb; font-family: monospace; }
.res-capacity-max   { color: #6b7280; font-size: .72rem; }

/* ── Vandforsyningstype badge ───────────────────── */
.ws-type-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.ws-type-badge {
  display: inline-block; padding: 4px 12px;
  border-radius: 20px; font-size: .78rem; font-weight: 700;
  letter-spacing: .03em;
}
.ws-badge-kommunalt {
  background: rgba(56,189,248,0.12); color: #38bdf8;
  border: 1px solid rgba(56,189,248,0.3);
}
.ws-badge-reservoir {
  background: rgba(74,222,128,0.12); color: #4ade80;
  border: 1px solid rgba(74,222,128,0.3);
}
.ws-reservoir-size {
  font-size: .78rem; color: var(--color-text-muted);
  font-family: monospace; font-weight: 600;
}
.ws-pressure-inline {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px; font-size: .78rem;
}
.ws-pressure-inline-label { color: var(--color-text-muted); }
.ws-pressure-inline-val   { font-family: monospace; font-weight: 700; color: #e2e8f0; font-size: .85rem; }
.ws-pressure-inline-unit  { color: var(--color-text-muted); }

/* ── Vand tryk på vandforbindelsen ──────────────── */
.wconn-pressure-row {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.wconn-pressure-label {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--color-text-muted); margin-bottom: 6px;
}
.wconn-pressure-value-wrap {
  display: flex; align-items: center; gap: 8px;
}
.wconn-pressure-val {
  font-size: 1.5rem; font-weight: 700; font-family: monospace;
  color: #e2e8f0; line-height: 1;
}
.wconn-pressure-unit {
  font-size: .78rem; color: var(--color-text-muted);
}

/* ── T-rør + manometer ──────────────────────────── */
.tpipe-wrap {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0 4px;
}
.tpipe-svg { overflow: visible; }
.tpipe-status-row {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px;
}
.tpipe-val-row {
  display: flex; align-items: baseline; gap: 6px; margin-top: 4px;
}
.tpipe-val {
  font-size: 1.4rem; font-weight: 700; font-family: monospace; color: #e2e8f0;
}
.tpipe-unit { font-size: .75rem; color: var(--color-text-muted); }

/* ── Reservoir kort ─────────────────────────────── */
.reservoir-wrap { padding: 6px 0; display: flex; justify-content: center; }
.reservoir-svg  { overflow: visible; width: 100%; max-width: 215px; height: auto; }
.fill-btn-wrap  { width: 100%; margin-top: 10px; }
.fill-btn {
  width: 100%; padding: 11px 12px; border-radius: 6px; cursor: pointer;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  transition: background .15s, color .15s, transform .1s;
  border: 1px solid transparent;
}
.fill-btn:active { transform: scale(.97); }
.fill-btn-warning {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.35);
  color: #f87171;
}
.fill-btn-warning:hover { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.55); }
.fill-btn-success {
  background: rgba(14,165,233,.12);
  border-color: rgba(14,165,233,.4);
  color: #38bdf8;
}
.fill-btn-success:hover { background: rgba(14,165,233,.2); border-color: rgba(14,165,233,.6); }
.mobile-watch-btn {
  background: rgba(100,116,139,.2);
  border: 1.5px solid #475569;
  color: #94a3b8;
  font-size: .85rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .25s;
}
.mobile-watch-btn:hover  { border-color: #64748b; color: #e2e8f0; opacity: 1; }
.mobile-watch-btn.active {
  background: linear-gradient(135deg, rgba(74,222,128,.15), rgba(16,185,129,.1));
  border-color: #4ade80;
  color: #4ade80;
  box-shadow: 0 0 12px rgba(74,222,128,.2);
}
.fill-status {
  display: flex; align-items: center; gap: 8px;
  background: rgba(56,189,248,.12); border: 1px solid #38bdf8;
  border-radius: 8px; padding: 8px 12px;
}
.fill-active-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #38bdf8; flex-shrink: 0;
  animation: blink 1s infinite;
}
.fill-stop-btn {
  margin-left: auto; padding: 4px 10px; border-radius: 6px; border: 1px solid #ef4444;
  background: transparent; color: #ef4444; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.fill-stop-btn:hover { background: rgba(239,68,68,.15); }


/* ── Hovedventiler kort (5 grupper, fuld bredde) ──────── */
.hovedventil-card {
  grid-column: 1 / -1;
  padding: 10px 14px 12px;
}
.hovedventil-card .anlæg-card-header {
  margin-bottom: 8px;
}
.hovedventil-legend {
  display: flex;
  gap: 14px;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.hv-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hv-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.hv-legend-dot--open    { background: #22c55e; box-shadow: 0 0 4px rgba(34,197,94,.6); }
.hv-legend-dot--closed  { background: #ef4444; box-shadow: 0 0 4px rgba(239,68,68,.6); }
.hv-legend-dot--offline { background: #475569; }

.hovedventil-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (max-width: 900px) {
  .hovedventil-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .hovedventil-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Fieldset-stil: subtle "indhak"-baggrund (lidt mørkere/lysere end kortet)
   + tynd ramme med rounded corners. Fungerer i både dark og light mode. */
.hv-group {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 10px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  color: var(--color-text);
}
.hv-group-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 10px;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
}
.hv-group-title-text {
  white-space: nowrap;
}
.hv-group-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  flex: 1;
  align-items: stretch;
}
.hv-empty {
  font-size: 0.72rem;
  color: var(--color-text-faint);
  font-style: italic;
  padding: 12px 0;
}

/* Liste-række: ikon + navn på samme linje */
.hv-valve {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 5px;
  transition: background 0.15s;
}
.hv-valve:hover { background: rgba(148,163,184,0.08); }
/* Ventil-billede (PNG): src skiftes via JS når status ændres */
.hv-valve-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.hv-valve-img[data-state="offline"] {
  filter: grayscale(1) brightness(0.7);
  opacity: 0.65;
}

.hv-valve-label {
  font-size: 0.78rem;
  color: var(--color-text);
  font-weight: 500;
  text-align: left;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Lille undertekst pr. ventil — viser hvad normal_state er */
.hv-valve-normal {
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--color-text-faint);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  font-style: italic;
}
/* Status-tekst pr. ventil — grøn (åben) / rød (lukket) med glow */
.hv-valve-status {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  padding: 0 4px;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.hv-valve-status[data-state="open"] {
  color: #22c55e;
  text-shadow: 0 0 6px rgba(34,197,94,.6), 0 0 12px rgba(34,197,94,.3);
}
.hv-valve-status[data-state="closed"] {
  color: #ef4444;
  text-shadow: 0 0 6px rgba(239,68,68,.6), 0 0 12px rgba(239,68,68,.35);
}
.hv-valve-status[data-state="offline"] {
  color: var(--color-text-faint);
  text-shadow: none;
}

/* ── Zoner kort ─────────────────────────────────── */
.zones-card {
  grid-column: 1 / -1;   /* fuld bredde */
  align-items: stretch;
}
.zones-body { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.zones-etage-group { display: flex; flex-direction: column; gap: 4px; }
.zones-etage-label {
  font-size: .72rem; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 6px 0 4px 0; border-bottom: 1px solid var(--color-border);
  margin-bottom: 2px;
}
.zone-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid transparent;
  transition: background .2s, border-color .2s;
}
.zone-row-active {
  background: rgba(74,222,128,.07);
  border-color: rgba(74,222,128,.25);
}
.zone-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  transition: background .3s, box-shadow .3s;
}
.zone-dot.offline { background: #6b7280; }
.zone-dot.idle    { background: #374151; border: 2px solid #6b7280; }
.zone-dot.active  { background: #4ade80; box-shadow: 0 0 7px #4ade8080; animation: pulse-green 1.5s infinite; }
@keyframes pulse-green { 0%,100%{box-shadow:0 0 5px #4ade8080} 50%{box-shadow:0 0 12px #4ade80cc} }
.zone-info { flex: 1; min-width: 0; }
.zone-name { font-size: .88rem; font-weight: 600; color: #e5e7eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-num  { font-size: .72rem; color: var(--color-text-muted); }
.zone-flow-wrap { display: flex; align-items: baseline; gap: 3px; min-width: 70px; justify-content: flex-end; }
.zone-flow      { font-size: 1.1rem; font-weight: 700; font-family: monospace; color: #fff; }
.zone-flow-unit { font-size: .72rem; color: var(--color-text-muted); }
.zone-badge {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 20px; min-width: 58px; text-align: center;
}
.zone-badge.offline { background: rgba(107,114,128,.15); color: #6b7280; border: 1px solid #374151; }
.zone-badge.idle    { background: rgba(107,114,128,.10); color: #9ca3af; border: 1px solid #374151; }
.zone-badge.active  { background: rgba(74,222,128,.15); color: #4ade80; border: 1px solid rgba(74,222,128,.4); }
.zone-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Test panel */
.zones-test-panel {
  width: 100%; margin-top: 8px;
  background: rgba(255,255,255,.03); border: 1px solid var(--color-border);
  border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.zones-test-title { font-size: .8rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.zones-test-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zones-test-select {
  flex: 1; min-width: 160px; padding: 6px 10px; border-radius: 6px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: #fff; font-size: .85rem;
}
.zones-test-status {
  font-size: .82rem; color: #4ade80;
  display: flex; align-items: center; gap: 8px;
}
.zone-test-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; animation: blink 1s infinite; flex-shrink: 0;
}


/* ── Graf ───────────────────────────────────────── */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes loaderSlide { 0%{transform:translateX(-100%)} 100%{transform:translateX(250%)} }

/* Graf slot */
.graf-slot {
  grid-column: 1 / -1;
  overflow: hidden;
  max-height: 0;
  margin: -8px 0;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              margin     0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.graf-slot.open { max-height: 600px; margin: 0; }

/* Graf card */
.graf-card {
  background: linear-gradient(135deg, rgba(15,23,42,.98) 0%, rgba(15,23,42,.95) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px 20px 12px;
  margin-bottom: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}

/* Graf header */
.graf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.graf-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.graf-title {
  font-size: .9rem;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
}
.graf-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.graf-legend {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
/* Separator + label over målepunkt-togglerne */
.mp-section-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-bottom: 1px;
}
.mp-section-label {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  white-space: nowrap;
}
.mp-section-rule {
  position: relative;
  width: 100%;
  height: 5px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.mp-section-rule::before,
.mp-section-rule::after {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 5px;
  background: rgba(255,255,255,.18);
}
.mp-section-rule::before { left: 0; }
.mp-section-rule::after  { right: 0; }
html.light .mp-section-label { color: rgba(0,0,0,.38); }
html.light .mp-section-rule  { border-top-color: rgba(0,0,0,.15); }
html.light .mp-section-rule::before,
html.light .mp-section-rule::after { background: rgba(0,0,0,.15); }
/* Små toggle-knapper per serie */
.graf-toggle {
  --tc: #4ade80;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 5px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  cursor: pointer;
  transition: opacity .2s, border-color .2s, background .2s;
}
.graf-toggle:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.09); }
.graf-toggle-track {
  width: 24px; height: 13px;
  border-radius: 7px;
  background: var(--tc);
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.graf-toggle-thumb {
  position: absolute;
  top: 2px; left: 12px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}
.graf-toggle-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #cbd5e1;
}
/* Off-tilstand */
.graf-toggle.graf-toggle-off {
  opacity: .45;
  border-color: rgba(255,255,255,.07);
  background: transparent;
}
.graf-toggle.graf-toggle-off .graf-toggle-track {
  background: rgba(255,255,255,.15);
}
.graf-toggle.graf-toggle-off .graf-toggle-thumb {
  left: 2px;
}
html.light .graf-toggle { border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.04); }
html.light .graf-toggle:hover { background: rgba(0,0,0,.08); }
html.light .graf-toggle-label { color: #475569; }
html.light .graf-toggle.graf-toggle-off { border-color: rgba(0,0,0,.08); }

/* Time range pills */
.graf-range-pills {
  display: flex;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.range-btn {
  background: none;
  border: none;
  color: #64748b;
  font-size: .85rem;
  font-weight: 600;
  padding: 7px 14px;
  min-width: 44px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.range-btn:hover { color: #cbd5e1; background: rgba(255,255,255,.06); }
.range-btn.active {
  background: rgba(56,189,248,.2);
  color: #38bdf8;
  box-shadow: 0 0 0 1px rgba(56,189,248,.3);
}

/* Live-indikator (altid aktiv) */
.live-indicator {
  display: flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  color: #4ade80; padding: 4px 8px; user-select: none;
  transition: color .4s;
}
.live-indicator.offline { color: #f87171; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  display: inline-block; flex-shrink: 0;
  animation: live-pulse-green 1.4s infinite;
  transition: background .4s;
}
.live-indicator.offline .live-dot {
  background: #f87171;
  animation: live-pulse-red 1.4s infinite;
}
/* Når data hentes: dot blinker hurtigt for at signalere aktivitet */
.live-indicator.loading .live-dot {
  background: #38bdf8;
  animation: live-pulse-loading 0.5s ease-in-out infinite alternate;
}
@keyframes live-pulse-loading {
  from { opacity: 1;   box-shadow: 0 0 0 0 rgba(56,189,248,.7); }
  to   { opacity: 0.3; box-shadow: 0 0 0 8px rgba(56,189,248,0); }
}
@keyframes live-pulse-green {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
  70%  { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
@keyframes live-pulse-red {
  0%   { box-shadow: 0 0 0 0 rgba(248,113,113,.6); }
  70%  { box-shadow: 0 0 0 6px rgba(248,113,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
}

/* Icon buttons */
.graf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  color: #64748b;
  cursor: pointer;
  transition: all .15s;
}
.graf-icon-btn:hover { color: #cbd5e1; background: rgba(255,255,255,.1); }
.graf-close-btn:hover { color: #f87171; background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.3); }
.graf-events-btn.active { color: #3b82f6; background: rgba(59,130,246,.15); border-color: rgba(59,130,246,.35); }
#yAutoBtn.active { color: #4ade80; background: rgba(74,222,128,.15); border-color: rgba(74,222,128,.35); }
.graf-events-btn.active:hover { color: #60a5fa; background: rgba(59,130,246,.22); }

/* Loader */
.graf-loader-wrap {
  position: absolute;
  top: 8px; left: 12px; right: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}
/* Spinner-hjul placeret i toolbar ved siden af LIVE-indikatoren */
.graf-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(56,189,248,.20);
  border-top-color: #38bdf8;
  animation: grafSpin 0.7s linear infinite;
  vertical-align: middle;
  margin: 0 4px;
  flex-shrink: 0;
}
@keyframes grafSpin { to { transform: rotate(360deg); } }
.graf-loader-bar {
  height: 2px;
  background: rgba(56,189,248,.15);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.graf-loader-bar::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #38bdf8, transparent);
  animation: loaderSlide 1s ease-in-out infinite;
}
.graf-loader-text {
  font-size: .78rem;
  color: #38bdf8;
  opacity: .8;
  animation: blink 1.4s ease-in-out infinite;
}

/* Canvas */
.graf-canvas-wrap {
  position: relative;
  height: 280px;
}
/* ApexCharts interne elementer */
#grafCanvas .apexcharts-canvas { background: transparent !important; }
#grafCanvas .apexcharts-tooltip { font-size: 12px !important; }
#grafCanvas .apexcharts-yaxis-label,
#grafCanvas .apexcharts-xaxis-label { fill: #64748b !important; }
#grafCanvas .apexcharts-gridline { stroke: rgba(255,255,255,.05) !important; }
html.light #grafCanvas .apexcharts-gridline { stroke: rgba(0,0,0,.07) !important; }
html.light #grafCanvas .apexcharts-yaxis-label,
html.light #grafCanvas .apexcharts-xaxis-label { fill: #475569 !important; }
.graf-event-label { cursor: pointer; }
.graf-event-label:hover { opacity: .82; }
.graf-signature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
  padding: 8px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: .75rem;
  color: #94a3b8;
}
.graf-sig-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.graf-sig-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.graf-sig-line {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
}
.graf-sig-sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.12);
  margin: 0 4px;
}
.graf-hint {
  margin-top: 8px;
  font-size: .7rem;
  color: #334155;
  text-align: right;
}

/* ── Mobile responsive ───────────────────────────── */
@media (max-width: 700px) {

  /* ── Generelt: alle anlæg-kort ────────────────── */
  .anlæg-top-grid { grid-template-columns: 1fr; }
  .anlæg-card { padding: 14px 12px; gap: 8px; }
  .anlæg-card-header { gap: 6px; }

  /* ── Anlæg tryk gauge (hoved-kort) ────────────── */
  /* gauge-størrelse styres af .gauge-svg max-width i top-media-query */

  /* ── Manifold kort ─────────────────────────────── */
  .manifold-grid { flex-direction: column; gap: 8px; }

  /* ── Vandforsynings-kort ───────────────────────── */
  .reservoir-card { grid-column: 1 / -1; }
  .ws-type-row { justify-content: center; flex-wrap: wrap; }
  .ws-type-badge { font-size: .72rem; text-align: center; }
  .ws-pressure-inline { justify-content: center; }
  .tpipe-wrap { width: 100%; }
  .tpipe-svg  { width: 100%; max-width: 180px; }
  .reservoir-wrap { padding: 2px 0; }
  .reservoir-svg  { max-width: 160px; }

  /* ── Pumpe-kort (individuelle) ─────────────────── */
  .anlæg-pump-card { grid-column: 1 / -1; }
  .pump-gauges-row { flex-wrap: wrap; justify-content: center; }
  .pump-phase-row { justify-content: center; flex-wrap: wrap; }

  /* ── Vandforbrug kort ──────────────────────────── */
  .wc-card { grid-column: 1 / -1; }
  .wc-stats-row { grid-template-columns: 1fr; gap: 8px; }
  .wc-stat-box { padding: 10px 12px; }
  .wc-chart-wrap { overflow-x: auto; }

  /* ── Zoner kort ────────────────────────────────── */
  .zones-card { grid-column: 1 / -1; }
  .zone-row { padding: 8px 6px; gap: 8px; }
  .zone-name { font-size: .82rem; }
  .zone-flow-wrap { min-width: 52px; }
  .zone-flow { font-size: .95rem; }
  .zone-badge { min-width: 46px; font-size: .65rem; padding: 2px 6px; }

  /* ── Pumper på central_form ────────────────────── */
  .pump-row { flex-direction: column; gap: 12px; }
  .pump-block { max-width: 100%; }
  .pump-pressure-row { margin-top: 8px; }

  /* ── Fill/status rækker ────────────────────────── */
  .fill-btn-wrap { width: 100%; }
  .gauge-status-row { justify-content: center; }
  .tpipe-status-row { justify-content: center; }
}

/* ── Redigér-tilstand ────────────────────────────────────── */
.admin-action { display: none; }
body.edit-mode .admin-action { display: inline-flex; }
body.edit-mode .admin-action[style*="display:inline"] { display: inline !important; }

.btn-edit-mode {
  background: transparent;
  border: 1.5px solid var(--color-border-light);
  color: var(--color-text-muted);
  font-size: .82rem;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-edit-mode:hover { border-color: #fb923c; color: #fb923c; }
body.edit-mode .btn-edit-mode {
  background: rgba(251,146,60,.12);
  border-color: #fb923c;
  color: #fb923c;
}
/* ── Målepunkt: delta-chip inde i toggle ──────────────────────── */
.mp-delta {
  font-size: .68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 1px 5px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  margin-left: 2px;
  letter-spacing: .01em;
}
.mp-delta-ok    { color: #4ade80; }
.mp-delta-warn  { color: #fb923c; }
.mp-delta-alarm { color: #ef4444; background: rgba(239,68,68,.12); }


/* ── Brint alert overlay ────────────────────────────────────────────────── */
#brint-alert-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  animation: brint-fade-in .3s ease;
}
@keyframes brint-fade-in { from { opacity:0; } to { opacity:1; } }
#brint-alert-box {
  background: #1a0000;
  border: 2px solid #ef4444;
  border-radius: 16px;
  padding: 36px 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 40px rgba(239,68,68,.4);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
#brint-alert-icon { font-size: 3.5rem; animation: brint-pulse 1s ease infinite alternate; }
@keyframes brint-pulse { from { transform: scale(1); } to { transform: scale(1.15); } }
#brint-alert-title {
  font-size: 1.25rem; font-weight: 900; color: #ef4444;
  letter-spacing: 1px; text-transform: uppercase;
}
#brint-alert-body {
  font-size: .92rem; color: #fca5a5; line-height: 1.7;
}
#brint-alert-btn {
  margin-top: 8px;
  background: #ef4444; color: #fff; border: none;
  padding: 12px 28px; border-radius: 8px;
  font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: background .2s;
}
#brint-alert-btn:hover { background: #dc2626; }


/* ── Kompakt login-kasse: tightner vertikale mellemrum uden at skrumpe elementer ── */
.login-box { padding-top: 14px; padding-bottom: 14px; }
.login-logo { margin-bottom: 10px; }
.input-group { margin-bottom: 10px; }
.remember-row { margin-bottom: 12px; }
.forgot-link { margin-top: 10px; }
.login-footer { margin-top: 12px; }
.powered-by { margin-top: 10px !important; }
.pb-sep { margin-bottom: 6px !important; }
.pb-label { margin-bottom: 4px !important; }