/* Видеостена — операторская тёмная тема */
:root {
    --vw-bg: #0d1117;
    --vw-surface: #161b22;
    --vw-surface-2: #1c2129;
    --vw-border: #2d333b;
    --vw-accent: #2f81f7;
    --vw-online: #3fb950;
    --vw-offline: #f85149;
}

html, body { height: 100%; }

.vw-body {
    background: var(--vw-bg);
    min-height: 100vh;
}

.vw-shell { min-height: 100vh; }

/* --- Сайдбар --- */
.vw-sidebar {
    width: 220px;
    background: var(--vw-surface);
    border-right: 1px solid var(--vw-border);
    padding: 1rem .75rem;
    height: 100%;
}

@media (min-width: 992px) {
    .vw-sidebar-off {
        position: sticky;
        top: 0;
        height: 100vh;
        flex-shrink: 0;
    }
}

@media (max-width: 991.98px) {
    .vw-sidebar-off {
        --bs-offcanvas-width: 250px;
        --bs-offcanvas-bg: var(--vw-surface);
    }
    .vw-sidebar { width: 100%; border-right: 0; }
}

/* --- Мобильная шапка --- */
.vw-mobile-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    background: var(--vw-surface);
    border-bottom: 1px solid var(--vw-border);
    position: sticky;
    top: 0;
    z-index: 200;
}

.vw-brand {
    color: #e6edf3;
    font-weight: 600;
    font-size: 1.1rem;
    padding: .25rem .5rem;
}
.vw-brand i { color: var(--vw-accent); font-size: 1.3rem; }

.vw-nav .nav-link {
    color: #9198a1;
    border-radius: .5rem;
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .925rem;
}
.vw-nav .nav-link:hover { color: #e6edf3; background: var(--vw-surface-2); }
.vw-nav .nav-link.active { color: #fff; background: var(--vw-accent); }

.vw-sidebar-footer { padding: .5rem; border-top: 1px solid var(--vw-border); }

.vw-main { min-width: 0; }

/* --- Страничный заголовок --- */
.vw-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--vw-border);
    background: var(--vw-surface);
    position: sticky;
    top: 0;
    z-index: 100;
}
.vw-page-head h1 { font-size: 1.15rem; margin: 0; font-weight: 600; }

.vw-content { padding: 1.25rem; }

@media (max-width: 991.98px) {
    .vw-page-head {
        position: static;
        flex-wrap: wrap;
        padding: .75rem 1rem;
        row-gap: .5rem;
    }
    .vw-content { padding: .75rem; }
}

/* --- Карточки/таблицы --- */
.vw-card {
    background: var(--vw-surface);
    border: 1px solid var(--vw-border);
    border-radius: .75rem;
}

/* --- Статусы камер --- */
.vw-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; }
.vw-dot.online { background: var(--vw-online); box-shadow: 0 0 6px var(--vw-online); }
.vw-dot.offline { background: var(--vw-offline); }
.vw-dot.unknown { background: #6e7681; }

/* --- Плитки дашборда --- */
.grid-stack-item-content {
    background: var(--vw-surface);
    border: 1px solid var(--vw-border);
    border-radius: .6rem;
    overflow: hidden;
}
.vw-editing .grid-stack-item-content {
    outline: 1px dashed rgba(47, 129, 247, .6);
    cursor: grab;
}

.vw-tile { position: relative; height: 100%; display: flex; flex-direction: column; background: #000; }
.vw-tile-media { flex: 1; min-height: 0; position: relative; }
.vw-tile-media video-stream,
.vw-tile-media video-stream video,
.vw-tile-video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.vw-tile-media video-stream { position: absolute; inset: 0; }
.vw-tile-snapshot {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; filter: grayscale(1) brightness(.55);
}
.vw-tile-error {
    position: absolute; top: .5rem; left: .5rem; z-index: 5;
    font-size: .75rem; color: var(--vw-offline);
    background: rgba(0,0,0,.6); padding: .1rem .4rem; border-radius: .25rem;
}

.vw-tile-bar {
    display: flex; align-items: center; gap: .45rem;
    padding: .35rem .6rem;
    background: var(--vw-surface);
    border-top: 1px solid var(--vw-border);
    font-size: .8rem;
    min-height: 2rem;
}
.vw-tile-name { color: #e6edf3; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-tile-loc { color: #6e7681; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-tile-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.vw-tile-actions .btn-tile-full { background: none; border: 0; padding: 0; }
.vw-tile-actions a, .vw-tile-actions button { font-size: .9rem; }
.vw-tile-actions a:hover, .vw-tile-actions button:hover { color: #e6edf3 !important; }

.btn-tile-remove {
    position: absolute; top: .4rem; right: .4rem; z-index: 10;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    border: 0; background: rgba(248, 81, 73, .9); color: #fff;
    font-size: .7rem; line-height: 1;
}

.vw-widget { background: var(--vw-surface); }
.vw-widget-body { overflow: hidden; height: 100%; }

.vw-tile-missing { background: var(--vw-surface-2); font-size: .85rem; }

/* Выбор камеры в модалке */
.vw-pick {
    background: var(--vw-surface-2);
    border: 1px solid var(--vw-border);
    border-radius: .5rem;
    overflow: hidden;
    padding: 0;
    transition: border-color .15s;
}
.vw-pick:hover { border-color: var(--vw-accent); }
.vw-pick-thumb { aspect-ratio: 16/9; background: #000; }
.vw-pick-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Полноэкранный плеер */
.vw-full-player, .vw-full-player video { width: 100%; height: 100%; max-height: calc(100vh - 60px); object-fit: contain; }
#full-body { min-height: calc(100vh - 60px); }

/* --- Логин --- */
.vw-login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse 70% 50% at 50% -10%, rgba(47, 129, 247, .18), transparent),
        var(--vw-bg);
}
.vw-login-card { width: 100%; max-width: 380px; }