/**
 * MICRODIAG SENTINEL - Admin Cockpit Styles
 * Version: 2.0.0
 */

/* Base */
body {
    background-color: #050505;
    color: #d4d4d8;
}

/* Navigation */
.nav-item {
    border-left: 3px solid transparent;
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(255, 107, 0, 0.15) 0%, transparent 100%);
    border-left: 3px solid #ff6b00;
    color: #ff6b00;
}

/* Page Sections */
.page-section {
    display: none;
}

.page-section.active {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

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

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #121212;
}

::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff6b00;
}

/* Code Editor */
.code-editor,
#script-code-editor {
    background-color: #0d0d0d;
    font-family: 'JetBrains Mono', monospace;
    tab-size: 4;
}

#script-code-editor::placeholder {
    color: #52525b;
}

/* Console */
#script-console {
    font-family: 'JetBrains Mono', monospace;
    background-color: #0a0a0a;
}

/* Buttons */
button:focus {
    outline: none;
}

/* Cards glow effect */
.shadow-glow-red {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);
}

.shadow-glow-orange {
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.1);
}

/* Status indicators */
.status-online {
    background-color: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.status-offline {
    background-color: #6b7280;
}

.status-warning {
    background-color: #ff6b00;
    animation: pulse 2s infinite;
}

.status-critical {
    background-color: #ef4444;
    animation: pulse 1s infinite;
}

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

/* Table hover */
.hover-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Modal backdrop */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

/* Tooltips */
[title] {
    position: relative;
}

/* Transitions */
.transition-all {
    transition: all 0.2s ease;
}

/* Focus states */
input:focus,
select:focus,
textarea:focus {
    border-color: #ff6b00;
    box-shadow: 0 0 0 1px rgba(255, 107, 0, 0.2);
}

/* Selection */
::selection {
    background-color: rgba(255, 107, 0, 0.3);
    color: white;
}

/* Responsive */
@media (max-width: 1024px) {
    .sidebar-collapsed {
        width: 80px;
    }
}