/* ===== VARIÁVEIS ===== */
:root {
    --primary: #0d47a1;
    --primary-light: #1976d2;
    --primary-dark: #0a3a6b;
    --success: #2e7d32;
    --danger: #c62828;
    --warning: #f9a825;
    --bg-color: #f5f7fa;
    --text-color: #1a1a2e;
    --sidebar-width: 260px;
    --header-height: 60px;
    --border-radius: 8px;
    --box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
    font-family: var(--font-family);
    background: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== LAYOUT ===== */
#app-wrapper {
    display: flex;
    min-height: 100vh;
    transition: all 0.3s ease;
}
#sidebar-container.collapsed { width: 0; }
#sidebar-container.collapsed { width: 0; }

/* ===== SIDEBAR ===== */
.sidebar {
    width: var(--sidebar-width);
    height: 100%;
    background: #1a1a2e;
    color: #ecf0f1;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    overflow-y: auto;
    box-shadow: 2px 0 8px rgba(0,0,0,0.08);
}
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-brand {
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
}
.sidebar-toggle {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.1); }
.sidebar-menu {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    flex: 1;
}
.sidebar-menu a.active {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-left-color: var(--primary);
}
.sidebar-footer {
    padding: 0.8rem 1.2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    text-align: center;
}
    .sidebar-toggle { display: none; }
@media (max-width: 767px) {
}
    .sidebar.open { transform: translateX(0); }

