/* Estilos Personalizados para o Sistema de Gestão Interna de TI */

/* Estilo geral e transições */
body {
    background-color: #f8f9fa;
    transition: background-color 0.2s ease, color 0.2s ease;
    overflow-x: hidden; /* Prevenir rolagem horizontal no body */
    min-height: 100vh;
}

/* ===== Layout com sidebar à esquerda ===== */
.app-shell { min-height: 100vh; }

:root { --sidebar-width: 240px; }

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed; /* Fixa a barra lateral */
    top: 0;
    left: 0;
    overflow-y: auto;
    z-index: 1030; /* acima do conteúdo */
}

.sidebar .sidebar-brand { width: 100%; justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
.sidebar .logo-custom { height: 45px; display: block; margin-left: auto !important; margin-right: auto !important; }

.sidebar .section-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .6;
    margin-bottom: .25rem;
}

.sidebar .nav-link {
    color: rgba(255,255,255,.85);
    padding: .35rem .75rem;
    border-radius: .375rem;
    margin: 2px 0;
}
.sidebar .nav-link.small { font-size: .825rem; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .nav-link.active { background: rgba(255,255,255,.16); color: #fff; }

/* Submenu dentro do grupo "Mais" */
.sidebar .submenu .nav-link { padding-left: 1.75rem; }
.sidebar .nav-collapse-toggle .chev { transition: transform .2s ease; }
.sidebar .nav-collapse-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.content-area {
    min-width: 0;
    margin-left: var(--sidebar-width); /* cria espaço para a sidebar fixa */
}

/* Conteúdo deve ocupar toda a largura */
.container, .container-fluid { max-width: 100% !important; }

/* Garantir que menus dropdown não sejam cortados em toda a aplicação */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    z-index: 1050;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.dropdown-menu.show {
    display: block;
}

/* Melhoria na rolagem horizontal para tabelas em dispositivos móveis */
.table-responsive {
    overflow-x: auto !important; /* Forçar rolagem horizontal */
    -webkit-overflow-scrolling: touch; /* Rolagem suave em iOS */
    scrollbar-width: thin; /* Barra de rolagem fina em Firefox */
    position: relative; /* Necessário para indicadores de rolagem */
    padding-bottom: 5px; /* Espaço para scrollbar */
}

/* Adicionar indicadores visuais de rolagem */
.table-responsive::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.1));
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.table-responsive:not(.no-scroll-x)::after {
    opacity: 1;
}

/* Garantir que as tabelas ocupem toda a largura disponível */
.table-responsive table {
    min-width: 100%;
    width: auto;
}

