/**
 * Fix específico para o logo - garantir que não cresça descontroladamente
 * e que apenas UMA logo apareça conforme o tema (light = preta, dark = branca).
 * No header usa-se uma única <img> e o src é trocado via JS (main.js).
 * Este arquivo deve ser carregado depois do design-system.css
 */

/* Header: uma única img, sempre visível (src trocado por tema no JS).
   Shell (.app-top-header__logo) + login anónimo (.site-header .logo) — mesmo padrão da index. */
.site-header .logo #header-logo-img.logo-img,
.site-header .logo .logo-img,
.app-top-header__logo.logo #header-logo-img.logo-img,
.app-top-header__logo .logo-img,
.app-top-header__logo.logo .logo-img {
    display: block !important;
    visibility: visible !important;
    width: 45px !important;
    height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* Tamanho fixo para imagens do logo quando visíveis (outros contextos) */
.site-header .logo .logo-img,
.app-top-header__logo .logo-img,
.app-top-header__logo.logo .logo-img,
.header .logo-img,
.header-content .logo-img,
.logo .logo-img,
a.logo .logo-img,
.logo-img-dark,
.logo-img-light {
    width: 45px !important;
    height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---- Regras por tema: só uma logo visível no header ---- */

/* Padrão: esconder as duas (evita FOUC com ambas); tema será aplicado pelo script inline */
.site-header .logo .logo-img-dark,
.site-header .logo .logo-img-light {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* Tema dark (ou sem tema): mostrar só logo BRANCA (light), esconder a preta (dark) */
html[data-theme="dark"] .site-header .logo .logo-img-light,
html:not([data-theme]) .site-header .logo .logo-img-light {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    overflow: visible !important;
    clip: auto !important;
}

html[data-theme="dark"] .site-header .logo .logo-img-dark,
html:not([data-theme]) .site-header .logo .logo-img-dark {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* Tema light: mostrar só logo PRETA (dark), esconder a branca (light) */
html[data-theme="light"] .site-header .logo .logo-img-dark {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    overflow: visible !important;
    clip: auto !important;
}

html[data-theme="light"] .site-header .logo .logo-img-light {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

@media (max-width: 767px) {
    .site-header .logo #header-logo-img.logo-img,
    .site-header .logo .logo-img,
    .app-top-header__logo #header-logo-img.logo-img,
    .app-top-header__logo .logo-img,
    .app-top-header__logo.logo .logo-img,
    .header .logo-img,
    .header-content .logo-img,
    .logo .logo-img,
    a.logo .logo-img,
    .logo-img-dark,
    .logo-img-light {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    html[data-theme="dark"] .site-header .logo .logo-img-light,
    html:not([data-theme]) .site-header .logo .logo-img-light,
    html[data-theme="light"] .site-header .logo .logo-img-dark {
        width: 32px !important;
        height: 32px !important;
    }
}