/* Variáveis */

:root {
    /* Paleta do Bulma. */

    /* Paleta do site farinha.info */

    --bulma-primary: hsl(189, 54%, 48%, 1);

    /* 0.5 rem */
    --bulma-size-8: calc(var(--bulma-size-6) / 2);

    /* 0.25 rem */
    --bulma-size-9: calc(var(--bulma-size-6) / 4);

    /* /Paleta do site farinha.info */

    --webapp-navbar-width: 20vw;
}

/* Classes helper */

.absolute-toast {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.overflowy {
    overflow-y: auto;
}

.is-vertical {
    display: flex;
    flex-direction: column;
}

/* region GLOBAL */

/* Reconfigura o hr padrão do bulma para valores normais */
hr {
    background-color: var(--bulma-body-color);
    width: 100%;
    height: 1px;
    margin: var(--bulma-size-6) 0;
}

.section.main-content {
    /* espaço para o conteúdo ao lado do menu, quando em modo vertical */
    @media (min-width: 1024px) {
        margin-left: var(--webapp-navbar-width);
    }
    @media (max-width: 1023px) {
        margin-left: 0;
    }
}

/* Quando quisermos listas com decoração e espaçamento originais */
ul.normal-ul {
    list-style: initial;
    padding-left: 1rem;
}

/* Preventivamente esconde pedaços de html que serão revelados posteriormente pelo Alpine.js */
[x-cloak] {
    display: none !important;
}

.is-fullwidth {
    width: 100%;
}

/* Re-adiciona a borda de cima para td quando são filhos do último tr duma tabela */
tr.table-field > td.last-child-top-border {
    border-top-width: 1px;
}

/* Marquee ping-pong para textos longos */

.marquee-container {
    overflow: hidden;
    max-width: 100%;
}

.marquee-text {
    display: inline-block;
    white-space: nowrap;
}

/* Só anima quando tem a classe .is-overflowing */
.marquee-text.is-overflowing {
    animation: marquee-pingpong var(--marquee-duration, 8s) ease-in-out infinite;
}

@keyframes marquee-pingpong {
    0%,
    10% {
        transform: translateX(0);
    }
    40%,
    60% {
        transform: translateX(var(--marquee-offset, -50%));
    }
    90%,
    100% {
        transform: translateX(0);
    }
}

/* Pausa animação no hover */
.marquee-container:hover .marquee-text {
    animation-play-state: paused;
}

/* endregion */

/* region SIDEBAR */

aside.menu.sidebar {
    position: fixed;
    left: 0;
    overflow-y: auto;
    padding: 1rem;
    background-color: var(--bulma-light);
    flex-direction: column;
    gap: 0.25rem;
}

/* Desktop: aside fixo à esquerda, altura total */
@media (min-width: 1024px) {
    aside.menu.sidebar {
        top: 0;
        width: var(--webapp-navbar-width);
        max-width: 22rem;
        height: 100vh;
        display: flex;
    }
}

/* Mobile: aside oculto por padrão, exibido quando .mobile-open */
@media (max-width: 1023px) {
    .sidebar-mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 40;
    }

    .section.main-content {
        margin-top: 0; /* topbar já faz parte do fluxo normal */
    }

    aside.menu.sidebar {
        display: none;
        top: 52px; /* altura da topbar mobile */
        right: 0;
        bottom: 0;
        z-index: 30;
    }

    aside.menu.sidebar.mobile-open {
        display: flex;
    }
}

/* Logo no topo do sidebar desktop */
a.sidebar-logo {
    display: block;
    margin-bottom: 1rem;
}

/* Seletor de idioma */
.sidebar-language-selector {
    margin-top: auto; /* empurra para o final do flex container */
    padding-top: 0.5rem;
}

/* Árvore de instituições — toggle + link em linha */
.institution-menu {
    flex-grow: 1;
    overflow-y: auto;

    & li > a {
        display: flex;
        align-items: baseline;
        background-color: transparent;
        padding: 0;
    }

    & li > ul {
        /* Remove margem geral para ul, resultando somente nas margens y adicionadas por .my-2 */
        margin: 0;
    }

    & .institution-toggle {
        flex-shrink: 0;
        cursor: pointer;
    }
}

.collapsible {
    overflow: hidden;
    height: 0;
    transition: height 0.3s ease-out;
}

