/* cameras-module.css — Live Cameras. Matches the rr-* dark / neon pink-cyan system. */

.rrcam-grid { display: grid; gap: 12px; }
.rrcam-grid-2 { grid-template-columns: repeat(2, 1fr); }
.rrcam-grid-wall { grid-template-columns: repeat(3, 1fr); margin-top: 16px; }

.rrcam-tile {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  /* neon-glass tint + edges only — no backdrop-filter: the video/placeholder covers the tile,
     so blur would be invisible cost (and tiles also live inside an already-glass .panel) */
  background: var(--ng-sheen), var(--ng-tint-card);
  border: 1px solid var(--ng-edge-pink); cursor: pointer;
  box-shadow: inset 0 1px 0 var(--ng-edge-spec), inset 0 0 0 1px var(--ng-edge-cyan), var(--ng-shadow), var(--ng-glow);
  transition: border-color .15s, box-shadow .15s;
}
.rrcam-tile:hover { border-color: var(--rr-cyan); box-shadow: inset 0 1px 0 var(--ng-edge-spec), inset 0 0 0 1px var(--ng-edge-cyan), var(--ng-shadow), 0 0 18px rgba(88, 249, 244, 0.14); }
.rrcam-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }

.rrcam-name {
  position: absolute; left: 10px; bottom: 8px; font-size: 12px; font-weight: 600;
  color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); pointer-events: none; z-index: 2;
}
.rrcam-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2; font-size: 9.5px; font-weight: 700;
  letter-spacing: .04em; padding: 3px 7px; border-radius: 999px; text-transform: uppercase;
}
.rrcam-badge.live { color: var(--rr-cyan); background: rgba(88, 249, 244, 0.14); border: 1px solid rgba(88, 249, 244, 0.5); }
.rrcam-badge.pend { color: var(--rr-yellow, #FFD24A); background: rgba(255, 210, 74, 0.12); border: 1px solid rgba(255, 210, 74, 0.4); }
.rrcam-badge.off { color: #FF6B8A; background: rgba(255, 107, 138, 0.12); border: 1px solid rgba(255, 107, 138, 0.45); }

/* branded "feed pending" placeholder — intentional, not broken */
.rrcam-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12px; gap: 4px;
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(242, 57, 247, 0.10), transparent 60%),
    radial-gradient(120% 120% at 80% 100%, rgba(88, 249, 244, 0.10), transparent 55%),
    linear-gradient(160deg, #14081f, #0A0118);
}
.rrcam-ph.off { background: radial-gradient(120% 120% at 50% 0%, rgba(255, 107, 138, 0.12), transparent 60%), linear-gradient(160deg, #1a0a12, #0A0118); }
.rrcam-glyph { font-size: 26px; opacity: .8; filter: drop-shadow(0 0 8px rgba(88, 249, 244, 0.35)); }
.rrcam-ph-name { font-size: 12.5px; font-weight: 700; color: var(--rr-text, #fff); }
.rrcam-ph-sub { font-size: 10.5px; color: var(--rr-text-muted, #8a8aa0); }

/* wall: store selector + refresh */
.rrcam-stores { display: inline-flex; gap: 4px; background: rgba(255, 255, 255, 0.04); padding: 4px; border-radius: 10px; }
.rrcam-store {
  background: transparent; border: 0; color: var(--rr-text-muted, #8a8aa0); font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 7px; cursor: pointer;
}
.rrcam-store.on { background: rgba(88, 249, 244, 0.14); color: var(--rr-cyan); }
.rrcam-refresh { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--rr-text-muted); font: inherit; font-size: 12px; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.rrcam-refresh:hover { color: var(--rr-cyan); border-color: var(--rr-cyan); }

/* expanded player overlay */
.rrcam-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(4, 1, 12, 0.86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; }
/* modal floating over content → strong glass; keeps its cyan accent border + glow */
.rrcam-player {
  position: relative; width: min(1100px, 94vw);
  background: var(--ng-sheen), var(--ng-tint-overlay);
  -webkit-backdrop-filter: blur(var(--ng-blur-overlay)) saturate(var(--ng-sat));
  backdrop-filter: blur(var(--ng-blur-overlay)) saturate(var(--ng-sat));
  border: 1px solid var(--rr-border-cyan, rgba(88, 249, 244, 0.25)); border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 1px 0 var(--ng-edge-spec), inset 0 0 0 1px var(--ng-edge-cyan), var(--ng-shadow-overlay), 0 0 40px rgba(88, 249, 244, 0.12);
}
.rrcam-player-body { position: relative; aspect-ratio: 16 / 9; background: #000; }
.rrcam-player-body .rrcam-video, .rrcam-player-body .rrcam-ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.rrcam-player-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #fff; }
.rrcam-x { position: absolute; top: 10px; right: 10px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 15px; cursor: pointer; }
.rrcam-x:hover { background: var(--rr-pink, #F239F7); }
.rrcam-mute { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--rr-text, #fff); font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 8px; cursor: pointer; }

/* responsive */
@media (max-width: 1100px) { .rrcam-grid-wall { grid-template-columns: repeat(2, 1fr); } }
/* laptop-first: hide the dashboard camera panel on phones (the cameras view still works) */
@media (max-width: 720px) { .rrcam-panel { display: none !important; } .rrcam-grid-wall { grid-template-columns: 1fr; } }

/* ---- quad-split: render ONE quadrant of a shared NVR quad stream ----
   The wrap clips; the video is scaled 2× and offset so only the wanted
   quadrant shows. Quadrants of a 16:9 quad-view are 16:9 themselves, so
   object-fit:fill maps the frame exactly onto the 2× box. (Declared after
   the player-body rules on purpose — these override its 100% sizing.) */
.rrcam-cropwrap { position: absolute; inset: 0; overflow: hidden; }
.rrcam-cropwrap .rrcam-video { position: absolute; width: 200%; height: 200%; max-width: none; object-fit: fill; }
.rrcam-crop-tl .rrcam-video { left: 0; top: 0; }
.rrcam-crop-tr .rrcam-video { left: -100%; top: 0; }
.rrcam-crop-bl .rrcam-video { left: 0; top: -100%; }
.rrcam-crop-br .rrcam-video { left: -100%; top: -100%; }

/* ---- six-split: render ONE cell of a shared 3-col × 2-row grid stream (Alarm.com) ----
   The grid stream is the 6-camera view (black bottom band already cropped off). The wrap
   clips; the video is scaled 3× wide / 2× tall and offset so only the wanted cell shows. */
/* object-fit:cover (not the quad's `fill`): a 3x2 grid cell isn't 16:9, so `fill` would
   stretch faces — `cover` keeps proportions and crops a sliver of the cell edges instead. */
.rrcam-cropwrap.rrcam-six .rrcam-video { width: 300%; height: 200%; object-fit: cover; }
.rrcam-crop-r1c1 .rrcam-video { left: 0;     top: 0; }
.rrcam-crop-r1c2 .rrcam-video { left: -100%; top: 0; }
.rrcam-crop-r1c3 .rrcam-video { left: -200%; top: 0; }
.rrcam-crop-r2c1 .rrcam-video { left: 0;     top: -100%; }
.rrcam-crop-r2c2 .rrcam-video { left: -100%; top: -100%; }
.rrcam-crop-r2c3 .rrcam-video { left: -200%; top: -100%; }

/* ---- single-decode: ONE hidden decoder <video> per stream + per-tile <canvas> crops ----
   The grid stream is fetched/decoded once; each tile is a <canvas> that draws its own cell from
   that shared frame (canvas backing = cell px, object-fit:cover fits the tile with no distortion). */
/* The shared decoder <video> must keep decoding, so it can't be display:none or fully off-screen
   (Chrome throttles those, which stalls playback and makes hls.js spam-reload the playlist). Keep
   it on-screen but 1px and ~invisible, under everything. The canvases are the real picture. */
.rrcam-decoder { position: fixed; left: 0; bottom: 0; width: 8px; height: 8px; opacity: 0.012; pointer-events: none; z-index: 0; }
.rrcam-tile .rrcam-canvas, .rrcam-player-body .rrcam-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; background: #000; opacity: 0; transition: opacity .25s ease;
}
.rrcam-canvas.on { opacity: 1; }
.rrcam-buf {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #14081f, #0A0118); transition: opacity .35s ease;
}
.rrcam-buf .rrcam-glyph { font-size: 24px; opacity: .45; }

/* dashboard panel: all 4 cams in ONE row — smaller tiles, no 2-deep scrolling */
.rrcam-grid-row { grid-template-columns: repeat(4, 1fr); }
.rrcam-grid-row .rrcam-name { font-size: 11px; left: 8px; bottom: 6px; }
.rrcam-grid-row .rrcam-badge { font-size: 8.5px; padding: 2px 6px; top: 6px; right: 6px; }
@media (max-width: 1000px) { .rrcam-grid-row { grid-template-columns: repeat(2, 1fr); } }

/* no backdrop-filter support → opaque fallback (mirrors the styles.css resilience block) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rrcam-player { background: rgba(20, 4, 34, 0.97); }
}