/* RoControle - identidade visual Reis Office */
:root {
    --sidebar-width: 250px;
    --color-bg-main: #FAFAFA;
    --color-bg-soft: #EEF5F2;
    --color-bg-light: #EEF0F2;
    --color-white: #FFFFFF;
    --color-primary-dark: #003233;
    --color-primary-darker: #002E30;
    --color-primary-deep: #00292A;
    --color-primary: #00857D;
    --color-primary-alt: #005651;
    --color-primary-muted: #0E4A48;
    --color-primary-text: #2C3A39;
    --color-accent: #00CEBC;
    --color-lime: #D2F600;
    --color-lime-alt: #D2F624;
    --color-green-soft: #CDE6C6;
    --color-teal-soft: #BCD3D0;
    --gradient-primary: radial-gradient(87.29% 120.42% at 100% 90.15%, #37896F 13.33%, #20716B 41.99%, #0E4A48 84.42%);
    --color-shell-teal: #287D79;
}

/* Base e conteudo */
body,
body.theme-cyan,
body.hold-transition {
    background-color: var(--color-bg-main);
    color: var(--color-primary-text);
}

body.theme-cyan section.content,
body.hold-transition .content-wrapper,
body.hold-transition section.content {
    background-color: var(--color-bg-main);
}

section.content .container-fluid {
    padding-bottom: 24px;
}

.block-header h2,
.content-header h1,
.card .header h2,
.box-header h3 {
    color: var(--color-primary-dark);
}

.block-header small,
.content-header h1 small,
.card .header h2 small {
    color: var(--color-primary-text);
}

/* Login */
body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 32px 16px;
    background-color: var(--color-primary-dark);
    background-image: var(--gradient-primary);
    overflow-x: hidden;
}

.login-page .login-box {
    width: 360px;
    max-width: 100%;
    margin: auto;
}

.login-page .login-box .logo {
    margin-bottom: 24px;
}

.login-page .login-box .logo .brand-logo {
    display: block;
    width: 280px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.login-page .login-box .card {
    margin-bottom: 0;
    background: var(--color-primary);
    border: 1px solid rgba(0, 206, 188, 0.18);
    border-radius: 8px;
    box-shadow: 0 20px 48px rgba(0, 26, 27, 0.28);
}

.login-page .login-box .card .body {
    padding: 32px;
    color: var(--color-bg-light);
}

.login-page .login-box .msg {
    color: var(--color-bg-light);
    margin-bottom: 26px;
}

.login-page .login-box .input-group {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    border: 0;
    border-radius: 4px;
    background: var(--color-white);
    overflow: hidden;
}

.login-page .login-box .input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2;
    flex: 0 0 42px;
    width: 42px;
    height: 36px;
    padding: 0;
    background: var(--color-primary-dark);
    color: var(--color-bg-light);
}

.login-page .login-box .input-group-addon .material-icons {
    font-size: 20px;
    color: var(--color-bg-light);
}

.login-page .login-box .input-group .form-line {
    order: 1;
    flex: 1;
    min-width: 0;
    border: 0;
}

.login-page .login-box .form-line::after {
    border-bottom-color: var(--color-bg-light);
}

.login-page .login-box .form-control {
    padding-left: 12px;
    color: var(--color-primary-text);
}

.login-page .login-box .form-control::placeholder {
    color: var(--color-primary-text);
    opacity: 0.72;
}

.login-page .login-box a {
    color: var(--color-bg-light);
}

.login-page .login-box a:hover,
.login-page .login-box a:focus {
    color: var(--color-white);
}

.login-page .login-box .btn.entrar,
.login-page .login-box .btn.entrar:hover,
.login-page .login-box .btn.entrar:focus {
    background-color: var(--color-bg-light) !important;
    color: var(--color-primary-dark) !important;
}

.login-page .login-box small[style] {
    color: var(--color-bg-light) !important;
}

