/* ============================================================
   LAYOUT MARY & JOHN — COMPATÍVEL COM BOOTSTRAP
   ============================================================ */

body {
    background: var(--cor-fundo);
    font-family: var(--fonte-principal);
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: var(--largura-sidebar);
    background: var(--cor-primaria);
    color: var(--cor-branco);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 20px;
    transition: .3s ease;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    /* Menu ficou mais alto que a tela em telas menores/com muitos grupos
       abertos e cortava sem rolar — mesma solução já usada no mobile
       (ver @media abaixo), aplicada também no desktop, sem mudar mais
       nada do visual do menu. */
    overflow-y: auto;
}

.sidebar.collapsed {
    width: var(--largura-sidebar-reduzida);
}


.sidebar a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cor-branco);
    text-decoration: none;
    padding: 10px 0;
    font-size: 16px;
}

.sidebar a:hover {
    background: var(--cor-primaria-escura);
    border-radius: var(--radius-padrao);
}

.sidebar.collapsed span,
.sidebar.collapsed .user-details {
    display: none;
}

/* ===== SUBMENUS (grupos colapsáveis) ===== */
.sidebar .menu-grupo-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    color: var(--cor-branco);
    text-align: left;
    padding: 10px 0;
    font-size: 16px;
    cursor: pointer;
}

.sidebar .menu-grupo-toggle:hover {
    background: var(--cor-primaria-escura);
    border-radius: var(--radius-padrao);
}

.sidebar .menu-grupo-toggle .bi-chevron-down {
    margin-left: auto;
    font-size: 12px;
    transition: transform .2s ease;
}

.sidebar .menu-grupo-toggle[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

/* Sem display:flex aqui de propósito — herdar o display padrão do
   Bootstrap Collapse (.collapse/.collapse.show) é o que faz esconder/
   mostrar funcionar. Forçar flex aqui empatava em especificidade com a
   regra .collapse:not(.show) do Bootstrap e, como vinha depois no CSS,
   vencia o empate — resultado: o submenu reabria sozinho assim que a
   animação de fechar terminava e o Bootstrap limpava o height inline.
   Os links dentro (.sidebar a) já são display:flex individualmente, então
   empilham normalmente sem precisar do container também ser flex. */

.sidebar .submenu a {
    padding-left: 28px;
    font-size: 15px;
}

.sidebar.collapsed .menu-grupo-toggle .bi-chevron-down {
    display: none;
}

/* ===== TOPBAR ===== */
.topbar {
    background: var(--cor-branco);
    padding: 15px;
    border-radius: var(--radius-padrao);
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--cor-borda);
    transition: left .3s ease;
    position: fixed;
    top: 0;
    left: var(--largura-sidebar);
    right: 0;
    z-index: 5000;
}

#menuToggle {
    background: none;
    border: none;
    padding: 0;
    font-size: 30px;
    color: var(--cor-primaria);
}

/* ===== CONTEÚDO ===== */
.content {
    margin-top: var(--espaco-topbar);
    margin-left: var(--largura-sidebar);
    padding: 20px;
    transition: margin-left .3s ease;
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
    .topbar {
        left: 0;
        padding: 0 15px;
        height: 50px;
        border-radius: 0;
        /* Fica acima da sidebar aberta para o botão continuar visível/clicável */
        z-index: 8000;
    }

    .content {
        margin-left: 0;
        margin-top: 70px;
    }

    /* Abaixo de 768px o menu vira uma "página" cheia (não mais um painel
       estreito de 240px) — com overflow-y:auto pra rolar sem quebrar
       quando tem muitos itens/grupos abertos, e botões maiores pro toque. */
    .sidebar {
        left: -100%;
        width: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar.open {
        left: 0;
        z-index: 7000;
    }

    .sidebar a,
    .sidebar .menu-grupo-toggle {
        font-size: 18px;
        padding: 14px 12px;
        border-radius: var(--radius-padrao);
        background: rgba(255, 255, 255, 0.06);
        margin-bottom: 6px;
    }

    .sidebar .submenu a {
        font-size: 16px;
        padding-left: 30px;
    }

    #menuToggle {
        flex-shrink: 0;
    }
}

/* ===== TABELAS DE LISTAGEM -> CARTÕES EMPILHADOS (SÓ MOBILE) =====
   Ativado via classe .tabela-cartao-mobile, adicionada automaticamente pelo
   app.js (prepararTabelasCartaoMobile) em toda tabela dentro de um
   .table-responsive — não muda em nada o comportamento em desktop (essas
   regras só existem dentro deste @media). Os data-label de cada <td> também
   são preenchidos pelo JS a partir do texto do <th> correspondente, então
   nenhuma view precisa ser alterada individualmente. */
@media (max-width: 767px) {
    .tabela-cartao-mobile,
    .tabela-cartao-mobile tbody,
    .tabela-cartao-mobile tr,
    .tabela-cartao-mobile td {
        display: block;
        width: 100%;
    }

    .tabela-cartao-mobile thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .tabela-cartao-mobile tbody tr {
        margin-bottom: 12px;
        border: 1px solid var(--cor-borda);
        border-radius: var(--radius-padrao);
        padding: 10px 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }

    .tabela-cartao-mobile tbody tr:last-child {
        margin-bottom: 0;
    }

    .tabela-cartao-mobile td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
        border: none !important;
        border-bottom: 1px solid var(--cor-borda) !important;
        padding: 8px 0;
    }

    .tabela-cartao-mobile td:last-child {
        border-bottom: none !important;
    }

    .tabela-cartao-mobile td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--cor-texto);
        text-align: left;
        flex-shrink: 0;
    }

    .tabela-cartao-mobile td:not([data-label]) {
        justify-content: center;
    }
}

/* ===== AJUSTE QUANDO O SIDEBAR ESTÁ RECOLHIDO ===== */
body.sidebar-collapsed .topbar {
    left: var(--largura-sidebar-reduzida);
}

body.sidebar-collapsed .content {
    margin-left: var(--largura-sidebar-reduzida);
}

/* ===== AVATAR DO MENU SUSPENSO (topbar) — sem a setinha padrão do Bootstrap ===== */
.avatar-sem-seta.dropdown-toggle::after {
    display: none;
}

/* ===== RODAPÉ DO MENU LATERAL (bem discreto, fixo embaixo) ===== */
.rodape-menu {
    margin-top: auto;
    padding: 8px 4px 2px;
    text-align: center;
    line-height: 1.3;
}

.rodape-menu a {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
}

.rodape-menu a:hover {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
}

.sidebar.collapsed .rodape-menu {
    display: none;
}