.text-right {
    text-align: end
}

.img-container {
    position: relative;
    display: inline-block;
}

.mr-5 {
    margin-right: 5px !important;
}

.document-container {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.close-button {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.close-button.left {
    margin-left: 10px;
}

.close-button:hover {
    color: red;
    /* Altere a cor do ícone ao passar o mouse */
}

.submenu-link:hover,
.sidebar-link:hover {
    cursor: pointer;
}


.justify-center {
    justify-content: center
}

.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* Espaço entre as imagens */
}

.img-container img {
    max-width: 250px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* Espaço entre as imagens */
}

.img-container img {
    max-width: 250px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

#tableContainer {
    width: 47.5%;
    /* Ajusta a largura do contêiner */
    margin-top: 5px;
    /* Ajusta a margem superior do contêiner */
}

#beforeAfterTable {
    width: 100%;
    /* Ajusta a largura da tabela */
    border-collapse: collapse;
    /* Remove espaço entre bordas das células */
    margin: 0 auto;
    /* Centraliza a tabela */
}

#beforeAfterTable td {
    width: 50%;
    /* Ajusta a largura das células */
    text-align: center;
    /* Centraliza o texto */
    vertical-align: middle;
    /* Centraliza o texto verticalmente */
    /*border: 01px solid #ccc;
    /* Adiciona uma borda fina às células */
    padding: 1px;
    /* Ajusta o espaçamento interno das células */
}

/* Tamanho da linha pode ser ajustado aqui */
#beforeAfterTable tr {
    height: 20px !important;
    /* Altere este valor para ajustar o tamanho da linha */
    /* Altere este valor para ajustar o tamanho da linha */
}

.legend {
    margin-bottom: 20px;
    padding: 10px 0;
}

.legend div {
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-left: 20px;
}

.legend i {
    margin-right: 5px;
}

.popover-body {
    background-color: #e6eef5;
    /* Cor de fundo do popover */
    color: #000000;
    /* Cor do texto do popover */
    /* max-width: 300px !important;
    /* Largura máxima do popover */
    text-align: left;
    /* Justificar o texto para a esquerda */
    border-radius: 8px;
    /* Borda arredondada do popover */
    padding: 8px;
    /* Espaçamento interno do popover */
    font-size: 14px;
    /* Tamanho da fonte do popover */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Sombra do popover */
}

/* Estilo para a seta do popover */
.popover-arrow {
    border-color: #3498db;
    /* Cor da borda da seta */
}

.custom-popover {
    max-width: 400px;
    /* Adjust width as needed */
}

.timeline {
    position: relative;
    padding-left: 50px;
    margin-top: 20px;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    width: 2px;
    height: 100%;
    background-color: #ccc;
}

.event {
    position: relative;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
}

.event::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f024';
    /* Código Unicode do ícone fa-circle-check */
    font-weight: 900;
    /* Necessário para ícones sólidos */
    position: absolute;
    top: 50%;
    left: -35.5px;
    transform: translateY(-50%);
    color: #FFFFFF;
    /* Cor do ícone */
    font-size: 12px;
    /* Tamanho do ícone */
    z-index: 2;
    /* Garante que o ícone fique na frente do círculo */
}

.event::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -43.5px;
    /* Ajuste para alinhar o círculo com o ícone */
    width: 26px;
    /* Tamanho do círculo */
    height: 26px;
    /* Tamanho do círculo */
    border-radius: 50%;
    /* Forma do ponto de conexão (círculo) */
    background-color: #007BFF;
    /* Cor do ponto de conexão */
    transform: translateY(-50%);
    z-index: 1;
    /* Coloca o círculo atrás do ícone */
}

.event h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.event .date-time {
    margin-bottom: 10px;
    font-size: medium;
}

.event .date-time i {
    margin-right: 5px;
    font-size: larger;
}

.event .badge {
    background-color: #198754;
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    margin-right: 5px;
}

.event .type {
    color: #BB2D3B;
    margin-right: 10px;
}

.event .info {
    margin-bottom: 0;
    font-size: medium;
}

.event .btn {
    margin-left: 5px;
}

.info-box {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

html[data-bs-theme=dark] .info-box {
    background-color: #1e1e2d;
}

.info-box i {
    font-size: 1.5rem;
}

.info-box h6 {
    margin-bottom: 0;
    font-size: 1rem;
}

.info-box p {
    margin-bottom: 0;
    font-size: 1.25rem;
}

.card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

#sidebar .sidebar-wrapper .menu .sidebar-item.active>.sidebar-link {
    box-shadow: 0 4px 12px rgba(62, 31, 220, 0.28) !important;
}

.list-group-item {
    border: 0 !important;
}

.btn-default {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3E1FDC;
    --bs-btn-border-color: #3E1FDC;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3C8DBC;
    --bs-btn-hover-border-color: #3C8DBC;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3C8DBC;
    --bs-btn-active-border-color: #3C8DBC;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #3E1FDC;
    --bs-btn-disabled-border-color: #3E1FDC
}

.subtitle {
    color: #3E1FDC !important;
}

html[data-bs-theme=dark] .btn-default {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3E1FDC;
    --bs-btn-border-color: #3E1FDC;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3C8DBC;
    --bs-btn-hover-border-color: #3C8DBC;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3C8DBC;
    --bs-btn-active-border-color: #3C8DBC;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #3E1FDC;
    --bs-btn-disabled-border-color: #3E1FDC
}

.dash_chart {
    min-height: 310px !important;
}

.indicadores {
    display: flex;
    align-items: center;
    gap: 10px;
}

