/* ==========================================
   🏭 ACTUSX - BOOTSTRAP 5 PROFESSIONAL
   💎 DESIGN PREMIUM - R$15.000 LEVEL
   ⚡ FATOS, DADOS E EXECUÇÃO
   ========================================== */

:root {
    --actusx-primary: #0D1F17;
    --actusx-secondary: #1B4332;
    --actusx-accent: #2DD4BF;
    --actusx-success: #52B788;
    --actusx-danger: #EF4444;
    --actusx-warning: #F59E0B;
    --actusx-info: #3B82F6;
    --actusx-purple: #8B5CF6;
    --actusx-gradient: linear-gradient(135deg, #0D1F17 0%, #1B4332 50%, #2D6A4F 100%);
    --actusx-shadow: 0 4px 16px rgba(0,0,0,0.12);
    --actusx-shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
    --actusx-shadow-xl: 0 16px 48px rgba(0,0,0,0.24);
    --actusx-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --actusx-transition-bounce: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --actusx-radius: 12px;
    --actusx-radius-lg: 16px;
    --actusx-radius-xl: 20px;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%);
    background-attachment: fixed;
    min-height: 100vh;
    color: #1F2937;
}

/* ==========================================
   NAVBAR
   ========================================== */
.navbar-actusx {
    background: var(--actusx-gradient) !important;
    backdrop-filter: blur(20px);
    box-shadow: var(--actusx-shadow-lg);
    z-index: 1030;
}

.navbar-actusx .navbar-brand {
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 1.5rem;
}

/* ==========================================
   SIDEBAR / OFFCANVAS
   ========================================== */
.offcanvas-actusx {
    background: rgba(13, 31, 23, 0.98) !important;
    backdrop-filter: blur(20px);
    width: 280px !important;
    color: white !important;
}

.offcanvas-actusx .sidebar-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--actusx-gradient);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 0 30px rgba(45, 212, 191, 0.3);
}

.offcanvas-actusx .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: var(--actusx-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
    transition: var(--actusx-transition);
    font-weight: 500;
    font-size: 0.9rem;
}

.offcanvas-actusx .nav-link:hover,
.offcanvas-actusx .nav-link.active {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    transform: translateX(5px);
}

.offcanvas-actusx .nav-link i {
    width: 24px;
    text-align: center;
    font-size: 1.1rem;
}

/* ==========================================
   BOTÕES
   ========================================== */
.btn-actusx {
    background: var(--actusx-gradient);
    color: white !important;
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.75rem 1.5rem;
    border-radius: var(--actusx-radius);
    position: relative;
    overflow: hidden;
    transition: var(--actusx-transition-bounce);
    box-shadow: 0 4px 15px rgba(27, 67, 50, 0.3);
}

.btn-actusx:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(27, 67, 50, 0.4);
    color: white !important;
}

.btn-actusx:active {
    transform: scale(0.95);
}

.btn-actusx::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-actusx:active::after {
    width: 300px;
    height: 300px;
}

.btn-actusx-outline {
    background: transparent;
    border: 2px solid var(--actusx-primary);
    color: var(--actusx-primary);
    font-weight: 700;
    padding: 0.65rem 1.5rem;
    border-radius: var(--actusx-radius);
    transition: var(--actusx-transition);
}

.btn-actusx-outline:hover {
    background: var(--actusx-primary);
    color: white;
    transform: translateY(-2px);
}

/* ==========================================
   CARDS
   ========================================== */
.card-actusx {
    border: none !important;
    border-radius: var(--actusx-radius-lg) !important;
    box-shadow: var(--actusx-shadow);
    transition: var(--actusx-transition-bounce);
    overflow: hidden;
    background: white;
}

.card-actusx:hover {
    transform: translateY(-5px);
    box-shadow: var(--actusx-shadow-lg);
}

.card-dashboard {
    border: none;
    border-radius: var(--actusx-radius-lg);
    transition: var(--actusx-transition-bounce);
    cursor: pointer;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-dashboard:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(27, 67, 50, 0.2);
}

.card-dashboard .icon-lg {
    font-size: 2.5rem;
    animation: floatIcon 3s ease-in-out infinite;
}

/* ==========================================
   LOGIN CARD
   ========================================== */
.login-card {
    border: none !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
}

.login-logo {
    font-size: 4rem;
    animation: floatIcon 2s ease-in-out infinite;
}

/* ==========================================
   MENU BUTTONS
   ========================================== */
.btn-menu {
    background: white;
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 1.2rem 1rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    transition: var(--actusx-transition-bounce);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 100px;
}

.btn-menu:hover {
    transform: translateY(-5px);
    border-color: var(--actusx-primary);
    box-shadow: 0 8px 30px rgba(27, 67, 50, 0.2);
    background: #F0FDF4;
}

.btn-menu .icon-menu {
    font-size: 2rem;
    transition: var(--actusx-transition-bounce);
}

.btn-menu:hover .icon-menu {
    transform: scale(1.2);
}

