/* Oberflaeche im Corporate Design der WK Vermoegensverwaltungs GmbH & Co. KG.
   Navy traegt Autoritaet, Gold ist ausschliesslich Akzent (Linie, Fokus,
   aktive Navigation) und nie Flaeche.

   Ausnahme zum hellen Designsystem: alles, was ein Livebild oder ein Standbild
   traegt, bleibt schwarz. Ein Kamerabild auf hellem Grund ist tagsueber
   schlechter ablesbar und blendet nachts. Die Ausnahme gilt nur fuer die
   Bildflaeche selbst und deren aufliegende Beschriftungen. */
:root {
  --wk-navy: #1F3766;
  --wk-navy-hover: #182B51;
  --wk-navy-active: #13213E;
  --wk-navy-90: #E9EDF4;
  --wk-navy-70: #B9C3D6;
  --wk-navy-40: #6C7FA3;

  --wk-gold: #B8922F;
  --wk-gold-hover: #9C7B26;
  --wk-gold-90: #F7F1E1;

  --wk-ink: #2B2B29;
  --wk-ink-muted: #5F6066;
  --wk-gray: #8A8A8A;
  --wk-row: #EEF1F6;
  --wk-line: #D8DDE6;
  --wk-line-soft: #E8EBF0;
  --wk-surface: #FFFFFF;
  --wk-canvas: #F6F7FA;

  --wk-success: #2E6B4F;
  --wk-success-bg: #E7F1EC;
  --wk-danger: #A32B2B;
  --wk-danger-bg: #F6E9E9;

  /* Carlito und Gelasio sind metrisch identisch zu Calibri und Georgia.
     Es wird keine Webschrift geladen: die Box haengt hinter einem Tunnel und
     soll keinen externen Request brauchen, Windows-Clients haben Calibri und
     Georgia lokal. */
  --wk-font-ui: "Carlito", "Calibri", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wk-font-display: "Gelasio", "Georgia", "Times New Roman", serif;

  --wk-radius-sm: 2px;
  --wk-radius-md: 4px;
  --wk-radius-lg: 6px;
  --wk-shadow-sm: 0 1px 2px rgba(31, 55, 102, .06);
  --wk-shadow-md: 0 2px 8px rgba(31, 55, 102, .08);
  --wk-shadow-lg: 0 8px 28px rgba(31, 55, 102, .12);
  --wk-focus: 0 0 0 3px rgba(184, 146, 47, .45);
  --wk-ease: cubic-bezier(.2, 0, .2, 1);

  /* Bildflaechen */
  --video-bg: #000;
  --video-chrome: rgba(0, 0, 0, .6);
  --video-backdrop: rgba(0, 0, 0, .85);
  --video-on-dark: #FFFFFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--wk-font-ui);
  font-size: 14px;
  line-height: 1.5;
  background: var(--wk-canvas);
  color: var(--wk-ink);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

:focus-visible {
  outline: none;
  box-shadow: var(--wk-focus);
  border-radius: var(--wk-radius-md);
}

/* --- Anmeldung, Passwortwechsel ------------------------------------------ */

body.login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1.5rem;
}
body.login main {
  background: var(--wk-surface);
  border: 1px solid var(--wk-line);
  border-radius: var(--wk-radius-lg);
  box-shadow: var(--wk-shadow-sm);
  min-width: 360px;
  max-width: 420px;
  overflow: hidden;
}
body.login .brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--wk-navy);
  border-bottom: 2px solid var(--wk-gold);
  padding: 1rem 1.5rem;
}
body.login .brand img { height: 44px; width: auto; display: block; }
body.login .brand .company {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wk-gold);
  line-height: 1.4;
}
body.login .body { padding: 1.5rem; }
body.login h1 {
  margin: 0 0 .25rem;
  font-family: var(--wk-font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--wk-navy);
}
body.login .kicker {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--wk-navy);
  margin-bottom: .5rem;
}
body.login h1 + form,
body.login h1 + p { margin-top: 1.5rem; }
body.login form { display: flex; flex-direction: column; gap: .5rem; }
body.login label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wk-ink-muted);
  margin-top: .5rem;
}
body.login input {
  height: 40px;
  padding: 0 .625rem;
  font: inherit;
  font-size: 15px;
  background: var(--wk-surface);
  color: var(--wk-ink);
  border: 1px solid var(--wk-line);
  border-radius: var(--wk-radius-md);
  transition: border-color 120ms var(--wk-ease);
}
body.login input:hover { border-color: var(--wk-navy-40); }
body.login input:focus { border-color: var(--wk-navy); box-shadow: var(--wk-focus); outline: none; }
body.login button {
  margin-top: 1rem;
  height: 40px;
  font: inherit;
  font-weight: 600;
  background: var(--wk-navy);
  color: var(--wk-surface);
  border: 1px solid var(--wk-navy);
  border-radius: var(--wk-radius-md);
  cursor: pointer;
  transition: background-color 120ms var(--wk-ease);
}
body.login button:hover { background: var(--wk-navy-hover); border-color: var(--wk-navy-hover); }
body.login button:active { background: var(--wk-navy-active); border-color: var(--wk-navy-active); }
body.login .err { color: var(--wk-danger); min-height: 1.2em; margin-top: .5rem; }
body.login .hint { color: var(--wk-ink-muted); font-size: 13px; margin: .75rem 0 0; }

