/* UltraVision 4.2.1 - monitoramento ao vivo, grades responsivas e modos de exibicao */

body.uv-monitor-active,
body.uv-monitor-active .cc-shell,
body.uv-monitor-active .cc-content,
body.uv-monitor-active .monitoring-page,
body.uv-monitor-active .monitor-console,
body.uv-monitor-active .monitor-workspace{
    overflow:hidden;
}

.monitoring-page{
    height:calc(100vh - var(--topbar-h));
}

.monitor-console{
    grid-template-columns:290px minmax(0,1fr);
    min-height:calc(100vh - var(--topbar-h));
    height:calc(100vh - var(--topbar-h));
}

.monitor-library,
.monitor-workspace{
    min-height:0;
    height:100%;
}

.monitor-workspace{
    position:relative;
    overflow:hidden;
}

.monitor-workspace-head{
    min-height:72px;
    padding:11px 14px;
    gap:14px;
    flex-wrap:wrap;
}

.monitor-actions{
    gap:8px;
    max-width:100%;
}

.monitor-saved-wrap select{
    min-width:240px;
    height:38px;
    border-radius:8px;
    font-size:13px;
}

.monitor-layout-presets{
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px;
    flex-wrap:nowrap;
}

.monitor-layout-presets button,
.monitor-tool-btn,
.monitor-floating-exit{
    width:40px;
    min-width:40px;
    height:40px;
    border-radius:8px;
}

.monitor-tool-btn,
.monitor-layout-presets button,
.monitor-floating-exit{
    border:1px solid #51637b;
    background:#172233;
    color:#9db1c8;
}

.monitor-tool-btn:hover,
.monitor-layout-presets button:hover,
.monitor-layout-presets button.active,
.monitor-floating-exit:hover,
.monitor-mode-menu button:hover,
.monitor-mode-menu button.active{
    border-color:#2fc2f0;
    color:#e8f9ff;
    background:#162d42;
}

.monitor-grid-wrap{
    flex:1 1 auto;
    min-height:0;
    padding:10px 12px;
    overflow:hidden !important;
    display:flex;
    align-items:center;
    justify-content:center;
}

.monitor-grid{
    --monitor-gap:6px;
    --monitor-cell-width:320px;
    --monitor-cell-height:180px;
    display:grid;
    grid-template-columns:repeat(var(--monitor-cols), var(--monitor-cell-width));
    grid-auto-rows:var(--monitor-cell-height);
    gap:var(--monitor-gap);
    justify-content:center;
    align-content:center;
    width:100%;
    height:100%;
    overflow:hidden;
}

.monitor-slot{
    width:var(--monitor-cell-width);
    height:var(--monitor-cell-height);
    aspect-ratio:auto;
    border-radius:6px;
    overflow:hidden;
}

.monitor-grid-focus{
    justify-content:center;
    align-content:center;
}

.monitor-grid-focus .monitor-slot.focus-hidden{
    display:none !important;
}

.monitor-grid-focus .monitor-slot.focus-active{
    width:var(--monitor-cell-width);
    height:var(--monitor-cell-height);
    justify-self:center;
}

.monitor-empty-slot{
    gap:10px;
    color:#95a6b6;
}

.monitor-empty-slot strong{
    display:none;
}

.monitor-empty-slot small{
    display:block;
    font-size:15px;
    color:#c0cad4;
}

.monitor-empty-icon{
    width:34px;
    height:28px;
    border:2px dashed #93a1b1;
    border-radius:6px;
}

.monitor-empty-icon:before{
    left:12px;
    top:7px;
    border-left:10px solid #b7c1cb;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
}

.monitor-tile-controls{
    gap:6px;
}

.monitor-view-mode{
    position:relative;
}

.monitor-mode-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:180px;
    padding:8px;
    border:1px solid #2c4256;
    border-radius:12px;
    background:#111d2b;
    box-shadow:0 18px 44px rgba(0,0,0,.35);
    z-index:150;
    display:grid;
    gap:4px;
}

.monitor-mode-menu[hidden]{
    display:none !important;
}

.monitor-mode-menu button{
    width:100%;
    min-height:40px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 12px;
    border:1px solid transparent;
    border-radius:9px;
    background:transparent;
    color:#dce7ef;
    text-align:left;
    font:600 14px/1.2 "Segoe UI",sans-serif;
    cursor:pointer;
}