.global-loader {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.global-loader.d-none {
    display: none;
}

/* =============================================================
   CORREÇÃO GLOBAL DE MODAIS
   Problema: <form> entre .modal-content e .modal-header/body/footer
   quebra o layout flex do Bootstrap, empurrando o footer para fora.
   ============================================================= */

/* Limita a altura ao viewport em telas pequenas e médias */
.modal-content {
    max-height: calc(100dvh - 1rem);
    overflow: hidden;
}
@media (min-width: 576px) {
    .modal-content {
        max-height: calc(100dvh - 3.5rem);
    }
}

/* Form como filho direto de modal-content: restaura o flex column */
.modal-content > form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Body sempre rolável, nunca expande além do espaço disponível */
.modal-body {
    overflow-y: auto;
    min-height: 0;
}

/* Footer nunca comprime — fica sempre visível */
.modal-footer {
    flex-shrink: 0;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

/* Fullscreen: remove o limite de margem */
@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down .modal-content { max-height: 100dvh; }
}
@media (max-width: 767.98px) {
    .modal-fullscreen-md-down .modal-content { max-height: 100dvh; }
}
@media (max-width: 991.98px) {
    .modal-fullscreen-lg-down .modal-content { max-height: 100dvh; }
}

/* =====================================================================
   DASHBOARD / HOME — Seções, KPIs, Charts (ApexCharts), Alertas
   ===================================================================== */

/* Section titles do dashboard */
.dashboard-section-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6c757d;
    margin: 1.75rem 0 0.85rem 0;
}
.dashboard-section-title:first-of-type { margin-top: 0.25rem; }
.dashboard-section-title > span:first-child { white-space: nowrap; }
.dashboard-section-title .dashboard-section-rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(to right, #dee2e6, transparent);
}
.dark-mode .dashboard-section-title { color: #adb5bd; }
.dark-mode .dashboard-section-title .dashboard-section-rule {
    background: linear-gradient(to right, #2a2f3a, transparent);
}

/* KPI cards: hover sutil */
.kpi-card {
    border: 1px solid transparent;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.kpi-card:hover {
    border-color: rgba(62, 31, 220, 0.18);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.kpi-card .card-body { position: relative; }
.kpi-card h4 { line-height: 1.1; margin-top: 4px; }
.kpi-card h6 { font-size: 0.78rem; }

/* Variantes de cor para .stats-icon (complementam o .purple já existente no template) */
.stats-icon-success { background-color: #269847 !important; color: #fff !important; }
.stats-icon-info    { background-color: #0d6efd !important; color: #fff !important; }

/* Chart cards: alinhamento consistente */
.chart-card { height: 100%; }
.chart-card .card-header h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.chart-card .card-header { padding-bottom: 0.5rem; }

/* DataLabels com contorno preto sobre superfícies coloridas (donut e barras).
   paint-order: stroke fill garante que o contorno seja desenhado primeiro,
   sem deformar a forma da letra. */
.apexcharts-pie .apexcharts-datalabels text,
.apexcharts-pie-label,
.apexcharts-bar-series .apexcharts-datalabels text {
    paint-order: stroke fill;
    stroke: #000;
    stroke-width: 3px;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* ============================================================
   Tooltip do ApexCharts — visual moderno (light)
   - container glass-like com blur, border-radius generoso e sombra em camadas
   - title em uppercase, mais hierárquico
   - marker circular com halo branco
   - valor em destaque, label em peso médio
   ============================================================ */
.apexcharts-tooltip.apexcharts-theme-light {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none !important;
    border-radius: 12px !important;
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.14),
        0 4px 8px rgba(15, 23, 42, 0.06) !important;
    overflow: hidden !important;
    font-family: inherit !important;
    font-size: 13px !important;
    min-width: 150px;
    transform: translateY(-2px);
    animation: apex-tt-in 0.16s ease-out;
}
@keyframes apex-tt-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(-2px); }
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%) !important;
    border-bottom: 1px solid #eceff3 !important;
    padding: 10px 16px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    color: #495057 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0 !important;
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-series-group {
    padding: 10px 16px !important;
    align-items: center !important;
    background: transparent !important;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-series-group.apexcharts-active,
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-series-group:last-child {
    padding-bottom: 12px !important;
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-marker {
    width: 11px !important;
    height: 11px !important;
    border-radius: 50% !important;
    margin-right: 10px !important;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(0, 0, 0, 0.15);
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text {
    font-size: 13px !important;
    line-height: 1.35;
    color: #212529 !important;
    font-family: inherit !important;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text-y-label,
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text-z-label {
    color: #6c757d !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text-y-value,
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text-z-value {
    color: #1a1d23 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-left: 6px;
}

/* Tooltip do eixo X (apex-xaxistooltip) — usado em line/area charts */
.apexcharts-xaxistooltip.apexcharts-theme-light {
    background: rgba(33, 37, 41, 0.94) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}
.apexcharts-xaxistooltip-bottom:before,
.apexcharts-xaxistooltip-bottom:after { border-bottom-color: rgba(33, 37, 41, 0.94) !important; }

/* Dark mode para ApexCharts — sobrescreve cores inline-styladas no SVG */
body.dark-mode .apexcharts-text,
body.dark-mode .apexcharts-legend-text,
body.dark-mode .apexcharts-xaxis-label,
body.dark-mode .apexcharts-yaxis-label,
body.dark-mode .apexcharts-xaxis-title text,
body.dark-mode .apexcharts-yaxis-title text {
    fill: #adb5bd !important;
    color: #adb5bd !important;
}
body.dark-mode .apexcharts-datalabel-value { fill: #f1f3f5 !important; }
body.dark-mode .apexcharts-datalabel-label { fill: #6c757d !important; }
body.dark-mode .apexcharts-grid line,
body.dark-mode .apexcharts-gridline { stroke: #2a2f3a !important; }
/* Tooltip dark mode — mesmo design, paleta escura */
body.dark-mode .apexcharts-tooltip.apexcharts-theme-light {
    background: rgba(31, 36, 44, 0.96) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.55),
        0 4px 8px rgba(0, 0, 0, 0.30) !important;
}
body.dark-mode .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: linear-gradient(180deg, #2a2f3a 0%, #232831 100%) !important;
    border-bottom: 1px solid #353a45 !important;
    color: #e9ecef !important;
}
body.dark-mode .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text-y-label,
body.dark-mode .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text-z-label {
    color: #adb5bd !important;
}
body.dark-mode .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text,
body.dark-mode .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text-y-value,
body.dark-mode .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text-z-value {
    color: #f1f3f5 !important;
}
body.dark-mode .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-marker {
    box-shadow:
        0 0 0 2px rgba(31, 36, 44, 0.95),
        0 1px 2px rgba(0, 0, 0, 0.4);
}
body.dark-mode .apexcharts-xaxistooltip.apexcharts-theme-light {
    background: rgba(248, 249, 250, 0.95) !important;
    color: #212529 !important;
}
body.dark-mode .apexcharts-xaxistooltip-bottom:before,
body.dark-mode .apexcharts-xaxistooltip-bottom:after {
    border-bottom-color: rgba(248, 249, 250, 0.95) !important;
}

/* Card de alerta (ações atrasadas) */
.alertas-card { border-width: 1px; }
.alertas-card-header {
    background: #fdecec;
    color: #b02a37;
    border-bottom: 1px solid #f5c2c7;
}
.alertas-card-header h4 { color: #b02a37; }
.dark-mode .alertas-card-header {
    background: #3a1f23;
    color: #f5a3ab;
    border-bottom-color: #5a2a30;
}
.dark-mode .alertas-card-header h4 { color: #f5a3ab; }
.alertas-card .alertas-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
    border-bottom: 1px solid #e5e7eb;
}
.dark-mode .alertas-card .alertas-table thead th {
    color: #adb5bd;
    border-bottom-color: #2a2f3a;
}
.alertas-table .alerta-descricao {
    max-width: 380px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.alertas-table .alerta-data {
    color: #dc3545;
    font-weight: 600;
    white-space: nowrap;
}
.alertas-table .alerta-dias-atraso {
    font-size: 0.72rem;
    color: #dc3545;
    margin-left: 6px;
}
.alerta-origem {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    background: #ecebf3;
    color: #5a3d8c;
}
.dark-mode .alerta-origem {
    background: #3a3550;
    color: #c5b8e2;
}
@media (max-width: 768px) {
    .alertas-table .alerta-descricao { max-width: 200px; }
}

/* =====================================================================
   INVENTÁRIO DE RISCOS / EVOLUÇÃO DE RISCO — Código do perigo, timeline
   ===================================================================== */

.perigo-codigo {
    font-family: monospace;
    font-size: 0.72rem;
    color: #6c757d;
    display: block;
    margin-top: 2px;
}
.dark-mode .perigo-codigo { color: #adb5bd; }

/* Pequenos badges auxiliares dentro da timeline padrão (.event) */
.event .nivel-risco {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    margin-left: 5px;
}
.event .info strong { font-weight: 600; }

/* Ações relacionadas, dentro de cada versão da timeline */
.acoes-versao {
    border-top: 1px dashed #dee2e6;
    padding-top: 8px;
    margin-top: 10px;
}
.dark-mode .acoes-versao { border-top-color: #3a3f4b; }
.acoes-versao-titulo {
    font-size: 0.82rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 6px;
}
.dark-mode .acoes-versao-titulo { color: #ced4da; }
.acoes-versao-lista {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.acao-versao-item {
    font-size: 0.82rem;
    padding: 4px 0;
    line-height: 1.4;
}
.acao-versao-item + .acao-versao-item { border-top: 1px dotted #e9ecef; }
.dark-mode .acao-versao-item + .acao-versao-item { border-top-color: #2f3540; }
.acao-status-icon { width: 14px; display: inline-block; text-align: center; }
.acao-versao-desc { font-weight: 500; }
.acao-versao-meta { color: #6c757d; font-size: 0.76rem; }
.dark-mode .acao-versao-meta { color: #adb5bd; }

/* =====================================================================
   SIDEBAR COMPACTA — toggle universal, modo reduzido com flyout
   ===================================================================== */

/* Botão circular flutuante na borda direita do sidebar (estilo VS Code/Notion).
   Fica posicionado em fixed, sobrepondo metade dentro e metade fora da sidebar,
   na linha entre o menu e o conteúdo. */
.sidebar-collapse-btn {
    position: fixed;
    top: 22px;
    left: calc(240px - 14px);
    width: 28px;
    height: 28px;
    padding: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 11;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
    transition: background-color 0.18s ease, color 0.18s ease,
                left 0.28s ease, box-shadow 0.18s ease, transform 0.15s ease;
}
.sidebar-collapse-btn:hover {
    background: #3E1FDC;
    color: #fff;
    border-color: #3E1FDC;
    box-shadow: 0 4px 12px rgba(62, 31, 220, 0.30);
    transform: scale(1.06);
}
.sidebar-collapse-btn i {
    transition: transform 0.25s ease;
    font-size: 0.78rem;
}
.dark-mode .sidebar-collapse-btn,
html[data-bs-theme=dark] .sidebar-collapse-btn {
    background: #1f242c;
    border-color: #2f3540;
    color: #adb5bd;
    /* `html[data-bs-theme=dark] button { border-radius: 0 }` do app-dark.css
       força raio zero em todos os <button>; reforçamos o círculo aqui. */
    border-radius: 50% !important;
}
.dark-mode .sidebar-collapse-btn:hover,
html[data-bs-theme=dark] .sidebar-collapse-btn:hover {
    background: #3E1FDC;
    color: #fff;
    border-color: #3E1FDC;
}

/* Quando o sidebar está colapsado, o botão acompanha a borda nova (78px) */
body.sidebar-collapsed .sidebar-collapse-btn { left: calc(78px - 14px); }

/* Abaixo de xl o sidebar vira drawer overlay; o botão flutuante não faz
   sentido (o drawer só abre/fecha pelo burger e pelo X). */
@media (max-width: 1199.98px) {
    .sidebar-collapse-btn { display: none !important; }
}

/* Transição suave entre estados */
.sidebar-wrapper { transition: width 0.28s ease, left 0.7s cubic-bezier(.22, 1, .36, 1); }
#main { transition: margin-left 0.28s ease; }

/* ===== Modo compacto — aplica em qualquer tamanho de tela ===== */

body.sidebar-collapsed #sidebar .sidebar-wrapper {
    /* `!important` aqui porque minha regra dark mode `html[data-bs-theme=dark]
       #sidebar .sidebar-wrapper { width: 240px }` está num bloco de @media
       posterior e tem mesma especificidade — sem !important ela vence por
       source order, e o sidebar fica 240px no dark colapsado. */
    width: 78px !important;
    overflow: visible !important;        /* permite flyout escapar do wrapper */
    overflow-y: visible !important;
}

/* Logo: cheia visível por padrão, ícone só no modo compacto */
.sidebar-logo-icon { display: none; }
.sidebar-logo-icon svg { width: 38px; height: 38px; display: block; }

/* SVG do logo: encolhe quando necessário e respeita a largura disponível.
   overflow-x: hidden no wrapper evita scroll horizontal caso algum elemento
   eventualmente estoure. */
.sidebar-wrapper { overflow-x: hidden; }
.sidebar-logo-full { display: block; min-width: 0; overflow: hidden; }
.sidebar-logo-full svg { width: 100%; max-width: 195px; height: auto; display: block; }
.sidebar-header-inner { min-width: 0; }

/* =====================================================================
   SIDEBAR EXPANDIDA — compactação moderada
   ===================================================================== */
@media (min-width: 1200px) {
    #sidebar .sidebar-wrapper,
    html[data-bs-theme=dark] #sidebar .sidebar-wrapper { width: 240px; }
    /* O dark mode (app-dark.css) usa `html[data-bs-theme=dark] #sidebar~#main`
       com especificidade (2,1,1) para setar margin-left:300px (largura antiga do
       sidebar). Duplicamos os seletores aqui para vencer no cascade. */
    body #main,
    html[data-bs-theme=dark] #main,
    html[data-bs-theme=dark] #sidebar ~ #main { margin-left: 240px; }
}

/* =====================================================================
   LAYOUT EM COLUNA DO SIDEBAR — header + menu (rolável) + user (fixo)
   ---------------------------------------------------------------------
   Faz a sidebar virar flex column para que o bloco .sidebar-user fique
   ancorado no rodapé, INDEPENDENTE de quanto o menu se expande. Quando
   os submenus crescem além da altura da viewport, apenas o .sidebar-menu
   rola internamente — a faixa do usuário não desce. */
#sidebar .sidebar-wrapper {
    display: flex !important;
    flex-direction: column;
    height: 100vh;
    /* `overflow: visible` permite que o dropdown do usuário flutue para fora
       dos limites do sidebar. O recorte do conteúdo do menu é feito por
       .sidebar-menu (overflow-y:auto), que delimita o scroll naturalmente. */
    overflow: visible;
}
/* PerfectScrollbar do Mazer é aplicado no .sidebar-wrapper, mas agora o scroll
   acontece dentro de .sidebar-menu — os rails ficam sem função, esconde. */
#sidebar .sidebar-wrapper > .ps__rail-x,
#sidebar .sidebar-wrapper > .ps__rail-y { display: none !important; }
#sidebar .sidebar-wrapper .sidebar-header { flex: 0 0 auto; }
#sidebar .sidebar-wrapper .sidebar-menu {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}
/* Scrollbar discreta dentro do .sidebar-menu */
#sidebar .sidebar-wrapper .sidebar-menu::-webkit-scrollbar { width: 6px; }
#sidebar .sidebar-wrapper .sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(62, 31, 220, 0.18);
    border-radius: 3px;
}
#sidebar .sidebar-wrapper .sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(62, 31, 220, 0.32);
}

/* ===== Sessão do usuário no rodapé do sidebar ===== */
.sidebar-user {
    flex: 0 0 auto;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
}
.sidebar-user-trigger {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.5rem;
    color: #374151;
    text-decoration: none;
    transition: background-color 0.18s ease;
}
.sidebar-user-trigger:hover,
.sidebar-user-trigger[aria-expanded="true"] {
    background-color: rgba(62, 31, 220, 0.07);
    color: #3E1FDC;
}
.sidebar-user-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f4f6;
    box-shadow: 0 0 0 2px rgba(62, 31, 220, 0.18);
}
.sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-user-info {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.15;
}
.sidebar-user-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-user-type {
    font-size: 0.72rem;
    color: #6b7280;
    margin-top: 1px;
}
.sidebar-user-caret {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: #9ca3af;
    transition: transform 0.2s ease;
}
.sidebar-user-trigger[aria-expanded="true"] .sidebar-user-caret {
    transform: rotate(180deg);
    color: #3E1FDC;
}
/* Dropdown do usuário em modo flutuante:
   - z-index alto pra ficar acima do conteúdo da página
   - sombra marcada + raio maior + borda discreta → cara de painel solto
   - pequena animação de entrada
   - sai do limite do sidebar (graças ao overflow:visible no wrapper) */

/* O Popper é reconfigurado em header.php com `strategy: 'fixed'` para o user
   dropdown — o próprio Popper aplica `position: fixed` + coordenadas
   compatíveis via inline style. Aqui apenas o styling visual do menu. */
.sidebar-user .dropdown-menu {
    z-index: 1080;
    min-width: 14rem;
    padding: 0.4rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.65rem;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);
    background: #fff;
    animation: sidebarUserMenuIn 0.16s ease-out;
}
.sidebar-user .dropdown-menu .dropdown-item {
    border-radius: 0.45rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.86rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-user .dropdown-menu .dropdown-item:hover,
.sidebar-user .dropdown-menu .dropdown-item:focus {
    background-color: rgba(62, 31, 220, 0.08);
    color: #3E1FDC;
}
.sidebar-user .dropdown-menu .dropdown-divider {
    margin: 0.3rem 0;
    border-color: rgba(15, 23, 42, 0.08);
}
/* Animar apenas opacity — o Bootstrap Popper.js usa `transform: translate3d()`
   para posicionar o dropdown, então animar `transform` aqui criaria conflito
   (o menu "pularia" pra outra posição durante a animação). */
@keyframes sidebarUserMenuIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.dark-mode .sidebar-user .dropdown-menu {
    background: #1e1e2d;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42), 0 4px 12px rgba(0, 0, 0, 0.22);
}
.dark-mode .sidebar-user .dropdown-menu .dropdown-item { color: #d1d5db; }
.dark-mode .sidebar-user .dropdown-menu .dropdown-item:hover,
.dark-mode .sidebar-user .dropdown-menu .dropdown-item:focus {
    background-color: rgba(197, 184, 226, 0.10);
    color: #c5b8e2;
}
.dark-mode .sidebar-user .dropdown-menu .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Dark mode da sessão do usuário */
.dark-mode .sidebar-user {
    background: #1e1e2d;
    border-top-color: rgba(255, 255, 255, 0.08);
}
.dark-mode .sidebar-user-trigger { color: #d1d5db; }
.dark-mode .sidebar-user-trigger:hover,
.dark-mode .sidebar-user-trigger[aria-expanded="true"] {
    background-color: rgba(197, 184, 226, 0.10);
    color: #c5b8e2;
}
.dark-mode .sidebar-user-name { color: #f1f2f2; }
.dark-mode .sidebar-user-type { color: #9ca3af; }

/* Em modo colapsado: só o avatar centralizado, esconde nome/cargo/caret */
body.sidebar-collapsed .sidebar-user { padding: 0.5rem 0.25rem; }
body.sidebar-collapsed .sidebar-user-trigger {
    justify-content: center;
    padding: 0.4rem;
}
body.sidebar-collapsed .sidebar-user-info,
body.sidebar-collapsed .sidebar-user-caret { display: none !important; }
body.sidebar-collapsed .sidebar-user-avatar { width: 40px; height: 40px; }
/* Dropdown abre lateralmente em modo colapsado */
body.sidebar-collapsed .sidebar-user .dropdown-menu {
    margin-left: 8px !important;
}
/* Em modo colapsado, o flyout dos submenus e o dropdown do usuário
   precisam escapar pra fora do wrapper — libera overflow apenas aí. */
body.sidebar-collapsed #sidebar .sidebar-wrapper {
    overflow: visible !important;
}
body.sidebar-collapsed #sidebar .sidebar-wrapper .sidebar-menu {
    overflow: visible !important;
}

/* ===== Header (navbar-top) — agora sem o dropdown do usuário =====
   Em desktop (xl+) a navbar fica vazia (só o burger-btn que é mobile),
   então some — devolvendo o espaço vertical ao conteúdo da página. */
@media (min-width: 1200px) {
    #main > header .navbar-top { display: none !important; }
}

/* Prefixo `#sidebar` eleva especificidade pra (1, X, 0), vencendo as regras
   do `html[data-bs-theme=dark] .sidebar-wrapper ...` (0, X, 1) do Mazer
   (app-dark.css) — garante que light e dark mode usem os MESMOS paddings. */
#sidebar .sidebar-wrapper .sidebar-header { padding: 1.1rem 1rem 0.6rem; }
#sidebar .sidebar-wrapper .menu { padding: 0 0.85rem; margin-top: 0.5rem; }
#sidebar .sidebar-wrapper .menu .sidebar-title {
    padding: 0 0.5rem;
    margin: 0.85rem 0 0.45rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c757d;
}
#sidebar .sidebar-wrapper .menu .sidebar-item { margin-top: 0.2rem; }
#sidebar .sidebar-wrapper .menu .sidebar-link {
    padding: 0.55rem 0.8rem;
    font-size: 0.92rem;
    border-radius: 0.4rem;
}
#sidebar .sidebar-wrapper .menu .sidebar-link span { margin-left: 0.7rem; }

/* =====================================================================
   SUBMENUS — hierarquia em três níveis com indentação progressiva,
   barra-indicador refinada para o item ativo e chevron rotativo.
   Sem bordas contínuas: a hierarquia é lida pelo recuo + peso + cor.
   ===================================================================== */

/* L1 — submenu direto de .sidebar-item.has-sub (ex.: Empresa, AEP/Inventário).
   margin-top maior pra dar respiro entre o pill do menu principal e o primeiro
   item do submenu — evita que "Empresa" cole na borda inferior de "Cadastros". */
#sidebar .sidebar-wrapper .menu .submenu {
    position: relative;
    margin: 0.5rem 0 0.3rem 0.35rem;
    padding-left: 0;
    border-left: none;
}

/* Estado aberto: max-height ILIMITADO (none). O JS só usa pixels explícitos
   DURANTE a animação do clique — terminada a transição, volta pra
   max-height: none (via remoção do style inline) e o submenu acomoda
   livremente qualquer mudança de conteúdo. */
#sidebar .sidebar-wrapper .menu .submenu.submenu-open {
    max-height: none;
}

/* L2 — degrau visível em relação a L1 (ex.: Usuários, Áreas sob Empresa) */
#sidebar .sidebar-wrapper .menu .submenu .submenu {
    margin: 0.1rem 0 0.25rem 0.9rem;
}

/* Separação entre seções has-sub do mesmo nível (Empresa ↔ AEP/Inventário) —
   evita que as duas subseções fiquem coladas, melhorando a leitura. */
#sidebar .sidebar-wrapper .menu .submenu > .submenu-item.has-sub + .submenu-item.has-sub {
    margin-top: 0.35rem;
}

/* Item-link comum a L1 e L2 — padding generoso para clique confortável,
   cantos arredondados, transições suaves. */
#sidebar .sidebar-wrapper .menu .submenu .submenu-item > a {
    position: relative;
    padding: 0.5rem 1.75rem 0.5rem 0.95rem;
    font-size: 0.83rem;
    letter-spacing: 0.15px;
    line-height: 1.3;
    overflow-wrap: anywhere;
    border-radius: 0.5rem;
    color: #4b5563;
    transition: color 0.18s ease, background-color 0.18s ease, padding-left 0.18s ease;
}

/* Item ativo no submenu — sinalizado APENAS por cor + peso da fonte, sem
   barrinha-indicador à esquerda. Limpo, sem ruído visual extra. */
#sidebar .sidebar-wrapper .menu .submenu .submenu-item.active > a {
    color: #3E1FDC;
    background-color: transparent;
    font-weight: 700;
}

/* Mazer adiciona um chevron via `.submenu-item.has-sub .submenu-link:after`
   (seletor descendente), o que vaza a seta para TODO link-folha dentro de
   um ramo .has-sub. Anulamos para que só itens has-sub diretos exibam o caret.
   Cobrimos `:after` e `::after` + reset visual completo, garantindo que nem
   um `content: url(...)` herdado consiga renderizar. */
#sidebar #sidebar .sidebar-wrapper .menu .submenu-item:not(.has-sub) > .submenu-link:after,
#sidebar #sidebar .sidebar-wrapper .menu .submenu-item:not(.has-sub) > .submenu-link::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
    transform: none !important;
    visibility: hidden !important;
}

/* Hover — fundo leve, pequeno deslize para a direita que dá vida sem quebrar
   o alinhamento (substitui o margin-left:0.3rem agressivo do app.css).
   Aplica em qualquer item (ativo ou não), pra manter consistência visual
   ao passar o mouse — o ativo só perde o fundo quando o cursor sai. */
#sidebar .sidebar-wrapper .menu .submenu .submenu-item > a:hover {
    margin-left: 0 !important;
    color: #3E1FDC;
    background-color: rgba(62, 31, 220, 0.055);
    padding-left: 1.05rem;
}

/* Pai has-sub (L1) com submenu aberto — sinaliza qual ramo está expandido
   mesmo quando o cursor saiu do link. Tom levemente mais saturado que o
   hover de folha, para deixar claro que é um "container" expandido. */
#sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(> .submenu.submenu-open) > .submenu-link {
    color: #3E1FDC;
    background-color: rgba(62, 31, 220, 0.07);
    font-weight: 600;
}

/* Quando o ramo está aberto E contém o item ativo, intensifica um pouco
   para reforçar que é o caminho do item atualmente em uso. */
#sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(.submenu-item.active) > .submenu-link {
    color: #3E1FDC;
}

/* ---------------------------------------------------------------------
   Chevron customizado: substitui o content:url(...) padrão do Mazer
   por um caret CSS que gira ao abrir/fechar. Vale para L0 e L1 has-sub.
   --------------------------------------------------------------------- */

/* CRÍTICO: o Mazer só põe `position:relative` em `.submenu-link` (L1+),
   não em `.sidebar-link` (L0). Sem isso, o ::after do chevron L0 ancora
   no <li.sidebar-item.has-sub> (que TEM position:relative do Mazer), e
   quando o submenu abre, o <li> cresce — top:50% aterrissa NO MEIO da
   lista expandida, em vez de ficar na linha do próprio link.
   `!important` + ID-level specificity garantem que nenhuma regra do
   Mazer (incluindo o estado active) consiga desfazer este ancoramento. */
#sidebar .sidebar-wrapper .menu .sidebar-item.has-sub > .sidebar-link {
    position: relative !important;
}

#sidebar .sidebar-wrapper .menu .sidebar-item.has-sub > .sidebar-link::after,
#sidebar #sidebar .sidebar-wrapper .menu .submenu-item.has-sub > .submenu-link::after {
    content: '' !important;
    position: absolute;
    right: 0.85rem;
    top: 50%;
    width: 7px;
    height: 7px;
    border: 0 solid currentColor;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
    background: none;
    color: #9ca3af;
    transform: translateY(-65%) rotate(-45deg);   /* aponta direita */
    transition: transform 0.22s ease, border-color 0.18s ease;
}

/* Caret rotacionado para baixo quando o submenu está aberto */
#sidebar .sidebar-wrapper .menu .sidebar-item.has-sub:has(> .submenu.submenu-open) > .sidebar-link::after,
#sidebar #sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(> .submenu.submenu-open) > .submenu-link::after {
    transform: translateY(-85%) rotate(45deg);
    color: #3E1FDC;
}

/* Quando o L0 está ativo (fundo roxo), o caret precisa ficar branco */
#sidebar .sidebar-wrapper .menu .sidebar-item.active.has-sub > .sidebar-link::after {
    color: #ffffff;
}

/* ---------------------------------------------------------------------
   Dark mode — preserva contraste e o sotaque lilás da paleta
   --------------------------------------------------------------------- */
.dark-mode #sidebar .sidebar-wrapper .menu .submenu .submenu-item > a {
    color: #adb5bd;
}
.dark-mode #sidebar .sidebar-wrapper .menu .submenu .submenu-item.active > a {
    color: #c5b8e2;
    background-color: transparent;
}
.dark-mode #sidebar .sidebar-wrapper .menu .submenu .submenu-item.active > a::before {
    background: #c5b8e2;
}
.dark-mode #sidebar .sidebar-wrapper .menu .submenu .submenu-item > a:hover {
    color: #c5b8e2;
    background-color: rgba(197, 184, 226, 0.07);
}
.dark-mode #sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(> .submenu.submenu-open) > .submenu-link {
    color: #c5b8e2;
    background-color: rgba(197, 184, 226, 0.08);
}
.dark-mode .sidebar-wrapper .menu .sidebar-item.has-sub:has(> .submenu.submenu-open) > .sidebar-link::after,
.dark-mode #sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(> .submenu.submenu-open) > .submenu-link::after {
    color: #c5b8e2;
}

