/* ==========================================================================
   MULTIVIEW DVR PANEL - v2.0
   File: /var/www/html/cctv/assets/css/multiview.css
   ========================================================================== */

/* ---- TOMBOL LIHAT SEMUA di stats bar ---- */
.stat-card.stat-multiview {
    border-bottom: 3px solid var(--neon-blue);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 5px;
}
.stat-card.stat-multiview:hover {
    background: rgba(0,210,255,0.08);
    box-shadow: 0 0 20px rgba(0,210,255,0.2);
    transform: translateY(-2px);
}
.stat-card.stat-multiview .mv-icon { font-size:2rem; color:var(--neon-blue); line-height:1; }
.stat-card.stat-multiview .mv-label { font-size:0.8rem; color:var(--neon-blue); text-transform:uppercase; font-weight:bold; letter-spacing:1px; margin-top:4px; }
.stat-card.stat-multiview .mv-sub   { font-size:0.7rem; color:var(--text-muted); margin-top:2px; }
.stat-card.stat-multiview::before {
    content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background:radial-gradient(circle, rgba(0,210,255,0.05) 0%, transparent 70%);
    animation: mv-pulse-bg 3s ease-in-out infinite;
}
@keyframes mv-pulse-bg { 0%,100%{opacity:.5;transform:scale(.8)} 50%{opacity:1;transform:scale(1.1)} }

/* ---- OVERLAY MULTIVIEW ---- */
#multiviewOverlay {
    display: none; position:fixed; top:0; left:0;
    width:100%; height:100%; background:#050608;
    z-index:99998; flex-direction:column;
    animation: mvFadeIn .3s ease;
}
#multiviewOverlay.active { display:flex; }
@keyframes mvFadeIn { from{opacity:0} to{opacity:1} }

