/*
 * Usabilidade global do Simulados (par do Public/pages/js/_Usabilidade.js).
 * So estados de interacao e entradas: nada aqui muda o layout em repouso, e nada anima
 * no primeiro desenho da pagina. Ritmo unico: 150ms para mudanca de estado, 220ms para
 * entrada, curva cubic-bezier(.2, .7, .3, 1). So opacity e transform animam.
 */

/* Trava de envio de form e controle ocupado (Usab.ocupar). Os controles do grupo ficam
   indisponiveis; o clicado mantem o tamanho e troca o texto por um spinner na cor do
   proprio texto (capturada em --usab-cor antes de o texto ficar transparente). */
.usab-carregando {
    pointer-events: none;
    opacity: .55;
    transition: opacity 150ms cubic-bezier(.2, .7, .3, 1);
}

.usab-carregando.usab-ativa {
    opacity: 1;
}

.usab-carregando.usab-ativa:not(.usab-inline) {
    color: transparent !important;
}

/* So quando o botao era static: um botao ja posicionado pelo tema (absolute, por
   exemplo) nao pode perder o posicionamento dele. */
.usab-carregando.usab-ativa.usab-posicionado {
    position: relative;
}

.usab-carregando.usab-ativa:not(.usab-inline) > * {
    visibility: hidden;
}

.usab-carregando.usab-ativa:not(.usab-inline)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--usab-cor, currentColor);
    border-right-color: transparent;
    border-radius: 50%;
    animation: usab-girar .7s linear infinite;
}

/* Link ou item de menu ocupado: o texto continua visivel e o spinner vem depois. */
.usab-carregando.usab-ativa.usab-inline::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid var(--usab-cor, currentColor);
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: middle;
    animation: usab-girar .7s linear infinite;
}

@keyframes usab-girar {
    to {
        transform: rotate(360deg);
    }
}

/* Clicavel que virou focavel: sem contorno no clique do mouse; o contorno do navegador
   aparece so na navegacao por teclado. */
.usab-clicavel:focus:not(:focus-visible) {
    outline: none;
}

/* Menu lateral. O tema pinta a:focus com o mesmo cinza do item ativo (main.css:
   #sidebar ul.sidebar-menu li a:focus), e um clique do mouse deixava um item com cara de
   "selecionado" sem ser a pagina atual. O realce de foco fica so para teclado. */
#sidebar ul.sidebar-menu li:not(.active) > a:focus:not(:focus-visible):not(:hover) {
    background: transparent;
}

#sidebar ul.sidebar-menu a:focus-visible,
#sidebar ul.sidebar-menu .master-menu:focus-visible {
    outline: 2px solid var(--theme-color, #09A5DF);
    outline-offset: -2px;
}

#sidebar ul.sidebar-menu li a,
#sidebar ul.sidebar-menu .master-menu,
#sidebar .selected-item {
    transition: background-color 150ms cubic-bezier(.2, .7, .3, 1), border-color 150ms cubic-bezier(.2, .7, .3, 1), color 150ms cubic-bezier(.2, .7, .3, 1);
}

/* Item do menu lateral clicado (Usab, navegacao): ganha o fundo de item selecionado na
   hora e um spinner na ponta, ate a pagina seguinte chegar. Com o menu recolhido o texto
   some, entao o spinner tambem. */
#sidebar a.usab-indo {
    position: relative;
    background-color: #E6E8F1 !important;
}

#sidebar a.usab-indo::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 2px solid var(--theme-color, #060181);
    border-right-color: transparent;
    border-radius: 50%;
    animation: usab-girar .7s linear infinite;
}

#container.sidebar-collapsed #sidebar a.usab-indo::after {
    display: none;
}

/* Submenu do menu lateral: ao abrir, os itens entram em sequencia (Usab poe a classe so
   no clique, entao o submenu ja aberto no carregamento da pagina nao anima). */
#sidebar .usab-sub-abrindo > .nav-sub .sub-a {
    animation: usab-sub-entrar 220ms cubic-bezier(.2, .7, .3, 1) both;
}