/* ===== PAGE TITLE ===== */
.page-title-container {
    background: white;
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 1.5rem;
}
.page-title-container h1 { margin: 0; color: var(--primary); font-size: 1.8rem; }
.page-title-container .page-subtitle { margin: 0.2rem 0 0; color: #6c757d; font-size: 0.95rem; }

/* ===== CARDS, TABLES, BADGES ===== */
.card {
    background: white;
    padding: 1.25rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 600px;
}
.table th, .table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #e9ecef; }
.table th { background: var(--primary); color: white; font-weight: 600; }
.table tr:hover { background: #f8f9fa; }

.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}
.badge.rascunho { background: #e0e0e0; color: #333; }
.badge.registado { background: #bbdefb; color: #0d47a1; }
.badge.em_tramitacao { background: #fff3cd; color: #856404; }
.badge.deferido { background: #c8e6c9; color: #1b5e20; }
.badge.indeferido { background: #ffcdd2; color: #b71c1c; }
.badge.arquivado { background: #d1c4e9; color: #311b92; }
.badge.pendente { background: #fff3cd; color: #856404; }
.badge.cumprido { background: #d4edda; color: #155724; }
.badge.atrasado { background: #f8d7da; color: #721c24; }

/* ===== BOTÕES ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: var(--success); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-secondary { background: #6c757d; color: white; }
.btn-warning { background: var(--warning); color: #333; }
.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.btn-large { padding: 0.8rem 2rem; font-size: 1.1rem; }

/* ===== FORMULÁRIOS ===== */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid #ced4da;
    border-radius: var(--border-radius);
    font-size: 0.95rem;
    transition: border 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-light);
}
.field-error { color: var(--danger); font-size: 0.8rem; margin-top: 0.2rem; }
.error-msg { color: var(--danger); margin-top: 10px; }

/* ===== FILTROS ===== */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    align-items: center;
}
.filters input, .filters select {
    flex: 1 1 180px;
    padding: 0.6rem 0.9rem;
    border: 1px solid #ced4da;
    border-radius: var(--border-radius);
}
.filters button { flex: 0 0 auto; }

/* ===== ESTATÍSTICAS ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: white;
    padding: 1.2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    border-left: 4px solid var(--primary);
}
.stat-card .number { font-size: 2rem; font-weight: 700; color: var(--primary); }

/* ===== PAGINAÇÃO ===== */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 1.2rem;
    justify-content: center;
}
.pagination button {
    padding: 0.4rem 0.8rem;
    border: 1px solid #dee2e6;
    background: white;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.2s;
}
.pagination button.active { background: var(--primary); color: white; border-color: var(--primary); }
.pagination button:hover:not(.active) { background: #e9ecef; }

/* ===== MODAL ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}
.modal {
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    max-width: 500px;
    width: 100%;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.modal-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; justify-content: flex-start; }

/* ===== TOAST ===== */
#toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 350px;
    width: 100%;
}
.toast {
    padding: 0.8rem 1.2rem;
    border-radius: var(--border-radius);
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideIn 0.3s ease;
}
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-info { background: var(--primary); }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ===== SPINNER ===== */
.spinner-container { display: flex; justify-content: center; padding: 2rem; }
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== LOGIN ===== */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}
.login-card {
    background: white;
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    width: 100%;
    max-width: 400px;
}
.login-card h2 { text-align: center; color: var(--primary); margin-bottom: 1.5rem; }
.login-help { text-align: center; margin-top: 1rem; font-size: 0.9rem; color: #6c757d; }

/* ===== LANDING ===== */
.landing-page { font-family: var(--font-family); color: var(--text-color); }
.landing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.landing-brand h1 { font-size: 1.8rem; color: var(--primary); margin: 0; }
.landing-brand .subtitle { color: #6c757d; font-size: 0.9rem; margin: 0; }
.landing-nav a { margin-left: 1rem; }
.landing-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
    min-height: 60vh;
}
.hero-content { max-width: 600px; }
.hero-content h2 { font-size: 2.5rem; color: var(--primary); margin-bottom: 1rem; }
.hero-text { font-size: 1.2rem; line-height: 1.6; color: #495057; }
.hero-buttons { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-image { font-size: 8rem; opacity: 0.8; }
.landing-about { padding: 4rem 2rem; background: white; }
.landing-about h2 { text-align: center; font-size: 2rem; color: var(--primary); margin-bottom: 2rem; }
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.about-card {
    text-align: center;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: transform 0.2s;
}
.about-card:hover { transform: translateY(-5px); }
.about-icon { font-size: 3rem; display: block; margin-bottom: 0.5rem; }
.about-card h3 { color: var(--primary); margin-bottom: 0.5rem; }
.about-card p { color: #6c757d; font-size: 0.95rem; }
.landing-footer {
    background: var(--primary);
    color: white;
    text-align: center;
    padding: 1.5rem;
}
.landing-footer p { margin: 0.2rem; }
.landing-footer small { opacity: 0.8; }

/* ===== HAMBURGER ===== */
@media (max-width: 767px) {
}
}

/* ===== CORREÇÃO DE VISIBILIDADE DA SIDEBAR ===== */
#sidebar-container .sidebar {
    width: 100% !important;
    height: 100% !important;
    background: #1a1a2e !important;
    color: #ecf0f1 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.08) !important;
}
#sidebar-container .sidebar-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 1.2rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
#sidebar-container .sidebar-brand {
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    color: #fff !important;
}
#sidebar-container .sidebar-toggle {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 4px !important;
}
#sidebar-container .sidebar-toggle:hover {
    background: rgba(255,255,255,0.1) !important;
}
#sidebar-container .sidebar-footer {
    padding: 0.8rem 1.2rem !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    font-size: 0.8rem !important;
    color: rgba(255,255,255,0.5) !important;
    text-align: center !important;
}
/* Garantir que o overlay fique por cima */
/* Mobile */
}

/* ===== FORÇAR VISIBILIDADE DA SIDEBAR (NÃO REMOVER) ===== */
#sidebar-container .sidebar {
    width: 100% !important;
    height: 100% !important;
    background: #1a1a2e !important;
    color: #ecf0f1 !important;
    display: flex !important;
    flex-direction: column !important;
}
#sidebar-container .sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    padding: 0.8rem 1.2rem !important;
}
/* Overlay */
/* Mobile: ocultar por padrão, mostrar com .open */
}
/* Desktop: sempre visível */
}

