@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif');

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

        /* DIVISOR*/
        --login-element-divisor: url('');        

        /* ELEMENTO EXTERNO CANTO INFERIOR DIREITO*/
        --login-element-bottomright-corner: url('/pics/img/corner-bottomright.png');

        /* ELEMENTO EXTERNO CANTO SUPERIOR DIREITO*/
        --login-element-topright-corner: url('');

        /* LOGOTIPO EXTERNO */
        --login-logo-externo: url(/pics/img/logo-externo.png) center/contain no-repeat;

        /* LOGOTIPO INTERNO */
        --home-logo-interno: url(/pics/img/logo-interno.png);
        
        /* LOGOTIPO RECOLHIDO */
        --home-logo-recolhido: url(/pics/img/logo-recolhido.png);

        }
    

    
        :root {
    
        /* CORES */
        /* CORES PRIMÁRIAS */
        --main-primary-color: #316962;			        /* cor principal */
        --main-primary-color-hover: #dd720f; 	        /* passar o mouse */
        --main-primary-color-text: #fff; 		        /* texto */
    
        /* CORES SECUNDÁRIAS */
        --main-secondary-color: #dd720f;			/* cor principal */
        --main-secondary-color-hover: #316962;		/* passar o mouse */
        --main-secondary-color-text: #fff;			/* texto */
        --tblr-body-bg: #fff;                       /* cor de fundo da página */
        --sp-header-color: #D9D9D6; 				/* cor do cabeçalho */
        --sp-light-color: #f7f7f7;					/* cor clara */
    
        /* CORES DE DESTAQUE */
        --main-detach-color: #fff;				/* separador */
        --main-counter-color: #edcf5a;			/* contadores */
          
        /* CORES DO DEGRADÊ - MENU LATERAL */
        --degrade1: #316962;
        --degrade2: #316962;
        --degrade3: #114740;
    
           /* FONTE */
           --tblr-body-font-family: 'Roboto Slab', sans-serif;
    
    }
        /* ENGINE DEGRADÊ - MENU LATERAL */
        aside.navbar.navbar-vertical.navbar-expand-lg.sticky-lg-top.sidebar {
              background: linear-gradient(
                0deg,
                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 */

        }

        /* =============================== */
        /* ESTRUTURA DO DIVISOR E CARD BRANCO */
        .welcome-anonymous::before {
            display: block;
            content: "";
            width: 100%; /* Largura total */
            height: 150vh; /* Altura total */
            background-color: #FFF; /* Cor de fundo do card */
            background-image: var(--login-element-divisor); /* Imagem do divisor */
            background-repeat: no-repeat; /* Não repete a imagem */
            background-size: 40px 100%; /* Define a largura fixa do divisor e altura total */
            background-position: left center; /* Alinha o divisor à esquerda */
            position: fixed; /* Fixa o elemento na tela */
            top: -10vh; /* Desloca para cima */
            left: -55%; /* Posiciona a estrutura à esquerda */
            opacity: 0.99; /* Transparência do card */
            z-index: 0; /* Fica no fundo */
        }

        /* =============================== */
        /* DIVISOR */
        .welcome-anonymous::after {
            display: block;
            content: "";
            width: 60px; /* Largura fixa do divisor */
            height: 150vh; /* Altura total do divisor */
            background-image: var(--login-element-divisor); /* Imagem do divisor */
            background-repeat: no-repeat; /* Repetir a imagem */
            background-size: contain; /* Mantém proporções da imagem */
            background-position: center; /* Centraliza a imagem dentro do elemento */
            position: fixed; /* Fixa o divisor na tela */
            top: -10vh; /* Alinha com o topo do card */
            left: calc(-55.001% + 100%); /* Posiciona ao lado direito do ::before */
            z-index: 1; /* Garante visibilidade sobre o fundo */
        }

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


        /* 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: 60px;
        margin-top: 15px;
        margin-bottom: 10px;
        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;
    }
    
    /* Link ativo ou com dropdown aberto */
    .sidebar #navbar-menu .nav-item .nav-link.show,
    .sidebar #navbar-menu .nav-item .nav-link.active {
        border-left-color: color-mix(in srgb, var(--main-counter-color) 30%, transparent);
        color: var(--main-counter-color);
    }

    /* Dropdown-item quando o link está ativo ou com dropdown aberto e hover */
    .sidebar #navbar-menu .nav-item .nav-link.active + .dropdown-menu .dropdown-item:hover,
    .sidebar #navbar-menu .nav-item .nav-link.show + .dropdown-menu .dropdown-item:hover {
        border-left-color: var(--main-counter-color);
        color: var(--main-counter-color);
    }

    /* Dropdown-item ativo */
    .sidebar #navbar-menu .nav-item .nav-link.active + .dropdown-menu .dropdown-item.active,
    .sidebar #navbar-menu .nav-item .nav-link.show + .dropdown-menu .dropdown-item.active {
        border-left-color: color-mix(in srgb, var(--main-counter-color) 30%, transparent);
    }

    /* Hover no item principal */
    .sidebar #navbar-menu .nav-item:hover .nav-link {
        border-left-color: var(--main-counter-color);
        color: var(--main-counter-color);
        background-color: rgba(0, 0, 0, 0.1);
    }

    /* =============================== */
    /* AJUSTES GERAIS */

    /* 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 */
    }

    /* (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;
    }


    /* 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 o botão de escalonamento */
    button.answer-action.action-escalation {
        display: none;
    }

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

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

    /* Banner de info */
	.bg-info {
    background-color: var(--main-secondary-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);
        text-shadow: 0 1px 2px rgba(0,0,0,0.25);       /* sombra leve */
    }

    /* 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-secondary-color);
        color: #fff;
        z-index: 1030;
    }
    
    /* Botões primários */
    .btn-primary,
    .btn-outline-primary,
    .btn-ghost-primary {
        --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;
    }

    /* Botões secundários */
    .btn-secondary,
    .btn-outline-secondary,
    .btn-ghost-secondary {
        --tblr-btn-color: var(--main-secondary-color);
        --tblr-btn-color-interactive: var(--main-secondary-color-hover);
        --tblr-btn-color-text: var(--main-primary-color-text);
    }

    
    .card-tabs #tabspanel.nav-tabs .nav-link .badge {
        /*contadores*/
        margin-left: 5px;
        background-color: var(--main-counter-color);
        color: var(--main-secondary-color-text);
    }

    .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: 5em;
    }
    
    /* 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;
        z-index: 2;

    }
    
    .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 com rotação e zoom suave */
    .page-anonymous::before {
        content: "";
        background-image: var(--login-element-topright-corner); /* Imagem do canto superior direito */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top right;
        position: fixed;
        top: 20px;
        right: 20px;
        width: 140vh;
        height: 140vh;
        z-index: -1 !important;
        animation: girarZoom 300s infinite linear; /* Duração longa e efeito contínuo */
        transform-origin: center; /* Ponto de rotação no centro */
    }

    /* Animação de rotação + zoom suave */
    @keyframes girarZoom {
        0% {
            transform: rotate(0deg) scale(1);
        }
        50% {
            transform: rotate(180deg) scale(1.02);
        }
        100% {
            transform: rotate(360deg) scale(1);
        }
    }

    
        /* 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: 0px; /* Margem à direita */
            width: 650px; /* Largura da imagem */
            height: 100vh; /* Altura da imagem */
            z-index: 1; /* Garante que fique acima de outros elementos */
        }
    }   
    

    .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 */
        }
    
        .welcome-anonymous::before {
            width: 100% !important; /* Ajusta a largura do card */
            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;
        }
    }    

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

/* 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); /* Borda em destaque */
    box-shadow: 0 0 10px rgba(0, 31, 172, 0.5); /* Efeito de luz ao focar */
    transition: border 0.3s ease, box-shadow 0.3s ease;
}