.btn-menu.danger:hover {
    border-color: var(--actusx-danger);
    background: #FEE2E2;
    box-shadow: 0 8px 30px rgba(239, 68, 68, 0.2);
}

.btn-menu.admin-only {
    border-style: dashed;
    border-color: var(--actusx-purple);
}

.btn-menu.admin-only:hover {
    border-style: solid;
    background: #F5F3FF;
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.2);
}

/* ==========================================
   HEADER
   ========================================== */
.header-actusx {
    background: var(--actusx-gradient);
    box-shadow: var(--actusx-shadow-lg);
    position: relative;
    overflow: hidden;
}

.header-actusx::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: headerGlow 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes headerGlow {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-20px, -20px); }
}

.header-logo-icon {
    font-size: 3rem;
    animation: floatIcon 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(45, 212, 191, 0.5));
}

/* ==========================================
   USER INFO
   ========================================== */
.user-avatar-sm {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--actusx-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

/* ==========================================
   ALERTAS
   ========================================== */
.alert-actusx {
    border: none !important;
    border-left: 6px solid !important;
    border-radius: var(--actusx-radius) !important;
    font-weight: 600;
    cursor: pointer;
    transition: var(--actusx-transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.alert-actusx:hover {
    transform: translateY(-2px);
    box-shadow: var(--actusx-shadow);
}

/* ==========================================
   TABELAS
   ========================================== */
.table-actusx {
    border-radius: var(--actusx-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 0;
}

.table-actusx thead th {
    background: var(--actusx-gradient);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
    padding: 1rem;
    border: none;
    white-space: nowrap;
}

.table-actusx tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    border-color: #E5E7EB;
}

.table-actusx tbody tr:hover {
    background: #F0FDF4;
}

/* ==========================================
   MODAL
   ========================================== */
.modal-actusx .modal-content {
    border: none;
    border-radius: var(--actusx-radius-xl);
    box-shadow: var(--actusx-shadow-xl);
    overflow: hidden;
}

.modal-actusx .modal-header {
    background: var(--actusx-gradient);
    color: white;
    border-bottom: none;
    padding: 1.25rem 1.5rem;
}

.modal-actusx .modal-header .btn-close {
    filter: brightness(0) invert(1);
}

/* ==========================================
   FOOTER
   ========================================== */
.footer-actusx {
    background: var(--actusx-gradient);
    color: rgba(255, 255, 255, 0.8);
    border-radius: var(--actusx-radius-lg);
}

/* ==========================================
   TOAST
   ========================================== */
.toast-container-actusx {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ==========================================
   BADGES
   ========================================== */
.badge-purple {
    background: #F5F3FF !important;
    color: #5B21B6 !important;
}

/* ==========================================
   PROGRESS BARS
   ========================================== */
.progress-bar-purple {
    background-color: var(--actusx-purple) !important;
}

/* ==========================================
   ANIMAÇÕES
   ========================================== */
@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseWarning {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 0 0 15px rgba(245, 158, 11, 0); }
}

.animate-slide-up {
    animation: slideUpFade 0.5s ease-out forwards;
}

.animate-slide-up-delay-1 { animation-delay: 0.1s; opacity: 0; }
.animate-slide-up-delay-2 { animation-delay: 0.2s; opacity: 0; }
.animate-slide-up-delay-3 { animation-delay: 0.3s; opacity: 0; }
.animate-slide-up-delay-4 { animation-delay: 0.4s; opacity: 0; }
.animate-slide-up-delay-5 { animation-delay: 0.5s; opacity: 0; }

/* ==========================================
   UTILITÁRIOS
   ========================================== */
.text-actusx { color: var(--actusx-primary) !important; }
.text-actusx-accent { color: var(--actusx-accent) !important; }
.text-purple { color: #7C3AED !important; }
.cursor-pointer { cursor: pointer; }
.hover-lift { transition: var(--actusx-transition-bounce); }
.hover-lift:hover { transform: translateY(-5px); box-shadow: var(--actusx-shadow-lg); }

/* ==========================================
   RESPONSIVO
   ========================================== */
@media (max-width: 768px) {
    .btn-menu { padding: 1rem 0.5rem; min-height: 80px; font-size: 0.75rem; }
    .btn-menu .icon-menu { font-size: 1.5rem; }
    .header-logo-icon { font-size: 2rem; }
    .card-dashboard .display-6 { font-size: 1.5rem; }
    .offcanvas-actusx { width: 260px !important; }
}

@media (max-width: 576px) {
    .navbar-actusx .navbar-brand { font-size: 1.2rem; }
    .login-card { margin: 10px; }
}

/* ==========================================
   SCROLLBAR
   ========================================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: var(--actusx-secondary); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--actusx-primary); }

/* ==========================================
   SELEÇÃO E FOCO
   ========================================== */
::selection {
    background: var(--actusx-accent);
    color: var(--actusx-primary);
}

:focus-visible {
    outline: 3px solid var(--actusx-accent);
    outline-offset: 2px;
    border-radius: 4px;
}