/* HEADER */
.mv-header {
    background: linear-gradient(90deg,#0a0b12 0%,#13141c 100%);
    border-bottom: 1px solid rgba(0,210,255,.3);
    padding: 10px 18px;
    display:flex; justify-content:space-between; align-items:center; flex-shrink:0;
    box-shadow: 0 2px 20px rgba(0,210,255,.08);
}
.mv-header-left  { display:flex; align-items:center; gap:12px; }
.mv-header h2    { font-size:.9rem; color:var(--neon-blue); margin:0; letter-spacing:2px; font-weight:bold; text-transform:uppercase; }
.mv-header-badge { background:rgba(0,255,102,.1); border:1px solid rgba(0,255,102,.4); color:var(--neon-green); padding:3px 10px; border-radius:12px; font-size:.72rem; font-weight:bold; letter-spacing:1px; }
.mv-header-right { display:flex; align-items:center; gap:10px; }

/* Grid selector */
.mv-grid-selector { display:flex; gap:5px; }
.mv-grid-btn {
    background:rgba(255,255,255,.04); border:1px solid var(--border-color);
    color:var(--text-muted); padding:4px 9px; border-radius:5px; cursor:pointer;
    font-size:.7rem; transition:all .2s; font-family:'Segoe UI',sans-serif;
}
.mv-grid-btn:hover, .mv-grid-btn.active { border-color:var(--neon-blue); color:var(--neon-blue); background:rgba(0,210,255,.1); }
.mv-close-top {
    background:rgba(255,51,102,.1); border:1px solid rgba(255,51,102,.4); color:var(--neon-red);
    width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:1.3rem; line-height:1;
    display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.mv-close-top:hover { background:var(--neon-red); color:#fff; box-shadow:0 0 14px var(--neon-red); }

/* GRID BODY */
.mv-body { flex:1; overflow-y:auto; padding:10px; background:#07080e; }
.mv-body::-webkit-scrollbar { width:5px; }
.mv-body::-webkit-scrollbar-thumb { background:#1e1f2a; border-radius:10px; }

.mv-grid { display:grid; gap:7px; }
.mv-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.mv-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.mv-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.mv-grid.cols-5 { grid-template-columns:repeat(5,1fr); }
.mv-grid.cols-6 { grid-template-columns:repeat(6,1fr); }
.mv-grid.cols-7 { grid-template-columns:repeat(7,1fr); }
.mv-grid.cols-8 { grid-template-columns:repeat(8,1fr); }

/* CELL */
.mv-cam-cell {
    position:relative; background:#000; border:1px solid #1a1b25;
    border-radius:7px; overflow:hidden; aspect-ratio:16/9;
    cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .2s;
}
.mv-cam-cell:hover { border-color:var(--neon-blue); box-shadow:0 0 14px rgba(0,210,255,.3); transform:scale(1.015); z-index:5; }
.mv-cam-cell video { width:100%; height:100%; object-fit:cover; display:block; }

/* Label bawah */
.mv-cam-label {
    position:absolute; bottom:0; left:0; right:0;
    background:linear-gradient(to top, rgba(0,0,0,.88) 0%, transparent 100%);
    padding:16px 8px 6px; display:flex; justify-content:space-between; align-items:flex-end; pointer-events:none;
}
.mv-cam-name { color:#fff; font-size:.7rem; font-weight:bold; text-shadow:0 1px 3px rgba(0,0,0,.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:75%; }
.mv-live-dot { display:flex; align-items:center; gap:3px; background:rgba(220,30,30,.85); color:#fff; font-size:.57rem; font-weight:bold; padding:2px 5px; border-radius:8px; flex-shrink:0; }
.mv-live-dot::before { content:''; width:5px; height:5px; background:#fff; border-radius:50%; animation:mv-rec 1s ease infinite; }
@keyframes mv-rec { 0%,100%{opacity:1} 50%{opacity:.15} }

/* Zoom hint */
.mv-cam-cell .mv-zoom-hint {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8);
    background:rgba(0,0,0,.6); border:1px solid var(--neon-blue); color:var(--neon-blue);
    padding:6px 14px; border-radius:18px; font-size:.7rem; font-weight:bold; letter-spacing:1px;
    opacity:0; transition:all .2s; pointer-events:none; white-space:nowrap; backdrop-filter:blur(4px);
}
.mv-cam-cell:hover .mv-zoom-hint { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* Loading/Error per cell */
.mv-cam-loading, .mv-cam-error {
    position:absolute; top:0; left:0; right:0; bottom:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; pointer-events:none;
}
.mv-cam-loading { background:#090a10; }
.mv-cam-loading .spinner { width:24px; height:24px; border:2px solid #1a1c2a; border-top-color:var(--neon-blue); border-radius:50%; animation:mv-spin .75s linear infinite; }
.mv-cam-loading span { font-size:.6rem; color:var(--text-muted); letter-spacing:1px; text-transform:uppercase; }
@keyframes mv-spin { to{transform:rotate(360deg)} }
.mv-cam-error { background:#0e0508; }
.mv-cam-error i { color:var(--neon-red); font-size:1.4rem; }
.mv-cam-error span { font-size:.6rem; color:#ff6688; letter-spacing:1px; }

/* Kosong */
.mv-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:12px; }
.mv-empty i { font-size:3.5rem; color:#1e1f2a; }
.mv-empty h3 { font-size:.9rem; color:#3a3b4a; text-transform:uppercase; letter-spacing:2px; }

/* FOOTER multiview */
.mv-footer {
    background:#0a0b12; border-top:1px solid rgba(0,210,255,.12);
    padding:9px 18px; display:flex; justify-content:space-between; align-items:center; flex-shrink:0;
}
.mv-footer-info { font-size:.72rem; color:var(--text-muted); display:flex; align-items:center; gap:14px; }
.mv-footer-info span { display:flex; align-items:center; gap:5px; }
.mv-close-btn {
    background:rgba(255,51,102,.1); border:1px solid var(--neon-red); color:var(--neon-red);
    padding:7px 22px; border-radius:6px; cursor:pointer; font-size:.82rem; font-weight:bold;
    letter-spacing:1px; text-transform:uppercase; transition:all .25s; display:flex; align-items:center; gap:7px;
}
.mv-close-btn:hover { background:var(--neon-red); color:#fff; box-shadow:0 0 18px rgba(255,51,102,.4); }

/* ============================================================
   INNER ZOOM MODAL — di atas multiview (z-index lebih tinggi)
   ============================================================ */
#mvZoomModal {
    display:none; position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,.9); z-index:99999;
    justify-content:center; align-items:center; padding:20px;
    backdrop-filter:blur(5px); animation:mvFadeIn .2s ease;
}
#mvZoomModal.active { display:flex; }

.mv-zoom-box {
    background:#0b0c12; border:1px solid var(--neon-blue); border-radius:10px;
    width:100%; max-width:980px; box-shadow:0 0 50px rgba(0,210,255,.2);
    overflow:hidden; display:flex; flex-direction:column; animation:mvZoomIn .25s ease;
}
@keyframes mvZoomIn { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }

.mv-zoom-hd {
    background:linear-gradient(90deg,#0d0e18,#161824);
    padding:12px 18px; border-bottom:1px solid rgba(0,210,255,.2);
    display:flex; justify-content:space-between; align-items:center;
}
.mv-zoom-hd h3 { font-size:.95rem; color:#fff; margin:0; display:flex; align-items:center; gap:8px; }
.mv-zoom-hd .live-badge { background:rgba(220,30,30,.8); color:#fff; font-size:.62rem; padding:2px 7px; border-radius:8px; font-weight:bold; }
.mv-zoom-x {
    background:rgba(255,51,102,.12); border:1px solid rgba(255,51,102,.4); color:var(--neon-red);
    width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:1.3rem; line-height:1;
    display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.mv-zoom-x:hover { background:var(--neon-red); color:#fff; box-shadow:0 0 12px var(--neon-red); }

.mv-zoom-bd { position:relative; background:#000; width:100%; aspect-ratio:16/9; }
.mv-zoom-bd video { width:100%; height:100%; object-fit:contain; display:block; }

/* ---- FOOTER HALAMAN COPYRIGHT ---- */
.cctv-page-footer {
    text-align:center; padding:7px 20px; flex-shrink:0;
    background:rgba(7,8,14,.98);
    border-top:1px solid rgba(0,210,255,.12);
    font-size:.72rem; color:#3a4a5a; letter-spacing:1.5px; z-index:100;
}
.cctv-page-footer a {
    color:var(--neon-blue); text-decoration:none; font-weight:bold; transition:color .2s, text-shadow .2s;
}
.cctv-page-footer a:hover { color:#fff; text-shadow:0 0 8px var(--neon-blue); }

/* ============================================================
   RESPONSIVE MOBILE — 1 kolom, scroll ke bawah, width penuh
   ============================================================ */
@media (max-width: 768px) {
    /* Paksa 1 kolom di semua ukuran grid */
    .mv-grid.cols-2,
    .mv-grid.cols-3,
    .mv-grid.cols-4,
    .mv-grid.cols-5,
    .mv-grid.cols-6,
    .mv-grid.cols-7,
    .mv-grid.cols-8 {
        grid-template-columns: 1fr !important;
    }
    .mv-cam-cell { aspect-ratio:16/9; width:100%; }
    .mv-cam-cell:hover { transform:none; }   /* non-aktifkan hover scale di HP */
    .mv-grid-selector { display:none; }      /* sembunyikan pilihan grid */
    .mv-header-badge { display:none; }
    .mv-header { padding:8px 12px; }
    .mv-header h2 { font-size:.78rem; }
    .mv-body { padding:6px; }
    .mv-grid { gap:6px; }
    .mv-footer { padding:8px 12px; }
    .mv-footer-info { font-size:.66rem; gap:8px; }
    .mv-close-btn { padding:6px 14px; font-size:.76rem; }
    #mvZoomModal { padding:8px; }
    .mv-zoom-hd h3 { font-size:.82rem; }
    .cctv-page-footer { font-size:.64rem; }
}

/* Tablet: max 3 kolom */
@media (min-width: 769px) and (max-width: 1200px) {
    .mv-grid.cols-5,
    .mv-grid.cols-6,
    .mv-grid.cols-7,
    .mv-grid.cols-8 {
        grid-template-columns: repeat(3,1fr);
    }
}