/* Select de unidade — espaçamento mais compacto também */
.sidebar-wrapper .sidebar-menu > ul:has(#unidade_id) { margin-bottom: 0.25rem; }

body.sidebar-collapsed .sidebar-header { padding: 0.85rem 0.5rem; }
body.sidebar-collapsed .sidebar-logo-full { display: none !important; }
body.sidebar-collapsed .sidebar-logo-icon { display: inline-block !important; }
body.sidebar-collapsed .sidebar-header-inner {
    justify-content: center !important;
    align-items: center;
    padding: 0;
}

/* X de fechar (mobile) some quando o sidebar está colapsado — evita
   sobreposição com o botão de toggle no canto superior */
body.sidebar-collapsed .sidebar-toggler.x { display: none !important; }

/* Oculta o <ul> que carrega o select de unidade (e o select2 que ele gera).
   :has() é suportado em todos os browsers modernos (Chrome/Edge/FF/Safari). */
body.sidebar-collapsed #sidebar .sidebar-menu > ul:has(#unidade_id),
body.sidebar-collapsed #sidebar select#unidade_id,
body.sidebar-collapsed #sidebar .select2-container { display: none !important; }

/* Esconde labels textuais; mantém .submenu-link visível para o flyout funcionar */
body.sidebar-collapsed #sidebar .sidebar-link > span,
body.sidebar-collapsed #sidebar .sidebar-title { display: none !important; }

/* CRÍTICO: app.css define .sidebar-item.has-sub { overflow: hidden } e .submenu
   { max-height: 0; overflow: hidden } — isso impedia o flyout de aparecer.
   Em modo compacto precisamos liberar tudo. */
body.sidebar-collapsed #sidebar .sidebar-item,
body.sidebar-collapsed #sidebar .sidebar-item.has-sub,
body.sidebar-collapsed #sidebar .submenu-item,
body.sidebar-collapsed #sidebar .submenu-item.has-sub {
    overflow: visible !important;
    position: relative;
}
body.sidebar-collapsed #sidebar .submenu {
    display: none;
    max-height: none !important;
    overflow: visible !important;
    /* No flyout, neutraliza a linha guia/identação que adicionamos no modo
       expandido — o flyout já tem seu próprio container com sombra/borda */
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
}
/* Sem marcador horizontal nos itens dentro do flyout */
body.sidebar-collapsed #sidebar .submenu .submenu-item > a::before {
    display: none !important;
}

