/*
 * YTI&W Table of Contents - Frontend Styles v2.3
 * Fixed: Compact Mode "Smart Theme" Inheritance
 */

/* =========================================
   1. Variáveis e Base
   ========================================= */
#ytiw-toc {
    --ytiw-toc-bg: #f9f9f9;
    --ytiw-toc-border: #e5e5e5;
    --ytiw-toc-text: #333;
    --ytiw-toc-link: #2271b1;
    --ytiw-toc-link-hover: #135e96;
    --ytiw-toc-accent: #2271b1;
    
    margin: 20px 0 30px 0;
    font-size: 16px;
    line-height: 1.5;
    box-sizing: border-box;
    width: var(--ytiw-toc-width, 100%);
    max-width: 100%;
}

#ytiw-toc * { box-sizing: border-box; }

/* =========================================
   2. Alinhamento
   ========================================= */
.ytiw-toc-align-left { margin-right: auto; }

.ytiw-toc-align-center {
    margin-left: auto !important; margin-right: auto !important;
    width: fit-content; min-width: 280px; max-width: var(--ytiw-toc-width, 100%);
}

.ytiw-toc-align-right {
    float: right; margin-left: 20px;
    width: fit-content; max-width: var(--ytiw-toc-width, 100%);
}
.ytiw-toc-align-right::after { content: ""; display: table; clear: both; }

.ytiw-toc-text-left .ytiw-toc-body { text-align: left; }
.ytiw-toc-text-center .ytiw-toc-body { text-align: center; }
.ytiw-toc-text-right .ytiw-toc-body { text-align: right; }

/* =========================================
   3. Hierarquia
   ========================================= */
.ytiw-toc-body { margin-top: 10px; }

#ytiw-toc .ytiw-toc-body > ul {
    list-style: none !important; margin: 0 !important; padding: 0 !important;
}

#ytiw-toc .ytiw-toc-body li {
    list-style: none !important; margin-left: 0 !important; margin-bottom: 4px !important; padding-left: 0 !important;
}

#ytiw-toc .ytiw-toc-body ul ul {
    list-style: none !important; margin: 4px 0 4px 0 !important; padding-left: 1.5rem !important;
}

/* =========================================
   4. Links
   ========================================= */
.ytiw-toc-link {
    text-decoration: none !important;
    color: var(--ytiw-toc-text) !important;
    opacity: 0.85;
    transition: all 0.2s ease;
    display: block;
}
.ytiw-toc-link:hover, .ytiw-toc-link.is-active {
    color: var(--ytiw-toc-link) !important;
    opacity: 1; font-weight: 500;
}

/* =========================================
   5. Header & Toggle
   ========================================= */
.ytiw-toc-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.ytiw-toc-title { font-weight: 700; font-size: 1.1em; margin: 0; color: var(--ytiw-toc-text); }
.ytiw-toc-toggle { background: none; border: none; cursor: pointer; padding: 5px; color: var(--ytiw-toc-text); opacity: 0.6; display: flex; }

#ytiw-toc.is-collapsed .ytiw-toc-toggle { transform: rotate(-90deg); }
#ytiw-toc.is-collapsed .ytiw-toc-body { display: none; }

/* =========================================
   6. Enumeração
   ========================================= */
.ytiw-toc-enum .ytiw-toc-body ul { counter-reset: ytiw-counter; }
.ytiw-toc-enum .ytiw-toc-body > ul { counter-reset: ytiw-counter; }
.ytiw-toc-enum .ytiw-toc-body li { counter-increment: ytiw-counter; }
.ytiw-toc-enum .ytiw-toc-link::before {
    content: counters(ytiw-counter, ".") ". ";
    font-weight: 600; opacity: 0.7; margin-right: 5px; font-size: 0.9em;
}

/* =========================================
   7. Modo Compacto "Small" (CORRIGIDO)
   ========================================= */
.ytiw-toc-compact {
    padding: 0 !important;
    background: transparent;
    border: 1px solid var(--ytiw-toc-border);
    border-radius: 6px;
    overflow: hidden;
}

.ytiw-toc-compact .ytiw-toc-header {
    /* Herda o background do tema */
    background: var(--ytiw-toc-bg);
    padding: 8px 15px; min-height: 40px;
}

.ytiw-toc-compact .ytiw-toc-title { font-size: 1em; }

.ytiw-toc-compact .ytiw-toc-toggle {
    background: rgba(0,0,0,0.05);
    border-left: 1px solid var(--ytiw-toc-border);
    height: 40px; width: 40px; margin: -8px -15px -8px 15px; border-radius: 0;
    align-items: center; justify-content: center;
}
.ytiw-toc-compact .ytiw-toc-toggle:hover { background: rgba(0,0,0,0.1); }

.ytiw-toc-compact .ytiw-toc-body {
    padding: 15px;
    /* FIX: Não usa branco fixo, permite herança ou fallback */
    background: #fff; 
    margin-top: 0;
    border-top: 1px solid var(--ytiw-toc-border);
}

/* =========================================
   8. Smart Theme Integration (CORREÇÃO DE HERANÇA)
   ========================================= */
.ytiw-toc-theme_auto {
    opacity: 0; animation: ytiwFadeIn 0.5s ease forwards;
    /* Borda e Fundo calculados pelo JS */
    border: 1px solid var(--ytiw-toc-border);
    background: var(--ytiw-toc-bg); 
    border-radius: 6px; padding: 20px;
}

/* Ajustes Específicos para Compact + Smart Theme */
.ytiw-toc-compact.ytiw-toc-theme_auto {
    background: transparent; /* O wrapper deve ser transparente */
    padding: 0; /* Reseta padding do wrapper */
    border-color: var(--ytiw-toc-border);
}

.ytiw-toc-compact.ytiw-toc-theme_auto .ytiw-toc-header {
    background: var(--ytiw-toc-bg); /* Usa o bg calculado */
}

.ytiw-toc-compact.ytiw-toc-theme_auto .ytiw-toc-body {
    /* CORREÇÃO CRÍTICA: O corpo agora usa o mesmo background do header (ou variante) */
    background: var(--ytiw-toc-bg);
    border-top-color: var(--ytiw-toc-border);
}

.ytiw-toc-compact.ytiw-toc-theme_auto .ytiw-toc-toggle {
    border-left-color: var(--ytiw-toc-border);
}

/* Skins Básicos */
.ytiw-toc-clean { border-left: 3px solid var(--ytiw-toc-border); padding-left: 15px; }
.ytiw-toc-card { background: var(--ytiw-toc-bg); border: 1px solid var(--ytiw-toc-border); border-radius: 8px; padding: 20px; }
.ytiw-toc-glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; padding: 20px; }

@keyframes ytiwFadeIn { to { opacity: 1; } }

@media (max-width: 768px) {
    #ytiw-toc { width: 100% !important; float: none; margin: 15px 0; }
}