/* --- Kopfzeile ------------------------------------------------------------ */

header.app {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem 1rem;
  background: var(--wk-navy);
  border-bottom: 2px solid var(--wk-gold);
  color: var(--wk-surface);
}
header.app .brand { display: flex; align-items: center; gap: .625rem; flex: 0 0 auto; }
header.app .brand img.mark { height: 32px; width: auto; display: block; }
header.app h1 {
  margin: 0;
  font-family: var(--wk-font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--wk-surface);
  white-space: nowrap;
}
header.app .pills { display: flex; gap: .5rem; flex: 1; flex-wrap: wrap; }
header.app .pill {
  padding: .1875rem .625rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  background: var(--wk-navy-active);
  color: var(--wk-navy-70);
  border: 1px solid var(--wk-navy-40);
}
header.app .pill.active { background: var(--wk-success); color: var(--wk-surface); border-color: var(--wk-success); }
header.app .pill.error { background: var(--wk-danger); color: var(--wk-surface); border-color: var(--wk-danger); }
header.app .role {
  color: var(--wk-navy-70);
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: 13px;
}
header.app .role a { color: var(--wk-gold); text-decoration: none; }
header.app .role a:hover { text-decoration: underline; }
header.app .pwlink { color: var(--wk-navy-70); margin-right: .75rem; font-size: 13px; }
header.app .pwlink:hover { color: var(--wk-surface); }
header.app button.logout {
  background: transparent;
  color: var(--wk-surface);
  border: 1px solid var(--wk-navy-40);
  font: inherit;
  font-size: 13px;
  padding: .25rem .75rem;
  border-radius: var(--wk-radius-md);
  cursor: pointer;
  transition: background-color 120ms var(--wk-ease);
}
header.app button.logout:hover { background: var(--wk-navy-hover); border-color: var(--wk-navy-70); }

/* --- Statusband ----------------------------------------------------------- */

.banner {
  padding: .375rem 1rem;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid var(--wk-line);
}
.banner.rollout { background: var(--wk-navy-90); color: var(--wk-navy); }
.banner.armed { background: var(--wk-success-bg); color: var(--wk-success); }
.banner.error { background: var(--wk-danger-bg); color: var(--wk-danger); }
.banner button {
  font: inherit;
  font-weight: 600;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: var(--wk-radius-sm);
  cursor: pointer;
  opacity: .7;
}
.banner button:hover { opacity: 1; }

/* --- Reiter --------------------------------------------------------------- */

