/**
 * Sidebar Tabs Component
 *
 * Componente unificado de sidebar com tabs para navegação lateral.
 * Suporta dois temas: listing (listar-dashboard) e detail (modal detalhar).
 *
 * @version 1.0.0
 * @date 2026-01-03
 */

/* ==========================================================================
   CSS VARIABLES - Tokens configuráveis
   ========================================================================== */

:root {
    /* Dimensões base */
    --sidebar-width: 290px;
    --sidebar-collapsed-width: 126px;
    --sidebar-padding: 24px 20px 0 72px;
    --sidebar-gap: 8px;

    /* Tab dimensions */
    --sidebar-tab-height: 40px;
    --sidebar-tab-active-height: 40px;
    --sidebar-tab-padding: 8px 12px;
    --sidebar-tab-gap: 12px;
    --sidebar-tab-radius: 6px;

    /* Tema Listing (Light) */
    --sidebar-listing-bg: var(--arenito-surface-base-neutral-page-deep, #ECEDF2);
    --sidebar-listing-tab-bg: transparent;
    --sidebar-listing-tab-active-bg: var(--arenito-surface-base-neutral-container-default, #F6F6F9);
    --sidebar-listing-tab-active-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08); /* sem token Arenito de sombra — valor extraído do Figma */
    --sidebar-listing-text: var(--arenito-text-base-neutral-secondary, #394360);
    --sidebar-listing-text-active: var(--arenito-text-base-neutral-default, #12151F);

    /*
     * Dark mode: semantic.css do Arenito é exclusivamente light mode — nenhum token
     * sofre override em dark. GALES v1 não implementa dark mode, portanto o bloco
     * html.dark/[data-theme="dark"] anterior foi removido intencionalmente.
     */

    /* Tema Detail (Dark sidebar) */
    --sidebar-detail-bg: var(--arenito-surface-overlay-neutral-container-default-on-black, #12151F);
    --sidebar-detail-tab-bg: transparent;
    --sidebar-detail-tab-active-bg: rgba(246, 246, 249, 0.1);
    --sidebar-detail-text: var(--arenito-text-overlay-neutral-subtle, #7A839F);
    --sidebar-detail-text-active: var(--arenito-text-overlay-neutral-white, #F6F6F9);
    --sidebar-detail-width: 272px;
}

/* ==========================================================================
   BASE COMPONENT
   ========================================================================== */

.sidebar-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

.sidebar-tabs__nav {
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-gap);
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}

/* ==========================================================================
   TEMA: LISTING
   ========================================================================== */

.sidebar-tabs--listing {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    padding: var(--sidebar-padding);
    background: var(--sidebar-listing-bg);
    border-right: 1px solid var(--arenito-border-base-neutral-default, #CED3E2);
    transition: width 0.2s ease, min-width 0.2s ease, padding 0.2s ease;
}

/* ==========================================================================
   ÍCONE DOS ITENS (tema listing)
   ========================================================================== */
.sidebar-tabs--listing .sidebar-tabs__icon {
    width: 18px;
    height: 18px;
    color: var(--sidebar-listing-text);
    flex-shrink: 0;
}

.sidebar-tabs--listing .sidebar-tabs__tab--active .sidebar-tabs__icon {
    color: var(--sidebar-listing-text-active);
}

/* ==========================================================================
   ESTADO RECOLHIDO (icon-only) — classe .sidebar-tabs--collapsed
   ========================================================================== */
.sidebar-tabs--listing.sidebar-tabs--collapsed {
    width: var(--sidebar-collapsed-width) !important;
    min-width: var(--sidebar-collapsed-width) !important;
    /* Padding mantido igual ao expandido: 24px 20px 0 72px
       Com 126px de largura e 72px left + 20px right, sobram 34px para o ícone */
}


.sidebar-tabs--listing.sidebar-tabs--collapsed .sidebar-tabs__label {
    display: none !important;
}

.sidebar-tabs--listing.sidebar-tabs--collapsed .sidebar-tabs__arrow {
    display: none !important;
}

.sidebar-tabs--listing.sidebar-tabs--collapsed .sidebar-tabs__tab {
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    gap: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.sidebar-tabs--listing .sidebar-tabs__tab {
    display: flex;
    align-items: center;
    gap: var(--sidebar-tab-gap);
    width: 100%;
    height: var(--sidebar-tab-height);
    padding: var(--sidebar-tab-padding);
    background: var(--sidebar-listing-tab-bg);
    border: none;
    border-radius: var(--sidebar-tab-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-tabs--listing .sidebar-tabs__label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--sidebar-listing-text);
    flex: 1;
    text-align: left;
}

.sidebar-tabs--listing .sidebar-tabs__arrow {
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.sidebar-tabs--listing .sidebar-tabs__arrow svg {
    width: 100%;
    height: 100%;
    stroke: var(--sidebar-listing-text-active);
}

/* Tab active - Listing */
.sidebar-tabs--listing .sidebar-tabs__tab--active {
    background: var(--sidebar-listing-tab-active-bg);
    box-shadow: var(--sidebar-listing-tab-active-shadow);
}

.sidebar-tabs--listing .sidebar-tabs__tab--active .sidebar-tabs__label {
    color: var(--sidebar-listing-text-active);
}

.sidebar-tabs--listing .sidebar-tabs__tab--active .sidebar-tabs__arrow {
    opacity: 1;
}

/* Hover - Listing */
.sidebar-tabs--listing .sidebar-tabs__tab:hover:not(.sidebar-tabs__tab--active) {
    background: rgba(206, 211, 226, 0.2);
}

/* ==========================================================================
   TEMA: DETAIL (Modal)
   ========================================================================== */

.sidebar-tabs--detail {
    width: var(--sidebar-detail-width);
    min-width: var(--sidebar-detail-width);
    padding: 20px;
    gap: 40px;
    background: var(--sidebar-detail-bg);
    border-radius: 8px 0 0 8px;
}

.sidebar-tabs--detail .sidebar-tabs__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.sidebar-tabs--detail .sidebar-tabs__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    color: var(--sidebar-detail-text-active);
    margin: 0;
}

.sidebar-tabs--detail .sidebar-tabs__subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--sidebar-detail-text);
    margin: 0;
}

.sidebar-tabs--detail .sidebar-tabs__tab {
    display: flex;
    align-items: center;
    gap: var(--sidebar-tab-gap);
    width: 100%;
    height: var(--sidebar-tab-height);
    padding: var(--sidebar-tab-padding);
    background: var(--sidebar-detail-tab-bg);
    border: none;
    border-radius: var(--sidebar-tab-radius);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sidebar-tabs--detail .sidebar-tabs__label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--sidebar-detail-text);
    flex: 1;
    text-align: left;
}

.sidebar-tabs--detail .sidebar-tabs__arrow {
    width: 20px;
    height: 20px;
    display: none;
}

.sidebar-tabs--detail .sidebar-tabs__arrow svg {
    width: 100%;
    height: 100%;
    stroke: var(--sidebar-detail-text-active);
}

/* Tab active - Detail */
.sidebar-tabs--detail .sidebar-tabs__tab--active {
    height: var(--sidebar-tab-active-height);
    background: var(--sidebar-detail-tab-active-bg);
}

.sidebar-tabs--detail .sidebar-tabs__tab--active .sidebar-tabs__label {
    color: var(--sidebar-detail-text-active);
}

.sidebar-tabs--detail .sidebar-tabs__tab--active .sidebar-tabs__arrow {
    display: flex;
}

/* Hover - Detail */
.sidebar-tabs--detail .sidebar-tabs__tab:hover:not(.sidebar-tabs__tab--active) {
    background: rgba(246, 246, 249, 0.05);
}

/* Footer icon */
.sidebar-tabs--detail .sidebar-tabs__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    flex-shrink: 0;
}

.sidebar-tabs--detail .sidebar-tabs__footer-icon i {
    font-size: 80px;
    color: var(--arenito-icon-overlay-neutral-secondary, #394360);
    opacity: 0.3;
}