:root {
  --bg: #0d1117;
  --bg-2: #131a24;
  --panel: #161d28;
  --panel-2: #1b2430;
  --border: #243040;
  --accent: #18d6c4;
  --accent-dim: #0f8f84;
  --txt: #e6edf3;
  --txt-dim: #8b98a8;
  --danger: #ff5c6c;
  --mono: ui-monospace, "JetBrains Mono", "Fira Code", monospace;
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--txt);
  --bs-border-color: var(--border);
}

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(24,214,196,.06), transparent 60%),
    var(--bg);
  min-height: 100vh;
}

/* ---- Topbar ---- */
.topbar {
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-bottom: 1px solid var(--border);
}
.brand-icon { color: var(--accent); font-size: 1.4rem; }
.brand-text { font-weight: 700; letter-spacing: .5px; }
.brand-dim { color: var(--accent); font-weight: 400; }
.sysbar { font-family: var(--mono); font-size: .8rem; }
.sys-pill {
  color: var(--txt-dim);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: .2rem .55rem;
  border-radius: 6px;
  white-space: nowrap;
}
.sys-pill i { color: var(--accent); }
.sys-pill.warn { color: #ffce5c; border-color: #5a4a1f; }
.sys-pill.warn i { color: #ffce5c; }

/* ---- Tabs ---- */
.tabbar { background: var(--bg-2); border-bottom: 1px solid var(--border); padding-top: .5rem; padding-bottom: .5rem; }
#mainTabs .nav-link {
  color: var(--txt-dim); border: 1px solid transparent; font-size: .9rem;
}
#mainTabs .nav-link.active { background: var(--panel-2); color: var(--accent); border-color: var(--border); }
#mainTabs .nav-link:hover:not(.active) { color: var(--txt); }

/* ---- Panels / Cards ---- */
.card, .modal-content, .list-group-item {
  background: var(--panel); border-color: var(--border);
}
.modal-content { border: 1px solid var(--border); }
.section-label { color: var(--txt-dim); text-transform: uppercase; letter-spacing: 1px; font-size: .72rem; margin-bottom: .6rem; }
.section-label i { color: var(--accent); }

/* ---- Accent button ---- */
.btn-accent { background: var(--accent); border-color: var(--accent); color: #042b27; font-weight: 600; }
.btn-accent:hover { background: var(--accent-dim); border-color: var(--accent-dim); color: #fff; }

/* ---- Kamera-Karten ---- */
.cam-card { position: relative; overflow: hidden; border-radius: 10px; }
.cam-thumb {
  aspect-ratio: 16/9; background: #000 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: var(--txt-dim);
  cursor: pointer; position: relative; overflow: hidden;
}
.cam-thumb .thumb-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .4s; z-index: 1;
}
.cam-thumb .placeholder { font-size: 2rem; opacity: .4; }
.cam-thumb .play-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; color: #fff; opacity: 0; transition: opacity .15s; background: rgba(0,0,0,.25); z-index: 2;
}
.cam-thumb:hover .play-hint { opacity: 1; }
.cam-meta { padding: .6rem .8rem; }
.cam-name { font-weight: 600; }
.cam-host { font-family: var(--mono); font-size: .76rem; color: var(--txt-dim); }
.badge-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-on { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.dot-off { background: #5a6573; }
.dot-rec { background: var(--danger); box-shadow: 0 0 8px var(--danger); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.cam-actions .btn { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .45rem; font-size: .8rem; }

/* ---- Empty state ---- */
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--txt-dim); }
.empty-state i { font-size: 3rem; opacity: .4; display: block; margin-bottom: .8rem; }

/* ---- Live ---- */
.live-wrap { position: relative; background: #000; border-radius: 8px; overflow: hidden; }
.live-video { width: 100%; display: block; aspect-ratio: 16/9; background: #000; }
.live-video video-stream, .live-video video { width: 100%; height: 100%; display: block; }
.ptz-overlay {
  position: absolute; right: 14px; bottom: 14px; display: flex; gap: 12px; align-items: flex-end;
}
.ptz-pad { display: grid; grid-template-areas: ". up ." "left home right" ". down ."; gap: 4px; }
.ptz-btn {
  width: 42px; height: 42px; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(13,17,23,.75); color: var(--txt); backdrop-filter: blur(4px);
}
.ptz-btn:hover { background: var(--accent); color: #042b27; }
.ptz-btn.up { grid-area: up; } .ptz-btn.left { grid-area: left; }
.ptz-btn.home { grid-area: home; } .ptz-btn.right { grid-area: right; } .ptz-btn.down { grid-area: down; }
.ptz-zoom { display: flex; flex-direction: column; gap: 4px; }

/* ---- Szenen ---- */
.scene-toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); padding: .6rem; border-radius: 8px; }
.scene-grid { display: grid; gap: 8px; }
.scene-grid.l-1x1 { grid-template-columns: 1fr; }
.scene-grid.l-2x2 { grid-template-columns: 1fr 1fr; }
.scene-grid.l-3x3 { grid-template-columns: 1fr 1fr 1fr; }
.scene-grid.l-1\+5 { grid-template-columns: 2fr 1fr 1fr; }
.scene-grid.l-1\+5 .cell:first-child { grid-row: span 2; }
.cell {
  position: relative; aspect-ratio: 16/9; background: #000; border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.cell .cell-stream { position: absolute; inset: 0; }
.cell .cell-stream video-stream, .cell .cell-stream video { width: 100%; height: 100%; object-fit: cover; }
.cell .cell-label { position: absolute; top: 6px; left: 8px; font-size: .72rem; background: rgba(0,0,0,.55);
  padding: 1px 6px; border-radius: 4px; }
.cell .cell-pick { position: absolute; inset: 0; background: rgba(13,17,23,.7); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; }
.cell select { max-width: 80%; }

/* ---- Listen ---- */
.rec-list { display: flex; flex-direction: column; gap: 6px; }
.rec-item {
  display: flex; align-items: center; gap: .6rem; background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: .45rem .6rem; font-size: .85rem;
}
.rec-item .name { font-family: var(--mono); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-item.active { border-color: var(--accent); }
.list-group-item-action { cursor: pointer; }
.list-group-item.active { background: var(--accent-dim); border-color: var(--accent-dim); }

.motion-log { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); }
.motion-log .evt { color: var(--txt); }
.motion-log .evt b { color: var(--accent); }

/* ---- Dashboard tiles ---- */
.dash-tile .cam-thumb { aspect-ratio: 16/9; }

@media (max-width: 575px) {
  .scene-grid.l-3x3 { grid-template-columns: 1fr 1fr; }
  .sysbar .sys-pill span { display: none; }
}

/* 24/7-Daueraufnahme */
.rec247-bar {
  background: var(--surface-2, #161d24); border: 1px solid var(--border, #243039);
  border-radius: 10px; padding: 10px 14px;
}
.rec-toggle {
  font-size: 11px; padding: 3px 8px; border-radius: 6px; white-space: nowrap;
  border: 1px solid var(--border, #243039); color: var(--txt-dim, #8a99a5); cursor: pointer; transition: all .15s;
}
.rec-toggle:hover { border-color: #f05a5a; color: #f0a0a0; }
.rec-toggle.on { background: rgba(240,90,90,.16); border-color: #f05a5a; color: #ff8a8a; }
.rec-toggle.on .bi { animation: recpulse 2s infinite; }
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- Bewegungs-Ereignisse mit Snapshot ---------- */
.motion-log { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.evt-row { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--border, #243039);
  border-radius: 8px; background: var(--surface-2, #161d24); }
.evt-thumb { width: 64px; height: 40px; object-fit: cover; border-radius: 5px; background: #0c1116; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; color: #46545f; cursor: pointer; }
.evt-thumb-empty { font-size: 16px; }
.evt-info { display: flex; flex-direction: column; line-height: 1.25; }
.evt-info b { color: var(--txt, #e7eef3); font-weight: 600; }
.evt-time { color: var(--txt-dim, #8a99a5); font-size: 11px; }

/* ---------- Mobile-Optimierung ---------- */
@media (max-width: 767px) {
  .tabbar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabbar .nav { flex-wrap: nowrap; }
  .tabbar .nav-link { white-space: nowrap; font-size: 13px; padding: 6px 10px; }
  .topbar .brand-sub, .sysbar .sys-pill span { display: none; }
  .rec247-bar { padding: 8px 10px; }
  .rec-item { flex-wrap: wrap; }
  .modal-dialog { margin: .4rem; }
  .container-fluid { padding-left: 10px; padding-right: 10px; }
  .evt-thumb { width: 52px; height: 32px; }
}
@media (max-width: 575px) {
  .dash-tile .cam-meta .cam-host { display: none; }
  .cutbar { flex-direction: column; align-items: stretch !important; }
}

/* ---------- Aufnahmen nach Tag gruppiert ---------- */
.rec-day { margin-bottom: 8px; }
.rec-day-head { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--surface-2, #161d24); border: 1px solid var(--border, #243039); color: var(--txt, #e7eef3);
  border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.rec-day-head:hover { border-color: var(--accent, #18d6c4); }
.rec-day-head .caret { transition: transform .15s; color: var(--txt-dim, #8a99a5); }
.rec-day-head.open .caret { transform: rotate(90deg); }
.rec-day-label { font-weight: 600; }
.rec-day-meta { margin-left: auto; font-size: 12px; color: var(--txt-dim, #8a99a5); }
.rec-day-body { padding: 6px 0 2px 8px; }