/* ===== LAYOUT BASE CORRIGIDO ===== */
#sidebar-container .sidebar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #ecf0f1;
}
}

/* Quando o container está vazio, esconder */
#sidebar-container:empty {
    display: none !important;
}

/* ===== OCULTAR SIDEBAR CONTAINER ===== */
    width: 0 !important;
    display: none !important;
    transform: translateX(-100%) !important;
    overflow: hidden !important;
}

/* ===== MOBILE - SIDEBAR ===== */
    /* Overlay para fechar ao clicar fora */
}

/* ===== RESPONSIVIDADE GLOBAL ===== */
/* Tablet (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .page-title-container h1 {
        font-size: 1.6rem;
    }
    .table th, .table td {
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
    }
    .card {
        padding: 1rem;
    }
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
}

/* Mobile (< 768px) */
    .page-title-container {
        padding: 0.8rem 1rem;
        margin-bottom: 1rem;
    }
    .page-title-container h1 {
        font-size: 1.4rem !important;
    }
    .page-title-container .page-subtitle {
        font-size: 0.85rem;
    }
    .card {
        padding: 0.8rem !important;
        margin-bottom: 0.8rem !important;
    }
    .form-group {
        margin-bottom: 0.8rem;
    }
    .form-group label {
        font-size: 0.9rem;
    }
    .form-group input, .form-group select, .form-group textarea {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }
    .btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
        width: 100%;
        margin-bottom: 0.3rem;
    }
    .btn-sm {
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
        width: auto;
    }
    .filters {
        gap: 0.5rem;
    }
    .filters input, .filters select {
        flex: 1 1 100%;
        padding: 0.5rem 0.7rem;
        font-size: 0.9rem;
    }
    .filters button {
        flex: 1 1 auto;
        min-width: 80px;
    }
    /* Tabelas mobile: empilhar linhas */
    .table-wrapper {
        overflow-x: visible !important;
    }
    .table {
        min-width: 0 !important;
        display: block;
        width: 100%;
    }
    .table thead {
        display: none;
    }
    .table tbody {
        display: block;
        width: 100%;
    }
    .table tr {
        display: block;
        border-bottom: 2px solid #dee2e6;
        padding: 0.5rem 0;
        margin-bottom: 0.5rem;
        background: white;
        border-radius: 6px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    }
    .table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 0.6rem;
        border: none;
        border-bottom: 1px solid #f1f1f1;
        font-size: 0.85rem;
    }
    .table td:last-child {
        border-bottom: none;
    }
    .table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--primary);
        margin-right: 0.5rem;
        flex: 0 0 40%;
        text-align: left;
    }
    .table td a, .table td button {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }
    .table td .btn-sm {
        padding: 0.2rem 0.4rem;
        font-size: 0.7rem;
    }
    /* Stats grid */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
    }
    .stat-card .number {
        font-size: 1.6rem;
    }
    /* Login */
    .login-card {
        padding: 1.5rem;
        max-width: 90%;
    }
    .login-card h2 {
        font-size: 1.3rem;
    }
    /* Modal */
    .modal {
        max-width: 95% !important;
        padding: 1.2rem !important;
        margin: 0.5rem;
    }
    .modal h2 {
        font-size: 1.2rem;
    }
    .modal-actions {
        flex-direction: column;
    }
    .modal-actions .btn {
        width: 100%;
    }
    /* Sidebar em mobile (já definido noutra regra, mas ajustamos padding) */
    #sidebar-container .sidebar-header {
        padding: 0.6rem 0.8rem !important;
    }
    #sidebar-container .sidebar-brand {
        font-size: 1rem !important;
    }
    #sidebar-container .sidebar-footer {
        padding: 0.6rem 0.8rem !important;
        font-size: 0.75rem !important;
    }
    /* Botão hambúrguer */
}