nav.tabs {
  display: flex;
  gap: .25rem;
  padding: 0 1rem;
  background: var(--wk-surface);
  border-bottom: 1px solid var(--wk-line);
  align-items: stretch;
  flex-wrap: wrap;
}
nav.tabs button {
  padding: .5rem .875rem;
  min-height: 36px;
  background: transparent;
  color: var(--wk-ink-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color 120ms var(--wk-ease), background-color 120ms var(--wk-ease);
}
nav.tabs button:hover { background: var(--wk-navy-90); color: var(--wk-navy); }

/* Systemreiter (Live-Objekte, Erkennungen, Daueraufnahme) von den
   Kamerareitern abheben: gleiche Sprache, nur Navy statt neutral. */
nav.tabs #tab-live-objects,
nav.tabs #tab-objects,
nav.tabs #tab-recordings {
  color: var(--wk-navy);
  font-weight: 600;
}
nav.tabs #tab-live-objects { margin-left: auto; }

nav.tabs button.active {
  color: var(--wk-navy);
  font-weight: 600;
  border-bottom-color: var(--wk-gold);
}

/* --- Kamerawand ----------------------------------------------------------- */

.grid {
  display: grid;
  gap: .25rem;
  padding: .25rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.grid.wall {
  flex: 1 1 0;
  min-height: 0;
  /* cols und rows werden per JS gesetzt */
}
.cam {
  background: var(--video-bg);
  border: 1px solid var(--wk-line);
  border-radius: var(--wk-radius-md);
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.grid.wall .cam { aspect-ratio: auto; height: 100%; width: 100%; }
.cam video, .cam img, .cam video-rtc { width: 100%; height: 100%; object-fit: contain; }
.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 0; pointer-events: none; }
/* oben mittig: links Label bzw. Substream-Badge, rechts Kachel-Buttons */
.poster-badge {
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 4; pointer-events: none;
  padding: 2px 6px; border-radius: var(--wk-radius-sm);
  background: var(--video-chrome); color: var(--video-on-dark);
  font-size: 12px; letter-spacing: .02em;
}

/* Vollbild-Overlay: inneres <video> soll Frame komplett zeigen, nicht croppen */
video-rtc { display: block; }
video-rtc > video { width: 100%; height: 100%; object-fit: inherit; }

.live-spinner-ring {
  width: 48px; height: 48px;
  border: 4px solid rgba(255, 255, 255, .15);
  border-top-color: var(--wk-gold);
  border-radius: 50%;
  animation: live-spin 1s linear infinite;
}
@keyframes live-spin { to { transform: rotate(360deg); } }

.cam .label {
  position: absolute; left: 6px; top: 6px;
  padding: 2px 6px;
  background: var(--video-chrome);
  color: var(--video-on-dark);
  border-radius: var(--wk-radius-sm);
  font-size: 12px;
  letter-spacing: .02em;
}

/* Live-Tiles + Vollbild: native video-controls verstecken, video-rtc bekommt sie immer wieder zurueck */
video-rtc video::-webkit-media-controls { display: none !important; }
video-rtc video::-webkit-media-controls-enclosure { display: none !important; }
video-rtc video::-webkit-media-controls-panel { display: none !important; }

/* --- Brandwarnung --------------------------------------------------------- */

/* Bewusste Abweichung vom Designsystem: das Rot bleibt volle Flaeche.
   Ein Brandalarm muss auffallen, hier geht Signalwirkung vor Zurueckhaltung.
   Der Ton ist der gedeckte Rotton des Designsystems. */
#alarm-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--wk-danger);
  color: var(--wk-surface);
  border-bottom: 2px solid var(--wk-gold);
  padding: 12px 16px;
  font-weight: 700;
  letter-spacing: .04em;
  display: none;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--wk-shadow-lg);
}
#alarm-banner .alarm-text { font-size: 15px; }
#alarm-banner .alarm-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .55);
  color: var(--wk-surface);
  font: inherit;
  font-weight: 600;
  border-radius: var(--wk-radius-md);
  padding: 6px 12px;
  cursor: pointer;
  transition: background-color 120ms var(--wk-ease);
}
#alarm-banner .alarm-close:hover { background: rgba(255, 255, 255, .15); }