/* Ícones modernos: estilo pill com hover e estado ativo */
body.sidebar-collapsed #sidebar .menu { padding: 0 8px; }
body.sidebar-collapsed #sidebar .sidebar-item {
    margin: 4px 0;
}
body.sidebar-collapsed #sidebar .sidebar-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    padding: 0;
    border-radius: 10px;
    color: #6c757d;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
}
body.sidebar-collapsed #sidebar .sidebar-link > i {
    margin: 0;
    font-size: 1.25rem;
    width: auto;
    color: inherit;
}
body.sidebar-collapsed #sidebar .sidebar-link:hover {
    background-color: rgba(62, 31, 220, 0.10);
    color: #3E1FDC;
    transform: scale(1.04);
}
body.sidebar-collapsed #sidebar .sidebar-item.active > .sidebar-link {
    background-color: #3E1FDC;
    color: #fff;
    box-shadow: 0 4px 12px rgba(62, 31, 220, 0.32);
}
body.sidebar-collapsed #sidebar .sidebar-item.active > .sidebar-link > i { color: #fff; }

/* Oculta o caret de "tem submenu" */
body.sidebar-collapsed #sidebar .has-sub > .sidebar-link::after,
body.sidebar-collapsed #sidebar .has-sub > .submenu-link::after { display: none !important; }