/* ===== RESPONSIVIDADE DA LANDING PAGE ===== */
/* Desktop grande (> 1200px) - já está bom */
/* Ajustes gerais para a landing */
.landing-page {
    width: 100%;
    overflow-x: hidden;
}

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .landing-hero {
        flex-direction: column;
        text-align: center;
        padding: 3rem 1.5rem;
        min-height: auto;
    }
    .hero-content {
        max-width: 100%;
        margin-bottom: 2rem;
    }
    .hero-content h2 {
        font-size: 2rem;
    }
    .hero-text {
        font-size: 1.1rem;
    }
    .hero-image {
        font-size: 5rem;
        margin-top: 1rem;
    }
    .hero-buttons {
        justify-content: center;
    }
    .landing-about {
        padding: 3rem 1.5rem;
    }
    .landing-about h2 {
        font-size: 1.8rem;
    }
    .about-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .landing-header {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        gap: 0.5rem;
    }
    .landing-brand h1 {
        font-size: 1.6rem;
    }
    .landing-nav a {
        margin: 0 0.5rem;
    }
}

/* Mobile (< 768px) */
    .landing-brand h1 {
        font-size: 1.4rem;
    }
    .landing-brand .subtitle {
        font-size: 0.8rem;
    }
    .landing-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
    }
    .landing-nav .btn {
        width: auto;
        font-size: 0.9rem;
        padding: 0.4rem 1rem;
    }
    .landing-hero {
        padding: 2rem 1rem;
        min-height: auto;
    }
    .hero-content h2 {
        font-size: 1.6rem;
    }
    .hero-text {
        font-size: 1rem;
        line-height: 1.5;
    }
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }
    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
        font-size: 0.95rem;
        padding: 0.6rem 1.2rem;
    }
    .hero-image {
        font-size: 4rem;
        margin-top: 1rem;
    }
    .landing-about {
        padding: 2rem 1rem;
    }
    .landing-about h2 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .about-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .about-card {
        padding: 1rem;
    }
    .about-icon {
        font-size: 2.5rem;
    }
    .about-card h3 {
        font-size: 1.1rem;
    }
    .about-card p {
        font-size: 0.9rem;
    }
    .landing-footer {
        padding: 1rem;
        font-size: 0.8rem;
    }
    .landing-footer p {
        margin: 0.2rem;
    }
}

/* ===== BOTÃO HAMBÚRGUER (visível em tablet e mobile) ===== */
/* Por padrão, o botão fica oculto em desktop */

/* Tablet e Mobile: mostrar o botão */
@media (max-width: 1024px) {
}

/* Ajuste para telas muito pequenas (< 480px) */
@media (max-width: 480px) {
}

/* ===== MOBILE - BOTÃO HAMBÚRGUER E SIDEBAR ===== */

    /* Sidebar container - oculto por padrão */
    /* Quando aberto */
    /* Conteúdo principal - sem margem */
    /* Overlay */
}

/* ===== MOBILE - BOTÃO HAMBÚRGUER E SIDEBAR ===== */
    /* Quando aberto */
    /* Conteúdo principal - sem margem */
    /* Overlay */
}

/* ===== BOTÃO HAMBÚRGUER - ESTILO FORTE ===== */

/* Garantir que em desktop o botão fique oculto */
/* Em mobile, garantir visibilidade */
}

/* ===== FORÇAR CURSOR POINTER NO BOTÃO ===== */

/* ===== LAYOUT BÁSICO ===== */
/* Mobile */
}

/* ===== BOTÃO HAMBÚRGUER - LARANJA SÓLIDO ===== */

/* Garantir que o ícone ☰ fique branco e visível */


