/*
 * Barra lateral Rock UI (templates/base/partials/sidebar/_rock-sidebar.html.twig) dentro do layout legado.
 * Só a barra é Rock UI: o #layout-wrapper e o .main-content continuam os do Bootstrap, então o provider
 * não ocupa espaço e o recuo do conteúdo acompanha a largura/estado da barra.
 */

/* Largura expandida da barra. No :root porque o recuo do #layout-wrapper lê o token fora do provider;
   :root:root para valer qualquer que seja a ordem de carga do rock-ui.css (tokens.css). */
:root:root {
    --rk-sidebar-width: 280px;
}

/* Cabeçalho e rodapé separados da navegação (tom do antigo .modern-sidebar__fixed-actions) */
.app-sidebar-provider .rk-sidebar__header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.app-sidebar-provider .rk-sidebar__footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* O provider guarda o estado (data-state); a caixa dele não participa do layout legado.
   Seletor com duas classes para valer qualquer que seja a ordem de carga do rock-ui.css. */
.rk-sidebar-wrapper.app-sidebar-provider {
    display: contents;
}

/* Quem reserva o espaço da barra é o #layout-wrapper, não o gap do Rock UI. */
.app-sidebar-provider .rk-sidebar__gap {
    display: none;
}

/*
 * Cores do menu legado (variáveis --sidebar-* do new-layout.css, sobrescritas por papel no topbar-colors).
 * O Rock UI dá estrutura e comportamento; as cores continuam as do projeto.
 */
.app-sidebar-provider,
#sidebar-settings-dropdown-content,
#sidebar-user-dropdown-content {
    --rk-sidebar: var(--sidebar-bg);
    --rk-sidebar-foreground: var(--sidebar-text);
    --rk-sidebar-accent: var(--sidebar-primary-hover);
    --rk-sidebar-accent-foreground: var(--sidebar-text);
    --rk-sidebar-primary: var(--sidebar-primary);
    --rk-accent: var(--sidebar-primary-hover);
    --rk-accent-foreground: var(--sidebar-text);
}

/* Ícones em repouso */
.app-sidebar-provider :is(.rk-sidebar__menu-button, .rk-sidebar__menu-sub-button) > svg {
    color: var(--sidebar-text-muted);
}

/* Item ativo: no Rock UI usa a mesma cor do hover; no legado tem fundo, cor e peso próprios.
   Só o item selecionado (aria-current) é destacado. */
.app-sidebar-provider :is(.rk-sidebar__menu-button, .rk-sidebar__menu-sub-button)[aria-current="page"],
.app-sidebar-provider :is(.rk-sidebar__menu-button, .rk-sidebar__menu-sub-button)[aria-current="page"]:hover {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-primary);
    font-weight: 600;
}

.app-sidebar-provider :is(.rk-sidebar__menu-button, .rk-sidebar__menu-sub-button)[aria-current="page"] > svg {
    color: var(--sidebar-primary);
}

/* Pais do selecionado (data-active por causa de um filho): sem fundo de ativo, com o texto na cor do texto do
   item ativo (--sidebar-primary) e o ícone mais escuro que o de um item comum, mostrando o caminho até a página
   atual. O hover é o de qualquer item. */
.app-sidebar-provider :is(.rk-sidebar__menu-button, .rk-sidebar__menu-sub-button)[data-active="true"]:not([aria-current="page"]):not(:hover) {
    background-color: transparent;
    color: var(--sidebar-primary);
}

.app-sidebar-provider :is(.rk-sidebar__menu-button, .rk-sidebar__menu-sub-button)[data-active="true"]:not([aria-current="page"]):not(:hover) > svg {
    color: color-mix(in srgb, var(--sidebar-text) 55%, black);
}

.app-sidebar-provider :is(.rk-sidebar__menu-button, .rk-sidebar__menu-sub-button)[data-active="true"]:not([aria-current="page"]) {
    font-weight: 500;
}

/* A regra legada global `ul > li > ul > li:hover` (new-layout.css, !important) pintaria o <li> inteiro de um
   subitem-pai, com os irmãos do submenu dentro. Na barra o hover fica só nos botões, como no Rock UI. */
.app-sidebar-provider ul > li > ul > li:hover {
    background: transparent !important;
    color: inherit !important;
}

/* Rótulos longos: quebram linha e o botão cresce em altura, em vez de cortar ou virar reticência.
   No modo ícone valem as regras do Rock UI (32px, !important). */
.app-sidebar-provider .rk-sidebar__menu-button {
    height: auto;
    min-height: 32px;
    align-items: flex-start;
}

.app-sidebar-provider .rk-sidebar__menu-button--size-sm {
    min-height: 28px;
    padding-block: 4px;
}

