/* PM2 Plus Custom Styles */

.nav-item {
    display: flex;
    align-items: center;
    column-gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: #D1D5DB;
    transition: all 200ms;
    text-decoration: none;
}

.nav-item:hover {
    background-color: #374151;
    color: white;
}

.nav-item.active {
    background-color: #059669;
    color: white;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Custom scrollbar for logs */
#log-output::-webkit-scrollbar {
    width: 8px;
}

#log-output::-webkit-scrollbar-track {
    background: #374151;
}

#log-output::-webkit-scrollbar-thumb {
    background: #6B7280;
    border-radius: 4px;
}

#log-output::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

/* Animated progress bars */
.progress-bar {
    background: linear-gradient(90deg, #10B981, #059669, #10B981);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

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

/* Status indicators */
.status-online {
    color: #10B981;
}

.status-offline {
    color: #EF4444;
}

.status-restarting {
    color: #F59E0B;
    animation: pulse 2s infinite;
}

/* Process action buttons */
.process-btn {
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: background-color 200ms;
    border: none;
    cursor: pointer;
}

.process-btn-start {
    background-color: #059669;
    color: white;
}

.process-btn-start:hover {
    background-color: #10B981;
}

.process-btn-stop {
    background-color: #DC2626;
    color: white;
}

.process-btn-stop:hover {
    background-color: #EF4444;
}

.process-btn-restart {
    background-color: #2563EB;
    color: white;
}

.process-btn-restart:hover {
    background-color: #3B82F6;
}

/* Chart containers */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

/* Alert styles */
.alert {
    padding: 1rem;
    border-radius: 0.5rem;
    border-left-width: 4px;
    margin-bottom: 1rem;
    transition: all 300ms;
}

.alert-success {
    background-color: #064E3B;
    border-left-color: #10B981;
    color: #D1FAE5;
}

.alert-warning {
    background-color: #78350F;
    border-left-color: #F59E0B;
    color: #FEF3C7;
}

.alert-error {
    background-color: #7F1D1D;
    border-left-color: #EF4444;
    color: #FEE2E2;
}

.alert-info {
    background-color: #1E3A8A;
    border-left-color: #3B82F6;
    color: #DBEAFE;
}

/* Deployment status */
.deployment-item {
    background-color: #374151;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #4B5563;
}

.deployment-status {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.deployment-status-success {
    background-color: #059669;
    color: white;
}

.deployment-status-failed {
    background-color: #DC2626;
    color: white;
}

.deployment-status-pending {
    background-color: #D97706;
    color: white;
}

/* Loading animations */
.loading-dots {
    display: inline-block;
}

.loading-dots:after {
    content: '.';
    animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
    0%, 20% {
        color: rgba(0,0,0,0);
        text-shadow:
            .25em 0 0 rgba(0,0,0,0),
            .5em 0 0 rgba(0,0,0,0);
    }
    40% {
        color: white;
        text-shadow:
            .25em 0 0 rgba(0,0,0,0),
            .5em 0 0 rgba(0,0,0,0);
    }
    60% {
        text-shadow:
            .25em 0 0 white,
            .5em 0 0 rgba(0,0,0,0);
    }
    80%, 100% {
        text-shadow:
            .25em 0 0 white,
            .5em 0 0 white;
    }
}

/* Process status indicators */
.process-status {
    display: inline-flex;
    align-items: center;
    column-gap: 0.5rem;
}

.process-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.process-status-running .process-status-dot {
    background-color: #10B981;
    animation: pulse 2s infinite;
}

.process-status-stopped .process-status-dot {
    background-color: #EF4444;
}

.process-status-errored .process-status-dot {
    background-color: #EF4444;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

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

/* Responsive design */
@media (max-width: 768px) {
    .nav-item span {
        display: none;
    }
    
    aside {
        width: 4rem;
    }
}

/* Code/terminal styling */
.terminal {
    background-color: black;
    color: #10B981;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    padding: 1rem;
    border-radius: 0.25rem;
    border: 1px solid #374151;
}

.terminal .prompt {
    color: #3B82F6;
}

.terminal .command {
    color: white;
}

.terminal .output {
    color: #D1D5DB;
}

/* Metrics cards hover effects */
.metric-card {
    transition: transform 200ms;
}

.metric-card:hover {
    transform: scale(1.05);
}

/* Custom chart styles */
.chart-tooltip {
    background-color: #1F2937;
    color: white;
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid #4B5563;
}

/* Activity indicators */
.activity-indicator {
    position: relative;
}

.activity-indicator::before {
    content: '';
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 0.75rem;
    height: 0.75rem;
    background-color: #10B981;
    border-radius: 50%;
    animation: ping 1s infinite;
}

.activity-indicator::after {
    content: '';
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 0.75rem;
    height: 0.75rem;
    background-color: #10B981;
    border-radius: 50%;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Server load visualization */
.load-bar {
    height: 0.5rem;
    background-color: #374151;
    border-radius: 9999px;
    overflow: hidden;
}

.load-fill {
    height: 100%;
    transition: all 500ms ease-out;
}

.load-low {
    background-color: #10B981;
}

.load-medium {
    background-color: #F59E0B;
}

.load-high {
    background-color: #EF4444;
}

/* Network activity */
.network-activity {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

.network-arrow {
    color: #6B7280;
    transition: color 300ms;
}

.network-arrow.active {
    color: #10B981;
}

.network-arrow.upload {
    transform: rotate(-45deg);
}

.network-arrow.download {
    transform: rotate(45deg);
}

/* Fix chart canvas dimensions */
canvas {
    max-height: 300px !important;
}

/* FIX: Vertical nav items and footer collision */
aside nav { display: block !important; }
aside nav .nav-item { display: block !important; width: 100% !important; margin-bottom: 8px !important; }
aside { width: 256px !important; position: fixed !important; }
main { margin-left: 256px !important; }
footer { margin-left: 256px !important; width: calc(100% - 256px) !important; }

/* FIX: Add gap between CPU & Memory Trends and Process Health sections */
.bg-gray-800:has(h3:contains("Process Health")) {
  margin-top: 24px !important;
}

/* Alternative selector if :has() is not supported */
#overview-tab > div > div.grid.grid-cols-1.lg\\:grid-cols-2.gap-6 > div:nth-child(2) {
  margin-top: 24px !important;
}

/* More specific: target the Process Health container directly */
#overview-tab .bg-gray-800 + .bg-gray-800 {
  margin-top: 24px !important;
}

/* FIX: Add proper spacing between grid sections */
.grid.gap-8 > div.bg-gray-800 {
  margin-bottom: 1rem !important;
}

/* Add extra margin to Process Health section specifically */
.bg-gray-800:has(h3:contains("Process Health")),
#overview-tab .grid > div:last-child.bg-gray-800 {
  margin-left: 1rem !important;
}

/* On mobile, remove left margin and add top margin */
@media (max-width: 1024px) {
  .bg-gray-800:has(h3:contains("Process Health")),
  #overview-tab .grid > div:last-child.bg-gray-800 {
    margin-left: 0 !important;
    margin-top: 2rem !important;
  }
}