/* ===== BOTÃO HAMBÚRGUER - FUNDO TRANSPARENTE, TRAÇOS LARANJA ===== */
.hamburger-btn,
#hamburger {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 8px !important;
    cursor: pointer !important;
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    position: relative !important;
    box-shadow: none !important;
    outline: none !important;
}
/* Os spans são os traços */
/* Hover - ligeiro escurecimento */
.hamburger-btn:hover span,
#hamburger:hover span {
    background: #E64A19 !important;
}
/* Animação para abrir (opcional) */
.hamburger-btn.open span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px) !important;
}
.hamburger-btn.open span:nth-child(2) {
    opacity: 0 !important;
}
.hamburger-btn.open span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px) !important;
}
/* Desktop: oculto */
}
/* Mobile: posicionamento */
}

/* Animação de abertura do hambúrguer */
.hamburger-btn.open span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px) !important;
}
.hamburger-btn.open span:nth-child(2) {
    opacity: 0 !important;
}
.hamburger-btn.open span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px) !important;
}

/* ===== BOTÃO RECOLHER/EXPANDIR (DESKTOP) ===== */
.sidebar-toggle {
    background: #FF5722 !important; /* Laranja vibrante */
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0.3rem 0.6rem !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.2s !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}
.sidebar-toggle:hover {
    background: #E64A19 !important; /* Laranja mais escuro */
    transform: scale(1.05) !important;
}
.sidebar-toggle:active {
    transform: scale(0.95) !important;
}
/* Ícone do botão (☰) também fica branco */
.sidebar-toggle::before {
    color: #ffffff !important;
}

/* ===== CORREÇÃO DOS ITENS DO MENU ===== */
.sidebar-menu a:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    border-left-color: #FF5722 !important;
}
.sidebar-menu a.active {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
    border-left-color: #FF5722 !important;
}
/* Ícone dentro do link */
.sidebar-menu a span:first-child {
    flex-shrink: 0 !important;
    font-size: 1.1rem !important;
}
/* Texto do link */
.sidebar-menu a span:last-child {
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
/* Responsividade para mobile */
    .sidebar-menu a span:first-child {
        font-size: 1.3rem !important;
    }
}

/* ===== SIDEBAR - LARGURA E COMPORTAMENTO ===== */
/* Mobile */
}
/* Desktop */
}

/* ===== Z-INDEX CORRETO ===== */
.hamburger-btn {
}

/* ===== ALINHAMENTO DO MENU À ESQUERDA ===== */
.sidebar-menu {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.sidebar-menu li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}
.sidebar-menu a:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    border-left-color: #FF5722 !important;
}
.sidebar-menu a.active {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
    border-left-color: #FF5722 !important;
}
/* Ícone à esquerda, fixo */
.sidebar-menu a span:first-child {
    flex-shrink: 0 !important;
    font-size: 1.1rem !important;
    text-align: center !important;
    min-width: 1.6rem !important;
}
/* Texto à esquerda, com ellipsis */
.sidebar-menu a span:last-child {
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left !important;
}
/* Mobile ajustes */
    .sidebar-menu a span:first-child {
        font-size: 1.3rem !important;
        min-width: 2rem !important;
    }
}

/* ===== SIDEBAR - SEM PADDING EXTRA ===== */
#sidebar-container .sidebar {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
#sidebar-container .sidebar-header,
#sidebar-container .sidebar-footer {
    padding: 0.8rem 1rem !important;
    margin: 0 !important;
}

/* ===== SIDEBAR - ABRIR/FECHAR ===== */
}

/* ===== SIDEBAR TOGGLE ===== */
}

/* ===== SIDEBAR TOGGLE ===== */
}

/* ===== SIDEBAR - OCULTAR E SCROLL ===== */
#sidebar-container.hidden {
    display: none !important; /* Oculta completamente em qualquer tamanho */
}
#sidebar-container .sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* Desktop: sempre visível se autenticado */
}
/* Mobile: oculta por padrão, abre com .open */
    #sidebar-container.hidden {
        display: none !important;
    }
}

