/* public/assets/css/frontend-menu.css */

/* Reset básico e Box Sizing */
.tb-figma-menu,
.tb-figma-menu *,
.tb-figma-menu *::before,
.tb-figma-menu *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.tb-figma-menu {
    font-family: 'Raleway', sans-serif; /* Fonte padrão - certifique-se que está carregada no site */
    background-color: #FFFFFF; /* Padrão, controlável via widget */
    width: 320px; /* Padrão, controlável via widget */
    height: 100vh; /* Ocupa toda a altura da viewport */
    display: flex;
    flex-direction: column;
    position: relative; /* Mude para fixed/absolute se necessário para layout da página */
    /* border-right: 1px solid #F3F4F6; */ /* Borda sutil, controlável via widget */
    color: #495057; /* Cor de texto padrão */
    padding: 0; /* Padding geral é aplicado pelo widget, ou nos filhos */
}

/* Área do Logo e Título */
.tb-menu-logo-area {
    padding: 32px 24px; /* Espaçamento padrão, controlável */
    text-align: left;
    border-bottom: 1px solid #F3F4F6; /* Linha divisória sutil */
}
.tb-menu-logo-area a.tb-logo-link,
.tb-menu-logo-area div.tb-logo-link { /* div para quando não há link mas há imagem + texto */
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.tb-menu-logo-image {
    max-width: 32px; /* Padrão, controlável */
    height: auto;
    vertical-align: middle;
    /* margin-right: 8px; */ /* Controlável via widget */
}
.tb-logo-text-title {
    font-size: 20px; /* Padrão, controlável */
    font-weight: 700; /* Padrão, controlável */
    color: #0D0D0D; /* Padrão, controlável */
    line-height: 1.2;
}

/* Área de Busca */
.tb-search-area {
    padding: 24px 24px 16px 24px; /* Espaçamento padrão, controlável */
    position: relative;
}

.tb-search-area::before {
    content: '⌕'; /* Caractere Unicode para Lupa */
    position: absolute;
    /* Se o .tb-search-input tem padding-left: 38px, e o ícone deve ficar lá:
       Assumindo que o .tb-search-input começa em left:0 do .tb-search-area.
       Então o ícone deve estar em left: (padding-left do input / 2) - (largura do ícone / 2) + alguns pixels.
       Ou mais simples: left: 12px (relativo ao .tb-search-area) e o input tem padding-left: 38px.
       Isto significa que o ícone estará à esquerda do texto do input.
    */
    left: 36px; /* 24px (padding da .tb-search-area) + 12px (para dentro do input) */
    top: 50%;   /* Centraliza na altura do .tb-search-area */
    transform: translateY(-50%);
    font-size: 18px;
    color: #6C757D; /* Cor padrão do ícone - será controlada pelo widget */
    pointer-events: none;
    line-height: 1;
}

.tb-search-input {
    width: 100%;
    /* Padding: Top, Right, Bottom, Left (deixe espaço à esquerda para o ícone) */
    padding: 12px 16px 12px 38px; /* Ajustado o padding-left */
    background-color: #F3F4F6; 
    border: 1px solid transparent; 
    border-radius: 8px; 
    font-family: 'Raleway', sans-serif;
    font-size: 14px; 
    font-weight: 500;
    color: #343A40; 
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tb-search-input::placeholder {
    color: #6C757D; /* Padrão, controlável */
    opacity: 1;
}
.tb-search-input:focus {
    background-color: #FFFFFF;
    border-color: #0D6EFD; /* Padrão, controlável */
}

/* Botão "Mostrar Todos" (Acima das Abas) */
.tb-menu-show-all-area {
    padding: 0 24px 16px 24px; /* Espaçamento */
}
.tb-show-all-filter-btn {
    display: block;
    width: 100%;
    padding: 10px 16px; /* Controlável */
    font-family: 'Raleway', sans-serif;
    font-size: 15px; /* Controlável */
    font-weight: 600; /* Controlável */
    color: #0D6EFD; /* Padrão, controlável */
    background-color: #E7F1FF; /* Padrão, controlável */
    border: 1px solid transparent; /* Controlável */
    border-radius: 8px; /* Controlável */
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.tb-show-all-filter-btn:hover {
    background-color: #CCE0FF; /* Padrão, controlável */
}
.tb-show-all-filter-btn.tb-active { /* Se ele puder ficar ativo */
    background-color: #0B5ED7;
    color: #FFFFFF;
}


/* Navegação das Abas Principais */
.tb-main-tabs-nav {
    display: flex;
    padding: 0 24px; /* Espaçamento horizontal (Figma: 24px) */
    margin-bottom: 16px; /* Espaço abaixo das abas (Figma: 16px) */
    gap: 8px; /* Espaço entre abas (controlável) */
    flex-wrap: nowrap; /* Para não quebrar linha, assumindo que cabem ou terão scroll horizontal se muitas */
    overflow-x: auto; /* Scroll horizontal se muitas abas */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.tb-main-tabs-nav::-webkit-scrollbar { /* Ocultar scrollbar do container das abas */
    display: none;
}

.tb-main-tab-button {
    font-family: 'Raleway', sans-serif;
    font-weight: 600; /* Padrão, controlável */
    font-size: 15px; /* Padrão, controlável */
    padding: 8px 16px; /* Padrão, controlável */
    border: none;
    border-radius: 8px; /* Padrão, controlável */
    cursor: pointer;
    text-align: center;
    white-space: nowrap; /* Para não quebrar o texto da aba */
    background-color: #F3F4F6; /* Normal - Controlável */
    color: #495057; /* Normal - Controlável */
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0; /* Para não encolher no flex container */
}
.tb-main-tab-button:hover {
    background-color: #E9ECEF; /* Hover - Controlável */
    color: #0D6EFD; /* Hover - Controlável */
}
.tb-main-tab-button.tb-active {
    background-color: #0D6EFD; /* Ativa - Controlável */
    color: #FFFFFF; /* Ativa - Controlável */
    font-weight: 700; /* Ativa - Exemplo */
}

/* Container dos Painéis de Conteúdo das Abas (onde ficam os acordeões) */
.tb-tab-panels-container {
    flex-grow: 1; /* Ocupa o espaço vertical restante */
    overflow-y: auto; /* Rolagem APENAS nesta área */
    padding: 0 24px; /* Padding horizontal (Figma: 24px) */
}
.tb-main-tab-panel {
    display: none; /* Escondido por padrão */
    animation: tbFadeInPanel 0.3s ease-out forwards;
}
.tb-main-tab-panel.tb-active {
    display: block;
}
@keyframes tbFadeInPanel {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Acordeões de Subgrupo (Dentro de cada Painel de Aba) */
.tb-sub-group-accordion {
    border-bottom: 1px solid #F3F4F6; /* Linha divisória (controlável) */
}
.tb-sub-group-accordion:first-child {
    /* border-top: 1px solid #F3F4F6; Se precisar de borda no topo do primeiro */
}
.tb-sub-group-accordion:last-child {
    border-bottom: none;
}

.tb-sub-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 0; /* Espaçamento vertical (Figma: 16px) - Controlável */
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}
.tb-sub-group-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 600; /* Padrão, controlável */
    font-size: 14px; /* Padrão, controlável */
    color: #343A40; /* Padrão, controlável */
    flex-grow: 1;
    transition: color 0.2s ease;
}
.tb-sub-group-header.tb-active .tb-sub-group-title {
    color: #0D6EFD; /* Título ativo (Controlável) */
}

/* Chevron (Seta do Acordeão) */
.tb-sub-group-chevron {
    width: 8px; /* Ajustar tamanho da seta */
    height: 8px;
    border-style: solid;
    border-width: 0 1.5px 1.5px 0; /* Espessura da seta */
    display: inline-block;
    margin-left: 10px;
    border-color: #6C757D; /* Cor normal (Controlável) */
    transform: rotate(45deg); /* Aponta para baixo */
    transition: transform 0.3s ease, border-color 0.2s ease;
    flex-shrink: 0;
}
.tb-sub-group-header.tb-active .tb-sub-group-chevron {
    transform: rotate(-135deg); /* Aponta para cima */
    border-color: #0D6EFD; /* Cor ativa (Controlável) */
}

/* Conteúdo do Acordeão de Subgrupo */
.tb-sub-group-content {
    display: none; /* Começa escondido */
    padding-left: 16px; /* Indentação dos links (Figma: ~16px) - Controlável */
    padding-bottom: 8px; /* Espaço abaixo da lista */
}
.tb-sub-group-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Links de Filtro Finais */
.tb-filter-link {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-weight: 500; /* Padrão, controlável */
    font-size: 14px; /* Padrão, controlável */
    color: #495057; /* Padrão, controlável */
    text-decoration: none;
    padding: 10px 8px; /* Espaçamento interno (Figma: ~10px vert, 8px hor) - Controlável */
    border-radius: 6px; /* Padrão, controlável */
    margin-bottom: 4px; /* Espaço entre links (Controlável) */
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease, font-weight 0.2s ease;
}
.tb-filter-link:hover {
    background-color: #F8F9FA; /* Hover - Controlável */
    color: #0D6EFD; /* Hover - Controlável */
    /* padding-left: 12px; Efeito sutil de indentação no hover */
}
.tb-filter-link.tb-active {
    background-color: #E7F1FF; /* Ativo - Controlável */
    color: #0D6EFD; /* Ativo - Controlável */
    font-weight: 600; /* Ativo - Exemplo */
}

/* Estilo da Barra de Rolagem (Webkit - Chrome, Safari, Edge Novo) */
.tb-tab-panels-container::-webkit-scrollbar {
    width: 8px; /* Largura da barra */
}
.tb-tab-panels-container::-webkit-scrollbar-track {
    background: transparent; /* Fundo da trilha */
}
.tb-tab-panels-container::-webkit-scrollbar-thumb {
    background-color: #D4D7DC; /* Cor da barra (Controlável) */
    border-radius: 10px;
    border: 2px solid transparent; /* Espaço ao redor do thumb */
    background-clip: content-box;
}
.tb-tab-panels-container::-webkit-scrollbar-thumb:hover {
    background-color: #AEB3B9;
}

/* Estilo da Barra de Rolagem (Firefox) */
.tb-tab-panels-container {
    scrollbar-width: thin;
    scrollbar-color: #D4D7DC transparent; /* thumb track */
}