* {
    box-sizing: border-box !important;
}

:root {
    --sidebar-width: 275px;
    --sidebar-bg: #100b50;  /* TESTE 3: Azul escuro intermediário */
    --sidebar-text: #ffffff;
    --sidebar-hover: rgba(121, 174, 200, 0.3);
    --sidebar-active: #29C0E6;
    --transition-speed: 0.2s; /* Reduzido de 0.3s para 0.2s para melhor performance */
}

/* Previne scroll duplo - apenas content rola */
html {
    overflow: hidden !important;
    height: 100% !important;
    width: 100% !important;
}

body {
    overflow: hidden !important;
    height: 100vh !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
}

/* MOBILE: Remover position:fixed do body que pode causar problemas de touch */
body.sidebar-mobile {
    position: relative !important;
    overflow: auto !important;
}

/* Container e main controlados via base_site.html inline CSS */

.sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 47px !important; /* ⭐ APROVADO FINAL - Commit 55e667d */
    width: var(--sidebar-width) !important;
    height: calc(100vh - 47px) !important; /* ⭐ APROVADO FINAL */
    background: linear-gradient(135deg, #100b50 0%, #0f1c2e 100%);
    color: var(--sidebar-text);
    z-index: 998 !important;
    overflow: auto;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    border: none !important;
    border-bottom: none !important;

    /* 🆕 MELHORIAS: GPU Optimization */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;

    /* 🆕 MELHORIAS: Transição mais suave e rápida */
    transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);

    /* 🆕 MELHORIAS: Touch support */
    touch-action: manipulation; /* Permite taps e scroll, bloqueia zoom */
    -webkit-overflow-scrolling: touch;

    /* 🆕 MELHORIAS: Ocultar scrollbar mantendo funcionalidade */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Ocultar scrollbar no Chrome/Safari/Opera */
.sidebar::-webkit-scrollbar {
    display: none;
}

/* ========== ANTI-FLASH: Desabilitar transições durante restauração ========== */
.accordion-collapse.no-transition,
.accordion-collapse.no-transition * {
    transition: none !important;
    animation: none !important;
}

/* Garantir que .show funciona sem Bootstrap API */
.accordion-collapse.show {
    display: block !important;
    height: auto !important;
}

/* ========== AJUSTE DE CONTEÚDO ========== */
/* Content e #content controlados via base_site.html inline CSS */

/* Previne scroll duplicado no div interno #content */
#content {
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
}

.sidebar-toggle {
    position: fixed;
    top: 50px;
    left: 15px;
    z-index: 10001;
    background: var(--sidebar-active);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 12px 15px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s;
    display: none;
    font-size: 18px;
}

.sidebar-toggle:hover {
    background: #2563eb;
    transform: scale(1.1);
}

.sidebar-backdrop {
    display: none;
}

/* ========================================
   MOBILE MODE - Ativado via JavaScript
   CRÍTICO: Manter translateZ(0) em TODOS os transforms
   para garantir mesmo stacking context
   ======================================== */
body.sidebar-mobile .sidebar {
    transform: translateX(-100%) translateZ(0) !important;
    transition: transform var(--transition-speed) ease;
    width: 0 !important;
    overflow: hidden !important;
    visibility: hidden;
}

body.sidebar-mobile .sidebar.open {
    transform: translateX(0) translateZ(0) !important;
    width: var(--sidebar-width) !important;
    overflow: auto !important;
    visibility: visible !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
}

/* CRÍTICO: Garantir que TODOS os elementos dentro da sidebar sejam clicáveis */
body.sidebar-mobile .sidebar.open,
body.sidebar-mobile .sidebar.open * {
    pointer-events: auto !important;
}

body.sidebar-mobile .sidebar.open a,
body.sidebar-mobile .sidebar.open button,
body.sidebar-mobile .sidebar.open .accordion-button,
body.sidebar-mobile .sidebar.open .sidebar-link {
    pointer-events: auto !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3) !important;
    touch-action: manipulation !important;
}

body.sidebar-mobile .sidebar-toggle {
    display: block !important;
    z-index: 10001 !important;
}

body.sidebar-mobile .sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998 !important;
    /* Estado inicial: invisível */
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Mesmo stacking context */
    transform: translateZ(0);
}

/* Remover padding-left do conteúdo quando sidebar oculta */
body.sidebar-mobile .main > .content {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Ajustar breadcrumbs para ocupar toda largura */
body.sidebar-mobile .breadcrumbs {
    left: 0 !important;
    width: 100% !important;
}

/* ========================================
   MOBILE MODE - LAYOUT DO CONTEÚDO
   ======================================== */

/* Container principal em mobile */
body.sidebar-mobile #container {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

body.sidebar-mobile .main {
    margin-left: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100% !important;
}

body.sidebar-mobile #content {
    margin-left: 0 !important;
    padding: 10px !important;
    width: 100% !important;
}

