/* ===== Base: mobile-first ===== */
html {
    font-size: 12px;
}

body {
    overflow-x: hidden;
}

/* Evita textos enormes em iPhone (zoom de fonte do Safari) */
body, input, button, select, textarea {
    -webkit-text-size-adjust: 100%;
}

/* Imagens e cards não estourarem */
img {
    max-width: 100%;
    height: auto;
}

.card {
    max-width: 100%;
}

/* ===== Ajustes no seu layout (exemplos comuns no Blazor template) ===== */
.sidebar {
    width: 280px; /* desktop */
}

/* Quando o NavMenu estiver dentro do offcanvas, ele NÃO pode ser fixed/sticky */
.ra-offcanvas-menu .ra-sidebar,
.ra-offcanvas-menu .sidebar,
.ra-offcanvas-menu .nav-scrollable,
.ra-offcanvas-menu nav {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    overflow: auto !important;
    z-index: auto !important;
}

/* Garantia extra: o offcanvas precisa ficar acima de qualquer sidebar “metida a besta” */
.offcanvas {
    z-index: 2000;
}

.offcanvas-backdrop {
    z-index: 1990;
}

/* Offcanvas precisa mandar no menu no mobile */
.offcanvas.offcanvas-start {
    --bs-offcanvas-width: 260px;
}

/* O conteúdo do menu dentro do offcanvas não pode “forçar” 100vh */
.offcanvas .sidebar {
    height: 100%;
    width: 100%;
}

/* Se algum CSS estiver interferindo, isso garante que o painel apareça */
.offcanvas.show,
.offcanvas.showing {
    visibility: visible !important;
    transform: none !important;
}

/* Mobile: sidebar vira "top bar" e não empurra conteúdo */
@media (max-width: 768px) {
    html {
        font-size: 12px;
    }

    /* Se seu conteúdo usa margin-left por causa da sidebar */
    .main, .content, main {
        margin-left: 0 !important;
        padding: .75rem !important;
    }

    /* Botões e inputs mais “tocáveis” */
    .btn {
        padding: .6rem .9rem;
    }

    .form-control {
        padding: .65rem .8rem;
    }

    /* Títulos enormes viram títulos normais */
    h1 {
        font-size: 12px;
    }

    h2 {
        font-size: 12px;
    }

    h3 {
        font-size: 12px;
    }

    /* Tabelas: não quebrar a tela */
    .table-responsive {
        overflow-x: auto;
    }

    /* Topbar fixa */
    .ra-topbar {
        position: sticky;
        top: 0;
        z-index: 4000;
        height: 56px;
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: 0 .75rem;
        background: #7d0b0b;
        color: #fff;
        border-bottom: 1px solid rgba(255,255,255,.15);
    }

    /* Empurra o conteúdo pra não ficar atrás da topbar */
    .ra-content {
        padding-top: 0.75rem; 
    }

    /* Botão hamburger sempre clicável */
    .ra-hamburger {
        z-index: 4100;
    }

    /* Título da topbar não invade o botão */
    .ra-topbar-title {
        flex: 1;
        min-width: 0;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* Tema do offcanvas para combinar com o menu vermelho */
#raMobileMenu .offcanvas-header {
    background: #7d0b0b;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#raMobileMenu .offcanvas-title {
    color: #fff;
    font-weight: 600;
}

/* O botão X do Bootstrap é um SVG escuro; aqui a gente clareia */
#raMobileMenu .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: .9;
}

    #raMobileMenu .btn-close:active,
    #raMobileMenu .btn-close:focus {
        opacity: 1;
        box-shadow: none;
    }

.offcanvas.offcanvas-start {
    --bs-offcanvas-width: 78vw; /* ou 280px, 300px */
    max-width: 320px;
}

/* Dentro do offcanvas, o menu deve ocupar toda a largura */
#raMobileMenu .sidebar {
    width: 100% !important;
}

/* Se existir algum padding/margem que esteja “criando branco” */
#raMobileMenu .offcanvas-body {
    padding: 0 !important;
}

#raMobileMenu .sidebar {
    background: #7d0b0b !important;
}