@import url('https://fonts.googleapis.com/css?family=Ubuntu');

:root {
    --tblr-body-font-family: 'Ubuntu', Arial, sans-serif !important;
}

:root {
    --main-primary-color: #3A266B;
    --main-primary-color-hover: #744896;
    --main-primary-color-text: #FFFFFF;
    --main-secondary-color: #E85119;
    --main-secondary-color-hover: #F47920;
    --main-secondary-color-text: #FFFFFF;
    --tblr-body-bg: #FFFFFF;
    --sp-header-color: #E3E1E3;
    --sp-light-color: #F3F6F4;
    --main-detach-color: #FFFFFF;
    --main-counter-color: #E85119;
    --degrade1: #3A266B;
    --degrade2: #4A3779;
    --degrade3: #391C5F;
    /* Mappings to Standard Tabler/GLPI Variables */
    --tblr-primary: var(--main-primary-color);
    --tblr-primary-rgb: 358, 38, 107;
    --tblr-body-bg: var(--tblr-body-bg);
}


body {
    background-color: var(--tblr-body-bg) !important;
}

.btn-primary {
    background-color: var(--main-primary-color) !important;
    border-color: var(--main-primary-color) !important;
    color: var(--main-primary-color-text) !important;
}

.btn-primary:hover {
    background-color: var(--main-primary-color-hover) !important;
    border-color: var(--main-primary-color-hover) !important;
}

.navbar-light {
    background-color: var(--sp-header-color) !important;
}

/* Custom CSS */
@import url('https://fonts.googleapis.com/css?family=Ubuntu');