/* ===== Flyout: submenu lateral ao passar o mouse ===== */
body.sidebar-collapsed #sidebar .sidebar-item.has-sub:hover > .submenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 230px;
    background: #fff;
    box-shadow: 6px 6px 24px rgba(15, 23, 42, 0.14);
    border-radius: 10px;
    z-index: 1050;
    padding: 8px 0;
    margin-left: 8px;
    max-height: none !important;
    overflow: visible !important;
}
body.sidebar-collapsed #sidebar .sidebar-item.has-sub:hover > .submenu::before {
    /* Ponte invisível para não perder o hover ao mover do ícone até o flyout */
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    width: 8px;
    height: 100%;
}
body.sidebar-collapsed #sidebar .sidebar-item.has-sub:hover > .submenu .submenu-link {
    display: block !important;
    padding: 8px 18px;
    color: #495057;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
}
body.sidebar-collapsed #sidebar .sidebar-item.has-sub:hover > .submenu .submenu-link:hover {
    background: rgba(62, 31, 220, 0.08);
    color: #3E1FDC;
    margin-left: 0; /* anula a animação de hover do app.css que empurra o texto */
}

/* Submenu de 2º nível — flyout aninhado dentro do flyout */
body.sidebar-collapsed #sidebar .sidebar-item.has-sub:hover > .submenu .submenu-item.has-sub > .submenu {
    display: none !important;
    visibility: hidden;
    opacity: 0;
}
body.sidebar-collapsed #sidebar .sidebar-item.has-sub:hover > .submenu .submenu-item.has-sub:hover > .submenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 210px;
    background: #fff;
    box-shadow: 6px 6px 24px rgba(15, 23, 42, 0.14);
    border-radius: 10px;
    padding: 8px 0;
    margin-left: 8px;
    z-index: 1051;
    max-height: none !important;
}
body.sidebar-collapsed #sidebar .sidebar-item.has-sub:hover > .submenu .submenu-item.has-sub:hover > .submenu::before {
    /* Ponte invisível para não perder o hover ao atravessar o gap até o sub-flyout */
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    width: 8px;
    height: 100%;
}