#sidebar .usab-sub-abrindo > .nav-sub .sub-a:nth-child(2) { animation-delay: 30ms; }
#sidebar .usab-sub-abrindo > .nav-sub .sub-a:nth-child(3) { animation-delay: 60ms; }
#sidebar .usab-sub-abrindo > .nav-sub .sub-a:nth-child(4) { animation-delay: 90ms; }
#sidebar .usab-sub-abrindo > .nav-sub .sub-a:nth-child(5) { animation-delay: 120ms; }
#sidebar .usab-sub-abrindo > .nav-sub .sub-a:nth-child(6) { animation-delay: 150ms; }
#sidebar .usab-sub-abrindo > .nav-sub .sub-a:nth-child(n+7) { animation-delay: 180ms; }

@keyframes usab-sub-entrar {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Menu lateral no celular: desliza da esquerda ao abrir. */
@media (max-width: 768px) {
    #sidebar.open {
        animation: usab-lateral-entrar 220ms cubic-bezier(.2, .7, .3, 1);
    }
}

@keyframes usab-lateral-entrar {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Barra de progresso de navegacao (Usab.progresso). Fina, na cor de destaque do cliente
   (--theme-color-2), logo abaixo do cabecalho: o JS calcula o top, porque o cabecalho e
   pintado com a cor principal e ela sumiria em cima dele. Aparece no clique de
   link, no envio de form e na saida da pagina, avanca rapido no comeco e desacelera;
   quem a tira de cena e a pagina seguinte. */
.usab-progresso {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 100000;
    pointer-events: none;
    background: var(--theme-color-2, var(--theme-color, #060181));
    box-shadow: 0 0 8px var(--theme-color-2, var(--theme-color, #060181));
    transform: scaleX(0);
    transform-origin: 0 50%;
    opacity: 0;
    transition: opacity 200ms cubic-bezier(.2, .7, .3, 1);
}

.usab-progresso.usab-progresso-ativo {
    opacity: 1;
    animation: usab-progresso-avancar 10s cubic-bezier(.1, .7, .2, 1) forwards;
}

.usab-progresso.usab-progresso-ativo.usab-progresso-fim {
    opacity: 0;
}

@keyframes usab-progresso-avancar {
    0% {
        transform: scaleX(0);
    }

    6% {
        transform: scaleX(.35);
    }

    25% {
        transform: scaleX(.62);
    }

    100% {
        transform: scaleX(.92);
    }
}

/* Menus suspensos. Os do tema sao Bootstrap 3 (.open no pai): descem 6px e surgem.
   .inner fica de fora porque o bootstrap-select aninha um .dropdown-menu dentro de
   outro, e os dois animariam juntos. Os do Bootstrap 5 (.show) so esmaecem: o Popper
   posiciona esses menus com transform, e animar transform os faria pular. */
.open > .dropdown-menu:not(.inner) {
    transform-origin: top center;
    animation: usab-descer 160ms cubic-bezier(.2, .7, .3, 1);
}

.dropup.open > .dropdown-menu:not(.inner) {
    transform-origin: bottom center;
    animation-name: usab-subir;
}

.dropdown-menu.show {
    animation: usab-surgir 160ms cubic-bezier(.2, .7, .3, 1);
}

.chosen-container.chosen-with-drop .chosen-drop {
    transform-origin: top center;
    animation: usab-descer 160ms cubic-bezier(.2, .7, .3, 1);
}

@keyframes usab-descer {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes usab-subir {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes usab-surgir {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.dropdown-menu > li > a,
.dropdown-menu .dropdown-item,
.chosen-container .chosen-results li {
    transition: background-color 150ms cubic-bezier(.2, .7, .3, 1), color 150ms cubic-bezier(.2, .7, .3, 1);
}

.open > .dropdown-toggle .caret {
    transform: rotate(180deg);
}

.dropdown-toggle .caret {
    transition: transform 150ms cubic-bezier(.2, .7, .3, 1);
}

/* Abas. O conteudo que entra sobe 6px e surge (Usab poe a classe no clique). A aba do
   Bootstrap recebe usab-aba-alvo antes de ficar ativa, porque com .fade ela so troca
   depois de 150ms; aba feita a mao recebe usab-aba-entrar no bloco que ficou visivel. */
.tab-pane.usab-aba-alvo.active,
.usab-aba-entrar {
    animation: usab-aba-entrar 220ms cubic-bezier(.2, .7, .3, 1);
}

@keyframes usab-aba-entrar {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.nav-tabs > li > a,
.nav-tabs > li > button,
.nav-tabs .nav-link,
.nav-pills > li > a,
.nav-pills .nav-link {
    transition: color 150ms cubic-bezier(.2, .7, .3, 1), background-color 150ms cubic-bezier(.2, .7, .3, 1), border-color 150ms cubic-bezier(.2, .7, .3, 1), box-shadow 150ms cubic-bezier(.2, .7, .3, 1);
}

/* Botao: afunda de leve enquanto esta pressionado. Usa a propriedade `scale`, que se
   soma ao transform que o botao ja tiver (botao centralizado com translate nao pula);
   navegador sem suporte simplesmente ignora. */
.btn:active:not(:disabled):not(.disabled):not(.usab-carregando) {
    animation: usab-pressionar 120ms cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes usab-pressionar {
    to {
        scale: .97;
    }
}

/* Campo em foco na cor do cliente (o padrao do Bootstrap e um azul que nao e de
   nenhum cliente). A primeira sombra e a reserva para navegador sem color-mix. */
.form-control:focus {
    border-color: var(--theme-color, #060181);
    box-shadow: 0 0 0 3px rgba(6, 1, 129, .12);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color, #060181) 16%, transparent);
}

/* Hover de linha de tabela acompanha o mesmo ritmo dos botoes (Bootstrap 5 ja faz isso
   nos .btn e nos .form-control). */
.table-hover > tbody > tr {
    transition: background-color 150ms cubic-bezier(.2, .7, .3, 1);
}

/* DataTables: paginacao com o mesmo ritmo, e o corpo da tabela surge quando ela se
   redesenha depois de uma acao da pessoa (pagina, busca, ordenacao). Redesenho sozinho,
   sem interacao recente, nao pisca. */
.dataTables_wrapper .paginate_button,
.dataTables_wrapper .pagination > li > a,
.dataTables_wrapper .page-link {
    transition: background-color 150ms cubic-bezier(.2, .7, .3, 1), color 150ms cubic-bezier(.2, .7, .3, 1), border-color 150ms cubic-bezier(.2, .7, .3, 1);
}

.usab-redesenho {
    animation: usab-redesenho 180ms cubic-bezier(.2, .7, .3, 1);
}

@keyframes usab-redesenho {
    from {
        opacity: .35;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .usab-carregando,
    #sidebar ul.sidebar-menu li a,
    #sidebar ul.sidebar-menu .master-menu,
    #sidebar .selected-item,
    .table-hover > tbody > tr,
    .dropdown-menu > li > a,
    .dropdown-menu .dropdown-item,
    .chosen-container .chosen-results li,
    .dropdown-toggle .caret,
    .nav-tabs > li > a,
    .nav-tabs > li > button,
    .nav-tabs .nav-link,
    .nav-pills > li > a,
    .nav-pills .nav-link,
    .dataTables_wrapper .paginate_button,
    .dataTables_wrapper .pagination > li > a,
    .dataTables_wrapper .page-link,
    .usab-progresso {
        transition: none !important;
    }

    #sidebar .usab-sub-abrindo > .nav-sub .sub-a,
    #sidebar.open,
    .open > .dropdown-menu:not(.inner),
    .dropdown-menu.show,
    .chosen-container.chosen-with-drop .chosen-drop,
    .tab-pane.usab-aba-alvo.active,
    .usab-aba-entrar,
    .btn:active:not(:disabled):not(.disabled):not(.usab-carregando),
    .usab-redesenho {
        animation: none !important;
    }

    /* Sem movimento, a barra de navegacao aparece inteira e parada. */
    .usab-progresso.usab-progresso-ativo {
        animation: none !important;
        transform: scaleX(1);
    }

    .usab-carregando.usab-ativa::after,
    .usab-carregando.usab-ativa.usab-inline::after,
    #sidebar a.usab-indo::after {
        animation-duration: 1s !important;
    }
}