* {
	
    /*
    
    ============================================
     Unitá Soluções Digitais
     suporte@unitasolucoes.com.br
     Versão 25.02.11
    ============================================
    
    */
    
        /* BACKGROUND EXTERNO */
        --login-background: url('https://i.ibb.co/NwTyv4P/background.png');   

        /* DIVISOR*/
        --login-element-divisor: url('https://i.ibb.co/Nnxdnb2d/background.png');        

        /* ELEMENTO EXTERNO CANTO INFERIOR DIREITO*/
        --login-element-bottomright-corner: url('https://i.ibb.co/Ndt8WSJ6/Mulher-profissional-com-estilo-elegante.png');

        /* ELEMENTO EXTERNO CANTO SUPERIOR DIREITO*/
        --login-element-topright-corner: url('https://i.ibb.co/0RPZs2YX/slogan.png');

        /* LOGOTIPO EXTERNO */
        --login-logo-externo: url(https://express.unitasolucoes.com.br/pics/img/logo-externo.png) center/90% no-repeat;      

        /* LOGOTIPO INTERNO */
        --home-logo-interno: url(https://express.unitasolucoes.com.br/pics/img/logo-interno.png);
        
        /* LOGOTIPO RECOLHIDO */
        --home-logo-recolhido: url(https://express.unitasolucoes.com.br/pics/img/logo-recolhido.png);

        }
    

    
        :root {
        
           /* FONTE */
           --tblr-body-font-family: 'Ubuntu', Arial, sans-serif;
    
    }
        /* ENGINE DEGRADÊ - MENU LATERAL */
        aside.navbar.navbar-vertical.navbar-expand-lg.sticky-lg-top.sidebar {
              background: linear-gradient(
                180deg,
                var(--degrade1) 0%,
                var(--degrade2) 50%,
                var(--degrade3) 100%
              ) !important;
    }
    
        /* =============================== */
        /* POSICIONAMENTO DOS CAMPOS DE LOGIN */
        .welcome-anonymous .mb-3 {
            margin-top: 4em; /* Espaçamento acima dos campos de login */
        }

        /* =============================== */
        /* FUNDO E CONFIGURAÇÃO EXTERNA DO CARD */
        .welcome-anonymous {
            background: var(--login-background) repeat; /* Fundo da página */
            background-size: cover; /* Ajusta a imagem de fundo para cobrir */
            background-position-x: center; /* Centraliza horizontalmente */
            background-attachment: fixed; /* Fixa o fundo na rolagem */

        }

/* =============================== */
/* DIVISOR */
.welcome-anonymous::after {
    display: block;
    content: "";
    width: 2048px;
    height: 100vh;
    background-image: var(--login-element-divisor);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: left center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

        /* =============================== */
        /* AJUSTES PARA ELEMENTOS INTERNOS DO LAYOUT */
        .welcome-anonymous .col-auto {
            flex: 0 0 auto; /* Define flexibilidade dos elementos */
            width: auto; /* Define largura automática */
        }

        /* DIMINUI EXCESSO DE ESPAÇAMENTO ENTRE CAMPOS E COPYRIGHT */
                @media (min-width: 768px) {
            .card-md > .card-body {
                padding: 2.5rem;
                padding-top: 2.5rem;
                padding-right: 2.5rem;
                padding-bottom: 0rem;
                padding-left: 2.5rem;
            }
        }


        /* RETIRAR A BORDA DA TELA DE LOGIN */
        .card-header {
            border-bottom: none; /* Esta linha remove a borda inferior */
        }        
    
        .page-anonymous,
        .page-anonymous .glpi-logo {
            z-index: 1;
            position: relative;
        }
    
        /* INTERNO - LOGO RECOLHIDO */
        body.navbar-collapsed .navbar-brand .glpi-logo {
            background: var(--home-logo-recolhido) no-repeat !important;
            background-size: contain !important;
            width: 45px;
            height: 60px;
        }


        .page-anonymous .glpi-logo {
            display: none;
        }
    
    .page .glpi-logo {
        /*logo menu lateral ou superior*/
        background: var(--home-logo-interno) no-repeat;
        background-position-x: center;
        background-size: contain;
        height: 65px;
        width: 190px;
    }
    
     /* FORMCREATOR: Correção de cores de fundo (versão nova) */
     #plugin_formcreator_form.plugin_formcreator_form_design ol > .plugin_formcreator_section {
        background: #CCCCCC;
    }
    
    #plugin_formcreator_form.plugin_formcreator_form_design .grid-stack-item .grid-stack-item-content {
        background: #F0F0F0;
    }
    
    /* =============================== */
    /* AJUSTES GERAIS */


body.horizontal-layout header.navbar > .container,
body.horizontal-layout header.navbar > .container-fluid,
body.horizontal-layout header.navbar > .container-sm,
body.horizontal-layout header.navbar > .container-md,
body.horizontal-layout header.navbar > .container-lg,
body.horizontal-layout header.navbar > .container-xl,
body.horizontal-layout header.navbar > .container-xxl {
    display: none !important;
    background-color: transparent;
}
    
    /* FORMATAÇÃO TEXTO PRÉ-FORMATADO */
    pre {
        background: #ffffff;
        color: #000000;
        font-family: var(--tblr-body-font-family);
        padding: 12px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        border: 1px solid #ddd;
    }





	/* HIGHLIGHT NA ANCORAGEM */
    .highlight-anchor {
      outline: 3px solid #fca311;
      background-color: #fff8dc;
      transition: background-color 0.4s ease;
    }


    /* PLUGIN SINGLE SIGN-ON */
	input.submit, .vsubmit {
	color: #AAAAAA;
	}

    /* LOGO DASHBOARD */
    .dashboard.fullscreen .glpi_logo, .dashboard.embed .glpi_logo {
        background: var(--login-logo-externo);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }    
    
    .dashboard.theme-dark.fullscreen .glpi_logo, .dashboard.theme-dark.embed .glpi_logo, .theme-dark .dashboard.fullscreen .glpi_logo, .theme-dark .dashboard.embed .glpi_logo {
        background: var(--home-logo-interno);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* AJUSTE DE ALINHAMENTO DE CAIXAS DE SELEÇÃO */
    .select2-selection__rendered {
        text-align: left !important;
        direction: ltr !important; /* Prioriza o início do texto */
        text-overflow: ellipsis !important; /* Mantém os "..." */
        white-space: nowrap !important;
        overflow: hidden !important; /* Garante o truncamento */
    }

    /* OCULTAR BOTÃO DE CHECK DAS TAREFAS */
    /*.timeline-item .todo-list-state .state {
        display: none!important;
    }*/

    /* (COLRESIZER) COR DOS ÍCONES */
    .ui-icon, .ui-widget-content .ui-icon {
        background-image: none; /* Oculta a imagem */
    }
    
	/* (COLRESIZER) QUEBRA DE LINHA - STATUS */
	.text-nowrap {
    	white-space: normal!important;
	}

	/* OCULTAR BOTÃO KANBAN */
    a[title="Kanban global"] {
        display: none;
    }

    /* OCULTAR CATEGORIAS FORMCREATOR
    #plugin_formcreator_wizard_categories {
        display: none !important;
    }*/


    /* BOTÃO MICROSOFT */

    .divider {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 20px 0; /* Espaçamento superior e inferior */
        color: #5E5E5E; /* Cor do texto */
        font-family: 'Segoe UI', sans-serif; /* Fonte padrão */
        font-size: 14px; /* Tamanho do texto */
        font-weight: 600; /* Peso do texto */
    }
    
    .divider::before,
    .divider::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid #8C8C8C; /* Cor da linha */
        margin: 0 10px; /* Espaçamento entre a linha e o texto */
    }
    

    .custom-login-button {
        display: flex; /* Alinha ícone e texto horizontalmente */
        align-items: center; /* Alinha verticalmente */
        justify-content: center; /* Centraliza o conteúdo */
        height: 41px; /* Altura padrão */
        padding: 0 12px; /* Espaçamento interno */
        background-color: #FFFFFF; /* Fundo branco */
        border: 1px solid #8C8C8C; /* Borda cinza clara */
        border-radius: 5px; /* Bordas arredondadas */
        font-family: 'Segoe UI', sans-serif; /* Fonte padrão */
        font-size: 15px; /* Tamanho da fonte */
        font-weight: 600; /* Peso da fonte */
        color: #5E5E5E; /* Cor do texto */
        cursor: pointer; /* Aparece como botão clicável */
        width: 100%; /* Ocupa toda a largura disponível */
        text-align: center; /* Centraliza o texto */
        transition: background-color 0.2s ease; /* Suaviza mudanças de fundo */
    }
    
    .custom-login-button:hover {
        background-color: #f5f5f5; /* Leve mudança no hover */
    }
    
    .button-container {
        width: 100%; /* Garante a largura total */
        margin-top: 0; /* Remove qualquer margem superior */
        text-align: center; /* Centraliza horizontalmente o botão */
    }
    
    .button-content {
        display: flex; /* Alinha os itens horizontalmente */
        align-items: center; /* Centraliza os itens verticalmente */
        justify-content: center; /* Centraliza horizontalmente, se necessário */
    }
    
    .button-icon {
        width: 20px; /* Define a largura do ícone */
        height: 20px; /* Define a altura do ícone */
        margin-right: 12px; /* Espaçamento entre o ícone e o texto */
        display: inline-block; /* Garante comportamento inline */
        vertical-align: middle; /* Alinha a imagem verticalmente */
        filter: grayscale(100%); /* Aplica escala de cinza */
        transition: filter 0.3s ease; /* Suaviza a transição */
    }
    
    .custom-login-button:hover .button-icon {
        filter: grayscale(0%); /* Remove a escala de cinza no hover */
    }
    


    /* COPYRIGHT */
    .flex-fill.d-flex.flex-column.justify-content-center.py-4.mt-4 .text-center.text-muted.mt-3 .copyright {
        max-width: 42rem !important; /* Define a largura máxima */
        margin: 0 !important; /* Remove centralização global */
        text-align: center !important; /* Centraliza o texto dentro do elemento */
        padding: 1rem !important; /* Adiciona espaçamento interno */
        position: relative !important; /* Permite manipulação de posicionamento */
        left: 0 !important; /* Alinha o elemento à esquerda */
        transform: translateX(0) !important; /* Garante o alinhamento correto à esquerda */
    }

    /* Cor banner informações */
    .alert-info {
    --tblr-alert-color: var(--main-primary-color);
	}

	/* Ajuste página de forms */
    #plugin_formcreator_lastForms {
        display: none !important;
    }

    .plugin_formcreator_sort {
        display: none !important;
    }

    /* Ocultar os botões de documento */
    button.answer-action.action-document {
        display: none;
    }

	/* Cor de terminal no texto pré-formatado */
    code {
    background: #292929;
    color: #dedede;
    }

    /* Banner de info */
	.bg-info {
    background-color: var(--main-primary-color) !important;
}

    /* Fundo botão de pesquisa */
	.input-group-flat .input-group-text {
    background: #fff;
  
}

    /* FUNDO DO BOX "AÇÕES" */
    .bg-blue-lt {
        color: var(--main-secondary-color) !important;
        background: rgba(62, 196, 32, 0.05) !important;
    }    

	/* COR DE FUNDO DA CAIXA DE FILTROS */
    .search_page .search-container .search-form-container .search-form {
        background-color: var(--sp-light-color); 
    }
    
    /* Cor do cabeçalho */
    .navbar-light {
        background-color: var(--sp-header-color);
    }

    /* Cor da fonte do cabeçalho do formulário */
    .asset .card-header,
    .navigationheader .card-header,
    #page div.objectlockmessage .card-header,
    .qtip div.objectlockmessage .card-header,
    .modal .modal-body div.objectlockmessage .card-header {
        color: var(--main-primary-color);
    }

    /* Cor do cabeçalho do formulário */
    .asset .card-header, .navigationheader .card-header, #page div.objectlockmessage .card-header, .qtip div.objectlockmessage .card-header, .modal .modal-body div.objectlockmessage .card-header {
        background-color: var(--sp-light-color);
    }

    .asset .card-header:not(.main-header), .navigationheader .card-header:not(.main-header), #page div.objectlockmessage .card-header:not(.main-header), .qtip div.objectlockmessage .card-header:not(.main-header), .modal .modal-body div.objectlockmessage .card-header:not(.main-header) {
    border-top: none;

    }

    .sidebar,
    .topbar {
        /*cor menu lateral ou superior*/
        background-color: var(--main-primary-color);
        color: #fff;
        z-index: 1030;
    }
    
    .btn-primary,
    .btn-outline-primary,
    .btn-ghost-primary {
        /*botões primarios*/
        --tblr-btn-color: var(--main-primary-color);
        --tblr-btn-color-interactive: var(--main-primary-color-hover);
        --tblr-btn-color-text: var(--main-primary-color-text);
        --tblr-border-color-rgb: var(--sp-light-color)
        border: none;
    }
    
    .btn-secondary,
    .btn-outline-secondary,
    .btn-ghost-secondary {
        /*botões secundarios*/
        --tblr-btn-color: var(--main-secondary-color);
        --tblr-btn-color-interactive: var(--main-secondary-color-hover);
        --tblr-btn-color-text: var(--main-secondary-color-text);
    }
    
    .card-tabs #tabspanel.nav-tabs .nav-link .badge {
        /*contadores*/
        margin-left: 5px;
        background-color: var(--main-counter-color);
        color: var(--main-detach-color);
    }

    .ribbon.bg-blue {
        border-color: var(--main-secondary-color) !important;
    }

    .bg-blue {
        background: var(--main-secondary-color) !important; 
    }
    
    .page-anonymous .col-md-5 {
        flex: 0 0 auto;
        width: auto;
    }
    
    .page-anonymous .container-tight {
        width: 100%;
        padding-right: var(--tblr-gutter-x, 1.5rem);
        padding-left: var(--tblr-gutter-x, 1.5rem);
        margin-right: auto;
        margin-left: 20%;
        transform: translateX(-50%);
        max-width: 30rem !important;
    }
    
    .page-anonymous h2.mx-auto {
        margin-top: 10em;
    }
    
    .page-anonymous .card-header.mb-4 {
        background: var(--login-logo-externo) no-repeat;
        height: 6em;
    }
    
    /* Faça login para sua conta */ 
    .page-anonymous h2.mx-auto {
            visibility: hidden;
    }

    .page-anonymous .rich_text_container {
        margin-top: 3em;
    }
    
    .page-anonymous .card {
        --tblr-card-border-radius: 4px;
        box-shadow: none;
        border: transparent;
        background: transparent;
        border-radius: var(--tblr-card-border-radius);
        transition: transform 0.3s ease-out, opacity 0.3s ease-out, box-shadow 0.3s ease-out;
    }
    
    .page-anonymous .plugin_news_alert {
        width: 90%;
        border: none;
        position: relative;
        max-width: 800px;
        margin-left: -1em;
        margin-top: 20px;
    }
    
    .plugin_formcreator_formTile div:first-child {
        color: #000 !important;
        float: right;
        margin: 0 5px;
    }

    @media (min-width: 768px) {
        /* Imagem no canto superior direito */
        .page-anonymous::before {
            content: "";
            background-image: var(--login-element-topright-corner); /* Imagem do canto superior direito */
            background-size: contain; /* Garante que a imagem mantém proporções */
            background-repeat: no-repeat;
            background-position: top right; /* Alinha ao canto superior direito */
            position: fixed; /* Fixa no viewport */
            top: 80px; /* Margem superior */
            right: 20px; /* Margem à direita */
            width: 400px; /* Largura da imagem */
            height: 400px; /* Altura da imagem */
            z-index: 1; /* Garante que fique acima de outros elementos */
        }
    
        /* Imagem no canto inferior direito */
        .page-anonymous::after {
            content: "";
            background-image: var(--login-element-bottomright-corner); /* Imagem do canto inferior direito */
            background-size: contain; /* Garante que a imagem mantém proporções */
            background-repeat: no-repeat;
            background-position: bottom right; /* Alinha ao canto inferior direito */
            position: fixed; /* Fixa no viewport */
            bottom: 0px; /* Margem inferior */
            right: 250px; /* Margem à direita */
            width: 700px; /* Largura da imagem */
            max-width: 750px; /* Largura da imagem */
            height: 100vh; /* Altura da imagem */
            z-index: 1; /* Garante que fique acima de outros elementos */
        }
    }


        @media (max-width: 768px) {
        .page-anonymous div[style*="width: 350px"] {
            margin-left: auto !important;
            margin-right: 35% !important;
            width: 50% !important;
        }
        }



    .page-anonymous .plugin_news_alert {
        width: 26em;
        border: none;
        position: relative;
        max-width: 800px;
        margin-left: auto;
        margin-top: 20px;
    }
    
    .plugin_news_alert-login .expanded .plugin_news_alert-content {
        padding: 5px 15px;
        max-height: 300px;
        margin-left: -3em;
        overflow-y: auto;
        transition: max-height .25s ease-in;
        transition: padding .25s ease-in;
    }

    /* RESPONSIVIDADE */
    @media (min-width: 992px) {
        body.navbar-collapsed .sidebar #navbar-menu .nav-item .nav-link + .dropdown-menu .dropdown-item.active {
            background-color: var(--sp-light-color);
        }
    }
    
    @media (max-width:880px) {    
        .page-anonymous .container-tight {
            margin: auto !important;
            transform: none !important;
        }
    
        .welcome-anonymous::before {
            width: 100% !important; /* Garante que o card ocupe toda a largura */
            transform: none !important;
            border: none !important; /* Remove bordas ou divisores */
            background-image: none !important; /* Remove a imagem do divisor */
            left: 0 !important; /* Centraliza o card */
            top: 0 !important;
        }
    }
    
    @media (min-width:881px) {
        .welcome-anonymous::before {
            background-image: var(--login-element-divisor); /* Mostra o divisor apenas em desktops */
            background-size: 40px 100%; /* Ajusta a largura do divisor */
            background-position: left center; /* Posiciona na lateral esquerda */
            left: -55%; /* Ajuste para desktops */
        }
    }

    @media (max-width: 880px) 
        .welcome-anonymous::after {
            display: none; /* Oculta o divisor em dispositivos móveis */
        }
    


