/* ========================================
   TEMAS DINÂMICOS - MARKETPLACES
   Sistema de temas com cores e imagens de fundo
   ======================================== */

/* 1. MERCADO LIVRE (Padrão - Amarelo) */
.tema-mercado_livre {
    --primary-color: #fff159;
    --secondary-color: #2d3277;
    --text-color: #333;
    --bg-header: #fff159;
}

.tema-mercado_livre .btn, 
.tema-mercado_livre button.primary,
.tema-mercado_livre input[type="submit"],
.tema-mercado_livre .search button { 
    background: #3483fa !important; 
    color: #fff !important;
    border: none !important;
}

.tema-mercado_livre .btn:hover,
.tema-mercado_livre .search button:hover {
    background: #2968c8 !important;
}

.tema-mercado_livre {
    background: linear-gradient(rgba(255, 241, 89, 0.1), rgba(255, 241, 89, 0.05)), 
                url('fundo1.png') no-repeat center top !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* 2. OLX (Roxo/Laranja) */
.tema-olx {
    --primary-color: #6e0ad2;
    --secondary-color: #f28000;
    --text-color: #fff;
    --bg-header: #6e0ad2;
}

.tema-olx {
    background: linear-gradient(rgba(110, 10, 210, 0.15), rgba(242, 128, 0, 0.1)), 
                url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=1920&q=80') no-repeat center top !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

.tema-olx header .brand, 
.tema-olx header .menu-link { 
    color: #fff !important; 
}

.tema-olx header div[style*="color:#222"] {
    color: #fff !important;
    opacity: 0.9 !important;
}

.tema-olx .btn, 
.tema-olx button.primary { 
    background: #f28000 !important; 
    color: #fff !important;
}

/* 3. SHOPEE (Laranja) */
.tema-shopee {
    --primary-color: #ee4d2d;
    --secondary-color: #fff;
    --text-color: #fff;
    --bg-header: #ee4d2d;
}

.tema-shopee {
    background: linear-gradient(rgba(238, 77, 45, 0.12), rgba(238, 77, 45, 0.08)), 
                url('https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=1920&q=80') no-repeat center top !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

.tema-shopee header .brand, 
.tema-shopee header .menu-link { 
    color: #fff !important; 
}

.tema-shopee header div[style*="color:#222"] {
    color: #fff !important;
    opacity: 0.95 !important;
}

.tema-shopee .btn, 
.tema-shopee button.primary { 
    background: #ee4d2d !important; 
    border: 1px solid #fff; 
    color: #fff !important;
}

/* 4. AMAZON (Preto/Laranja) */
.tema-amazon {
    --primary-color: #232f3e;
    --secondary-color: #ff9900;
    --text-color: #fff;
    --bg-header: #232f3e;
}

.tema-amazon {
    background: linear-gradient(rgba(35, 47, 62, 0.2), rgba(255, 153, 0, 0.05)), 
                url('https://images.unsplash.com/photo-1566576721346-d4a3b4eaeb55?w=1920&q=80') no-repeat center top !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

.tema-amazon header .brand, 
.tema-amazon header .menu-link { 
    color: #fff !important; 
}

.tema-amazon header div[style*="color:#222"] {
    color: #fff !important;
    opacity: 0.9 !important;
}

.tema-amazon .btn, 
.tema-amazon button.primary { 
    background: #ff9900 !important; 
    color: #232f3e !important; 
    font-weight: 600;
}

/* 5. TRANSPORTADORA (Template Próprio - Azul Profissional) */
.tema-transportadora {
    --primary-color: #0066cc;
    --secondary-color: #003d7a;
    --text-color: #fff;
    --bg-header: linear-gradient(135deg, #0066cc 0%, #003d7a 100%);
}

.tema-transportadora {
    background: linear-gradient(rgba(0, 102, 204, 0.4), rgba(0, 61, 122, 0.5)), 
                url('https://images.unsplash.com/photo-1519003722824-194d4455a60c?w=1920&q=80') no-repeat center top !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

.tema-transportadora header {
    background: linear-gradient(135deg, #0066cc 0%, #003d7a 100%) !important;
}

.tema-transportadora header .brand, 
.tema-transportadora header .menu-link { 
    color: #fff !important; 
}

.tema-transportadora header div[style*="color:#222"] {
    color: #fff !important;
    opacity: 0.95 !important;
}

.tema-transportadora .menu-link.btn-primary {
    background: #fff !important;
    color: #0066cc !important;
    font-weight: 600;
}

.tema-transportadora .menu-link.btn-primary:hover {
    background: #f0f0f0 !important;
}

.tema-transportadora .btn, 
.tema-transportadora button.primary { 
    background: #0066cc !important; 
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.tema-transportadora .card {
    border-left: 4px solid #0066cc;
}

/* Estilos Gerais Aplicados a Todos os Temas */
body[class*="tema-"] header {
    background-color: var(--bg-header) !important;
}

body[class*="tema-"] .status-badge.status-pendente {
    border-left: 4px solid var(--primary-color) !important;
}

/* Ajustes de Logo Dinâmico */
.logo-container {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo-container img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* Ajustes para garantir legibilidade em todos os temas */
body[class*="tema-"] .card {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
}

body[class*="tema-"] footer {
    background: rgba(248, 249, 250, 0.95) !important;
    backdrop-filter: blur(10px);
}

/* Transições suaves */
body, header, .card, button, .btn {
    transition: all 0.3s ease-in-out;
}

/* ========================================
   ESTILOS BASE DO CABEÇALHO (DESKTOP)
   ======================================== */
header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 24px !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
}

.header-left {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.header-right {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.menu-link {
    text-decoration: none !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    transition: background 0.3s, color 0.3s;
}

.menu-link.active-page {
    background: rgba(0, 0, 0, 0.1); /* Padrão para destacar */
    font-weight: 700 !important;
}

/* Sobrescrever para temas escuros */
.tema-olx .menu-link.active-page,
.tema-shopee .menu-link.active-page,
.tema-amazon .menu-link.active-page,
.tema-transportadora .menu-link.active-page {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--white) !important;
}

/* Ajuste para o tema Mercado Livre (claro) */
.tema-mercado_livre .menu-link.active-page {
    background: rgba(0, 0, 0, 0.1) !important;
    color: var(--dark) !important;
}

/* ========================================
   REGRAS DE RESPONSIVIDADE (MOBILE)
   ======================================== */
@media (max-width: 768px) {
    header {
        flex-direction: column !important;
        align-items: center !important;
        padding: 15px 10px !important;
        height: auto !important;
        gap: 15px !important;
        flex-wrap: wrap !important;
    }

    .header-left {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .header-left .logo {
        margin: 0 auto !important;
    }

    .brand {
        font-size: 18px !important;
        display: block !important;
        width: 100% !important;
    }

    header div[style*="font-size:13px"], 
    #header-subtitle {
        font-size: 12px !important;
        display: block !important;
        width: 100% !important;
        margin-top: 4px !important;
    }

    .header-right {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .menu-link.active-page {
        background: rgba(255, 255, 255, 0.2) !important;
        color: var(--white) !important;
    }

    .tema-mercado_livre .menu-link.active-page {
        background: rgba(0, 0, 0, 0.1) !important;
        color: var(--dark) !important;
    }

    .menu-link {
        font-size: 12px !important;
        padding: 8px 12px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 6px !important;
        flex: 1 1 auto !important;
        min-width: 100px !important;
        text-align: center !important;
    }

    .tema-mercado_livre .menu-link {
        background: rgba(0, 0, 0, 0.05) !important;
        border-color: rgba(0, 0, 0, 0.1) !important;
        color: #333 !important;
    }

    .menu-link.btn-primary {
        background: #222 !important;
        color: #fff !important;
        border: none !important;
    }

    .notif-badge {
        top: -5px !important;
        right: -5px !important;
    }
}