/* Barra superior AdminBSB */
body.theme-cyan .navbar {
    background: var(--color-shell-teal);
    box-shadow: 0 2px 8px rgba(0, 41, 42, 0.18);
}

body.theme-cyan .navbar .navbar-brand {
    padding-top: 8px;
    padding-bottom: 8px;
}

body.theme-cyan .navbar .navbar-brand .brand-logo {
    display: block;
    width: 190px;
    max-width: 100%;
    height: 44px;
    object-fit: contain;
    object-position: left center;
}

body.theme-cyan .navbar .navbar-nav > li > a,
body.theme-cyan .navbar .bars,
body.theme-cyan .navbar .navbar-toggle {
    color: var(--color-white);
}

body.theme-cyan .navbar .navbar-nav > li > a:hover,
body.theme-cyan .navbar .navbar-nav > li > a:focus {
    background-color: var(--color-primary-alt);
}

/* Menu lateral AdminBSB */
body.theme-cyan #leftsidebar.sidebar,
body.theme-cyan #leftsidebar .menu,
body.theme-cyan #leftsidebar .legal {
    background: var(--color-shell-teal);
}

body.theme-cyan #leftsidebar.sidebar {
    width: var(--sidebar-width);
}

body.theme-cyan:not(.ls-closed) section.content {
    margin-left: calc(var(--sidebar-width) + 15px);
}

body.theme-cyan #leftsidebar .user-info {
    background: linear-gradient(135deg, #164F59 0%, #226E69 58%, #378E75 100%) !important;
    border-bottom: 1px solid rgba(0, 206, 188, 0.25);
}

body.theme-cyan #leftsidebar .user-info .name,
body.theme-cyan #leftsidebar .user-info .email,
body.theme-cyan #leftsidebar .user-info .user-helper-dropdown {
    color: var(--color-white);
}

body.theme-cyan #leftsidebar .menu .list .header {
    background: var(--color-primary-muted);
    color: var(--color-lime);
}

body.theme-cyan #leftsidebar .menu .list a,
body.theme-cyan #leftsidebar .menu .list a span,
body.theme-cyan #leftsidebar .menu .list a .material-icons {
    color: var(--color-white);
}

body.theme-cyan #leftsidebar .menu .list li > a:hover,
body.theme-cyan #leftsidebar .menu .list li > a:focus,
body.theme-cyan #leftsidebar .menu .list .toggled {
    background: var(--color-primary-alt);
}

body.theme-cyan #leftsidebar .menu .list li.active > :first-child {
    background: var(--color-primary-muted);
    border-left: 3px solid var(--color-lime);
}

body.theme-cyan #leftsidebar .menu .list .ml-menu {
    background: rgba(0, 46, 48, 0.18);
}

body.theme-cyan #leftsidebar .legal {
    border-top: 1px solid rgba(0, 206, 188, 0.25);
    color: var(--color-teal-soft);
}

body.theme-cyan #leftsidebar .legal a {
    color: var(--color-white) !important;
}

body.theme-cyan #leftsidebar .legal .version {
    color: var(--color-teal-soft);
}

/* Cards e indicadores */
section.content .card,
section.content .info-box,
section.content .info-box-2,
section.content .info-box-3,
section.content .info-box-4 {
    border-radius: 8px;
    box-shadow: 0 5px 18px rgba(0, 46, 48, 0.08);
}

section.content .card {
    background: var(--color-white);
    border: 1px solid rgba(0, 46, 48, 0.08);
}

section.content .card .header {
    border-bottom: 1px solid var(--color-bg-light);
}

section.content .info-box-2.bg-indigo {
    background-color: var(--color-primary-alt) !important;
}

section.content .info-box-2.bg-cyan {
    background-color: var(--color-primary) !important;
}

section.content .info-box-2.bg-indigo .content .text,
section.content .info-box-2.bg-indigo .content .number,
section.content .info-box-2.bg-cyan .content .text,
section.content .info-box-2.bg-cyan .content .number {
    color: var(--color-white);
}