/* =============================== */
/* EFEITOS VISUAIS */

/* Efeito de Entrada com Fade + Deslocamento lateral nos cantos */
.page-anonymous::before {
    animation: slideInLeftFade 1.2s ease-out;
}

.page-anonymous::after {
    animation: slideInRightFade 1.2s ease-out;
}

@keyframes slideInLeftFade {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRightFade {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Efeito Fade-In geral */
.welcome-anonymous,
.welcome-anonymous::before,
.welcome-anonymous::after {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Foco nos Campos de Entrada (mb-3 e mb-4) */
.welcome-anonymous .mb-3 input:focus,
.welcome-anonymous .mb-4 input:focus {
    border: 2px solid var(--main-primary-color);
    box-shadow: 0 0 10px rgba(0, 31, 172, 0.5);
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

/* Botão Principal com efeito moderno */
.page-anonymous .btn-primary {
    background-color: var(--main-primary-color);
    color: #fff;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.55rem 1.25rem;
    border: none;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.page-anonymous .btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    transform: skewX(-25deg);
    transition: left 0.5s ease;
    pointer-events: none;
}

.page-anonymous .btn-primary:hover {
    background-color: var(--main-primary-color-hover);
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}

.page-anonymous .btn-primary:hover::after {
    left: 125%;
}

/* Botões de Login com Microsoft - mesmo efeito de hover */
.page-anonymous a.oauth-login {
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
    border-radius: 6px;
    font-weight: 500;
}

.page-anonymous a.oauth-login::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    transform: skewX(-25deg);
    transition: left 0.5s ease;
    pointer-events: none;
}

.page-anonymous a.oauth-login:hover {
    box-shadow: 0 5px 10px rgba(0,0,0,0.12);
}

.page-anonymous a.oauth-login:hover::after {
    left: 125%;
}