/* ===== HAMBÚRGUER - ESTILOS ESSENCIAIS ===== */
.hamburger-btn {
    background: transparent !important;
    border: none !important;
    padding: 8px !important;
    cursor: pointer !important;
    width: 44px !important;
    height: 44px !important;
    position: relative !important;
}
.hamburger-btn span {
    display: block !important;
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    height: 3px !important;
    background: #FF5722 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
}
.hamburger-btn span:nth-child(1) { top: 10px !important; }
.hamburger-btn span:nth-child(2) { top: 50% !important; transform: translateY(-50%) !important; }
.hamburger-btn span:nth-child(3) { bottom: 10px !important; }
.hamburger-btn.open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px) !important; }
.hamburger-btn.open span:nth-child(2) { opacity: 0 !important; }
.hamburger-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px) !important; }

/* ===== SIDEBAR - VISÍVEL APENAS SE AUTENTICADO ===== */
#sidebar-container.hidden {
    display: none !important;
}
}

/* ===== SIDEBAR - CORREÇÃO SCROLL E LAYOUT ===== */
#sidebar-container.hidden {
    display: none !important;
}
#sidebar-container .sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* Desktop: fixo à esquerda */
}
/* Mobile: deslizante com scroll */
    /* Garantir que o menu tem espaço para scroll */
}

/* ===== SIDEBAR: BASE ===== */
#sidebar-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background: #1a1a2e;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease, transform 0.3s ease;
    display: block;
    box-sizing: border-box;
}
#sidebar-container.hidden {
    display: none !important;
}
#sidebar-container .sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* Ícones sempre visíveis */

/* ===== DESKTOP (>=769px) ===== */
    /* Estado recolhido (collapsed) */
    #sidebar-container.collapsed {
        width: 60px !important;
    }
    #sidebar-container.collapsed .sidebar-menu a span:last-child {
        display: none !important;
    }
    #sidebar-container.collapsed .sidebar-brand span:last-child {
        display: none !important;
    }
    #sidebar-container.collapsed .sidebar-footer a span {
        display: none !important;
    }
    #sidebar-container.collapsed .sidebar-toggle {
        transform: rotate(180deg);
    }
    /* Conteúdo principal */
    /* Quando sidebar recolhida */
}

/* ===== MOBILE (<768px) ===== */
@media (max-width: 768px) {
    #sidebar-container {
        width: 300px;
        max-width: 85vw;
        transform: translateX(-100%);
        box-shadow: none;
        overflow-y: auto;
    }
    #sidebar-container.open {
        transform: translateX(0);
        box-shadow: 2px 0 12px rgba(0,0,0,0.4);
    }
    /* Overlay (fundo escuro) */
}

/* ===== SOBREPOSIÇÃO MOBILE (MENU EM FRENTE) ===== */
@media (max-width: 768px) {
    /* Overlay: atrás da sidebar, mas à frente do conteúdo */

    /* Sidebar: em frente a tudo (excepto hambúrguer) */
    #sidebar-container {
        z-index: 1000 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 300px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        background: #1a1a2e !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        overflow-y: auto !important;
        box-shadow: none !important;
    }
    #sidebar-container.open {
        transform: translateX(0) !important;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.5) !important;
    }

    /* Hambúrguer: acima de tudo */
    #hamburger {
        z-index: 9999 !important;
        position: fixed !important;
        top: 12px !important;
        left: 12px !important;
    }

    /* Conteúdo principal: fica atrás da sidebar */
}

/* ===== GARANTIR CLICK NOS LINKS DO MENU ===== */
.sidebar-menu a {
    pointer-events: auto !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.6rem 1rem !important;
    color: rgba(255,255,255,0.8) !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.sidebar-menu a:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}
.sidebar-menu a.active {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border-left: 3px solid #FF5722 !important;
}
/* Overlay não deve bloquear cliques nos links */

