/**
 * POLITICORE - Estilos Globais
 * Centraliza CSS compartilhado entre todas as páginas com sidebar.
 * Cada HTML deve manter apenas CSS exclusivo da sua página.
 */

/* ============================================
   BASE
   ============================================ */

* { font-family: 'Plus Jakarta Sans', sans-serif; }

/* ============================================
   SCROLLBAR
   ============================================ */

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ============================================
   SIDEBAR LINKS
   ============================================ */

.sidebar-link {
    transition: all 0.2s ease;
}
.sidebar-link:hover {
    background: rgba(255,255,255,0.1);
    transform: translateX(4px);
}
.sidebar-link.active {
    background: rgba(255,255,255,0.15);
    border-left: 3px solid #8093f8;
}

/* ============================================
   CARDS
   ============================================ */

.card {
    transition: all 0.2s ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(0,0,0,0.15);
}
.card-clickable {
    cursor: pointer;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-primary {
    background: linear-gradient(135deg, #6370f1 0%, #4f4de5 100%);
    transition: all 0.2s ease;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 112, 241, 0.4);
}

/* ============================================
   INPUTS
   ============================================ */

.search-input:focus {
    box-shadow: 0 0 0 3px rgba(99, 112, 241, 0.2);
}

/* ============================================
   SKELETON LOADING
   ============================================ */

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes slide-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
    animation: slide-up 0.3s ease;
}

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

/* ============================================
   MOBILE MENU (Responsive Sidebar)
   ============================================ */

.mobile-menu-btn { display: none; }

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 50;
        position: fixed;
        width: 280px;
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0 !important;
        width: 100%;
    }
    .mobile-menu-btn {
        display: flex;
    }
    .overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 40;
    }
    .overlay.open {
        display: block;
    }
}

/* ============================================
   PRINT
   ============================================ */

@media print {
    .sidebar, .overlay, .no-print, header, .mobile-menu-btn {
        display: none !important;
    }
    .main-content {
        margin-left: 0 !important;
    }
    body {
        background: white !important;
    }
}

/* ============================================
   DRAWER (Slide-in Panel)
   ============================================ */

.drawer-overlay {
    transition: opacity 0.3s ease;
}

.drawer-panel {
    transition: transform 0.3s ease;
}

.drawer-panel.open {
    transform: translateX(0) !important;
}

/* ============================================
   ANCHOR SCROLL OFFSET (sticky header)
   ============================================ */

[id^="section-"] {
    scroll-margin-top: 80px;
}

/* ============================================
   ACTIVITY FEED PULSE
   ============================================ */

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pulse-dot {
    animation: pulse-dot 2s infinite;
}