/* Filtros em mobile - empilhar verticalmente */
body.sidebar-mobile #changelist-filter {
    position: relative !important;
    float: none !important;
    width: 100% !important;
    margin: 10px 0 !important;
    order: -1 !important;
}

/* Tabelas responsivas */
body.sidebar-mobile #changelist {
    width: 100% !important;
    overflow-x: auto !important;
}

body.sidebar-mobile #changelist table {
    min-width: 100% !important;
}

/* Formulários em mobile */
body.sidebar-mobile .form-row {
    display: block !important;
    width: 100% !important;
}

body.sidebar-mobile .form-row input,
body.sidebar-mobile .form-row select,
body.sidebar-mobile .form-row textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Módulos em mobile */
body.sidebar-mobile .module {
    width: 100% !important;
    margin: 10px 0 !important;
    overflow-x: auto !important;
}

/* Submit row em mobile */
body.sidebar-mobile .submit-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 10px !important;
}

body.sidebar-mobile .submit-row input,
body.sidebar-mobile .submit-row a {
    width: 100% !important;
    text-align: center !important;
}

/* Header em mobile - mais compacto */
body.sidebar-mobile #header {
    padding: 5px 10px !important;
}

body.sidebar-mobile #header #site-name {
    font-size: 14px !important;
}

body.sidebar-mobile .header-logo-small {
    height: 80px !important;
    margin-top: -25px !important;
    margin-bottom: -25px !important;
}

/* Taxa dólar em mobile */
body.sidebar-mobile .taxa-dolar-banner {
    font-size: 12px !important;
    padding: 5px 10px !important;
    flex-wrap: wrap !important;
}

/* User tools em mobile - ocultar para mais espaço */
body.sidebar-mobile #user-tools {
    display: none !important;
}

/* Fallback com media query para telas pequenas (caso JavaScript não carregue) */
@media (max-width: 1152px) {
    .sidebar {
        transform: translateX(-100%) translateZ(0) !important;
        transition: transform var(--transition-speed) ease;
        width: 0 !important;
        overflow: hidden !important;
        visibility: hidden;
    }

    .sidebar.open {
        transform: translateX(0) translateZ(0) !important;
        width: var(--sidebar-width) !important;
        overflow: auto !important;
        visibility: visible;
        z-index: 10000 !important;
        pointer-events: auto !important;
    }

    .sidebar-toggle {
        display: block !important;
        z-index: 10001 !important;
    }

    .sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998 !important;
        display: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateZ(0);
    }

    .main > .content {
        padding-left: 0 !important;
    }

    .breadcrumbs {
        left: 0 !important;
        width: 100% !important;
    }
}


.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-header h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
}

.sidebar-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.user-avatar {
    font-size: 2.5rem;
    color: var(--sidebar-active);
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: white;
}

.user-role {
    font-size: 0.8rem;
    opacity: 0.7;
    color: rgba(255, 255, 255, 0.7);
}

.sidebar .accordion-button {
    background-color: transparent;
    color: var(--sidebar-text);
    border: none;
    padding: 0.6rem 1rem;
    font-size: 14px !important;
}

/* Setas brancas - Estado collapsed (seta para direita) */
.sidebar .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* Setas brancas - Estado expanded (seta para baixo) */
.sidebar .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.sidebar .accordion-button:not(.collapsed) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

.sidebar .accordion-button:focus {
    box-shadow: none;
}

.sidebar .accordion-button i {
    font-size: 14px !important;
}

.sidebar .accordion-item {
    background-color: transparent;
    border: none;
}

.sidebar .accordion-body a {
    color: #ffffff !important;
    font-size: 14px !important;
}

.sidebar-link {
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 0.6rem 1rem;
    border-radius: 0.4rem;
    transition: all 0.2s;
    font-size: 14px !important;
}

.sidebar-link:hover,
.sidebar-link:active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

/* Touch-friendly para mobile */
.sidebar-link {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
    touch-action: manipulation;
    cursor: pointer;
}

.sidebar-link.active {
    background-color: var(--sidebar-active) !important;
    color: white !important;
}

.sidebar-link i {
    font-size: 14px !important;
}

.sidebar-footer {
    margin-top: auto;
    border-top: none !important;
    padding: 1rem;
}

