/**
 * CORREÇÕES MOBILE - KIZUA
 * Sidebar sempre acima, header responsivo, notificações mobile
 */

/* ============================================
   SIDEBAR - SEMPRE ACIMA DE TUDO
   ============================================ */
.sidebar {
    z-index: 9999 !important; /* Máxima prioridade */
}

.sidebar.show {
    z-index: 9999 !important;
}

/* Garantir que botões e elementos NÃO fiquem acima do menu */
.page-actions button,
.page-actions .btn,
.notification-actions button,
.notification-actions .btn,
.card-header .btn-group {
    z-index: 1 !important; /* Sempre abaixo do sidebar */
    position: relative !important;
}

/* Botões da tabela SEM z-index alto */
.table .btn,
.table button {
    z-index: auto !important;
    position: static !important;
}

/* Overlay escuro quando sidebar abre */
@media (max-width: 991px) {
    body.sidebar-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 9998;
        animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* ============================================
   HEADER FUNCIONÁRIO - 100% RESPONSIVO
   ============================================ */
@media (max-width: 767px) {
    /* Nome do funcionário quebra linha se necessário */
    .funcionario-header h2,
    .funcionario-nome {
        font-size: clamp(0.9rem, 4vw, 1.2rem) !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        line-height: 1.3 !important;
        max-width: 100% !important;
    }
    
    /* Header do card do funcionário */
    .card-body h3,
    .card-header h3 {
        font-size: clamp(1rem, 4.5vw, 1.3rem) !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Ícone menor no mobile */
    .funcionario-header .rounded-circle {
        width: clamp(45px, 10vw, 60px) !important;
        height: clamp(45px, 10vw, 60px) !important;
        font-size: clamp(1.2rem, 3vw, 1.8rem) !important;
    }
    
    /* Badge de status */
    .funcionario-header .badge {
        font-size: clamp(0.7rem, 2vw, 0.85rem) !important;
        padding: clamp(4px, 1vw, 8px) clamp(10px, 2.5vw, 15px) !important;
        display: inline-block;
        width: auto;
    }
}

/* ============================================
   DASHBOARD - ELEMENTOS MENOS "NO FUNDO"
   ============================================ */
@media (max-width: 767px) {
    /* Cards do dashboard mais próximos */
    .dashboard-card,
    .row .col-md-3,
    .row .col-md-4,
    .row .col-md-6 {
        margin-bottom: clamp(10px, 2.5vw, 15px) !important;
    }
    
    /* Reduzir padding geral no mobile - COLADO NO TOPO */
    .main-content {
        padding: clamp(10px, 2vw, 15px) !important;
        padding-top: 2px !important; /* COLADO NO TOPO - APENAS 2PX */
    }
    
    /* Cards menos espaçados */
    .card {
        margin-bottom: clamp(10px, 2.5vw, 15px) !important;
        margin-top: 0 !important; /* SEM margem superior */
    }
    
    .card-body {
        padding: clamp(12px, 3vw, 16px) !important;
    }
    
    /* Primeiro card da página - sem margem superior */
    .row > .col-12:first-child .card:first-child,
    .main-content > .card:first-child {
        margin-top: 0 !important;
    }
    
    /* Gráficos ocupam menos altura */
    canvas {
        max-height: 250px !important;
    }
    
    /* Footer mais próximo do conteúdo */
    .dashboard-footer {
        margin-top: clamp(15px, 3vw, 25px) !important;
    }
}

/* ============================================
   NOTIFICAÇÕES - 100% MOBILE OTIMIZADO
   ============================================ */
@media (max-width: 767px) {
    /* Card de notificação - Estilo Card Moderno */
    .notification-card,
    .notificacao-card,
    .list-group-item {
        margin-bottom: clamp(8px, 2vw, 10px) !important;
        border-radius: clamp(8px, 2vw, 12px) !important;
        padding: clamp(12px, 3vw, 15px) !important;
        border: 1px solid #e0e0e0 !important;
        background: white !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    }
    
    /* Notificação não lida - destaque */
    .notification-card.unread,
    .list-group-item:not(.read) {
        border-left: 4px solid #007bff !important;
        background: #f8f9ff !important;
    }
    
    /* Container da notificação */
    .notification-content {
        display: flex;
        flex-direction: column;
        gap: clamp(6px, 1.5vw, 8px);
    }
    
    /* Título da notificação - destaque */
    .notification-title,
    .list-group-item h5,
    .list-group-item h6 {
        font-size: clamp(0.95rem, 3.2vw, 1.05rem) !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        font-weight: 600 !important;
        color: #1a1a1a !important;
        margin-bottom: clamp(4px, 1vw, 6px) !important;
    }
    
    /* Corpo da notificação */
    .notification-body,
    .list-group-item p {
        font-size: clamp(0.85rem, 2.8vw, 0.95rem) !important;
        line-height: 1.5 !important;
        color: #555 !important;
        margin-bottom: clamp(6px, 1.5vw, 8px) !important;
    }
    
    /* Data e hora da notificação */
    .notification-date,
    .notification-time,
    .text-muted small,
    .list-group-item small {
        font-size: clamp(0.75rem, 2vw, 0.85rem) !important;
        color: #999 !important;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    /* Ícone na data */
    .notification-date i,
    .notification-time i {
        font-size: clamp(0.7rem, 1.8vw, 0.8rem) !important;
    }
    
    /* Botões de ação - Touch Friendly */
    .notification-actions .btn,
    .list-group-item .btn {
        font-size: clamp(0.8rem, 2.2vw, 0.9rem) !important;
        padding: clamp(8px, 2vw, 10px) clamp(15px, 3.5vw, 20px) !important;
        border-radius: clamp(6px, 1.5vw, 8px) !important;
        min-height: 44px !important; /* Touch target */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }
    
    /* Badge não lida */
    .badge-unread,
    .badge.bg-primary {
        font-size: clamp(0.7rem, 1.9vw, 0.8rem) !important;
        padding: clamp(4px, 1vw, 6px) clamp(8px, 2vw, 10px) !important;
        border-radius: clamp(10px, 2.5vw, 12px) !important;
        font-weight: 600 !important;
    }
    
    /* Lista de notificações */
    .notification-list .list-group-item {
        padding: clamp(15px, 3.5vw, 18px) !important;
        border-radius: clamp(10px, 2.5vw, 12px) !important;
    }
    
    /* Ícone da notificação - Circular */
    .notification-icon {
        width: clamp(40px, 9vw, 50px) !important;
        height: clamp(40px, 9vw, 50px) !important;
        font-size: clamp(1.1rem, 3vw, 1.4rem) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: #f0f0f0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Layout com ícone + conteúdo */
    .notification-card,
    .list-group-item {
        display: flex !important;
        gap: clamp(12px, 3vw, 15px) !important;
        align-items: flex-start !important;
    }
    
    /* Separador entre notificações */
    .notification-card + .notification-card,
    .list-group-item + .list-group-item {
        border-top: 1px solid #f0f0f0;
    }
    
    /* Estado hover/active no mobile */
    .notification-card:active,
    .list-group-item:active {
        background: #f5f5f5 !important;
        transform: scale(0.98);
        transition: all 0.1s ease;
    }
    
    /* Header da página de notificações */
    .notification-header {
        padding: clamp(10px, 2.5vw, 15px) !important;
        margin-bottom: clamp(10px, 2.5vw, 15px) !important;
        background: white;
        border-radius: clamp(8px, 2vw, 12px) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    }
    
    /* Contador de notificações */
    .notification-count {
        font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
        color: #666;
    }
}

/* ============================================
   PAGINAÇÃO MOBILE (Notificações)
   ============================================ */
@media (max-width: 767px) {
    .pagination {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: clamp(4px, 1vw, 6px);
    }
    
    .page-item .page-link {
        padding: clamp(6px, 1.5vw, 8px) clamp(10px, 2.5vw, 12px) !important;
        font-size: clamp(0.75rem, 2vw, 0.85rem) !important;
        min-width: clamp(35px, 8vw, 40px);
        text-align: center;
    }
    
    /* Esconder alguns números no mobile */
    .pagination .page-item:not(.active):not(:first-child):not(:last-child):not(.disabled) {
        display: none;
    }
    
    .pagination .page-item.active,
    .pagination .page-item:first-child,
    .pagination .page-item:last-child {
        display: inline-block;
    }
}

/* ============================================
   HEADER FIXO NO MOBILE
   ============================================ */
@media (max-width: 991px) {
    .main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9990 !important; /* Abaixo apenas do sidebar */
        height: auto !important;
        min-height: auto !important;
    }
    
    body {
        padding-top: clamp(56px, 10vw, 62px) !important; /* MÍNIMO PARA O HEADER */
    }
}

/* ============================================
   DETALHES DA FOLHA - SEM ESPAÇO EXCESSIVO
   ============================================ */
@media (max-width: 767px) {
    /* Página de detalhes da folha */
    .folha-detalhes,
    [class*="folha"] .main-content {
        padding-top: clamp(10px, 2vw, 15px) !important;
    }
    
    /* Título da página - menos espaço */
    .page-header,
    .folha-header {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: clamp(10px, 2.5vw, 15px) !important;
    }
    
    /* Cards de estatísticas da folha - compactos */
    .folha-stats .card,
    .stats-card {
        margin-bottom: clamp(8px, 2vw, 12px) !important;
        padding: clamp(10px, 2.5vw, 15px) !important;
    }
    
    /* Tabela da folha - menos margem */
    .table-responsive {
        margin-top: clamp(10px, 2.5vw, 15px) !important;
        margin-bottom: clamp(10px, 2.5vw, 15px) !important;
    }
    
    /* Ações da página - compactas */
    .page-actions,
    .btn-group {
        margin-bottom: clamp(8px, 2vw, 12px) !important;
        gap: clamp(4px, 1vw, 8px) !important;
    }
    
    /* Título h1, h2, h3 - COLADO NO TOPO */
    h1, .h1 {
        margin-top: 0 !important; /* COLADO NO TOPO - 0PX */
        margin-bottom: clamp(10px, 2.5vw, 15px) !important;
        padding-top: 0 !important;
    }
    
    h2, .h2 {
        margin-top: clamp(8px, 2vw, 12px) !important;
        margin-bottom: clamp(8px, 2vw, 12px) !important;
    }
    
    h3, .h3 {
        margin-top: clamp(6px, 1.5vw, 10px) !important;
        margin-bottom: clamp(6px, 1.5vw, 10px) !important;
    }
    
    /* Título da página específico - ZERO MARGEM */
    .page-title,
    .content-header h1,
    .main-content > h1:first-child,
    .main-content > .row:first-child h1:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* ============================================
   BOTÃO MENU MOBILE - MAIOR E MAIS CLICÁVEL
   ============================================ */
@media (max-width: 991px) {
    .mobile-menu-toggle {
        width: clamp(40px, 10vw, 50px) !important;
        height: clamp(40px, 10vw, 50px) !important;
        font-size: clamp(1.3rem, 4vw, 1.8rem) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        color: white !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-menu-toggle:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: scale(1.05);
    }
    
    .mobile-menu-toggle:active {
        transform: scale(0.95);
    }
}

/* ============================================
   SCROLL SUAVE NO MOBILE
   ============================================ */
@media (max-width: 767px) {
    * {
        -webkit-overflow-scrolling: touch !important;
    }
    
    body {
        overflow-x: hidden !important;
    }
}

/* ============================================
   MODALS MOBILE
   ============================================ */
@media (max-width: 767px) {
    .modal-dialog {
        margin: clamp(5px, 1vw, 10px) !important;
        max-width: calc(100vw - clamp(10px, 2vw, 20px)) !important;
    }
    
    .modal-header {
        padding: clamp(12px, 3vw, 15px) !important;
    }
    
    .modal-title {
        font-size: clamp(1rem, 3.5vw, 1.2rem) !important;
    }
    
    .modal-body {
        padding: clamp(15px, 3.5vw, 20px) !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
    
    .modal-footer {
        padding: clamp(12px, 3vw, 15px) !important;
    }
}

/* ============================================
   INPUTS E FORMS MOBILE
   ============================================ */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important; /* Evita zoom no iOS */
        height: auto !important;
        min-height: clamp(42px, 10vw, 48px) !important;
    }
    
    .form-label {
        font-size: clamp(0.85rem, 2.3vw, 0.95rem) !important;
        margin-bottom: clamp(5px, 1.2vw, 8px) !important;
    }
}

/* ============================================
   TABELAS MOBILE
   ============================================ */
@media (max-width: 767px) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: clamp(6px, 1.5vw, 8px) !important;
    }
    
    .table {
        font-size: clamp(0.75rem, 2vw, 0.85rem) !important;
        min-width: 600px; /* Força scroll horizontal */
    }
    
    .table th,
    .table td {
        padding: clamp(8px, 2vw, 10px) !important;
        white-space: nowrap;
    }
    
    .table thead {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
    }
}

/* ============================================
   ALERTAS MOBILE
   ============================================ */
@media (max-width: 767px) {
    .alert {
        padding: clamp(12px, 3vw, 15px) !important;
        font-size: clamp(0.85rem, 2.3vw, 0.95rem) !important;
        margin-bottom: clamp(12px, 3vw, 15px) !important;
        border-radius: clamp(6px, 1.5vw, 8px) !important;
    }
    
    .alert i {
        font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
    }
}

/* ============================================
   DROPDOWN MOBILE
   ============================================ */
@media (max-width: 767px) {
    .dropdown-menu {
        font-size: clamp(0.85rem, 2.3vw, 0.95rem) !important;
        max-width: 90vw !important;
    }
    
    .dropdown-item {
        padding: clamp(10px, 2.5vw, 12px) clamp(15px, 3.5vw, 20px) !important;
        white-space: normal !important;
    }
}

/* ============================================
   LOADING E SPINNERS
   ============================================ */
@media (max-width: 767px) {
    .spinner-border {
        width: clamp(1.5rem, 5vw, 2rem) !important;
        height: clamp(1.5rem, 5vw, 2rem) !important;
    }
}


/* ============================================
   CORREÇÃO ESPECÍFICA - FOLHA SHOW
   ============================================ */
@media (max-width: 767px) {
    /* Remove espaços extras no topo */
    body.action-folha .main-content,
    body[class*="folha"] .main-content {
        padding-top: clamp(10px, 2vw, 15px) !important;
    }
    
    /* Container principal da folha */
    .container-fluid,
    .container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Breadcrumbs compactos */
    .breadcrumb {
        padding: clamp(6px, 1.5vw, 8px) 0 !important;
        margin-bottom: clamp(8px, 2vw, 12px) !important;
    }
    
    /* Alert messages compactos */
    .alert:first-child {
        margin-top: 0 !important;
        margin-bottom: clamp(10px, 2.5vw, 12px) !important;
    }
    
    /* Rows sem margem superior excessiva */
    .row:first-child {
        margin-top: 0 !important;
    }
    
    /* Col-12 primeira - sem padding superior */
    .col-12:first-child {
        padding-top: 0 !important;
    }
}

/* ============================================
   OTIMIZAÇÃO GERAL DE ESPAÇAMENTO MOBILE
   ============================================ */
@media (max-width: 767px) {
    /* Remove espaços desnecessários */
    * {
        margin-block-start: 0;
    }
    
    /* Seções compactas */
    section {
        padding-top: clamp(10px, 2.5vw, 15px) !important;
        padding-bottom: clamp(10px, 2.5vw, 15px) !important;
    }
    
    /* Dividers menos espaçosos */
    hr {
        margin: clamp(10px, 2.5vw, 15px) 0 !important;
    }
    
    /* Lists compactas */
    ul, ol {
        margin-bottom: clamp(10px, 2.5vw, 15px) !important;
        padding-left: clamp(20px, 4vw, 30px) !important;
    }
    
    /* Paragraphs compactos */
    p {
        margin-bottom: clamp(8px, 2vw, 12px) !important;
    }
}

/* ============================================
   TÍTULOS COLADOS NO TOPO - TODO SISTEMA
   ============================================ */
@media (max-width: 767px) {
    /* FORÇAR título COLADO no topo em TODAS as páginas */
    body .main-content {
        padding-top: 2px !important; /* APENAS 2PX */
    }
    
    /* Primeiro elemento COLADO no topo */
    .main-content > *:first-child,
    .main-content > .row:first-child,
    .main-content > .container:first-child,
    .main-content > .container-fluid:first-child {
        margin-top: 0 !important; /* ZERO MARGEM */
        padding-top: 0 !important;
    }
    
    /* Títulos de página - SEM MARGEM */
    .page-header,
    .content-header,
    .main-content h1:first-of-type {
        margin-top: 0 !important; /* ZERO MARGEM */
        padding-top: 0 !important;
    }
    
    /* Breadcrumbs se existir */
    .breadcrumb {
        margin-top: 0 !important;
        margin-bottom: clamp(6px, 1.5vw, 8px) !important;
        padding: clamp(2px, 0.5vw, 4px) 0 !important;
    }
    
    /* Forçar TODOS os primeiros elementos */
    .row:first-child,
    .col-12:first-child,
    .card:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* ============================================
   NOTIFICAÇÕES - LISTA COMPACTA E BONITA
   ============================================ */
@media (max-width: 767px) {
    /* Container principal de notificações */
    .notifications-container {
        padding: 4px clamp(10px, 2.5vw, 15px) !important;
    }
    
    /* Card individual - Estilo WhatsApp/Telegram */
    .notification-item {
        background: white;
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 8px;
        border: 1px solid #e8e8e8;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        transition: all 0.2s ease;
    }
    
    .notification-item:active {
        transform: scale(0.98);
        background: #f9f9f9;
    }
    
    /* Não lida - destaque azul */
    .notification-item.unread {
        background: linear-gradient(to right, #e3f2fd 0%, #ffffff 100%);
        border-left: 3px solid #2196F3;
    }
    
    /* Layout flexível */
    .notification-item {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }
    
    /* Ícone circular colorido */
    .notification-icon {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        flex-shrink: 0;
    }
    
    .notification-icon.info { background: #e3f2fd; color: #1976d2; }
    .notification-icon.success { background: #e8f5e9; color: #388e3c; }
    .notification-icon.warning { background: #fff3e0; color: #f57c00; }
    .notification-icon.danger { background: #ffebee; color: #d32f2f; }
    
    /* Conteúdo da notificação */
    .notification-content {
        flex: 1;
        min-width: 0;
    }
    
    /* Título - negrito e destaque */
    .notification-content h6,
    .notification-content .title {
        font-size: 0.95rem;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 4px;
        line-height: 1.3;
    }
    
    /* Mensagem */
    .notification-content p,
    .notification-content .message {
        font-size: 0.85rem;
        color: #666;
        margin-bottom: 6px;
        line-height: 1.4;
    }
    
    /* Data/hora */
    .notification-content .time,
    .notification-content small {
        font-size: 0.75rem;
        color: #999;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    /* Botão de ação */
    .notification-content .btn-action {
        margin-top: 8px;
        padding: 8px 16px;
        font-size: 0.85rem;
        border-radius: 8px;
        min-height: 40px;
    }
    
    /* Paginação mobile - simplificada */
    .notifications-pagination {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 15px 0;
        margin-top: 10px;
    }
    
    .notifications-pagination .btn {
        min-width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 8px;
        font-size: 0.9rem;
    }
    
    /* Empty state */
    .notifications-empty {
        text-align: center;
        padding: 40px 20px;
        color: #999;
    }
    
    .notifications-empty i {
        font-size: 3rem;
        opacity: 0.3;
        margin-bottom: 15px;
        display: block;
    }
}

/* ============================================
   ESPAÇAMENTO ULTRA MÍNIMO - TOPO
   ============================================ */
@media (max-width: 767px) {
    /* Remove QUALQUER espaço extra */
    * {
        margin-block-start: 0 !important;
    }
    
    /* Main content absolutamente colado */
    body .main-content {
        padding-top: 2px !important;
        margin-top: 0 !important;
    }
    
    /* FORÇAR primeiro elemento a zero */
    .main-content > *:first-child,
    .main-content .row:first-child,
    .main-content .container:first-child,
    .main-content .container-fluid:first-child,
    .main-content > h1:first-child,
    .main-content > h2:first-child,
    .main-content > .card:first-child,
    .main-content > div:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Alert no topo - zero margem */
    .alert:first-child {
        margin-top: 0 !important;
    }
    
    /* Page header - zero margem */
    .page-header:first-child,
    .content-header:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* ============================================
   OVERRIDE BOOTSTRAP - ZERO MARGINS
   ============================================ */
@media (max-width: 767px) {
    /* Bootstrap rows no topo */
    .row {
        margin-top: 0 !important;
    }
    
    .row:first-child {
        margin-top: 0 !important;
    }
    
    /* Bootstrap columns */
    [class*="col-"]:first-child {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Bootstrap cards */
    .card:first-child,
    .card-header:first-child {
        margin-top: 0 !important;
    }
}

/* ============================================
   MENU MOBILE - FONTE MAIOR E LEGÍVEL
   ============================================ */
@media (max-width: 991px) {
    /* Sidebar - fonte maior */
    .sidebar .nav-link {
        font-size: clamp(0.95rem, 3vw, 1.05rem) !important;
        padding: clamp(12px, 3vw, 15px) clamp(8px, 2vw, 12px) !important;
        line-height: 1.5 !important;
        margin: 0.125rem 0.25rem !important; /* Reduzir margem lateral */
    }
    
    /* Ícones do menu maiores */
    .sidebar .nav-icon {
        font-size: clamp(1.2rem, 3.5vw, 1.4rem) !important;
        margin-right: clamp(8px, 2vw, 10px) !important;
    }
    
    /* Submenu também maior */
    .sidebar .nav-treeview .nav-link {
        font-size: clamp(0.9rem, 2.8vw, 1rem) !important;
        padding-left: clamp(30px, 6vw, 40px) !important;
    }
    
    /* Título do sidebar */
    .sidebar-title,
    .sidebar-header h6 {
        font-size: clamp(0.85rem, 2.5vw, 0.95rem) !important;
    }
}

/* ============================================
   DASHBOARD MOBILE - FONTE MAIOR
   ============================================ */
@media (max-width: 767px) {
    /* Cards de estatísticas - números grandes */
    .dashboard-card .display-4,
    .dashboard-card h2,
    .stats-number,
    .card-body h2 {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
        font-weight: 700 !important;
    }
    
    /* Títulos dos cards */
    .dashboard-card .card-title,
    .dashboard-card h5,
    .stats-title {
        font-size: clamp(0.95rem, 3vw, 1.1rem) !important;
        font-weight: 600 !important;
    }
    
    /* Texto descritivo */
    .dashboard-card .card-text,
    .dashboard-card p,
    .stats-description {
        font-size: clamp(0.85rem, 2.5vw, 0.95rem) !important;
    }
    
    /* Labels e pequenos textos */
    .dashboard-card small,
    .stats-label {
        font-size: clamp(0.8rem, 2.2vw, 0.9rem) !important;
    }
    
    /* Badges nos cards */
    .dashboard-card .badge {
        font-size: clamp(0.75rem, 2vw, 0.85rem) !important;
        padding: clamp(4px, 1vw, 6px) clamp(8px, 2vw, 10px) !important;
    }
    
    /* Quick actions buttons */
    .quick-actions .btn,
    .dashboard .btn-action {
        font-size: clamp(0.85rem, 2.5vw, 0.95rem) !important;
        padding: clamp(10px, 2.5vw, 12px) clamp(15px, 3.5vw, 18px) !important;
    }
    
    /* Títulos de seção */
    .dashboard h3,
    .dashboard .section-title {
        font-size: clamp(1.1rem, 4vw, 1.3rem) !important;
        font-weight: 600 !important;
    }
    
    /* Gráficos - legendas maiores */
    .chart-container canvas {
        font-size: clamp(0.85rem, 2.5vw, 0.95rem) !important;
    }
}

/* ============================================
   GARANTIR Z-INDEX CORRETO - MENU SEMPRE ACIMA
   ============================================ */
@media (max-width: 991px) {
    /* Menu e overlay */
    .sidebar {
        z-index: 9999 !important;
    }
    
    body.sidebar-open::before {
        z-index: 9998 !important;
    }
    
    .main-header {
        z-index: 9990 !important;
    }
    
    /* TODOS os outros elementos abaixo do menu */
    .main-content {
        z-index: auto !important;
    }
    
    .modal,
    .dropdown {
        z-index: auto !important;
    }
    
    /* Botões fixos/sticky também abaixo do menu */
    .sticky-top,
    .fixed-top {
        z-index: 1000 !important;
    }
    
    /* Apenas botões de ações de página têm z-index controlado */
    .page-actions button:not(.mobile-menu-toggle),
    .page-actions .btn:not(.mobile-menu-toggle),
    .notification-actions button,
    .notification-actions .btn {
        z-index: 1 !important;
        position: relative;
    }
    
    /* Botões dentro de tabelas - SEM z-index */
    .table button,
    .table .btn,
    tbody button,
    tbody .btn {
        z-index: auto !important;
        position: static !important;
    }
}

/* ============================================
   BOTÕES DE AÇÕES - MOBILE RESPONSIVO
   ============================================ */
@media (max-width: 767px) {
    /* Container de botões - wrap automático */
    .page-actions-buttons,
    .d-flex.flex-wrap {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: clamp(6px, 1.5vw, 8px) !important;
        justify-content: flex-start !important;
    }
    
    /* Botões com tamanho mínimo touch-friendly */
    .page-actions-buttons .btn,
    .page-actions .btn {
        font-size: clamp(0.8rem, 2.2vw, 0.9rem) !important;
        padding: clamp(8px, 2vw, 10px) clamp(12px, 3vw, 15px) !important;
        white-space: nowrap !important;
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    
    /* Ícones nos botões */
    .page-actions-buttons .btn i,
    .page-actions .btn i {
        font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
    }
    
    /* Forms inline dentro dos botões */
    .page-actions-buttons form,
    .page-actions form {
        display: inline-flex !important;
        margin: 0 !important;
    }
    
    /* Garantir que botões não quebrem */
    .btn-sm {
        font-size: clamp(0.8rem, 2.2vw, 0.9rem) !important;
        padding: clamp(8px, 2vw, 10px) clamp(12px, 3vw, 15px) !important;
    }
    
    /* Espaçamento entre linhas de botões */
    .page-actions-buttons {
        row-gap: clamp(8px, 2vw, 10px) !important;
        column-gap: clamp(6px, 1.5vw, 8px) !important;
    }
}

/* ============================================
   BOTÕES - CORES CONSISTENTES NO MOBILE
   ============================================ */
@media (max-width: 767px) {
    /* Garantir cores visíveis */
    .btn-success {
        background-color: #28a745 !important;
        border-color: #28a745 !important;
    }
    
    .btn-primary {
        background-color: #007bff !important;
        border-color: #007bff !important;
    }
    
    .btn-danger {
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
    }
    
    .btn-info {
        background-color: #17a2b8 !important;
        border-color: #17a2b8 !important;
    }
    
    .btn-warning {
        background-color: #ffc107 !important;
        border-color: #ffc107 !important;
        color: #000 !important;
    }
    
    /* Botões outline */
    .btn-outline-success:hover {
        background-color: #28a745 !important;
        color: white !important;
    }
    
    .btn-outline-warning:hover {
        background-color: #ffc107 !important;
        color: #000 !important;
    }
    
    .btn-outline-danger:hover {
        background-color: #dc3545 !important;
        color: white !important;
    }
    
    .btn-outline-secondary:hover {
        background-color: #6c757d !important;
        color: white !important;
    }
}

/* ============================================
   FOOTER FIXO - COLABORADORES
   ============================================ */
/* Aplicar footer fixo nas páginas de colaboradores */
body[class*="colaborador"] .main-content,
body.action-colaborador .main-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height, 64px));
}

body[class*="colaborador"] .fade-in,
body.action-colaborador .fade-in {
    flex: 1 0 auto;
}

body[class*="colaborador"] .dashboard-footer,
body.action-colaborador .dashboard-footer {
    position: sticky;
    bottom: 0;
    width: 100%;
    margin-top: auto;
    background: #f8f9fa;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

/* Mobile - Footer Fixo */
@media (max-width: 767px) {
    body[class*="colaborador"] .dashboard-footer,
    body.action-colaborador .dashboard-footer {
        padding: clamp(12px, 3vw, 16px) clamp(10px, 2.5vw, 15px) !important;
        font-size: clamp(0.7rem, 1.8vw, 0.8rem) !important;
    }
    
    body[class*="colaborador"] .dashboard-footer p,
    body.action-colaborador .dashboard-footer p {
        margin-bottom: 0.125rem !important;
    }
    
    /* Bandeira menor no mobile */
    body[class*="colaborador"] .bandeira-angola,
    body.action-colaborador .bandeira-angola {
        width: clamp(35px, 8vw, 50px) !important;
        margin-right: clamp(8px, 2vw, 12px) !important;
    }
}

/* ============================================
   CORREÇÃO - CONTEÚDO VISÍVEL FUNCIONÁRIOS
   ============================================ */
/* Garantir que o conteúdo dos funcionários não seja ocultado pelo flexbox */
body.action-funcionario .main-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height, 64px));
}

body.action-funcionario .fade-in {
    flex: 1 0 auto;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.action-funcionario .dashboard-footer {
    margin-top: auto;
}

/* Garantir visibilidade de todos os cards e elementos */
body.action-funcionario .card,
body.action-funcionario .funcionario-header,
body.action-funcionario .row,
body.action-funcionario .col-12,
body.action-funcionario .col-md-4 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mobile - Funcionários */
@media (max-width: 767px) {
    /* Header do funcionário responsivo */
    body.action-funcionario .funcionario-header .card-body {
        padding: clamp(12px, 3vw, 20px) !important;
    }
    
    body.action-funcionario .funcionario-nome {
        font-size: clamp(1rem, 4vw, 1.3rem) !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Cards de informação */
    body.action-funcionario .card {
        margin-bottom: clamp(12px, 3vw, 20px) !important;
    }
    
    body.action-funcionario .card-body {
        padding: clamp(12px, 3vw, 16px) !important;
    }
    
    /* Colunas empilhadas no mobile */
    body.action-funcionario .col-md-4 {
        margin-bottom: clamp(15px, 3.5vw, 20px);
    }
}

/* ============================================
   CORREÇÃO - BOTÕES DA TABELA
   ============================================ */
/* Garantir que botões dentro de tabelas não tenham z-index alto */
.table .btn,
.table button,
.table-responsive .btn,
.table-responsive button,
tbody .btn,
tbody button,
tr .btn,
tr button,
td .btn,
td button {
    z-index: auto !important;
    position: static !important;
}

/* Botões de ações dentro de btn-group da tabela */
.table .btn-group,
tbody .btn-group,
td .btn-group {
    z-index: auto !important;
    position: static !important;
}

.table .btn-group .btn,
tbody .btn-group .btn,
td .btn-group .btn {
    z-index: auto !important;
    position: static !important;
}

/* Apenas elementos específicos têm z-index controlado */
.page-actions,
.notification-actions {
    position: relative;
}

.page-actions > *,
.notification-actions > * {
    z-index: 1 !important;
}

/* ============================================
   CONTENT HEADER - LAYOUT CORRETO
   ============================================ */
/* Desktop e Mobile - Header sem sobreposição */
.content-header {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
    position: relative;
    z-index: auto !important;
}

.content-header .page-title {
    order: 1; /* Título sempre primeiro */
    margin: 0;
    z-index: auto !important;
    position: relative !important;
}

.content-header .page-subtitle {
    order: 2; /* Subtítulo segundo */
    margin: 0;
}

.content-header .d-flex {
    order: 3; /* Botões por último */
    z-index: auto !important;
    position: relative !important;
}

/* Mobile - botões abaixo do título */
@media (max-width: 767px) {
    .content-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: clamp(10px, 2.5vw, 12px) !important;
        margin-bottom: clamp(12px, 3vw, 16px) !important;
    }
    
    .page-header-title {
        width: 100% !important;
        order: 1 !important;
    }
    
    .page-header-actions {
        width: 100% !important;
        order: 2 !important;
    }
    
    .page-header-actions > div,
    .page-header-actions .d-flex {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    
    .content-header .page-title {
        width: 100%;
        margin-bottom: clamp(4px, 1vw, 6px);
    }
    
    /* Garantir que botões NÃO flutuem ou sobreponham */
    .content-header .btn,
    .content-header button,
    .content-header a,
    .page-header-actions .btn,
    .page-header-actions button,
    .page-header-actions a {
        position: static !important;
        z-index: auto !important;
        float: none !important;
        margin: 0 !important;
    }
}

/* Desktop - título e botões na mesma linha */
@media (min-width: 768px) {
    .content-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .content-header .page-title {
        order: 1;
        flex: 1;
    }
    
    .content-header .d-flex {
        order: 2;
        flex-shrink: 0;
    }
}