/* public/css/style.css */

/* Define variáveis CSS com as cores da empresa */
:root {
    --primary-color: #36B451; /* Verde Naturas */
    --secondary-color: #F7941D; /* Laranja Naturas */
    --bs-primary: var(--primary-color); /* Sobrescreve primary do Bootstrap */
    --bs-primary-rgb: 54, 180, 81; /* RGB do verde para opacidade */
    --bs-secondary: var(--secondary-color); /* Sobrescreve secondary do Bootstrap */
    --bs-secondary-rgb: 247, 148, 29; /* RGB do laranja para opacidade */
     --bs-link-color: var(--secondary-color);
     --bs-link-hover-color: #c47617; /* Laranja mais escuro para hover */
}

/* Aplica a cor primária personalizada à navbar (se usar bg-primary-custom) */
.bg-primary-custom { background-color: var(--primary-color) !important; }

/* Estilos para botões personalizados (Serão removidos/substituídos) */
/* .btn-primary-custom { background-color: var(--primary-color); border-color: var(--primary-color); color: white; } */
/* .btn-primary-custom:hover, .btn-primary-custom:focus, .btn-primary-custom:active { background-color: #2a8c3f; border-color: #2a8c3f; color: white; } */
/* .btn-secondary-custom { background-color: var(--secondary-color); border-color: var(--secondary-color); color: white; } */
/* .btn-secondary-custom:hover, .btn-secondary-custom:focus, .btn-secondary-custom:active { background-color: #e68a1b; border-color: #e68a1b; color: white; } */

/* Ajuste para o logo na navbar */
.navbar-brand img { max-height: 40px; margin-right: 0.5rem; }