.collapsible.expanded {
    height: auto;
}

/* endregion */

/* region VIEWS: Detalhes */

/* INSTITUTION */

.main-content {
    & tr.table-section {
        --bulma-table-cell-border-width: 1px; /* bordas totais para linhas de titulo */

        & > td {
            color: var(--bulma-primary);
            font-size: var(--bulma-size-large);
        }
    }

    & tr.table-field {
        --bulma-table-cell-border-width: 0 1px 0 1px; /* bordas laterais para os campos nas linhas normais */

        & > .table-field-label {
            width: 22rem;
            color: var(--bulma-grey);
        }
    }

    & tr:last-child {
        /* borda de baixo para a última linha porque ela não tem por algum motivo */
        --bulma-table-cell-border-width: 0 1px 1px 1px;
        border-bottom: 1px var(--bulma-border) solid;
    }
}

.holdings-title {
    font-size: var(--bulma-size-medium);
    font-weight: var(--bulma-weight-bold);
}

.holdings-text {
    color: var(--bulma-grey);
}

/* Limita tamanho máximo das cells do grid de descrições */
.description-grid.grid > .cell {
    max-width: 18rem;
}

/* Árvore de hierarquia duma descrição */
.hierarchy-panel {
    /* Título com mesmo espaçamento do título da tabela de detalhe */
    & .panel-heading {
        color: var(--bulma-primary);
        font-size: var(--bulma-size-large);
        padding: 0.5em 0.75em;
    }

    /* Painel com altura fixa e scroll vertical opcional */
    & .panel-content {
        height: 270px;
        overflow-y: auto;
        flex-grow: 1;
    }

    /* Os nós são a.button e isso alinha o texto à esquerda */
    & .button {
        justify-content: start;
    }
}

/* Visualização de Mídia */

/* Modal de tela cheia */
#media-visualizer .modal {
    .image {
        cursor: grab;
    }
    .modal-content {
        width: auto;
        height: auto;
    }
}

#media-container {
    .media-item {
        cursor: zoom-in;
    }
}

/* endregion */

.two-line-text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* necessário em Chrome/Edge/Safari */
    line-clamp: 2; /* propriedade padrão (futuro) */

    overflow: hidden;
    white-space: normal !important;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* region Views: Formulários */

/*
Define label e valor de campos de múltiplo valor com múltiplos valores
Exemplo: Contato tem múltiplos campos, e múltiplos contatos existem numa Instituição
Isso exibe os label e valores como uma tabela, dentro da tabela mãe
*/
.multi-value-field {
    display: table-row;

    & > span {
        display: table-cell;

        &:first-child {
            /* label */
            color: var(--bulma-grey);
        }

        &:last-child {
            /* valor */
            padding-left: var(--bulma-size-8);
        }
    }
}

/* Componentes */

/* Conserta abas: exibe-as na horizontal, sem barra de rolagem, com borda bottom correta */
#component-form {
    & > .tabs ul {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        border-bottom: none;

        & > li {
            border-bottom: 1px solid;
        }
    }
}

/* Remove limite de largura máxima do nome do arquivo em file inputs do estilo box
   Isso permite que a largura do nome e da caixa superior fiquem de tamanhos iguais
*/
.file.has-name.is-boxed .file-name {
    max-width: inherit;
}

/* Permite expansão da caixa de nomes de arquivos de upload */
.file-label > .file-name {
    height: inherit;
    white-space: normal;
    overflow: auto;
    max-height: 6rem;
}

/* endregion */

/* region Caixa de resultado da busca FTS do index */
.search-wrapper {
    & .search-result {
        position: absolute;
        z-index: 10000;
        background: var(--bulma-light);
        padding: var(--bulma-size-8);
        width: 100%;
        border-radius: var(--bulma-radius-medium);
        max-height: 60vh;
        overflow: auto;
    }

    & .search-result-item {
        padding: var(--bulma-size-9);
        margin-bottom: var(--bulma-size-9);

        & > .content {
            color: var(--bulma-text-base);
        }
        & mark {
            font-weight: bold;
        }
        & .result-snippet {
            font-style: italic;
        }
    }
}
/* endregion */

/* region Home */

/* Mapa */
#map {
    height: 40vh;
}

/* endregion*/