/* Ajustar células em dispositivos móveis */
@media (max-width: 768px) {
    .table-stacked thead { display: none; }
    .table-stacked tbody tr { display: block; border-top: 1px solid rgba(0,0,0,.08); margin-bottom: .5rem; }
    body[data-theme="dark"] .table-stacked tbody tr, html[data-theme="dark"] .table-stacked tbody tr { border-color:#2a2f39; }
    .table-stacked tbody td { display: flex; justify-content: space-between; align-items: center; gap: .75rem; white-space: normal; padding: .5rem .75rem; }
    .table-stacked tbody td::before { content: attr(data-label); font-weight: 600; color: #6c757d; }
    body[data-theme="dark"] .table-stacked tbody td::before, html[data-theme="dark"] .table-stacked tbody td::before { color:#9aa1ad; }
    .table-stacked .btn-group { width: 100%; justify-content: flex-end; }
    
    /* Garantir que dropdowns em células não sejam cortados */
    td .dropdown-menu {
        position: fixed;
        right: 10px;
        left: auto;
        max-width: 80vw;
    }
    
    /* Arrumar posição de botões de ação */
    td .acoes-container {
        position: relative;
    }
}

/* Correção específica para dropdowns em tabelas */
td .dropdown-menu {
    right: 0;
    left: auto;
}

/* Adicionar transições para elementos comuns */
.navbar,
.card,
.card-header,
.card-footer,
.table,
.table td,
.table th,
.btn,
.dropdown-menu,
.dropdown-item,
.badge,
.form-control,
.form-select,
.modal-content,
.list-group-item,
.footer {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Ajustes na barra de navegação */
.navbar-brand {
    font-weight: 600;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

/* Estilos para cards */
.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 1.5rem;
    border: none;
    border-radius: 0.5rem;
    position: relative; /* mantém o contexto para dropdowns sem cortar */
}

/* ===== Modernização dos KPIs de Alertas (cards vazios com efeito interno) ===== */
.kpi-alert { border: 1px solid rgba(0,0,0,.06); border-radius: 12px; overflow: hidden; background: transparent; }
.kpi-alert .card-body { padding: 1.25rem 1.25rem; position: relative; }
.kpi-alert .kpi-count { font-variant-numeric: tabular-nums; }
.kpi-alert .kpi-icon { opacity: .45; }

/* camada de brilho/onda interna conforme a cor do tipo */
.kpi-empty::after { content:""; position:absolute; inset:4px; border-radius:10px; pointer-events:none; opacity:0; background-size:160% 160%; }
.kpi-primary.kpi-empty::after { background: radial-gradient(600px 300px at 20% 20%, rgba(37,99,235,.18), transparent 60%), radial-gradient(400px 200px at 80% 80%, rgba(29,78,216,.14), transparent 60%); }
.kpi-danger.kpi-empty::after  { background: radial-gradient(600px 300px at 20% 20%, rgba(239,68,68,.2), transparent 60%), radial-gradient(400px 200px at 80% 80%, rgba(185,28,28,.16), transparent 60%); }
.kpi-warning.kpi-empty::after { background: radial-gradient(600px 300px at 20% 20%, rgba(245,158,11,.2), transparent 60%), radial-gradient(400px 200px at 80% 80%, rgba(217,119,6,.16), transparent 60%); }
.kpi-info.kpi-empty::after    { background: radial-gradient(600px 300px at 20% 20%, rgba(14,165,233,.2), transparent 60%), radial-gradient(400px 200px at 80% 80%, rgba(6,182,212,.16), transparent 60%); }

/* Animação de breath no interior do card (apenas quando houver alertas) */
.breath-active.kpi-empty::after { animation: innerBreath 2.2s ease-in-out infinite; }
@keyframes innerBreath {
  0%   { opacity:.18; transform: scale(1);    filter: blur(0px);   background-size:160% 160%; }
  50%  { opacity:.45; transform: scale(1.035); filter: blur(0.6px); background-size:185% 185%; }
  100% { opacity:.18; transform: scale(1);    filter: blur(0px);   background-size:160% 160%; }
}

/* Dark mode: borda e contraste neutros, efeito mantém as cores */
body[data-theme="dark"] .kpi-alert, html[data-theme="dark"] .kpi-alert { border-color: #262a33; background: transparent; }

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Estilos para tabelas */
.table th {
    font-weight: 600;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

/* Destaque para itens com estoque baixo */
tr.table-warning {
    background-color: rgba(255, 193, 7, 0.2);
}

tr.table-warning:hover {
    background-color: rgba(255, 193, 7, 0.3);
}

/* Estilo para botões de ação na tabela */
.btn-editar, .btn-excluir {
    padding: 0.25rem 0.5rem;
}

/* Ajustes para os cards do dashboard */
.display-1 {
    font-size: 4rem;
    font-weight: 300;
}

/* Estilos para os cards de pendências */
.pendencia-card .card {
    transition: transform 0.2s ease;
}

.pendencia-card .card:hover {
    transform: translateY(-5px);
}

/* Ajustes para badges */
.badge {
    padding: 0.5em 0.7em;
    font-size: 0.9em;
    font-weight: 600;
}

/* Estilos para modais */
.modal-header {
    border-bottom: 0;
}

.modal-footer {
    border-top: 0;
}

/* Ajustes para inputs de quantidade */
.quantidade-item {
    max-width: 60px;
    text-align: center;
}

/* Estilos responsivos */
@media (max-width: 767.98px) {
    .display-1 {
        font-size: 3rem;
    }
    
    /* Melhorar navegação em tabelas para dispositivos móveis */
    .table-responsive {
        position: relative;
        margin-bottom: 1rem;
    }
    
    /* Texto indicando que é possível arrastar para o lado */
    .table-responsive::before {
        content: "Arraste para ver mais →";
        position: absolute;
        right: 0;
        bottom: -20px;
        font-size: 12px;
        color: #6c757d;
        opacity: 0.7;
    }
    
    /* Manter a funcionalidade dos dropdowns dentro de tabelas */
    .dropdown-menu.show {
        z-index: 1060 !important;
    }
}

.card-title {
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.alert {
    border-radius: 0.5rem;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.btn-group .btn {
    border-radius: 0;
    margin: 0;
}

.btn-group .btn:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.btn-group .btn:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

/* Rodapé acompanha o fluxo no novo layout */
footer {
    position: static;
    width: 100%;
    z-index: 1;
}

.dropdown-menu {
    min-width: 10rem;
    max-width: 20rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    border-radius: 0.25rem;
}

.dropdown {
    position: relative;
}

.dropdown-menu.show {
    display: block;
    animation: fadeIn 0.2s ease;
}

.table-responsive {
    margin-bottom: 1rem;
}

.card-body {
    padding: 1.5rem;
}

@media (max-width: 768px) {
    .dropdown-menu {
        position: absolute;
        right: 0;
        left: auto;
        z-index: 1000;
    }
}

:root {
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --chat-width: 340px;
}

.logo-filter {
    display: inline-block;
    vertical-align: middle;
    filter: brightness(1);
    transition: filter 0.2s ease;
    max-height: 30px;
}

.logo-custom {
    display: inline-block;
    vertical-align: middle;
    height: 48px;
    width: auto;
    transition: filter 0.2s ease;
}

/* ===== Sidebar Premium (Dark Blue Glass) ===== */
.sidebar-premium {
    background: linear-gradient(180deg, rgba(11, 14, 20, 0.95) 0%, rgba(17, 24, 39, 0.98) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* Hover effect slightly brighter for sidebar links */
.sidebar-premium .nav-link:hover {
    background: rgba(59, 130, 246, 0.1);
}

.sidebar-premium .nav-link.active {
    background: rgba(59, 130, 246, 0.15);
    border-left: 3px solid #3b82f6;
    margin-left: -2px;
    padding-left: calc(0.75rem + 2px);
}

.bg-black {
    background-color: #000 !important;
}

.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.table-dark {
    color: #fff;
    background-color: #212529;
}

/* Estilos para a página de login */
.login-page {
    background-color: #000;
    min-height: 100vh;
    background-image: none;
    background-size: auto;
    animation: none;
    position: relative;
    overflow: hidden;
}

.login-page::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0,102,255,0.1) 0%, rgba(0,0,0,0) 70%);
    animation: pulseGlow 15s ease-in-out infinite;
    z-index: 0;
}

@keyframes pulseGlow {
    0% {
        opacity: 0.3;
        transform: scale(0.95);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }
    100% {
        opacity: 0.3;
        transform: scale(0.95);
    }
}

.login-page .container {
    position: relative;
    z-index: 1;
}

.login-page .card {
    background-color: rgba(18, 18, 18, 0.95);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transform: translateY(30px);
    opacity: 0;
    animation: cardAppear 0.8s ease forwards;
}

@keyframes cardAppear {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.login-page .card-body {
    padding: 2.5rem;
}

.login-page .card-footer {
    background-color: rgba(10, 10, 10, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    padding: 1rem;
}

.login-page h2, 
.login-page label, 
.login-page .text-muted {
    color: #ffffff !important;
}

.login-page p.text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.9rem;
}

.login-page .input-group {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.login-page .input-group:focus-within {
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
}

.login-page .input-group-text {
    background-color: rgba(30, 30, 30, 0.8);
    border: none;
    color: #0d6efd;
    border-radius: 0.5rem 0 0 0.5rem;
    padding: 0.75rem 1rem;
}

.login-page .form-control {
    background-color: rgba(40, 40, 40, 0.8);
    border: none;
    color: #ffffff;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.login-page .form-control:focus {
    background-color: rgba(50, 50, 50, 0.8);
    box-shadow: none;
    color: #ffffff;
}

.login-page .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.login-page .btn-outline-secondary {
    background-color: rgba(30, 30, 30, 0.8);
    border: none;
    color: #0d6efd;
    border-radius: 0 0.5rem 0.5rem 0;
}

.login-page .btn-outline-secondary:hover {
    background-color: rgba(50, 50, 50, 0.8);
    color: #ffffff;
}

.login-page .btn-primary {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    border: none;
    width: 100%;
    padding: 0.85rem;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
    transition: all 0.3s ease;
}

.login-page .btn-primary:hover {
    background: linear-gradient(135deg, #0b5ed7, #084298);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.4);
}

.login-page .btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.4);
}

.login-page .alert {
    background-color: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #ff6b6b;
    border-radius: 0.5rem;
    animation: fadeInDown 0.5s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-page .logo-animation {
    animation: logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.login-page .form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.login-page .bi {
    font-size: 1.1rem;
    vertical-align: middle;
}

.login-page .btn-primary .bi {
    font-size: 1.2rem;
    margin-right: 0.5rem;
    animation: slideRight 1s infinite alternate;
}

@keyframes slideRight {
    from {
        transform: translateX(-3px);
    }
    to {
        transform: translateX(3px);
    }
}

/* Animação para o texto do cabeçalho */
.login-page .text-focus-in {
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes text-focus-in {
    0% {
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        filter: blur(0px);
        opacity: 1;
    }
} 

/* Estilos para indicadores de status */
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.status-indicator.online {
    background-color: #1cc88a;
    box-shadow: 0 0 5px #1cc88a;
}

.status-indicator.offline {
    background-color: #adb5bd;
}

.status-indicator.none {
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
}

/* Estilos para cards de monitoramento */
.card-stats {
    border-radius: 8px;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    margin-bottom: 1.5rem;
}

.card-stats .card-body {
    padding: 1.25rem;
}

.card-stats .icon {
    font-size: 2rem;
    opacity: 0.3;
}

.card-stats .count {
    font-size: 1.5rem;
    font-weight: 700;
}

.card-stats .text {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
}

/* Cores para os cards */
.bg-success-soft {
    background-color: rgba(28, 200, 138, 0.1);
}

.bg-danger-soft {
    background-color: rgba(231, 74, 59, 0.1);
}

.bg-info-soft {
    background-color: rgba(54, 185, 204, 0.1);
}

.bg-warning-soft {
    background-color: rgba(246, 194, 62, 0.1);
}

/* Estilos para tabela de monitoramento */
#tabelaMonitoramento thead th {
    font-weight: 600;
    vertical-align: middle;
}

#tabelaMonitoramento tbody tr:hover {
    background-color: rgba(78, 115, 223, 0.05);
}

/* Estilos para filtros */
.filtro-container {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.filtro-container .form-control:focus,
.filtro-container .form-select:focus {
    border-color: #bac8f3;
    box-shadow: 0 0 0 0.25rem rgba(78, 115, 223, 0.25);
}

/* Legenda de status */
.legenda-status {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

.legenda-status .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.legenda-status .online {
    background-color: #1cc88a;
    box-shadow: 0 0 5px #1cc88a;
}

.legenda-status .offline {
    background-color: #adb5bd;
}

.legenda-status .none {
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
}

/* Estilos para a página de detalhes do monitoramento */
.card-monitoramento {
    margin-bottom: 1.5rem;
}

.card-monitoramento .card-header {
    padding: 0.75rem 1.25rem;
    font-weight: 600;
}

.card-monitoramento .card-body {
    padding: 1.25rem;
}

.hardware-info {
    margin-bottom: 1rem;
}

.hardware-info h6 {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #4e73df;
}

.hardware-info table {
    margin-bottom: 0;
}

.hardware-info th {
    font-weight: 600;
    width: 150px;
}

/* Gráficos e indicadores */
.progress {
    height: 0.5rem;
    margin-top: 0.25rem;
}

.progress-bar-cpu {
    background-color: #4e73df;
}

.progress-bar-ram {
    background-color: #1cc88a;
}

.progress-bar-disk {
    background-color: #36b9cc;
}

/* Estilos para pendências concluídas */
.card.opacity-75 {
    transition: all 0.3s ease;
    position: relative;
}

.card.opacity-75::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23198754' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M20 0l20 20-20 20L0 20z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.2;
    pointer-events: none;
    z-index: 1;
}

.card.opacity-75 .card-body {
    position: relative;
    z-index: 2;
}

.card.opacity-75 .badge.bg-success {
    background-color: #198754 !important;
    font-weight: bold;
    box-shadow: 0 0 5px rgba(25, 135, 84, 0.3);
} 

/* ===== Dark mode ===== */
/* Aceita data-theme no body ou no html para evitar FOUC */
body[data-theme="dark"], html[data-theme="dark"] {
    background-color: #0e0f12;
    color: #e5e7eb;
}

body[data-theme="dark"] .content-area, html[data-theme="dark"] .content-area { background-color: transparent; }
body[data-theme="dark"] .card, html[data-theme="dark"] .card { background-color: #15171b; border-color: #262a33; box-shadow: none; }
body[data-theme="dark"] .card-header, html[data-theme="dark"] .card-header { background-color: #15171b; border-color: #262a33; }
body[data-theme="dark"] .card-footer, html[data-theme="dark"] .card-footer { background-color: #15171b; border-top-color: #262a33; }
body[data-theme="dark"] .table, html[data-theme="dark"] .table { color: #e5e7eb; }
body[data-theme="dark"] .table th, html[data-theme="dark"] .table th { background-color: #1b1e24; border-color: #2a2f39; color: #e5e7eb; }
body[data-theme="dark"] .table td, html[data-theme="dark"] .table td { border-color: #2a2f39; color: #d5d8de; }
body[data-theme="dark"] thead th, html[data-theme="dark"] thead th { color: #f3f4f6; }
body[data-theme="dark"] .table-hover tbody tr:hover, html[data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255,255,255,0.04); }
body[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-select { background-color: #181b20; border-color: #2a2f39; color: #e5e7eb; }
body[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-control:focus,
body[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .form-select:focus { background-color: #1d2026; color: #fff; border-color: #3b82f6; box-shadow: 0 0 0 .2rem rgba(59,130,246,.25); }
body[data-theme="dark"] .modal-content, html[data-theme="dark"] .modal-content { background-color: #15171b; color: #e5e7eb; border-color: #262a33; }
body[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .dropdown-menu { background-color: #15171b; color: #e5e7eb; border-color: #262a33; }
body[data-theme="dark"] .dropdown-item, html[data-theme="dark"] .dropdown-item { color: #e5e7eb; }
body[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:hover { background-color: #1d2026; color: #fff; }
/* Offcanvas no dark mode */
body[data-theme="dark"] .offcanvas, html[data-theme="dark"] .offcanvas { background-color: #15171b; color:#e5e7eb; border-left:1px solid #262a33; }
body[data-theme="dark"] .offcanvas .offcanvas-header, html[data-theme="dark"] .offcanvas .offcanvas-header { border-bottom:1px solid #262a33; }
body[data-theme="dark"] .offcanvas .input-group-text, html[data-theme="dark"] .offcanvas .input-group-text { background:#0b0d10; color:#9aa1ad; border-color:#2a2f39; }
body[data-theme="dark"] .offcanvas .segmented, html[data-theme="dark"] .offcanvas .segmented { background:#0b0d10 !important; border-color:#1f2430; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
body[data-theme="dark"] .bg-light, html[data-theme="dark"] .bg-light { background-color: #121418 !important; }
body[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-muted { color: #9aa1ad !important; }
body[data-theme="dark"] .alert-info, html[data-theme="dark"] .alert-info { background-color: #0d3a4a; border-color: #0f4c61; color: #cfe9f4; }
body[data-theme="dark"] .btn-outline-light, html[data-theme="dark"] .btn-outline-light { color: #e5e7eb; border-color: #49505c; }
body[data-theme="dark"] .btn-outline-light:hover, html[data-theme="dark"] .btn-outline-light:hover { background-color: #2a2f39; }
body[data-theme="dark"] footer.footer, html[data-theme="dark"] footer.footer { background-color: #121418; border-top: 1px solid #262a33; }

/* Melhorar contraste de linhas destacadas (estoque baixo) no dark mode */
body[data-theme="dark"] tr.table-warning,
html[data-theme="dark"] tr.table-warning { background-color: rgba(255, 193, 7, 0.25); }
body[data-theme="dark"] tr.table-warning:hover,
html[data-theme="dark"] tr.table-warning:hover { background-color: rgba(255, 193, 7, 0.35); }
body[data-theme="dark"] tr.table-warning td,
body[data-theme="dark"] tr.table-warning th,
html[data-theme="dark"] tr.table-warning td,
html[data-theme="dark"] tr.table-warning th { color: #0f1115 !important; }
body[data-theme="dark"] tr.table-warning a,
html[data-theme="dark"] tr.table-warning a { color: #0a0a0a !important; }
body[data-theme="dark"] tr.table-warning .text-muted,
html[data-theme="dark"] tr.table-warning .text-muted { color: #0f1115 !important; }

/* Títulos e textos para maior contraste no dark */
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] .card-title,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] .card-title { color: #f3f4f6; }

/* Hover states legíveis no dark */
body[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
body[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .btn:hover { filter: brightness(1.1); }
body[data-theme="dark"] .list-group-item:hover,
html[data-theme="dark"] .list-group-item:hover { background-color: #1d2026; }

/* Títulos de itens em tabelas/listas para melhor legibilidade no dark */
body[data-theme="dark"] .table .item-nome,
html[data-theme="dark"] .table .item-nome {
    color: #f8fafc;
    font-weight: 500;
}

/* ===== Bottom navigation (mobile) ===== */
@media (max-width: 991.98px){
  .bottom-nav { position: fixed; left:0; right:0; bottom:0; height:56px; background: var(--bs-light); border-top:1px solid rgba(0,0,0,.08); display:flex; justify-content: space-around; align-items:center; z-index: 1040; }
  .bottom-nav .bn-item { display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; color:#6c757d; font-size:11px; gap:2px; height:100%; min-width:64px; }
  .bottom-nav .bn-item i { font-size:18px; }
  .bottom-nav .bn-item.active { color:#0d6efd; }
  body { padding-bottom: 60px; }
  body[data-theme="dark"] .bottom-nav, html[data-theme="dark"] .bottom-nav { background:#15171b; border-top-color:#262a33; }
  body[data-theme="dark"] .bottom-nav .bn-item.active, html[data-theme="dark"] .bottom-nav .bn-item.active { color:#3b82f6; }
}


/* ===== Chatbot flutuante ===== */
.chat-widget-btn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1080;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.chat-widget-btn:hover { filter: brightness(1.05); }

.chat-widget {
    position: fixed;
    right: 18px;
    bottom: 80px;
    width: var(--chat-width);
    max-width: calc(100vw - 36px);
    height: 420px;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    display: none;
    z-index: 1080;
}
body[data-theme="dark"] .chat-widget,
html[data-theme="dark"] .chat-widget { background:#15171b; border:1px solid #262a33; }

.chat-widget.open { display: flex; flex-direction: column; }

.chat-widget-header {
    padding: 10px 12px;
    background: var(--bs-primary);
    color: #fff;
}

.chat-widget-body { flex: 1; padding: 10px; overflow-y: auto; }
.chat-widget-input { padding: 8px; background: rgba(0,0,0,.03); }
body[data-theme="dark"] .chat-widget-input,
html[data-theme="dark"] .chat-widget-input { background:#121418; }

.chat-messages { display: flex; flex-direction: column; gap: 8px; }
.chat-bubble { max-width: 80%; padding: 8px 10px; border-radius: 10px; font-size: .95rem; }
.chat-bubble.user { margin-left: auto; background: #e9f1ff; }
.chat-bubble.bot { margin-right: auto; background: #f1f3f5; }
body[data-theme="dark"] .chat-bubble.user { background:#0b2a55; color:#dbeafe; }
body[data-theme="dark"] .chat-bubble.bot { background:#1b1e24; color:#e5e7eb; }

.chat-typing { opacity: .7; font-style: italic; font-size: .9rem; }

@media (max-width: 480px){
    :root { --chat-width: calc(100vw - 36px); }
}

/* ===== Página de Pendências - visual minimalista ===== */
.pendencias-page .lead { font-size: 0.95rem; color: #6c757d; }
.pendencias-page .pendencia-card .card {
    box-shadow: none;
    border: 1px solid #e9ecef;
}
.pendencias-page .card-header,
.pendencias-page .card-body,
.pendencias-page .card-footer { padding: 0.5rem 0.75rem; }
.pendencias-page .card-title { font-size: 0.9rem; }
.pendencias-page .badge { font-size: 0.65rem; padding: 0.25em 0.45em; }
.pendencias-page .btn-sm { padding: 0.2rem 0.45rem; font-size: 0.7rem; }
.pendencias-page .pendencia-card .card { margin-bottom: 0.75rem; }

/* Cabeçalho sem fundo pesado; usamos borda lateral colorida na .card */
.pendencias-page .card-header { background: transparent !important; color: #212529 !important; }

/* Borda à esquerda por prioridade */
.pendencias-page [data-prioridade="Urgente"] .card { border-left: 4px solid #dc3545; }
.pendencias-page [data-prioridade="Alta"]    .card { border-left: 4px solid #ffc107; }
.pendencias-page [data-prioridade="Média"]   .card { border-left: 4px solid #ffffff; }
.pendencias-page [data-prioridade="Baixa"]   .card { border-left: 4px solid #ffffff; }

/* Dark mode: manter o contraste do branco nas bordas de prioridade média/baixa */
body[data-theme="dark"] .pendencias-page [data-prioridade="Média"] .card,
html[data-theme="dark"] .pendencias-page [data-prioridade="Média"] .card,
body[data-theme="dark"] .pendencias-page [data-prioridade="Baixa"] .card,
html[data-theme="dark"] .pendencias-page [data-prioridade="Baixa"] .card { border-left-color: #ffffff; }

/* Container de cards sem overflow para não cortar dropdowns */
.pendencias-page .cards-scroll-container {
    max-height: none !important;
    overflow: visible !important;
    padding: 0;
    margin: 0;
}

/* Dropdowns dos cards sempre acima e sem corte */
.pendencias-page .dropdown-menu { z-index: 1060; }

/* Responsivo: quando a tela for estreita, a sidebar vira barra superior simples */
@media (max-width: 991.98px) {
    .sidebar { position: fixed; top:0; left:0; height:100vh; width: 80vw; max-width: 280px; transform: translateX(-105%); transition: transform .25s ease; z-index: 1045; }
    .sidebar.open { transform: translateX(0); }
    .content-area { margin-left: 0; }
    .mobile-header { background: var(--bs-light); }
    body[data-theme="dark"] .mobile-header, html[data-theme="dark"] .mobile-header { background:#15171b; }
    .sidebar-backdrop { position: fixed; inset:0; background: rgba(0,0,0,.45); opacity:0; pointer-events:none; transition: opacity .2s ease; z-index: 1040; }
    .sidebar-backdrop.show { opacity:1; pointer-events:auto; }
}