/* --- Erkennungen ---------------------------------------------------------- */

.objects-events { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; }
.object-event-card {
  width: 280px;
  font-size: 13px;
  background: var(--wk-surface);
  border: 1px solid var(--wk-line);
  border-radius: var(--wk-radius-lg);
  box-shadow: var(--wk-shadow-sm);
  overflow: hidden;
}
.object-event-card .thumb-wrap { position: relative; }
.object-event-card img {
  width: 280px; height: 168px;
  object-fit: cover;
  background: var(--video-bg);
  display: block;
}
.object-event-card .obj-badge {
  position: absolute; top: 8px; left: 8px;
  color: var(--video-on-dark);
  padding: .1875em .5em;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.object-event-card .obj-dur-badge {
  position: absolute; bottom: 8px; right: 8px;
  color: var(--video-on-dark);
  background: rgba(0, 0, 0, .7);
  padding: .125em .5em;
  border-radius: var(--wk-radius-md);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.object-event-card .obj-dur-badge.running { background: var(--wk-danger); }
.object-event-card .obj-cap {
  padding: .5rem .625rem .625rem;
  color: var(--wk-ink);
  border-top: 1px solid var(--wk-line-soft);
}

.cam.ptz-tile { cursor: pointer; }
.cam.ptz-selected { outline: 3px solid var(--wk-gold); outline-offset: -3px; }
.ptz-tile-overlay {
  position: absolute; left: 6px; bottom: 1.8em; z-index: 6;
  display: flex; flex-direction: column; gap: 0.3em; align-items: flex-start;
}
.ptz-badge {
  background: var(--wk-gold); color: var(--wk-navy); font-weight: 600;
  font-size: 0.75em; padding: 0.1em 0.5em; border-radius: var(--wk-radius-sm);
}
.ptz-pad {
  display: grid; gap: 4px;
  grid-template-columns: repeat(4, 34px); grid-template-rows: repeat(3, 34px);
  grid-template-areas: ". up . zin" "left . right ." ". down . zout";
}
.ptz-pad button {
  font: inherit; font-size: 1em; font-weight: 600; color: #fff;
  background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--wk-radius-md); cursor: pointer; touch-action: none; user-select: none;
}
.ptz-pad button:active { background: var(--wk-navy); }
.ptz-preset-select { font: inherit; font-size: 0.8em; max-width: 180px; }
.ptz-panel {
  position: absolute; left: 10px; bottom: 10px; z-index: 6; cursor: default;
  display: flex; flex-direction: column; gap: 0.5em; max-height: 80%; overflow: auto;
  padding: 0.6em; background: rgba(0, 0, 0, 0.6); border-radius: var(--wk-radius-lg); color: #fff;
}
.ptz-preset-list { display: flex; flex-direction: column; gap: 0.25em; }
.ptz-preset-row { display: flex; gap: 0.3em; }
.ptz-preset-row button, .ptz-preset-form button {
  font: inherit; font-size: 0.8em; padding: 0.2em 0.6em; cursor: pointer;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--wk-radius-md);
}
.ptz-preset-go { flex: 1; text-align: left; white-space: pre; }
.ptz-preset-empty { font-size: 0.8em; color: rgba(255, 255, 255, 0.7); }
.ptz-preset-form { display: flex; gap: 0.3em; }
.ptz-preset-form input { font: inherit; font-size: 0.8em; width: 9em; }
.ptz-toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 2000;
  background: var(--wk-danger); color: #fff; padding: 0.5em 1em;
  border-radius: var(--wk-radius-md); box-shadow: var(--wk-shadow-md);
}