.monitor-mode-menu button.active{
    background:#162d42;
}

.mode-icon,
.monitor-tool-icon.display-mode,
.monitor-tool-icon.fullscreen-exit,
.preset{
    display:inline-block;
    position:relative;
    flex:0 0 auto;
}

.mode-icon{
    width:18px;
    height:18px;
}

.mode-icon.normal{
    background:
        linear-gradient(currentColor,currentColor) 0 0/100% 4px no-repeat,
        linear-gradient(currentColor,currentColor) 0 7px/100% 4px no-repeat,
        linear-gradient(currentColor,currentColor) 0 14px/100% 4px no-repeat;
}

.mode-icon.partial{
    background:
        linear-gradient(currentColor,currentColor) 0 0/4px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 7px 0/4px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 14px 0/4px 100% no-repeat;
}

.mode-icon.complete{
    border:2px solid currentColor;
    border-radius:2px;
}

.monitor-tool-icon.display-mode{
    width:16px;
    height:16px;
    background:
        linear-gradient(currentColor,currentColor) 0 0/5px 5px no-repeat,
        linear-gradient(currentColor,currentColor) 11px 0/5px 5px no-repeat,
        linear-gradient(currentColor,currentColor) 0 11px/5px 5px no-repeat,
        linear-gradient(currentColor,currentColor) 11px 11px/5px 5px no-repeat;
}

.monitor-tool-icon.fullscreen-exit{
    width:16px;
    height:16px;
    background:
        linear-gradient(currentColor,currentColor) 0 0/6px 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) 0 0/1.5px 6px no-repeat,
        linear-gradient(currentColor,currentColor) 100% 0/6px 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) 100% 0/1.5px 6px no-repeat,
        linear-gradient(currentColor,currentColor) 0 100%/6px 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) 0 100%/1.5px 6px no-repeat,
        linear-gradient(currentColor,currentColor) 100% 100%/6px 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) 100% 100%/1.5px 6px no-repeat;
    transform:scale(.9);
}

.preset{
    width:18px;
    height:18px;
    color:currentColor;
}

.preset.p1{
    border:1.5px solid currentColor;
    border-radius:2px;
}

.preset.p4{
    background:
        linear-gradient(currentColor,currentColor) 0 0/100% 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) 0 0/1.5px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 100% 0/1.5px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 50% 0/1.5px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 0 50%/100% 1.5px no-repeat;
}

.preset.p6{
    background:
        linear-gradient(currentColor,currentColor) 0 0/100% 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) 0 0/1.5px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 100% 0/1.5px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 33.333% 0/1.5px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 66.666% 0/1.5px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 0 50%/100% 1.5px no-repeat;
}

.preset.p9{
    background:
        linear-gradient(currentColor,currentColor) 0 0/100% 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) 0 0/1.5px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 100% 0/1.5px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 33.333% 0/1.5px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 66.666% 0/1.5px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 0 33.333%/100% 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) 0 66.666%/100% 1.5px no-repeat;
}

.preset.p16{
    background:
        linear-gradient(currentColor,currentColor) 0 0/100% 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) 0 0/1.5px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 100% 0/1.5px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 25% 0/1px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 50% 0/1px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 75% 0/1px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 0 25%/100% 1px no-repeat,
        linear-gradient(currentColor,currentColor) 0 50%/100% 1px no-repeat,
        linear-gradient(currentColor,currentColor) 0 75%/100% 1px no-repeat;
}

.preset.custom{
    background:
        linear-gradient(currentColor,currentColor) 0 0/100% 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat,
        linear-gradient(currentColor,currentColor) 0 0/1.5px 100% no-repeat,
        linear-gradient(currentColor,currentColor) 100% 0/1.5px 100% no-repeat,
        radial-gradient(circle at 50% 50%, currentColor 0 1.5px, transparent 1.6px);
}

.monitor-library-open{
    display:none;
}

.monitor-floating-exit{
    position:absolute;
    right:14px;
    top:14px;
    z-index:140;
    display:none;
    place-items:center;
    box-shadow:0 12px 28px rgba(0,0,0,.32);
}

body.uv-monitor-view-partial .monitor-console{
    grid-template-columns:minmax(0,1fr) !important;
}

