/* ============================================================
   .COM INTERNET ACS
   UI V2
   ============================================================ */

:root {
    --v2-red: #c90000;
    --v2-red-dark: #9e0000;
    --v2-red-soft: #fff1f1;

    --v2-bg: #f5f6f8;
    --v2-card: #ffffff;

    --v2-border: #e5e7eb;
    --v2-text: #202124;
    --v2-muted: #73777f;

    --v2-sidebar: 235px;
    --v2-radius: 12px;

    --v2-shadow:
        0 4px 18px rgba(30,40,60,.06);
}


/* ============================================================
   BASE
   ============================================================ */

html,
body {
    background: var(--v2-bg) !important;
}

body:not(:has(#content.page-login)) {
    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   SIDEBAR PRINCIPAL
   ============================================================ */

body:not(:has(#content.page-login)) #header {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;

    width: var(--v2-sidebar) !important;
    height: 100vh !important;

    display: flex !important;
    flex-direction: column !important;

    background:
        linear-gradient(
            180deg,
            #b90000 0%,
            #cf0000 48%,
            #970000 100%
        ) !important;

    border: 0 !important;

    box-shadow:
        5px 0 25px rgba(70,0,0,.11) !important;

    overflow: hidden !important;

    z-index: 1000 !important;
}


/* ============================================================
   LOGO
   ============================================================ */

body:not(:has(#content.page-login))
#header > .logo {

    position: relative !important;

    width: 100% !important;
    min-width: 100% !important;

    height: 116px !important;
    min-height: 116px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 13px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border-bottom:
        1px solid #ededed !important;
}


body:not(:has(#content.page-login))
#header > .logo > img {

    width: 175px !important;
    max-width: 175px !important;

    height: auto !important;
    max-height: 80px !important;

    margin: 0 !important;

    object-fit: contain !important;
}


body:not(:has(#content.page-login))
#header > .logo::after {

    content: "PLATAFORMA ACS";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 7px;

    text-align: center;

    color: #888;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.3px;
}


body:not(:has(#content.page-login))
#header .logo .version {
    display: none !important;
}


/* ============================================================
   MENU PRINCIPAL
   ============================================================ */

body:not(:has(#content.page-login))
#header > nav {

    width: 100% !important;

    margin: 22px 0 0 0 !important;

    padding: 0 13px !important;

    box-sizing: border-box !important;
}


body:not(:has(#content.page-login))
#header > nav > ul {

    display: flex !important;

    flex-direction: column !important;

    gap: 6px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


body:not(:has(#content.page-login))
#header > nav > ul > li {

    width: 100% !important;

    margin: 0 !important;

    border: 0 !important;

    background: transparent !important;

    border-radius: 9px !important;
}


body:not(:has(#content.page-login))
#header > nav > ul > li > a {

    display: flex !important;

    align-items: center !important;

    min-height: 46px !important;

    padding: 0 16px !important;

    box-sizing: border-box !important;

    color: rgba(255,255,255,.90) !important;

    background: transparent !important;

    border-radius: 9px !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    text-decoration: none !important;

    transition:
        background .15s ease,
        transform .15s ease !important;
}


body:not(:has(#content.page-login))
#header > nav > ul > li > a:hover {

    background:
        rgba(255,255,255,.12) !important;

    color: #ffffff !important;

    transform:
        translateX(2px) !important;
}


body:not(:has(#content.page-login))
#header > nav > ul > li.active > a {

    background: #ffffff !important;

    color: #b40000 !important;

    font-weight: 700 !important;

    box-shadow:
        0 5px 18px rgba(80,0,0,.16) !important;
}


/* ============================================================
   USUARIO
   ============================================================ */

body:not(:has(#content.page-login))
#header > .user-menu {

    margin:
        auto 14px 16px 14px !important;

    padding: 14px !important;

    box-sizing: border-box !important;

    color: #ffffff !important;

    background:
        rgba(255,255,255,.08) !important;

    border:
        1px solid rgba(255,255,255,.13) !important;

    border-radius: 10px !important;
}


body:not(:has(#content.page-login))
#header > .user-menu button {

    color: #ffffff !important;

    background:
        rgba(255,255,255,.12) !important;

    border:
        1px solid rgba(255,255,255,.22) !important;

    border-radius: 7px !important;
}


/* ============================================================
   AREA PRINCIPAL
   IMPORTANTE: elimina conflitos antigos de flex
   ============================================================ */

body:not(:has(#content.page-login))
#content-wrapper {

    display: block !important;

    position: relative !important;

    width:
        calc(100% - var(--v2-sidebar)) !important;

    min-height: 100vh !important;

    margin-left:
        var(--v2-sidebar) !important;

    padding: 22px !important;

    box-sizing: border-box !important;

    background:
        var(--v2-bg) !important;

    overflow: visible !important;
}


/* ============================================================
   CONTEUDO
   ============================================================ */

body:not(:has(#content.page-login))
#content {

    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    min-height:
        calc(100vh - 44px) !important;

    margin: 0 !important;

    padding: 22px !important;

    box-sizing: border-box !important;

    background:
        var(--v2-card) !important;

    border:
        1px solid var(--v2-border) !important;

    border-radius:
        var(--v2-radius) !important;

    box-shadow:
        var(--v2-shadow) !important;

    overflow: visible !important;
}


/* ============================================================
   PAGINAS ADMINISTRATIVAS
   MENU INTERNO + CONTEUDO
   ============================================================ */

body:has(#content.page-presets)
#content-wrapper,

body:has(#content.page-provisions)
#content-wrapper,

body:has(#content.page-virtualParameters)
#content-wrapper,

body:has(#content.page-files)
#content-wrapper,

body:has(#content.page-config)
#content-wrapper,

body:has(#content.page-permissions)
#content-wrapper,

body:has(#content.page-users)
#content-wrapper {

    display: grid !important;

    grid-template-columns:
        190px minmax(0,1fr) !important;

    grid-template-rows:
        auto !important;

    gap: 18px !important;

    align-items: start !important;
}


/* ============================================================
   MENU INTERNO ADMIN
   ============================================================ */

body:has(
    #content.page-presets,
    #content.page-provisions,
    #content.page-virtualParameters,
    #content.page-files,
    #content.page-config,
    #content.page-permissions,
    #content.page-users
)
#content-wrapper > #side-menu {

    display: block !important;

    position: relative !important;

    grid-column: 1 !important;

    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;

    margin: 0 !important;

    padding: 8px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border:
        1px solid var(--v2-border) !important;

    border-radius:
        11px !important;

    box-shadow:
        var(--v2-shadow) !important;

    overflow: visible !important;

    z-index: 10 !important;
}


body:has(
    #content.page-presets,
    #content.page-provisions,
    #content.page-virtualParameters,
    #content.page-files,
    #content.page-config,
    #content.page-permissions,
    #content.page-users
)
#side-menu > ul {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


body:has(
    #content.page-presets,
    #content.page-provisions,
    #content.page-virtualParameters,
    #content.page-files,
    #content.page-config,
    #content.page-permissions,
    #content.page-users
)
#side-menu > ul > li {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


body:has(
    #content.page-presets,
    #content.page-provisions,
    #content.page-virtualParameters,
    #content.page-files,
    #content.page-config,
    #content.page-permissions,
    #content.page-users
)
#side-menu > ul > li > a {

    display: block !important;

    width: 100% !important;

    margin: 3px 0 !important;

    padding:
        9px 10px !important;

    box-sizing:
        border-box !important;

    color:
        #555b63 !important;

    background:
        transparent !important;

    border-radius:
        7px !important;

    white-space:
        normal !important;

    text-decoration:
        none !important;
}


body:has(
    #content.page-presets,
    #content.page-provisions,
    #content.page-virtualParameters,
    #content.page-files,
    #content.page-config,
    #content.page-permissions,
    #content.page-users
)
#side-menu > ul > li.active > a {

    color:
        #bd0000 !important;

    background:
        #fff0f0 !important;

    font-weight:
        700 !important;
}


/* Conteudo admin */

body:has(
    #content.page-presets,
    #content.page-provisions,
    #content.page-virtualParameters,
    #content.page-files,
    #content.page-config,
    #content.page-permissions,
    #content.page-users
)
#content-wrapper > #content {

    grid-column:
        2 !important;

    width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;
}


/* ============================================================
   TITULOS
   ============================================================ */

body:not(:has(#content.page-login))
#content h1 {

    margin:
        0 0 18px 0 !important;

    color:
        var(--v2-text) !important;

    font-size:
        24px !important;

    font-weight:
        700 !important;
}


body:not(:has(#content.page-login))
#content h2 {

    color:
        #2c3035 !important;

    font-size:
        17px !important;
}


body:not(:has(#content.page-login))
#content h3 {

    color:
        #3b4046 !important;

    font-size:
        15px !important;
}


/* ============================================================
   TABELAS
   ============================================================ */

body:not(:has(#content.page-login))
table {

    width: 100%;

    border-collapse:
        separate;

    border-spacing:
        0;

    background:
        #ffffff;

    border:
        1px solid #ececef;

    border-radius:
        9px;

    overflow:
        hidden;
}


body:not(:has(#content.page-login))
table th {

    padding:
        10px 11px !important;

    background:
        #f7f8fa !important;

    color:
        #50555c !important;

    border-bottom:
        1px solid #e7e8eb !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;
}


body:not(:has(#content.page-login))
table td {

    padding:
        9px 11px !important;

    border-bottom:
        1px solid #eeeeef !important;

    vertical-align:
        middle !important;
}


body:not(:has(#content.page-login))
table tbody tr:hover {

    background:
        #fff8f8 !important;
}


/* ============================================================
   CAMPOS
   ============================================================ */

body:not(:has(#content.page-login))
input,

body:not(:has(#content.page-login))
select,

body:not(:has(#content.page-login))
textarea {

    border:
        1px solid #d9dce1 !important;

    border-radius:
        7px !important;

    background:
        #ffffff !important;

    box-sizing:
        border-box !important;

    outline:
        none !important;
}


body:not(:has(#content.page-login))
input:focus,

body:not(:has(#content.page-login))
select:focus,

body:not(:has(#content.page-login))
textarea:focus {

    border-color:
        #d00000 !important;

    box-shadow:
        0 0 0 2px rgba(208,0,0,.08) !important;
}


/* ============================================================
   BOTOES
   ============================================================ */

body:not(:has(#content.page-login))
button {

    border-radius:
        7px !important;

    font-weight:
        600 !important;

    transition:
        transform .12s ease,
        box-shadow .12s ease !important;
}


body:not(:has(#content.page-login))
button:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 3px 10px rgba(40,40,40,.09);
}


/* ============================================================
   PAGINA DO DISPOSITIVO
   ============================================================ */

body:not(:has(#content.page-login))
#content.page-device {

    padding:
        22px !important;
}


#content.page-device > h1 {

    padding-bottom:
        14px !important;

    border-bottom:
        1px solid #ededf0 !important;
}


/* blocos de informacoes */

#content.page-device .parameter-list,

#content.page-device .parameter-table,

#content.page-device .device-faults,

#content.page-device .all-parameters {

    margin:
        14px 0 !important;

    padding:
        14px !important;

    box-sizing:
        border-box !important;

    background:
        #ffffff !important;

    border:
        1px solid #e8e9ec !important;

    border-radius:
        10px !important;

    box-shadow:
        0 2px 10px rgba(30,40,60,.035);
}


/* valores */

#content.page-device
.parameter-value {

    font-weight:
        500;
}


/* ============================================================
   ACOES DO DISPOSITIVO
   ============================================================ */

#content.page-device
.device-actions {

    margin-top:
        18px !important;

    padding:
        13px !important;

    background:
        #f8f9fb !important;

    border:
        1px solid #e7e8eb !important;

    border-radius:
        9px !important;
}


/* ============================================================
   OVERVIEW
   ============================================================ */

#content.page-overview {

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


.page-overview
.overview-chart-group {

    display:
        grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(250px,1fr)
        ) !important;

    gap:
        18px !important;
}


.page-overview
.overview-chart {

    position:
        relative;

    min-width:
        0 !important;

    padding:
        20px !important;

    background:
        #ffffff !important;

    border:
        1px solid #e5e7eb !important;

    border-radius:
        13px !important;

    box-shadow:
        var(--v2-shadow) !important;
}


/* ============================================================
   BARRA VERMELHA DOS CARDS
   ============================================================ */

.page-overview
.overview-chart::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        20px;

    width:
        38px;

    height:
        4px;

    background:
        var(--v2-red);

    border-radius:
        0 0 5px 5px;
}


/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 1200px) {

    .page-overview
    .overview-chart-group {

        grid-template-columns:
            repeat(2,minmax(240px,1fr)) !important;
    }

}


@media (max-width: 850px) {

    body:not(:has(#content.page-login))
    #header {

        position:
            relative !important;

        width:
            100% !important;

        height:
            auto !important;

        min-height:
            auto !important;
    }


    body:not(:has(#content.page-login))
    #content-wrapper {

        width:
            100% !important;

        margin-left:
            0 !important;

        padding:
            12px !important;
    }


    .page-overview
    .overview-chart-group {

        grid-template-columns:
            1fr !important;
    }


    body:has(
        #content.page-presets,
        #content.page-provisions,
        #content.page-virtualParameters,
        #content.page-files,
        #content.page-config,
        #content.page-permissions,
        #content.page-users
    )
    #content-wrapper {

        display:
            block !important;
    }


    body:has(
        #content.page-presets,
        #content.page-provisions,
        #content.page-virtualParameters,
        #content.page-files,
        #content.page-config,
        #content.page-permissions,
        #content.page-users
    )
    #content-wrapper > #side-menu {

        width:
            100% !important;

        max-width:
            none !important;

        margin-bottom:
            12px !important;
    }

}