/* Estilo para o layout de login */
body.login-page { background-color: #f8f9fa; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 15px; }
 .login-card { max-width: 420px; width: 100%; background-color: #fff; border-radius: 0.5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); overflow: hidden; }
 .login-logo { padding: 1.5rem; text-align: center; border-bottom: 1px solid #dee2e6; }
 .login-logo img { max-height: 50px; margin-bottom: 0.5rem; }
.login-card .card-body { padding: 2rem; }

/* Indicador de campo obrigatório */
.required-indicator { color: red; margin-left: 2px; }

/* Oculta colunas com a classe específica */
.table .col-hidden-id { display: none; }

/* Estilos Tabela Responsiva */
@media (max-width: 767.98px) {
    .table-mobile-cards thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
    .table-mobile-cards, .table-mobile-cards tbody { display: block; width: 100%; }
    .table-mobile-cards tbody { border-collapse: separate; border-spacing: 0; }
    .table-mobile-cards tr { display: block; border: 1px solid #e3e6f0; border-radius: 0.35rem; overflow: hidden; background-color: #fff; }
    .table-mobile-cards tr + tr { margin-top: 1rem; }
    .table-mobile-cards td { display: flex; justify-content: space-between; align-items: center; text-align: left; /*padding: 0.75rem 1rem; */ border: none; border-bottom: 1px solid #f0f1f5; font-size: 0.77rem; }
    .table-mobile-cards tr td:last-child { border-bottom: 0; }
    .table-mobile-cards td::before { content: attr(data-label); font-weight: bold; color: #858796; padding-right: 1rem; white-space: nowrap; flex-shrink: 0; }
    .table-mobile-cards td > *:not(i):not(.badge), .table-mobile-cards td > span > *:not(i):not(.badge) { margin-left: auto; text-align: right;}
    .table-mobile-cards td > .badge, .table-mobile-cards td > span > .badge { margin-left: auto; }
    .table-mobile-cards td[data-label="Origem"] span, .table-mobile-cards td[data-label="Destino"] span { display: inline-flex; align-items: center; margin-left: auto; }
    .table-mobile-cards td[data-label="Origem"] small, .table-mobile-cards td[data-label="Destino"] small { margin-left: 0.25rem; font-size: 0.85em; color: #858796; }
    .table-mobile-cards td[data-label="Urgência"] span { margin-left: auto; white-space: nowrap; } .table-mobile-cards td[data-label="Urgência"] span span { display: inline !important; }
    .table-mobile-cards td[data-label="Status"] .badge { margin-left: auto; white-space: nowrap; } .table-mobile-cards td[data-label="Status"] .badge span { display: inline !important; }
    .table-mobile-cards td[data-label="Ações"] { justify-content: center; padding-top: 0.5rem; padding-bottom: 0.5rem; background-color: #f8f9fc; }
    .table-mobile-cards td[data-label="Ações"]::before { content: ''; display: none; }
    .table-mobile-cards td[data-label="Ações"] .btn-group { width: 100%; display: flex; justify-content: space-around; }
    .table-mobile-cards td.col-hidden-id { display: none !important; }
    .table-mobile-cards td[data-label="ID"] { display: none !important; }
}

/* ====================================================== */
/* AJUSTES TOPBAR E TOGGLER VOLT                         */
/* ====================================================== */

/* Estilo Padrão (Tela Grande): Garante que o nome do usuário seja escuro */
/* A classe .topbar-extra foi adicionada ao <nav> da topbar no layouts/app.php */
.navbar-top.topbar-extra .user-name-text {
    color: #111827 !important; /* Cor escura padrão (text-gray-900) */
}

/* Estilos para Telas Pequenas (< 992px) */
@media (max-width: 991.98px) {

    /* Aplica fundo escuro à topbar */
    .navbar-top.topbar-extra {
        background-color: #1F2937 !important; /* Cinza 800 do Volt */
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
        border-radius: 0 !important;
    }

    /* Força exibição e cor CLARA do Toggler (Hambúrguer) */
    /* Seletor mais específico */
    nav.navbar-dashboard .navbar-toggler.d-lg-none {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: rgba(255, 255, 255, 0.55) !important; /* Adicionado !important */
        border-color: rgba(255, 255, 255, 0.1) !important; /* Adicionado !important */
    }

     /* Ícone do Toggler (Hambúrguer) claro */
     /* Seletor mais específico */
    nav.navbar-dashboard .navbar-toggler.d-lg-none .navbar-toggler-icon {
        display: inline-block !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
}

/* Regras para #sidebarMenu.collapse (mantidas) */
#sidebarMenu.collapse:not(.show) { display: none; }
@media (min-width: 992px) { #sidebarMenu.collapse { display: block; } }

/* ====================================================== */
/* INÍCIO DO CÓDIGO CSS DO VOLT (Colado do seu backup)    */
/* ====================================================== */
/* @charset "UTF-8"; ... (todo o código do volt.css que estava no seu style.css) ... */
/* ====================================================== */
/* FIM DO CÓDIGO CSS DO VOLT                             */
/* ====================================================== */

.memo-content-display strong,
.memo-content-display b,
.kb-content-display strong, /* Adicione uma classe similar para exibição KB */
.kb-content-display b {
    font-weight: bold !important; /* Use bold ou 700. !important pode ser necessário para sobrescrever o tema */
}


/* ============================================= */
/* Ajustes Responsivos para FullCalendar         */
/* ============================================= */

/* Aplica para telas MENORES que 768px (mesmo breakpoint do JS) */
@media (max-width: 767.98px) {

    /* --- Ajusta o Título (Ex: "4 – 10 de mai. de 2025") --- */
    /* O FullCalendar usa a classe .fc-toolbar-title para o título */
    .fc-toolbar-title {
        font-size: 1rem !important; /* Tamanho de fonte menor. Ajuste conforme necessário (ex: 0.9rem, 1.1rem) */
        /* Você pode adicionar !important se o estilo não estiver aplicando, 
           mas tente evitar se possível. Ex: font-size: 1rem !important; */
    }

    /* --- Ajusta os Botões do Cabeçalho --- */
    /* Os botões estão dentro de .fc-header-toolbar e são elementos <button> com classes .fc-button */
    .fc-header-toolbar .fc-button {
        padding: 0.25rem 0.5rem; /* Reduz o padding interno dos botões */
        font-size: 0.8rem;      /* Reduz o tamanho da fonte dos botões */
        /* line-height: 1.2; */ /* Pode ajustar a altura da linha se necessário */
    }

    /* Opcional: Ajustar ícones dentro dos botões (setas, etc.) se parecerem grandes */
    .fc-header-toolbar .fc-button .fc-icon {
        /* font-size: 0.9em; */ /* Exemplo: Deixa o ícone um pouco menor que o texto */
        /* vertical-align: middle; */ /* Tenta alinhar melhor o ícone */
    }
    
    /* Opcional: Reduzir margens entre grupos de botões se parecerem muito espaçados */
    .fc-header-toolbar .fc-toolbar-chunk {
         /* margin-bottom: 0.5rem; */ /* Adiciona um pouco de espaço abaixo em telas muito pequenas se quebrar linha */
    }
    .fc-header-toolbar .fc-button-group {
        /* margin-left: 2px; */ /* Reduz espaço entre grupos */
        /* margin-right: 2px; */
    }
    
    /* --- Ajustes específicos para a visão de LISTA (listWeek) --- */
    /* Opcional: Reduzir fonte dos cabeçalhos de dia na lista */
    .fc-list-day-text, /* Texto do dia (ex: "Segunda-feira") */
    .fc-list-day-side-text /* Texto da data (ex: "7 de maio de 2025") */
     {
        /* font-size: 0.9rem; */ 
    }
    
    /* Opcional: Reduzir fonte do horário/título do evento na lista */
    .fc-list-event-time,
    .fc-list-event-title {
         /* font-size: 0.85rem; */
    }

} /* Fim do @media */

/* === AJUSTE GERAL BOTÕES DE AÇÃO EM TABELAS/CARDS === */

/* Para visualização em tabela (desktop) */
.table .btn-group-sm > .btn.btn-sm { /* Aplica a todas as tabelas */
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.4;
}

.table .btn-group-sm > .btn.btn-sm i.fas {
    font-size: 0.85em;
    vertical-align: -0.05em;
}

/* Para visualização em cards (mobile) usando table-mobile-cards */
@media (max-width: 767.98px) {
    .table-mobile-cards td[data-label="Ações"] .btn-group .btn.btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }
    .table-mobile-cards td[data-label="Ações"] .btn-group .btn.btn-sm i.fas {
        font-size: 0.9em;
    }
}

.card {
    overflow: hidden; /* Isso pode resolver para a maioria dos casos */
}

.icon-indicator-answered {
    display: inline-flex; /* Para alinhar o ícone dentro */
    align-items: center;
    justify-content: center;
   /* background-color: #6b7280; /* Cor de fundo escura (Bootstrap 'dark') - ajuste se necessário */
    color: #6b7280;               /* Cor do ícone */
    padding: 0.3em 0.45em;    /* Padding interno - ajuste para o tamanho desejado */
    border-radius: 0.45rem;   /* Bordas arredondadas */
    font-size: 1.15em;        /* Controla o tamanho geral, incluindo o ícone */
    line-height: 1;           /* Para evitar altura extra */
    /*margin-left: 0.25rem;     /* ms-1 */
    vertical-align: middle;   /* Tenta alinhar com o texto/badge ao lado */
}

.icon-indicator-answered .fas { /* Estilo específico para o ícone dentro do span */
    line-height: inherit; /* Garante que o ícone não quebre o line-height */
}

.alt-sts { color: #e11d48; font-weight: 700;}


/* ====================================================== */
/* AJUSTES SIDEBAR RESPONSIVA E MODERNA                   */
/* ====================================================== */

.sidebar {
    /* Garante que a sidebar tenha uma altura definida para o sticky funcionar bem com simplebar */
    height: 100vh; 
}

.sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%; /* Faz o sidebar-inner ocupar toda a altura da sidebar */
}

.sidebar-brand-container {
    padding-bottom: 0.75rem; /* Espaçamento abaixo da logo/nome */
    /* As classes d-flex, align-items-center, justify-content-between já estão no HTML */
    /* Se o simplebar estiver ativo e o cabeçalho não ficar fixo, descomente abaixo: */
    /* position: sticky; 
    top: 0;
    background-color: var(--bs-gray-800); /* Mesma cor de fundo da sidebar */
    /* z-index: 10; */
}

.sidebar-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-grow: 1; /* Permite que o link da marca ocupe o espaço disponível */
}

.sidebar-brand-logo {
    height: 30px; /* Ajuste conforme necessário */
    margin-right: 0.5rem; /* Espaço entre logo e texto */
}

.sidebar-brand-text {
    color: #fff;
    font-size: 1.1rem; /* Ajuste o tamanho da fonte */
    font-weight: 600; /* Ajuste o peso da fonte */
    white-space: nowrap; /* Evita quebra de linha do nome */
}

.sidebar-close-button {
    color: var(--bs-gray-400); /* Cor do ícone de fechar */
    font-size: 1.25rem; /* Tamanho do ícone de fechar */
}
.sidebar-close-button:hover {
    color: #fff;
}

.sidebar-divider {
    border-top-color: var(--bs-gray-700); /* Cor mais sutil para divisores */
}

.sidebar-menu-list {
    flex-grow: 1; /* Faz a lista de menu ocupar o espaço restante */
    overflow-y: auto; /* Adiciona rolagem APENAS à lista de menu se necessário */
    padding-top: 0; /* Remove padding do topo se o cabeçalho já tem */
    /* Estilos para a barra de rolagem (opcional, para webkit) */
    /* scrollbar-width: thin; */
    /* scrollbar-color: var(--bs-gray-600) var(--bs-gray-800); */
}
/*
.sidebar-menu-list::-webkit-scrollbar {
    width: 8px;
}
.sidebar-menu-list::-webkit-scrollbar-track {
    background: var(--bs-gray-800);
}
.sidebar-menu-list::-webkit-scrollbar-thumb {
    background-color: var(--bs-gray-600);
    border-radius: 10px;
    border: 2px solid var(--bs-gray-800);
}
*/

.sidebar .sidebar-icon {
    margin-right: 0.75rem; /* Mais espaço para o ícone */
    font-size: 0.9rem; 
    width: 1.5rem; /* Largura fixa para alinhamento */
    text-align: center;
    color: var(--bs-gray-400); /* Cor padrão para ícones */
    transition: color 0.2s ease-in-out;
}

/* Garante que o toggler da navbar (hambúrguer) seja sempre visível em telas < lg */
@media (max-width: 991.98px) {
    .navbar-dashboard .navbar-toggler.d-lg-none {
        display: block !important; /* Garante que ele apareça */
    }
    /* Se a logo ainda estiver sobrepondo o menu, pode ser necessário ajustar o padding-top da ul */
    .sidebar.show .sidebar-menu-list { /* Quando a sidebar está visível em mobile */
        /* padding-top: 1rem; */ /* Adiciona espaço no topo da lista de menu */
    }
}


/* --- FIM AJUSTES SIDEBAR --- */

.btn-v2a { color: #ffffff;
background-color:#1f2937;
border-color:#1f2937;
}

.btn-v2a:hover { color: #ffffff;
background-color:#1f2937;
border-color:#1f2937;
}

/* Estilos CSS para posicionar a sidebar abaixo da topbar em dispositivos móveis */

/* Ajustes para posicionar a sidebar abaixo da topbar em dispositivos móveis */
@media (max-width: 991.98px) {
    /* Ajusta a posição da sidebar para ficar abaixo da topbar */
    #sidebarMenu {
		margin-top: -2px;
        position: fixed;
        top: var(--topbar-height, 50px); /* Usa a variável CSS ou valor padrão */
        height: calc(100vh - var(--topbar-height, 50px)); /* Ajusta a altura */
        z-index: 1020; /* Menor que a topbar para ficar abaixo */
        width: 100%; /* Ocupa toda a largura em mobile */
        max-width: 100%; /* Garante que não ultrapasse a largura da tela */
        border-radius: 0; /* Remove bordas arredondadas */
        /* margin: 0; */ /* Remove margens */
        overflow-y: auto; /* Permite rolagem vertical */
    }
    
    /* Garante que a topbar fique acima da sidebar */
    .navbar-top.topbar-extra {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030; /* Maior que a sidebar */
        height: var(--topbar-height, 50px); /* Define altura fixa */
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    /* Ajusta o conteúdo principal para não ficar sob a topbar */
    .content {
        padding-top: var(--topbar-height, 50px); /* Adiciona padding igual à altura da topbar */
    }
    
    /* Ajusta a animação da sidebar para deslizar de cima para baixo */
    #sidebarMenu.collapse:not(.show) {
        display: none;
    }
    
    #sidebarMenu.collapsing {
        height: 0;
        overflow: hidden;
        transition: height 0.35s ease;
    }
    
    #sidebarMenu.collapse.show {
        display: block;
    }
    
    /* Ajusta o botão hambúrguer para um tamanho mais adequado */
    .navbar-toggler.d-lg-none {
        padding: 0.25rem 0.5rem !important;
        font-size: 1.2rem !important;
        border: none !important;
        margin-right: 0.5rem !important;
		font-weight: 900 !important;
    }
    
    /* Ajusta o ícone do hambúrguer */
    .navbar-toggler-icon {
        width: 1.5em !important;
        height: 1.5em !important;
    }
    
    /* Ajusta o logo e o nome do sistema para telas menores */
    .navbar-brand.d-flex.align-items-center.d-lg-none {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    
    /* Ajusta o tamanho da imagem do logo */
    .navbar-brand.d-flex.align-items-center.d-lg-none img {
        max-height: 40px !important;
        height: 40px !important;
    }
    
    /* Ajusta o tamanho do texto do nome do sistema */
    .navbar-brand.d-flex.align-items-center.d-lg-none span {
        font-size: 1.5rem !important;
    }
    
    /* Ajusta o menu sidebar para um visual mais limpo */
    #sidebarMenu {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Ajusta o padding interno da sidebar */
    .sidebar-inner {
        padding: 0.75rem 1rem !important;
    }
    
    /* Ajusta os itens de menu para um visual mais compacto */
    .sidebar .nav-link {
        padding: 0.5rem 0.75rem !important;
        margin-bottom: 0.125rem !important;
        font-size: 0.95rem !important;
    }
    
    /* Ajusta os ícones dos itens de menu */
    .sidebar .sidebar-icon {
        margin-right: 0.5rem !important;
        width: 1.25rem !important;
    }
    
    /* Ajusta os cabeçalhos das seções */
    .sidebar .sidebar-heading {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.7rem !important;
    }
    
    /* Ajusta os divisores */
    .sidebar .sidebar-divider {
        margin: 0.5rem 0 !important;
    }
    
    /* Ajusta o avatar do usuário */
    .avatar.rounded-circle {
        width: 28px !important;
        height: 28px !important;
		margin-bottom: 7px !important;
		MARGIN-TOP: 12PX;
    }
}

/* Ajustes específicos para telas muito pequenas (smartphones) */
@media (max-width: 575.98px) {
    /* Reduz ainda mais o tamanho do logo */
    .navbar-brand.d-flex.align-items-center.d-lg-none img {
        max-height: 40px !important;
        height: 40px !important;
    }
    
    /* Reduz o tamanho do texto do nome do sistema ou oculta em telas muito pequenas */
    .navbar-brand.d-flex.align-items-center.d-lg-none span {
        font-size: 1.5rem !important;
        max-width: 150px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}
/* Reset completo para alinhar o hambúrguer e o logo */
.navbar-top.topbar-extra {
    display: flex;
    align-items: center;
    height: auto;
}

.navbar-toggler.d-lg-none {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important; /* Altura fixa igual à do logo + margens */
    margin: 0 !important;
}

.navbar-brand.d-flex.align-items-center.d-lg-none {
    height: 38px !important; /* Mesma altura do botão */
    display: flex !important;
    align-items: center !important;
}

/* Força o alinhamento vertical de todos os elementos na topbar */
.navbar-top.topbar-extra .d-flex {
    align-items: center !important;
}
/* Ajusta as margens horizontais para uniformidade */
.navbar-toggler.d-lg-none {
    margin-left: 1rem !important;
    margin-right: 0.75rem !important;
}

/* Ajusta a margem direita do avatar */
.navbar-top.topbar-extra .navbar-nav.align-items-center {
    margin-right: 1rem !important;
}

/* Ajusta a margem esquerda do logo */
.navbar-brand.d-flex.align-items-center.d-lg-none {
    margin-left: 0 !important; /* Remove margem esquerda do logo */
}

/* Ajusta o container da topbar para garantir espaçamento uniforme */
.navbar-top.topbar-extra .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Garante que o dropdown do usuário tenha margem consistente */
.navbar-top.topbar-extra .nav-item.dropdown {
    -/* padding-right: 0.5rem !important;*/
}
/* Oculta apenas o hambúrguer e o logo/nome na topbar em telas grandes, mantém o avatar */
@media (min-width: 992px) {
    /* Oculta especificamente o botão hambúrguer */
    .navbar-toggler.d-lg-none {
        display: none !important;
    }
    
    /* Oculta especificamente o logo e nome */
    .navbar-brand.d-flex.align-items-center.d-lg-none {
        display: none !important;
    }
    
    /* REMOVE esta regra que estava causando o problema */
    /* .navbar-top.topbar-extra .d-flex.align-items-center:first-child {
        display: none !important;
    } */
    
    /* Força a exibição do avatar e seus containers */
    .navbar-top.topbar-extra .navbar-nav,
    .navbar-top.topbar-extra .navbar-nav.align-items-center,
    .navbar-top.topbar-extra .nav-item.dropdown,
    .navbar-top.topbar-extra .nav-link.dropdown-toggle,
    .navbar-top.topbar-extra .media.d-flex.align-items-center,
    .navbar-top.topbar-extra .avatar.rounded-circle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Remove a borda de foco (outline) do botão hambúrguer quando clicado */
.navbar-toggler:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Se ainda persistir algum efeito, adicione também: */
.navbar-toggler:active {
    border: none !important;
    outline: none !important;
}

/* Animação simplificada de abertura do menu de cima para baixo */
@media (max-width: 991.98px) {
    /* Configura o menu para usar height para animação */
    #sidebarMenu {
        transition: height 0.25s ease !important;
        overflow: hidden !important;
    }
    
    /* Estado fechado */
    #sidebarMenu.collapse:not(.show) {
        height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Estado durante a transição */
    #sidebarMenu.collapsing {
        height: 0 !important;
    }
    
    /* Garante que o conteúdo do menu não cause problemas na animação */
    .sidebar-inner {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
}

/* 
 * Ajuste para manter o botão "Novo Memorando" ao lado do título em telas pequenas
 */

/* Ajusta o container flex para manter os elementos na mesma linha */
.d-sm-flex.align-items-center.justify-content-between.mb-4 {
    display: flex !important; /* Força flex em todas as telas */
    flex-wrap: nowrap !important; /* Impede quebra de linha */
    align-items: center !important;
    gap: 1rem !important; /* Espaçamento entre título e botão */
}

/* Ajusta o título para permitir truncamento se necessário */
.d-sm-flex.align-items-center.justify-content-between.mb-4 h1.h3 {
    margin-bottom: 0 !important; /* Remove margem inferior */
    white-space: nowrap !important; /* Evita quebra de linha no título */
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Adiciona elipse se o texto for muito longo */
    min-width: 0 !important; /* Permite que o texto seja truncado */
    flex: 1 !important; /* Permite que o título ocupe o espaço disponível */
}

/* Garante que o botão não encolha */
.d-sm-flex.align-items-center.justify-content-between.mb-4 .btn {
    flex-shrink: 0 !important; /* Impede que o botão encolha */
    white-space: nowrap !important; /* Mantém o texto do botão em uma linha */
}

/* Ajustes específicos para telas muito pequenas (menos de 400px) */
@media (max-width: 400px) {
    /* Reduz o tamanho da fonte do título para caber melhor */
    .d-sm-flex.align-items-center.justify-content-between.mb-4 h1.h3 {
        font-size: 1.25rem !important;
    }
    
    /* Reduz o tamanho do botão */
    .d-sm-flex.align-items-center.justify-content-between.mb-4 .btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
    
    /* Reduz o tamanho do ícone no botão */
    .d-sm-flex.align-items-center.justify-content-between.mb-4 .btn i.fas {
        font-size: 0.7rem !important;
    }
    
    /* Reduz o espaçamento entre os elementos */
    .d-sm-flex.align-items-center.justify-content-between.mb-4 {
        gap: 0.5rem !important;
    }
}
.sub-tlt { font-weight: 400;}


.kb-content-display img {
    max-width: 100% !important;
    height: auto !important;
    /*width: auto !important;*/
  }

.kb-content-display h1,h2,h3,h4,h5,h6,h7 {
    margin-bottom: 1.5rem; /* Exemplo: aumenta a margem inferior para 1.5rem */
    /* Você também pode usar 'line-height' para aumentar o espaçamento entre as linhas DENTRO de um parágrafo, 
       mas para o espaço ENTRE parágrafos, 'margin-bottom' é o mais comum. */
    /* line-height: 1.8; */ 
}
.kb-content-display hr {
    margin-top: 1.5rem; /* Exemplo: aumenta a margem inferior para 1.5rem */
    /* Você também pode usar 'line-height' para aumentar o espaçamento entre as linhas DENTRO de um parágrafo, 
       mas para o espaço ENTRE parágrafos, 'margin-bottom' é o mais comum. */
    /* line-height: 1.8; */ 
	margin-bottom: 1.5rem;
}

.alert-heading h5 {
	margin-bottom:0 !important;
}

/* ====================================================== */
/* CORREÇÃO PARA ESTILO ZEBRADO E ID (MOBILE) v5          */
/* ====================================================== */

/* As regras abaixo só serão aplicadas em telas com largura máxima de 767.98px */
@media (max-width: 767.98px) {

   /* 
      1. ANULA O EFEITO LISTRADO DO TEMA VOLT PARA TODAS AS CÉLULAS, 
         EXCETO a célula do ID. Isso evita que a gente tenha que sobrescrever depois.
    */
    .table-mobile-cards.table-striped > tbody > tr:nth-of-type(odd) > td:not([data-label="ID"]) {
        --bs-table-accent-bg: #ffffff !important;
        background-color: #ffffff !important;
        color: var(--bs-body-color) !important;
    }

    /* 
      2. Garante que as linhas pares também tenham fundo branco.
    */
    .table-mobile-cards > tbody > tr:nth-of-type(even) > td {
       /* background-color: #ffffff !important;*/
    }

    /* 
      3. ESTILIZA A CÉLULA DO ID - Esta regra agora se aplica a TODAS as linhas.
    */
    .table-mobile-cards td[data-label="ID"] {
        display: flex !important;
        font-size: 1rem;
        font-weight: bold;
        background-color: #f8f9fa !important; /* Força o fundo cinza claro */
        border-bottom: 1px solid #e3e6f0 !important;
    }

    /* As regras de layout que já tínhamos */
    .table-mobile-cards td[data-label="ID"]::before {
        display: inline-block !important;
        content: attr(data-label) ": " !important;
        font-weight: bold;
        color: #858796;
        padding-right: 0.5rem;
    }
    
    .table-mobile-cards tr {
        border-top-left-radius: 0.35rem;
        border-top-right-radius: 0.35rem;
    }
	
	.card-body {
    padding: 0.7rem 0.7rem;
	}
	
	.card .table td, .card .table th {
    vertical-align: middle;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
	} 
	
	h5 { font-size: 1rem !important;}
	
	.card-header {
    padding: 0.7rem 0.7rem
}