/* Tooltip via title attr para itens sem submenu */
body.sidebar-collapsed #sidebar .sidebar-link[title]:hover::before {
    content: attr(title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    background: #1f242c;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1050;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
body.sidebar-collapsed #sidebar .sidebar-item.has-sub > .sidebar-link[title]:hover::before {
    display: none; /* item com submenu → flyout cuida disso */
}

/* Botão rotaciona quando colapsado */
body.sidebar-collapsed .sidebar-collapse-btn i { transform: rotate(180deg); }

/* Empurra #main apenas em ≥xl, onde o sidebar é fixo (não overlay).
   #main é irmão de #app no DOM (não de #sidebar), por isso o seletor é direto. */
@media (min-width: 1200px) {
    body.sidebar-collapsed #main { margin-left: 78px !important; }
}

/* Dark mode dos flyouts */
.dark-mode.sidebar-collapsed #sidebar .sidebar-item.has-sub:hover > .submenu,
.dark-mode.sidebar-collapsed #sidebar .sidebar-item.has-sub:hover > .submenu .submenu-item.has-sub:hover > .submenu,
body.dark-mode.sidebar-collapsed #sidebar .sidebar-item.has-sub:hover > .submenu,
body.dark-mode.sidebar-collapsed #sidebar .sidebar-item.has-sub:hover > .submenu .submenu-item.has-sub:hover > .submenu {
    background: #1f242c;
    box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.5);
}
body.dark-mode.sidebar-collapsed #sidebar .sidebar-item.has-sub:hover > .submenu .submenu-link { color: #ced4da; }
body.dark-mode.sidebar-collapsed #sidebar .sidebar-item.has-sub:hover > .submenu .submenu-link:hover {
    background: rgba(197, 184, 226, 0.08);
    color: #c5b8e2;
}