section.content .info-box-4 {
    background: var(--color-white);
}

.dashboard-installation-values {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.dashboard-installation-values .material-symbols-outlined {
    flex: 0 0 auto;
    line-height: 1;
    cursor: help;
}

i.material-symbols-outlined[data-toggle="tooltip"] {
    font-size: 20px !important;
    line-height: 1;
    vertical-align: middle !important;
    cursor: help;
}

/* Formularios: foco e leitura, sem alterar botoes */
.form-group .form-line::after,
.input-group .form-line::after {
    border-bottom-color: var(--color-primary);
}

.form-control:focus,
.dataTables_wrapper input[type="search"]:focus,
.dataTables_wrapper select:focus {
    border-color: var(--color-primary);
}

.bootstrap-select .dropdown-toggle:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--color-primary);
}

/* Tabelas e DataTables */
section.content .table,
section.content table.dataTable {
    color: var(--color-primary-text);
}

section.content .table thead,
section.content table.dataTable thead {
    background: var(--color-bg-soft);
}

section.content .table thead th,
section.content table.dataTable thead th,
section.content table.dataTable thead td {
    color: var(--color-primary-dark);
    border-bottom-color: var(--color-teal-soft);
}

section.content .table > tbody > tr > td,
section.content table.dataTable tbody td {
    border-top-color: var(--color-bg-light);
}

section.content .table-hover > tbody > tr:hover,
section.content table.dataTable tbody > tr:hover {
    background: var(--color-bg-soft);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--color-primary-text);
}

.dataTables_wrapper .pagination > .active > a,
.dataTables_wrapper .pagination > .active > span,
.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Abas, status e janelas */
.nav-tabs > li > a {
    color: var(--color-primary-text);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--color-primary-dark);
    border-bottom-color: var(--color-accent);
}

.label,
.badge {
    border-radius: 4px;
}

.modal-header {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.modal-header .modal-title,
.modal-header .close {
    color: var(--color-white);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--color-bg-soft);
    color: var(--color-primary-dark);
}

/* Templates AdminLTE antigos */
body.skin-blue .main-header .navbar,
body.skin-red .main-header .navbar,
body.skin-blue .main-header .logo,
body.skin-red .main-header .logo {
    background: var(--color-primary-dark);
}

body.skin-blue .main-sidebar,
body.skin-red .main-sidebar,
body.skin-blue .main-sidebar .sidebar,
body.skin-red .main-sidebar .sidebar {
    background: var(--color-primary-deep);
}

body.skin-blue .main-sidebar a,
body.skin-red .main-sidebar a {
    color: var(--color-white);
}

body.skin-blue .main-sidebar li.active > a,
body.skin-red .main-sidebar li.active > a {
    background: var(--color-primary-muted);
    border-left-color: var(--color-lime);
}

body.skin-blue .main-sidebar li > a:hover,
body.skin-red .main-sidebar li > a:hover {
    background: var(--color-primary-alt);
}

.content-wrapper .box {
    background: var(--color-white);
    border-color: var(--color-teal-soft);
    box-shadow: 0 5px 18px rgba(0, 46, 48, 0.08);
}

.content-wrapper .box-header {
    border-bottom: 1px solid var(--color-bg-light);
}

.content-wrapper .box-body {
    color: var(--color-primary-text);
}

@media (max-width: 767px) {
    body.login-page {
        padding: 24px 16px;
    }

    .login-page .login-box .card .body {
        padding: 24px 20px;
    }

    body.theme-cyan .navbar .navbar-brand .brand-logo {
        width: 160px;
    }

    section.content .table-responsive {
        overflow-x: auto;
    }
}


.bg-blue {
    background-color: var(--color-primary) !important;
}

button.btn.btn-primary.pull-right {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

button.btn.btn-primary.pull-right:hover {
    background-color: var(--color-primary-alt) !important;
    color: var(--color-white) !important;
}

button.btn.btn-primary.dropdown-toggle {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-white) !important;
}