.logout-link {
    color: var(--sidebar-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.logout-link:hover {
    color: white;
}

/* ========== CORREÇÃO BOTÃO APAGAR CORTADO ========== */
.submit-row {
    overflow: visible !important;
    padding-right: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.submit-row a.deletelink {
    height: 35px !important;
    line-height: 35px !important;
    padding: 0 15px !important;
}

/* ========== CABEÇALHO DO SISTEMA ========== */
/* ⭐ APROVADO FINAL - Commit 55e667d */
/* NOTA: Login/logout removidos - têm estilo próprio via JS */
#header,
body #header,
html body #header,
#container #header {
    height: 47px !important;
    overflow: visible !important;
    background: linear-gradient(to right, white 0%, white 33%, #100b50 66%, #100b50 100%) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
}

/* ========== HEADER LOGIN/LOGOUT/2FA - Fundo azul claro ========== */
/* Especificidade maior: body.login #header > #header */
body.login #header,
body.logged-out #header,
body.page-2fa-verify #header,
html body.login #header,
html body.logged-out #header,
html body.page-2fa-verify #header {
    background: #EBf1ff !important;
    background-color: #EBf1ff !important;
    background-image: none !important;
    height: 141px !important;
    min-height: 141px !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

body.login #header .header-logo-small,
body.logged-out #header .header-logo-small,
body.page-2fa-verify #header .header-logo-small {
    height: 300px !important;
    width: auto !important;
    margin-top: -80px !important;
    margin-bottom: -80px !important;
}

/* ========== BREADCRUMB FIXO ========== */
.breadcrumbs {
    position: fixed !important;
    top: 47px !important; /* ⭐ APROVADO FINAL - Commit 55e667d */
    left: var(--sidebar-width) !important;
    right: 0 !important;
    z-index: 999 !important;
    padding: 5px 40px !important;
    border-radius: 6px !important;
    margin: 0 !important;
    background: #02026E !important;
    color: #ffffff !important;
}

.breadcrumbs a {
    color: #ffffff !important;  /* Links brancos */
    text-decoration: underline !important;
}

.breadcrumbs a:hover {
    color: #29C0E6 !important;  /* Hover azul claro */
}

#header #site-name {
    display: flex !important;
    align-items: center !important;
    gap: -5px !important; /* ⭐ APROVADO FINAL - Commit 55e667d */
}

#header #site-name a {
    color: #050042 !important;
    font-weight: bold !important;
    font-size: inherit !important; /* Herdar tamanho do pai */
}

.header-logo-small {
    height: 140px !important; /* ⭐ APROVADO FINAL - Commit 55e667d */
    width: auto !important;
    max-width: none !important;
    vertical-align: middle !important;
    margin-top: -55px !important; /* ⭐ APROVADO FINAL - Commit 55e667d */
    margin-bottom: -45px !important; /* ⭐ APROVADO FINAL - Commit 55e667d */
}

/* Forçar tamanho do logo com maior especificidade */
#header .header-logo-small,
#header #site-name .header-logo-small,
#site-name .header-logo-small {
    height: 140px !important; /* ⭐ APROVADO FINAL - Commit 55e667d */
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin-top: -55px !important; /* ⭐ APROVADO FINAL - Commit 55e667d */
    margin-bottom: -45px !important; /* ⭐ APROVADO FINAL - Commit 55e667d */
}

/* ========== USER TOOLS (Bem-vindo, admin...) ========== */
#user-tools, #user-tools a, #logout-form button {
    font-weight: bold !important;
    color: #ffffff !important;
    font-family: inherit !important; /* Manter fonte padrão do sistema */
}

#user-tools a:hover, #user-tools a:focus,
#logout-form button:hover, #logout-form button:focus {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* ========== OCULTAR LINKS INDESEJADOS DO USER-TOOLS ========== */
/* Ocultar "Ver o site" */
#user-tools a[target="_blank"] {
    display: none !important;
}

/* Ocultar "Alterar senha" padrão do Django (mantém nossa versão customizada) */
#user-tools a[href*="/password_change/"] {
    display: none !important;
}

/* Ocultar TODOS os separadores "/" do user-tools */
#user-tools > span {
    display: none !important;
}

/* ========== LIMPAR ÍCONES INDESEJADOS DO USER-TOOLS ========== */
/* Remover qualquer pseudo-elemento ::before que possa estar sendo adicionado */
#user-tools a::before,
#user-tools form::before,
#logout-form::before,
#logout-form button::before,
#user-tools button[type="submit"]::before {
    content: none !important;
    display: none !important;
}

/* Garantir que não haja ícones Font Awesome sendo injetados */
#user-tools [class*="fa-"]::before,
#user-tools .fa::before,
#user-tools .fas::before,
#user-tools .far::before {
    content: none !important;
    display: none !important;
}