/* ===== CORREÇÃO SCROLL E INTERAÇÃO MOBILE ===== */
#sidebar-container {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important; /* scroll suave iOS */
    overscroll-behavior: contain !important;
}
#sidebar-container .sidebar-menu {
    flex: 1;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 0 20px 0 !important;
    margin: 0 !important;
}
#sidebar-container .sidebar-menu a {
    pointer-events: auto !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.7rem 1rem !important;
    color: rgba(255,255,255,0.85) !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
}
#sidebar-container .sidebar-menu a:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}
#sidebar-container .sidebar-menu a.active {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border-left: 3px solid #FF5722 !important;
}

/* Overlay - não bloqueia a sidebar */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    pointer-events: none; /* não bloqueia cliques por baixo */
}
.sidebar-overlay.active {
    display: block;
    pointer-events: auto; /* apenas quando ativo, captura cliques para fechar */
}
/* Mas a sidebar fica acima do overlay */
#sidebar-container {
    z-index: 1000 !important;
}
#sidebar-container .sidebar {
    position: relative;
    z-index: 1001;
}

/* ===== CONTEÚDO PRINCIPAL DESKTOP - 95% DA LARGURA ===== */
/* Container interno que ocupa 95% da largura disponível */
    width: 95% !important;
    max-width: none !important;
    margin: 0 auto !important;
    flex: 1;
}

/* ===== CONTEÚDO PRINCIPAL DESKTOP - 100% DA LARGURA ===== */
/* Todos os elementos diretos ocupam 100% da largura */
/* Exceção: landing page (não queremos afetar) */
.landing-page,
.landing-page > * {
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Para tabelas, garantir que ocupam toda a largura */
/* Cards ocupam toda a largura */
/* Page title também */

/* ===== FORÇAR LARGURA TOTAL DESKTOP ===== */

/* Todos os filhos diretos ocupam 100% da largura */
#main-content > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Elementos específicos que devem ocupar toda a largura */
#main-content .card,
#main-content .page-title-container,
#main-content .table-wrapper,
#main-content .filters,
#main-content .dashboard,
#main-content .page-documentos,
#main-content .page-form,
#main-content .page-detalhe,
#main-content .page-prazos,
#main-content .page-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Garantir que tabelas e wrappers não criem scroll desnecessário */
#main-content .table-wrapper {
    overflow-x: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
#main-content .table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Landing page não é afetada (mantém layout original) */
.landing-page,
.landing-page > * {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
}
/* Em desktop, se a sidebar estiver recolhida, o conteúdo ainda ocupa toda a largura */
}

/* ===== CENTRALIZAÇÃO DO CONTEÚDO (DESKTOP) ===== */
    /* Todos os filhos diretos (exceto landing) são centralizados */
        max-width: 1400px !important; /* ajuste conforme o tamanho ideal */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
    /* A landing page mantém-se sem centralização forçada */
    .landing-page {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ===== CENTRALIZAÇÃO FORÇADA EM DESKTOP ===== */
@media (min-width: 769px) {
    /* Área principal ocupa todo o espaço, sem margens fixas */
    /* Quando a sidebar está recolhida, ocupa mais espaço */
    /* Todos os filhos diretos centralizados com largura ideal */
    #main-content > *:not(.landing-page):not(.landing-page *) {
        max-width: 1400px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
    /* Landing page mantém layout original */
    .landing-page,
    .landing-page > * {
        max-width: none !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
}

/* ===== MAIN-CONTENT SEM MARGEM FIXA ===== */
#main-content {
    flex: 1;
    padding: 20px !important;
    min-height: 100vh;
    background: #f5f7fa;
    transition: margin-left 0.3s ease, width 0.3s ease;
    box-sizing: border-box;
    margin-left: 0 !important; /* nunca usar margin-left fixa */
    width: calc(100% - 260px) !important;
    max-width: none !important;
}
#sidebar-container.collapsed ~ #main-content {
    width: calc(100% - 60px) !important;
}
/* Em mobile, a largura é 100% */
@media (max-width: 768px) {
    #main-content {
        width: 100% !important;
        margin-left: 0 !important;
        padding-top: 70px !important;
    }
}