body.uv-monitor-view-partial .monitor-library,
body.uv-monitor-view-complete .monitor-library{
    position:fixed;
    top:var(--topbar-h);
    bottom:0;
    left:var(--sidebar-w);
    width:min(320px,32vw);
    transform:translateX(calc(-100% - 18px));
    opacity:0;
    pointer-events:none;
    box-shadow:18px 0 50px rgba(0,0,0,.36);
    z-index:125;
    transition:transform .18s ease, opacity .18s ease;
}

body.uv-monitor-view-partial .monitor-library.mobile-open,
body.uv-monitor-view-complete .monitor-library.mobile-open{
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
}

body.uv-monitor-view-partial .monitor-library-open{
    display:grid !important;
}

body.uv-monitor-view-partial .monitor-grid-wrap{
    padding-left:10px;
    padding-right:10px;
}

body.uv-monitor-view-complete{
    overflow:hidden;
}

body.uv-monitor-view-complete .cc-shell{
    padding-left:0 !important;
}

body.uv-monitor-view-complete .cc-sidebar,
body.uv-monitor-view-complete .cc-topbar{
    display:none !important;
}

body.uv-monitor-view-complete .cc-content{
    padding-top:0 !important;
    min-height:100vh !important;
    height:100vh !important;
}

body.uv-monitor-view-complete .monitoring-page,
body.uv-monitor-view-complete .monitor-console,
body.uv-monitor-view-complete .monitor-workspace{
    min-height:100vh !important;
    height:100vh !important;
}

body.uv-monitor-view-complete .monitor-console{
    grid-template-columns:minmax(0,1fr) !important;
    border-top:0;
}

body.uv-monitor-view-complete .monitor-library{
    top:0;
    left:0;
}

body.uv-monitor-view-complete .monitor-workspace-head,
body.uv-monitor-view-complete .monitor-workspace-foot{
    display:none !important;
}

body.uv-monitor-view-complete .monitor-grid-wrap{
    padding:0 !important;
    width:100vw;
    height:100vh;
}

body.uv-monitor-view-complete .monitor-grid{
    width:100vw;
    height:100vh;
}

body.uv-monitor-view-complete .monitor-floating-exit{
    display:grid;
}

body.uv-monitor-view-complete .monitor-library-open{
    display:none !important;
}

body.uv-monitor-view-complete .monitor-slot{
    border-radius:0;
}

@media (max-width: 1200px){
    .monitor-saved-wrap select{min-width:190px;}
    .monitor-workspace-head{padding-inline:12px;}
}

@media (max-width: 980px){
    .monitor-console{grid-template-columns:minmax(0,1fr) !important;}
    .monitor-library{position:fixed;left:var(--sidebar-w);top:var(--topbar-h);bottom:0;width:min(320px,88vw);transform:translateX(calc(-100% - 18px));opacity:0;pointer-events:none;}
    .monitor-library.mobile-open{transform:translateX(0);opacity:1;pointer-events:auto;}
    .monitor-library-open,.monitor-library-close{display:grid !important;}
    .monitor-workspace-head{position:relative;top:auto;}
}

@media (max-width: 850px){
    body.uv-monitor-view-partial .monitor-library,
    body.uv-monitor-view-complete .monitor-library,
    .monitor-library{left:0;top:0;width:min(340px,90vw);}
    .monitor-workspace-head{align-items:flex-start;}
    .monitor-actions{width:100%;justify-content:flex-start;}
    .monitor-saved-wrap{flex:1 1 220px;}
    .monitor-saved-wrap select{width:100%;min-width:0;}
}

@media (max-width: 700px){
    .monitor-workspace-head{padding:10px;}
    .monitor-layout-presets{order:3;width:100%;overflow:auto;}
    .monitor-layout-presets button{flex:0 0 auto;}
    .monitor-grid-wrap{padding:8px;}
    .monitor-empty-slot small{font-size:13px;}
}

/* =========================================================
   UltraVision 4.2.2 - barra de grades alinhada ao topo
   ========================================================= */

/* No mural o cabeçalho do próprio monitoramento substitui a topbar global. */
body.uv-monitor-page .cc-topbar{
    display:none !important;
}

body.uv-monitor-page .cc-content{
    padding-top:0 !important;
    min-height:100vh;
    height:100vh;
}