/* ========== OCULTAR ÍCONE DE TEMA (PRODUÇÃO) ========== */
/*
 * IMPORTANTE: Botão de tema está oculto para prevenir uso indevido.
 *
 * Dark mode funciona automaticamente através da preferência do sistema operacional:
 * - Windows: Configurações > Personalização > Cores > Escolha seu modo
 * - macOS: Preferências do Sistema > Geral > Aparência
 * - Linux: Varia conforme desktop environment
 *
 * PARA DESENVOLVEDORES: Para testar ambos os temas durante desenvolvimento,
 * comente temporariamente a linha abaixo:
 */
#user-tools .theme-toggle {
    display: none !important;  /* Comente esta linha para testes */
}

/*
 * ALTERNATIVA: Para habilitar apenas para superusuários, mova esta regra
 * para o bloco {% if not user.is_superuser %} no base_site.html
 */

/* ========== TÍTULO DAS PÁGINAS ========== */
/* 1. "Modificar Abrasivo" - Título principal */
#content h1 {
    font-size: 25px !important;
    color: #02026E !important;
}

/* 2. "HT57 30/40 - $0.170" - Nome do objeto */
#content > h2:first-of-type {
    font-size: 18px !important;
    color: #02026E !important;
}

/* 3. "Dados Básicos" - Título do fieldset (mantém cor padrão branca) */
.module h2,
fieldset h2 {
    font-size: 18px !important;
    /* Mantém cor padrão do Django (branco no azul) */
}

/* ========================================
   MENU LATERAL - 3 NÍVEIS
   FONTE PADRONIZADA: 14px para todos os níveis
   ======================================== */

/* Nível 1 - Botão principal do accordion */
.sidebar .accordion-button {
    font-size: 14px !important;
}

/* Nível 2 - Sub-accordion (Categorias) - PADRONIZADO */
.sub-accordion {
    font-size: 14px !important;
    padding: 10px 15px !important;
    color: var(--sidebar-text) !important;
    margin: 0 !important;
    transition: all 0.2s !important;
}

.sub-accordion:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.sub-accordion:not(.collapsed) {
    font-weight: 600 !important;
}

.sub-accordion i {
    font-size: 14px !important;
    opacity: 0.9;
}

/* Nível 2 - Link direto (sem filhos) */
.sidebar-link.level-2 {
    padding: 10px 15px 10px 15px !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.2s !important;
    display: block !important;
}

.sidebar-link.level-2:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* Nível 3 - Links finais */
.sidebar-link.level-3 {
    padding: 8px 15px 8px 25px !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.2s !important;
}

.sidebar-link.level-3:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Ajuste de espaçamento para accordion aninhado */
.accordion-item .accordion-item {
    margin-left: 0 !important;
}

.accordion-item .accordion-body {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* ========================================
   USER PANEL - PAINEL DO USUÁRIO
   ======================================== */

.user-panel {
    padding: 20px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.1);
}

.user-avatar {
    flex-shrink: 0;
}

.user-avatar .avatar-img {
    width: 67px;
    height: 67px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--sidebar-active);
}

.user-avatar .avatar-fallback {
    width: 67px;
    height: 67px;
    border-radius: 50%;
    background: var(--sidebar-active);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: 14px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 5px;
}

.user-role i {
    font-size: 11px;
}

/* Responsivo - User Panel */
body.sidebar-mobile .user-panel {
    padding: 15px 10px;
}

body.sidebar-mobile .user-avatar .avatar-img,
body.sidebar-mobile .user-avatar .avatar-fallback {
    width: 53px;
    height: 53px;
}

body.sidebar-mobile .user-avatar .avatar-fallback {
    font-size: 21px;
}

body.sidebar-mobile .user-name {
    font-size: 13px;
}

body.sidebar-mobile .user-role {
    font-size: 11px;
}

/* Fallback com media query */
@media (max-width: 1152px) {
    .user-panel {
        padding: 15px 10px;
    }

    .user-avatar .avatar-img,
    .user-avatar .avatar-fallback {
        width: 53px;
        height: 53px;
    }

    .user-avatar .avatar-fallback {
        font-size: 21px;
    }

    .user-name {
        font-size: 13px;
    }

    .user-role {
        font-size: 11px;
    }
}

/* ========================================
   🆕 MELHORIAS: PRINT STYLES
   ======================================== */
@media print {
    .sidebar,
    .sidebar-toggle,
    .sidebar-backdrop,
    #sidebarToggle,
    #header {
        display: none !important;
    }

    .content-area,
    .main > .content {
        position: static !important;
        padding: 0 !important;
        margin: 0 !important;
        left: 0 !important;
    }
}

/* ========================================
   🆕 MELHORIAS: REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar-backdrop,
    .sidebar-link,
    .sidebar-toggle,
    .accordion-button {
        transition: none !important;
        animation: none !important;
    }
}