/* =====================================================================
   PLANO DE AÇÃO / KANBAN — Quadro, colunas, cards, drag-and-drop
   ===================================================================== */

.kanban-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    align-items: flex-start;
    padding-bottom: 8px;
}
.kanban-column {
    flex: 1 1 0;
    min-width: 260px;
    max-width: 360px;
    background: #f5f6fa;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 280px);
}
.dark-mode .kanban-column { background: #2a2f3a; }
.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    padding: 6px 8px 10px 8px;
    border-bottom: 2px solid transparent;
    margin-bottom: 8px;
}
.kanban-column[data-status="Não iniciada"] .kanban-column-header { border-bottom-color: #FFA500; }
.kanban-column[data-status="Em andamento"] .kanban-column-header { border-bottom-color: #F7D800; }
.kanban-column[data-status="Atrasado"] .kanban-column-header { border-bottom-color: #dc3545; }
.kanban-column[data-status="Suspensa"] .kanban-column-header { border-bottom-color: #808080; }
.kanban-column[data-status="Concluído"] .kanban-column-header { border-bottom-color: #269847; }
.kanban-count {
    background: #3E1FDC;
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}
.kanban-cards {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 80px;
    padding: 4px;
}
.kanban-cards.drag-over {
    background: rgba(62, 31, 220, 0.08);
    border-radius: 6px;
    outline: 2px dashed #3E1FDC;
    outline-offset: -4px;
}
.kanban-card {
    background: #fff;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    cursor: grab;
    border-left: 4px solid #adb5bd;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.dark-mode .kanban-card {
    background: #1f242c;
    color: #e9ecef;
}
.kanban-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); }
.kanban-card.dragging { opacity: 0.5; cursor: grabbing; }
.kanban-card[data-prioridade="Alta"] { border-left-color: #dc3545; }
.kanban-card[data-prioridade="Média"] { border-left-color: #FFA500; }
.kanban-card[data-prioridade="Baixa"] { border-left-color: #269847; }
.kanban-card.atrasada { background: #fff5f5; }
.dark-mode .kanban-card.atrasada { background: #3a1f23; }
.kanban-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.75rem;
    margin-bottom: 6px;
}
.kanban-card-origem {
    background: #ecebf3;
    color: #5a3d8c;
    border-radius: 4px;
    padding: 2px 8px;
    font-weight: 500;
}
.dark-mode .kanban-card-origem {
    background: #3a3550;
    color: #c5b8e2;
}
.kanban-card-actions a {
    cursor: pointer;
    color: #3E1FDC;
    font-size: 0.85rem;
}
.kanban-card-descricao {
    font-size: 0.875rem;
    line-height: 1.35;
    margin-bottom: 8px;
    word-break: break-word;
}
.kanban-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.72rem;
    color: #6c757d;
}
.dark-mode .kanban-card-meta { color: #adb5bd; }
.kanban-card-meta i { margin-right: 3px; }
.kanban-card-data.atrasada { color: #dc3545; font-weight: 600; }
.kanban-empty {
    text-align: center;
    font-size: 0.8rem;
    color: #adb5bd;
    padding: 20px 8px;
}
@media (max-width: 768px) {
    .kanban-board { flex-direction: column; }
    .kanban-column { max-width: 100%; max-height: none; }
}
/* =====================================================================
   ECPharma / ERLSoft — exclusivo
   ===================================================================== */

/* Campos dinâmicos por classe terapêutica (saída por receita) */
.campo-comprador,
.campo-paciente {
    transition: all 0.3s ease;
}

.campo-oculto {
    display: none !important;
}

/* Spinner de loading (barra fina no topo, AJAX-driven) */
#spinner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: transparent;
    z-index: 99999;
    pointer-events: none;
    display: none;
    overflow: hidden;
}

#spinner .spinner {
    position: absolute;
    top: 0;
    left: -40%;
    height: 100%;
    width: 40%;
    background: linear-gradient(
        90deg,
        rgba(62, 31, 220, 0) 0%,
        rgba(62, 31, 220, 1) 50%,
        rgba(62, 31, 220, 0) 100%
    );
    box-shadow: 0 0 10px rgba(62, 31, 220, 0.6);
    animation: erlsoft-progress-slide 1.4s ease-in-out infinite;
}

@keyframes erlsoft-progress-slide {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* Badges de tipo de receita */
.bg-receita-azul {
    background-color: #cce5ff;
    padding: 4px 8px;
    border-radius: 4px;
}

.bg-receita-amarela {
    background-color: #fff3cd;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Botões de ação em modais de cadastro */
.btn-adicionar {
    background-color: #4CAF50;
    color: #FFFFFF;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-adicionar:hover {
    background-color: #3e8e41;
}

.btn-voltar {
    background-color: #2196F3;
    color: #FFFFFF;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-voltar:hover {
    background-color: #1976d2;
}

/* Botão de fechar em containers de imagem/documento */
.close-button {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.close-button.left {
    margin-left: 10px;
}

.close-button:hover {
    color: red;
}

/* Tabela de comparação antes/depois (inventário) */
#tableContainer {
    width: 47.5%;
    margin-top: 5px;
}

#beforeAfterTable {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

#beforeAfterTable td {
    width: 50%;
    text-align: center;
    vertical-align: middle;
    padding: 1px;
}

#beforeAfterTable tr {
    height: 20px !important;
}

/* Linhas coloridas de tabela de estoque */
.table-success {
    background-color: #d4edda !important;
}

.table-danger {
    background-color: #f8d7da !important;
}

/* Linha de item cancelado/excluído */
.item-excluir {
    background-color: #e9ecef !important;
    text-decoration: line-through;
    opacity: 0.6;
    color: #6c757d !important;
}

.text-warning small {
    font-size: 0.75rem;
}

.btn-link {
    padding: 0.25rem !important;
}

/* Links mais vibrantes no tema dark */
html[data-bs-theme=dark] {
    --bs-link-color: #3E1FDC;
    --bs-link-color-rgb: 62, 31, 220;
    --bs-link-hover-color: #5C3FFF;
    --bs-link-hover-color-rgb: 92, 63, 255;
}

/* Rodapé do sidebar com avatar + nome + menu flutuante */
.sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-footer-info {
    flex: 1;
    overflow: hidden;
}
.sidebar-footer-info .name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-footer-info .role {
    font-size: 11px;
    opacity: 0.7;
}
.sidebar-user-floating-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    list-style: none;
    padding: 6px 0;
    margin: 0;
    min-width: 180px;
    z-index: 9999;
}
.sidebar-user-floating-menu li a {
    display: block;
    padding: 8px 16px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
}
.sidebar-user-floating-menu li a:hover {
    background: #f5f5f5;
}
#sidebar.inactive .sidebar-footer-info,
#sidebar.inactive .sidebar-collapse-btn {
    display: none;
}