body.uv-monitor-page .monitoring-page,
body.uv-monitor-page .monitor-console,
body.uv-monitor-page .monitor-workspace{
    min-height:100vh !important;
    height:100vh !important;
}

/* Barra principal: título à esquerda e grades/ações à direita na mesma linha. */
body.uv-monitor-page .monitor-workspace-head{
    position:relative !important;
    top:0 !important;
    z-index:30;
    display:grid !important;
    grid-template-columns:minmax(240px,1fr) auto;
    align-items:center !important;
    min-height:66px !important;
    height:66px;
    padding:8px 14px !important;
    gap:16px;
    flex-wrap:nowrap !important;
    background:rgba(10,22,34,.98);
    border-bottom:1px solid #26394c;
    backdrop-filter:blur(10px);
}

body.uv-monitor-page .monitor-title-row{
    align-items:center;
    gap:10px;
    min-width:0;
    margin:0;
}

body.uv-monitor-page .monitor-title-row > div{
    min-width:0;
}

body.uv-monitor-page .monitor-title-row .monitor-kicker{
    margin:0 0 4px;
    font-size:9px;
    line-height:1;
}

body.uv-monitor-page .monitor-title-row h2{
    margin:0 0 3px !important;
    font-size:16px;
    line-height:1.15;
}

body.uv-monitor-page .monitor-title-row p{
    margin:0 !important;
    line-height:1.1;
}

body.uv-monitor-page .monitor-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end;
    flex-wrap:nowrap !important;
    gap:7px !important;
    margin:0 !important;
    min-width:0;
    align-self:center;
}

body.uv-monitor-page .monitor-saved-wrap{
    margin:0;
    flex:0 0 auto;
}

body.uv-monitor-page .monitor-saved-wrap select{
    height:40px !important;
    min-width:220px;
    margin:0 !important;
    vertical-align:middle;
}

body.uv-monitor-page .monitor-tool-btn,
body.uv-monitor-page .monitor-layout-presets button{
    width:40px;
    min-width:40px;
    height:40px !important;
    margin:0 !important;
}

body.uv-monitor-page .monitor-layout-presets{
    height:48px;
    display:flex;
    align-items:center;
    gap:5px;
    margin:0;
    padding:4px;
}

/* O grid começa imediatamente depois da barra, sem espaço morto acima. */
body.uv-monitor-page .monitor-grid-wrap{
    padding:8px 10px 8px !important;
    overflow:hidden !important;
}

/* Com a topbar global removida, painéis retráteis começam no topo correto. */
body.uv-monitor-page.uv-monitor-view-partial .monitor-library,
body.uv-monitor-page.uv-monitor-view-complete .monitor-library{
    top:0 !important;
}

/* Mantém os modos profissionalmente consistentes. */
body.uv-monitor-page.uv-monitor-view-partial .monitor-workspace-head{
    width:100%;
}

body.uv-monitor-page.uv-monitor-view-complete .monitor-workspace-head{
    display:none !important;
}

/* Evita quebra/deslocamento da barra em larguras intermediárias. */
@media (max-width: 1450px){
    body.uv-monitor-page .monitor-workspace-head{
        grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr);
        gap:10px;
    }
    body.uv-monitor-page .monitor-saved-wrap select{
        min-width:170px;
    }
    body.uv-monitor-page .monitor-actions{
        overflow-x:auto;
        overflow-y:hidden;
        scrollbar-width:none;
        justify-content:flex-end;
    }
    body.uv-monitor-page .monitor-actions::-webkit-scrollbar{
        display:none;
    }
}

@media (max-width: 1050px){
    body.uv-monitor-page .monitor-workspace-head{
        height:auto;
        min-height:72px !important;
        grid-template-columns:minmax(0,1fr);
        align-items:start !important;
        padding:9px 10px !important;
    }
    body.uv-monitor-page .monitor-actions{
        width:100%;
        justify-content:flex-start;
        padding-bottom:1px;
    }
}

@media (max-width: 850px){
    body.uv-monitor-page .cc-content,
    body.uv-monitor-page .monitoring-page,
    body.uv-monitor-page .monitor-console,
    body.uv-monitor-page .monitor-workspace{
        height:100dvh !important;
        min-height:100dvh !important;
    }
}