button.btn.btn-primary{
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

a.btn.btn-primary.collapsed,
a.btn.btn-primary:hover,
a.btn.btn-primary:focus,
a.btn.btn-primary:active {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
}

a.dt-button.buttons-excel.buttons-html5 {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-white) !important;
}

#btnRel {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-white) !important;
}

#relatorio_contadores,
#relatorio_contadores:hover,
#relatorio_contadores:focus,
#relatorio_contadores:active {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
    box-shadow: none !important;
}

.info-box-4 {
    position: relative;
    min-height: 100px;
}

.info-box-4 .icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    text-align: center;
}

.info-box-4 .content {
    margin-right: 55px;
}

/* Deixa os cards mais largos, reduzindo o espaço entre eles */
@media (min-width: 1201px) {
    .col-lg-3 {
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media (max-width: 1200px) {
    .info-box-4 {
        min-height: 100px;
    }

    .info-box-4 .icon {
        right: 10px;
        width: 45px;
    }

    .info-box-4 .content {
        margin-right: 55px;
    }

    .info-box-4 .icon .material-icons {
        font-size: 32px;
    }
}

/* ========================================
   INFO BOX 4 - ÍCONES
   ======================================== */

.info-box-4 {
    position: relative;
    min-height: 100px;
    overflow: hidden;
}

.info-box-4 .content {
    margin-right: 72px !important;
    padding-right: 0 !important;
}

.info-box-4 .icon {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;

    width: 48px !important;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 2;
}

.info-box-4 .icon .material-icons {
    font-size: 44px !important;
    line-height: 1;
}

/* Cards dentro do col-lg-6 */
.col-lg-6 > .col-lg-4 .info-box-4 .icon {
    right: 12px !important;
    width: 48px !important;
}

.col-lg-6 > .col-lg-4 .info-box-4 .content {
    margin-right: 72px !important;
}

/* Responsivo */
@media (max-width: 1200px) {

    .info-box-4 .icon {
        right: 10px !important;
        width: 44px !important;
        height: 44px;
    }

    .info-box-4 .icon .material-icons {
        font-size: 40px !important;
    }

    .info-box-4 .content {
        margin-right: 65px !important;
    }
}


/* ========================================
   CARDS DENTRO DO COL-LG-6
   ======================================== */

.col-lg-6 > .col-lg-4 {
    padding-left: 4px;
    padding-right: 4px;
}

.col-lg-6 > .col-lg-4 .info-box-4 {
    min-height: 100px;
}

.col-lg-6 > .col-lg-4 .info-box-4 .icon {
    right: 10px;
    top: 55%;
    width: 45px;
}

.col-lg-6 > .col-lg-4 .info-box-4 .content {
    margin-right: 55px;
    padding-right: 5px;
}

.col-lg-6 > .col-lg-4 .info-box-4 .text {
    white-space: nowrap;
}


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

@media (max-width: 1200px) {

    .col-lg-6 > .col-md-4 {
        padding-left: 4px;
        padding-right: 4px;
    }

    .col-lg-6 > .col-md-4 .info-box-4 {
        min-height: 100px;
    }

    .col-lg-6 > .col-md-4 .info-box-4 .icon {
        right: 8px;
        top: 55%;
        width: 40px;
    }

    .col-lg-6 > .col-md-4 .info-box-4 .content {
        margin-right: 50px;
    }

    .col-lg-6 > .col-md-4 .info-box-4 .icon .material-icons {
        font-size: 32px;
    }
}



/* ========================================
   LICENCA E CONTADORES BOTOES ORGANIZACAO
   ======================================== */

.col-md-6.col-sm-6.col-xs-1 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.col-md-6.col-sm-6.col-xs-1 .btn {
    float: none !important;
    margin: 0 !important;
}


.col-md-6.col-sm-6.col-xs-1 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.col-md-6.col-sm-6.col-xs-1 .btn {
    float: none !important;
    margin: 0 !important;
}