/* ACNAS Theme - Professional Design */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --bg-base: #050203;
    --bg-elevated: #0a0607;
    --bg-surface: #0d0608;
    --bg-hover: #140709;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --accent: #ef4444;
    --accent-hover: #f87171;
    --accent-muted: rgba(239,68,68,0.12);
    --accent-border: rgba(239,68,68,0.25);
    --border: #1f1318;
    --border-subtle: #150a0e;
    --gradient-accent: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --gradient-header: linear-gradient(180deg, #0d0709 0%, #070405 100%);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
    --radius-md: 8px;
    --radius-lg: 12px;
    --duration: 250ms;
}

html, body {
    background-color: var(--bg-base) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', sans-serif !important;
}

/* Logo - Strong Glow */
.logo, img[class*="logo"], img[src*="logo"], img[src*="acnas"] {
    filter: drop-shadow(0 0 15px rgba(220,38,38,0.9)) drop-shadow(0 0 30px rgba(220,38,38,0.5)) !important;
    animation: logoPulse 2s ease-in-out infinite alternate !important;
}

@keyframes logoPulse {
    0% { filter: drop-shadow(0 0 15px rgba(220,38,38,0.9)) drop-shadow(0 0 30px rgba(220,38,38,0.5)); }
    100% { filter: drop-shadow(0 0 20px rgba(220,38,38,1)) drop-shadow(0 0 40px rgba(220,38,38,0.7)); }
}

/* Header */
header {
    background: var(--gradient-header) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 12px 24px !important;
}

/* Sidebar */
.sidebar {
    background-color: var(--bg-elevated) !important;
    border-right: 1px solid var(--border) !important;
}

.nav-link {
    color: var(--text-secondary) !important;
    padding: 10px 16px !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--duration) ease;
}

.nav-link:hover {
    background-color: rgba(239,68,68,0.08) !important;
    color: var(--text-primary) !important;
}

.nav-link.active {
    background-color: var(--accent-muted) !important;
    color: var(--accent) !important;
}

/* Cards */
.card, .panel {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all var(--duration) ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(239,68,68,0.15);
    border-color: var(--accent-border);
}

/* Buttons */
.btn {
    background: var(--gradient-accent) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    color: white !important;
    transition: all var(--duration) ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), 0 4px 16px rgba(239,68,68,0.3);
}

/* Forms */
.form-control, input, select, textarea {
    background-color: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    padding: 10px 14px !important;
}

.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-muted) !important;
}

/* Tables */
.table {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

.table thead th {
    background: var(--gradient-header) !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 14px 16px !important;
    border-bottom: 2px solid var(--accent-border) !important;
}

.table tbody td {
    background-color: var(--bg-surface) !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.table tbody tr:hover td {
    background-color: var(--bg-hover) !important;
}

/* Footer */
footer {
    background: var(--gradient-header) !important;
    border-top: 1px solid var(--border) !important;
    padding: 16px 24px !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Text */
.text-muted { color: var(--text-secondary) !important; }
a { color: var(--accent) !important; transition: color var(--duration) ease; }
a:hover { color: var(--accent-hover) !important; }

/* Badges */
.badge {
    background-color: var(--accent-muted) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent-border) !important;
    border-radius: 9999px !important;
    padding: 4px 12px !important;
}

/* Progress */
.progress {
    background-color: var(--bg-elevated) !important;
    border-radius: 9999px !important;
    height: 6px !important;
}

.progress-bar {
    background: var(--gradient-accent) !important;
    border-radius: 9999px !important;
}

/* AG Grid */
.ag-root-wrapper {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
}

.ag-header {
    background: var(--gradient-header) !important;
    border-bottom: 2px solid var(--accent-border) !important;
}

.ag-row:hover {
    background-color: var(--bg-hover) !important;
}