/* SPX Platform Branding Styles */

:root {
    /* SPX Brand Colors */
    --spx-primary: #00796B;      /* Teal - Primary brand color */
    --spx-secondary: #00ACC1;    /* Cyan - Secondary accent */
    --spx-accent: #4CAF50;       /* Green - Success/Positive */
    --spx-dark: #004D40;         /* Dark Teal - Headers/Text */
    --spx-light: #B2DFDB;        /* Light Teal - Backgrounds */
    
    /* Status Colors */
    --spx-success: #4CAF50;
    --spx-warning: #FF9800;
    --spx-error: #F44336;
    --spx-info: #2196F3;
}

/* Gradient Backgrounds */
.spx-gradient {
    background: linear-gradient(135deg, var(--spx-primary) 0%, var(--spx-secondary) 100%);
}

.spx-gradient-reverse {
    background: linear-gradient(135deg, var(--spx-secondary) 0%, var(--spx-accent) 100%);
}

.spx-gradient-dark {
    background: linear-gradient(135deg, var(--spx-dark) 0%, var(--spx-primary) 100%);
}

/* Logo Styling */
.spx-logo {
    height: 40px;
    width: auto;
    transition: transform 0.3s ease;
}

.spx-logo:hover {
    transform: scale(1.05);
}

.spx-logo-large {
    height: 80px;
    width: auto;
}

.spx-logo-small {
    height: 24px;
    width: auto;
}

/* Custom Buttons */
.btn-spx-primary {
    background: var(--spx-primary);
    color: white;
    border: none;
}

.btn-spx-primary:hover {
    background: var(--spx-dark);
}

.btn-spx-secondary {
    background: var(--spx-secondary);
    color: white;
    border: none;
}

.btn-spx-secondary:hover {
    background: var(--spx-primary);
}

/* Card Enhancements */
.card-spx {
    border-left: 4px solid var(--spx-primary);
    transition: all 0.3s ease;
}

.card-spx:hover {
    border-left-color: var(--spx-accent);
    box-shadow: 0 10px 25px -5px rgba(0, 121, 107, 0.2);
}

/* Badge Colors */
.badge-spx-primary {
    background: var(--spx-primary);
    color: white;
}

.badge-spx-secondary {
    background: var(--spx-secondary);
    color: white;
}

.badge-spx-success {
    background: var(--spx-success);
    color: white;
}

/* Navigation Enhancements */
.navbar.spx-gradient {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.navbar .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Status Indicators */
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.status-indicator.approved {
    background: var(--spx-success);
    box-shadow: 0 0 8px var(--spx-success);
}

.status-indicator.pending {
    background: var(--spx-warning);
    box-shadow: 0 0 8px var(--spx-warning);
}

.status-indicator.rejected {
    background: var(--spx-error);
    box-shadow: 0 0 8px var(--spx-error);
}

.status-indicator.under_review {
    background: var(--spx-info);
    box-shadow: 0 0 8px var(--spx-info);
}

/* Progress Indicators */
.progress-spx {
    background: var(--spx-light);
}

.progress-spx::-webkit-progress-value {
    background: var(--spx-gradient);
}

.progress-spx::-moz-progress-bar {
    background: var(--spx-gradient);
}

/* Hero Sections */
.hero-spx {
    background: linear-gradient(135deg, var(--spx-primary) 0%, var(--spx-secondary) 50%, var(--spx-accent) 100%);
    border-radius: 1rem;
    padding: 2rem;
    color: white;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Link Colors */
a.text-spx-primary {
    color: var(--spx-primary);
}

a.text-spx-primary:hover {
    color: var(--spx-dark);
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--spx-primary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--spx-dark);
}

/* Loading Spinner */
.spinner-spx {
    border: 4px solid var(--spx-light);
    border-top: 4px solid var(--spx-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Logo */
@media (max-width: 640px) {
    .spx-logo {
        height: 32px;
    }
    
    .spx-logo-large {
        height: 60px;
    }
}