/* KorynCD Global Gradient Theme */

/* Base gradient for all backgrounds */
:root {
    --gradient-primary: linear-gradient(135deg, 
        #00d4ff 0%, 
        #0099ff 25%,
        #6b5ce7 50%,
        #a855f7 75%,
        #d946ef 100%);
    
    --gradient-light: linear-gradient(135deg, 
        #e0f2fe 0%,
        #ddd6fe 50%,
        #fae8ff 100%);
    
    --gradient-subtle: linear-gradient(135deg, 
        rgba(0, 153, 255, 0.1) 0%, 
        rgba(107, 92, 231, 0.1) 50%,
        rgba(168, 85, 247, 0.1) 100%);
    
    --gradient-sidebar: linear-gradient(135deg, 
        #0099ff 0%, 
        #6b5ce7 50%,
        #a855f7 100%);
    
    --gradient-overlay: linear-gradient(90deg, 
        rgba(0, 153, 255, 0.9) 0%, 
        rgba(107, 92, 231, 0.9) 50%,
        rgba(168, 85, 247, 0.9) 100%);
}

/* Apply gradient to main app container */
body, html {
    background: var(--gradient-light) !important;
}

/* Cards and panels with subtle gradient */
.card, .panel, .box {
    background: var(--gradient-subtle) !important;
    border: 1px solid rgba(168, 85, 247, 0.2);
    box-shadow: 0 4px 12px rgba(107, 92, 231, 0.15);
}

/* Headers with primary gradient */
.header, .top-bar, nav {
    background: var(--gradient-overlay) !important;
    color: white !important;
}

/* Buttons with gradient */
.btn-primary, button.primary {
    background: var(--gradient-primary) !important;
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.btn-primary:hover, button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(107, 92, 231, 0.4);
}

/* Tables with subtle gradient rows */
table tr:nth-child(even) {
    background: rgba(107, 92, 231, 0.05);
}

table tr:hover {
    background: rgba(168, 85, 247, 0.1);
}

/* Modal overlays */
.modal, .popup, .overlay {
    backdrop-filter: blur(10px);
}

.modal-content, .popup-content {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%,
        rgba(248, 245, 255, 0.95) 100%);
    border: 1px solid rgba(168, 85, 247, 0.3);
    box-shadow: 0 8px 32px rgba(107, 92, 231, 0.3);
}

/* Dark theme support */
.theme-dark {
    --gradient-light: linear-gradient(135deg, 
        rgba(0, 153, 255, 0.15) 0%, 
        rgba(107, 92, 231, 0.15) 50%,
        rgba(168, 85, 247, 0.15) 100%),
        #0a0e1a;
}

.theme-dark body,
.theme-dark html {
    background: var(--gradient-light) !important;
}

.theme-dark .card,
.theme-dark .panel,
.theme-dark .box {
    background: linear-gradient(135deg, 
        rgba(0, 153, 255, 0.08) 0%, 
        rgba(107, 92, 231, 0.08) 50%,
        rgba(168, 85, 247, 0.08) 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Scrollbar styling with gradient */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(107, 92, 231, 0.1);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-sidebar);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-primary);
}

/* Link colors with gradient feel */
a {
    color: #6b5ce7;
    transition: color 0.3s ease;
}

a:hover {
    color: #a855f7;
}

/* Input fields with gradient border */
input:focus, textarea:focus, select:focus {
    border-color: #6b5ce7 !important;
    box-shadow: 0 0 0 3px rgba(107, 92, 231, 0.1) !important;
    outline: none;
}

/* Badge/Tag with gradient */
.badge, .tag, .label {
    background: var(--gradient-primary);
    color: white;
    border: none;
}

/* Status indicators with enhanced colors */
.status-healthy, .success {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.status-progressing, .pending {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.status-degraded, .error {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.status-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}