/* Additional custom styles for NetGuard Pro */

/* Smooth transitions for all interactive elements */
button, input, select {
    transition: all 0.2s ease-in-out;
}

/* Custom focus states */
input:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

/* Glass morphism enhancement */
.glass-panel {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

/* Terminal glow effect */
.terminal-text {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from { text-shadow: 0 0 5px rgba(6, 182, 212, 0.3); }
    to { text-shadow: 0 0 20px rgba(6, 182, 212, 0.6), 0 0 30px rgba(6, 182, 212, 0.4); }
}

/* Risk level animations */
.risk-high {
    animation: border-pulse-red 2s infinite;
}

@keyframes border-pulse-red {
    0%, 100% { border-left-color: #ef4444; }
    50% { border-left-color: #f87171; }
}

/* Button hover effects */
button:active {
    transform: scale(0.98);
}

/* Table row hover enhancement */
tr:hover td {
    color: #fff;
}

/* Scrollbar styling for webkit */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0f1c;
}

::-webkit-scrollbar-thumb {
    background: #1f2937;
    border-radius: 4px;
}

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

/* Diagnostic styles */
@keyframes pulse-border {
    0%, 100% { border-color: rgba(6, 182, 212, 0.4); }
    50% { border-color: rgba(6, 182, 212, 0.8); box-shadow: 0 0 10px rgba(6, 182, 212, 0.3); }
}

.diagnostic-active {
    animation: pulse-border 2s infinite;
}

/* Print styles for reports */
@media print {
    body {
        background: white;
        color: black;
    }
    .glass-panel {
        background: white;
        border: 1px solid #ddd;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .glass-panel {
        margin: 0.25rem;
    }
    
    /* Ensure charts don't overflow on mobile */
    canvas {
        max-height: 250px !important;
    }
    
    /* Prevent table overflow */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better touch targets on mobile */
    button {
        min-height: 36px;
    }
    
    /* Reduce padding on mobile for better fit */
    .custom-scrollbar {
        padding: 0.5rem !important;
    }
}

/* Ensure modals fit on small screens */
@media (max-width: 640px) {
    .glass-panel.rounded-xl {
        border-radius: 0.75rem;
    }
    
    /* Stack grid columns on mobile */
    .grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    /* Ensure text doesn't overflow */
    .font-mono {
        font-size: 0.75rem;
    }
}

/* Large screen optimizations */
@media (min-width: 1400px) {
    .max-w-7xl {
        max-width: 100%;
        padding: 0 2rem;
    }
}

/* Ensure network map canvas is responsive */
#network-canvas svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
}

/* Fix for long content in tables */
td, th {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Better scroll behavior for modals */
.max-h-\[80vh\] {
    max-height: 85vh;
    max-height: 85dvh; /* Dynamic viewport height for mobile */
}

.max-h-\[90vh\] {
    max-height: 90vh;
    max-height: 90dvh;
}

/* Ensure charts maintain aspect ratio */
.relative.h-\[200px\] {
    position: relative;
    height: 200px;
}

@media (min-width: 1024px) {
    .relative.h-\[200px\] {
        height: 250px;
    }
}

/* Chart container constraints */
canvas {
    max-height: 300px !important;
}

/* Dashboard specific responsive fixes */
@media (max-width: 1280px) {
    .grid-cols-1.xl\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* Ensure proper modal scrolling on mobile */
.max-h-\[85vh\] {
    max-height: 85vh;
    max-height: 85dvh;
}

.max-h-\[90vh\] {
    max-height: 90vh;
    max-height: 90dvh;
}

.max-h-\[95vh\] {
    max-height: 95vh;
    max-height: 95dvh;
}

/* Prevent chart overflow */
.glass-panel canvas {
    max-width: 100%;
    height: auto !important;
    max-height: 250px;
}

/* Better mobile touch targets */
@media (max-width: 768px) {
    nav button {
        padding: 0.75rem 1rem;
        min-height: 44px;
    }
    
    .glass-panel {
        margin: 0.5rem 0;
    }
    
    /* Ensure stats cards don't overflow */
    .grid-cols-2 > div {
        min-width: 0;
    }
    
    /* Better text wrapping */
    .font-mono {
        word-break: break-word;
        font-size: 0.75rem;
    }
}

/* Desktop optimizations */
@media (min-width: 1400px) {
    .max-w-7xl {
        max-width: 1300px;
    }
}

/* Ensure tables don't break layout */
td, th {
    max-width: 400px;
}

@media (max-width: 640px) {
    td, th {
        max-width: 200px;
    }
}