.app-sidebar-provider .rk-sidebar__menu-button--size-lg {
    min-height: 48px;
    align-items: center;
}

.app-sidebar-provider .rk-sidebar__menu-sub-button {
    height: auto;
    min-height: 28px;
    padding-block: 4px;
    align-items: flex-start;
}

/* ícones e chevron do 3º nível na altura da primeira linha (line-height 20px, ícone 16px) */
.app-sidebar-provider :is(.rk-sidebar__menu-button:not(.rk-sidebar__menu-button--size-lg), .rk-sidebar__menu-sub-button) > svg {
    margin-top: 2px;
}

.app-sidebar-provider :is(.rk-sidebar__menu-button, .rk-sidebar__menu-sub-button) > span:not(.app-sidebar__user-text, .rk-sidebar__menu-badge),
.app-sidebar-provider .rk-sidebar__menu-sub-button--parent > span:not(.rk-sidebar__menu-badge) {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Dica do atalho da paleta (Ctrl/⌘+K) dentro do campo de busca */
.app-sidebar__search {
    position: relative;
}

.app-sidebar-provider .app-sidebar__search .rk-input.rk-sidebar__input {
    padding-right: 52px;
}

.app-sidebar__kbd {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    padding: 1px 5px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    background: transparent;
    color: var(--sidebar-text-muted);
    font-family: var(--rk-font-sans);
    font-size: 11px;
    line-height: 16px;
    box-shadow: none;
    pointer-events: none;
}

/* No modo ícone o rótulo fica oculto no botão de 32px: mantém uma linha só, como no Rock UI */
.app-sidebar-provider[data-state="collapsed"] .rk-sidebar[data-mode="icon"] .rk-sidebar__menu-button > span:not(.app-sidebar__user-text) {
    white-space: nowrap;
}

/* Subitem-pai do 3º nível: as mesmas regras do sidebar.css do Rock UI, repetidas aqui porque esse arquivo
   só chega à página depois do build do Encore; sem elas o 3º nível fica desalinhado. */
.app-sidebar-provider button.rk-sidebar__menu-sub-button--parent {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.app-sidebar-provider .rk-sidebar__menu-sub-button--parent > span:not(.rk-sidebar__menu-badge) {
    flex: 1 1 0%;
}

.app-sidebar-provider .rk-sidebar__menu-sub-button > .rk-sidebar__menu-sub-chevron {
    flex: 0 0 auto;
    margin-left: auto;
    transition: rotate var(--rk-duration-slow) var(--rk-ease-default);
}

.app-sidebar-provider .rk-sidebar__menu-sub-item[data-state="open"] > .rk-sidebar__menu-sub-button > .rk-sidebar__menu-sub-chevron {
    rotate: 90deg;
}

.app-sidebar-provider .rk-sidebar__menu-sub--nested {
    margin-inline: 12px 0;
}

/* Linha vertical dos submenus na cor do papel (antigo .nav-sidebar .submenu::before) */
.app-sidebar-provider .rk-sidebar__menu-sub {
    border-left: 1.5px solid var(--sidebar-primary);
}

/* Avatar das iniciais (antigo .avatar.bg-primary) */
.app-sidebar-provider .app-sidebar__user .rk-avatar__fallback {
    background-color: var(--bs-primary);
    color: #fff;
}

/* CTA "Matricular" (antigo .btn-sidebar-primary) */
.app-sidebar-provider .rk-sidebar__menu-button.app-sidebar__cta {
    background-color: var(--sidebar-primary);
    color: #fff;
    border-radius: 9px;
    font-weight: 600;
    justify-content: center;
    transition: all 0.15s ease;
}

.app-sidebar-provider .rk-sidebar__menu-button.app-sidebar__cta > svg {
    color: #fff;
}

.app-sidebar-provider .rk-sidebar__menu-button.app-sidebar__cta:hover {
    background-color: var(--sidebar-primary);
    color: #fff;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 0 14px color-mix(in srgb, var(--sidebar-primary) 98%, white);
}

/* Busca (antigo .modern-sidebar__search) */
.app-sidebar-provider .rk-input.rk-sidebar__input {
    border: 1.5px solid var(--sidebar-primary);
    border-radius: 9px;
    background-color: #fff;
}

.app-sidebar-provider .rk-input.rk-sidebar__input:focus {
    border-color: var(--sidebar-primary);
    box-shadow: 0 0 0 3px var(--sidebar-primary-hover);
    outline: none;
}

/* Cabeçalho: linha da busca */
.app-sidebar__header-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.app-sidebar__search {
    flex: 1;
    min-width: 0;
}

/* Itens que só existem com a barra recolhida (ex.: atalho da busca) */
.app-sidebar--show-collapsed {
    display: none;
}

/* Menu do usuário no rodapé */
.app-sidebar__user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
    text-align: left;
}

.app-sidebar__user-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-sidebar__user-email {
    color: var(--rk-muted-foreground);
    font-size: var(--rk-text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Os menus da barra (Configurações, usuário) são portados para o <body> com z-index 50; com a gaveta
   mobile aberta (z-index 1061) eles precisam ficar acima dela. */
body:has(.app-sidebar-provider[data-mobile-open]) .rk-menu {
    z-index: calc(var(--rk-z-overlay, 1060) + 2);
}

@media (min-width: 768px) {
    /* Recolhida em modo ícone o Rock UI põe overflow: hidden na navegação; aqui ela rola, com barra fina
       na cor do papel (como a barra antiga). Duas classes no wrapper para vencer a regra do Rock UI. */
    .rk-sidebar-wrapper.app-sidebar-provider[data-state="collapsed"] .rk-sidebar[data-mode="icon"] .rk-sidebar__content {
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* barra de 3px (Chrome/Edge/Safari) com a mesma aparência da barra expandida (core/base.css do Rock UI:
       polegar --rk-input arredondado, trilho transparente); sem scrollbar-width, que faria o Chrome ignorar isto */
    .app-sidebar-provider[data-state="collapsed"] .rk-sidebar[data-mode="icon"] .rk-sidebar__content::-webkit-scrollbar {
        width: 3px;
    }

    .app-sidebar-provider[data-state="collapsed"] .rk-sidebar[data-mode="icon"] .rk-sidebar__content::-webkit-scrollbar-track {
        background: transparent;
    }

    .app-sidebar-provider[data-state="collapsed"] .rk-sidebar[data-mode="icon"] .rk-sidebar__content::-webkit-scrollbar-thumb {
        background: var(--rk-input);
        border: 0;
        border-radius: 9999px;
    }

    /* Firefox não tem ::-webkit-scrollbar: barra fina padrão, na mesma cor da barra expandida */
    @supports not selector(::-webkit-scrollbar) {
        .rk-sidebar-wrapper.app-sidebar-provider[data-state="collapsed"] .rk-sidebar[data-mode="icon"] .rk-sidebar__content {
            scrollbar-width: thin;
            scrollbar-color: var(--rk-input) transparent;
        }
    }

    .app-sidebar-provider[data-state="collapsed"] .app-sidebar__header-row {
        justify-content: center;
    }

    /* Recolhida em modo ícone o submenu some: o item de 1º nível que contém o ativo mantém o destaque */
    .app-sidebar-provider[data-state="collapsed"] .rk-sidebar[data-mode="icon"] .rk-sidebar__menu-item .rk-sidebar__menu-button[data-active="true"] {
        background-color: var(--sidebar-active-bg);
        color: var(--sidebar-primary);
        font-weight: 600;
    }

    .app-sidebar-provider[data-state="collapsed"] .rk-sidebar[data-mode="icon"] .rk-sidebar__menu-item .rk-sidebar__menu-button[data-active="true"] > svg {
        color: var(--sidebar-primary);
    }

    /* Recolhida: ícones centrados no botão de 32px e CTA "Matricular" só com o ícone (rótulo na dica) */
    .app-sidebar-provider[data-state="collapsed"] .rk-sidebar[data-mode="icon"] :is(.rk-sidebar__menu-button, .rk-sidebar__menu-sub-button) {
        align-items: center;
    }

    .app-sidebar-provider[data-state="collapsed"] .rk-sidebar[data-mode="icon"] :is(.rk-sidebar__menu-button, .rk-sidebar__menu-sub-button) > svg {
        margin-top: 0;
    }

    .app-sidebar-provider[data-state="collapsed"] .rk-sidebar[data-mode="icon"] .rk-sidebar__menu-button.app-sidebar__cta {
        justify-content: center;
    }

    .app-sidebar-provider[data-state="collapsed"] .rk-sidebar[data-mode="icon"] .rk-sidebar__menu-button.app-sidebar__cta > span {
        display: none;
    }

    .app-sidebar-provider[data-state="collapsed"] .app-sidebar--show-collapsed {
        display: list-item;
    }

    body:has(.app-sidebar-provider) #layout-wrapper {
        padding-left: var(--rk-sidebar-width);
        transition: padding-left 200ms linear;
    }

    body:has(.app-sidebar-provider[data-state="collapsed"]) #layout-wrapper {
        padding-left: var(--rk-sidebar-width-collapsed);
    }

    body:has(.app-sidebar-provider) .main-content {
        margin-left: 0 !important;
    }
}