/**
 * Dynamic Branding Styles for Academic Portal
 * Uses CSS variables for dynamic theming
 */

:root {
    /* Default colors - will be overridden by branding.js */
    --school-primary-color: #0D5C63;
    --school-secondary-color: #FF9F1C;
    
    /* Derived colors for UI elements */
    --primary: var(--school-primary-color);
    --primary-dark: color-mix(in srgb, var(--school-primary-color) 85%, black);
    --primary-light: color-mix(in srgb, var(--school-primary-color) 15%, white);
    --secondary: var(--school-secondary-color);
    --secondary-dark: color-mix(in srgb, var(--school-secondary-color) 85%, black);
    --secondary-light: color-mix(in srgb, var(--school-secondary-color) 15%, white);
}

/* Apply primary color to key UI elements */
.nav-item.active {
    background: var(--primary-light);
    color: var(--primary);
    border-left-color: var(--primary);
}

.nav-item:hover {
    color: var(--primary);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 40%, transparent);
}

.portal-logo {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.stat-icon {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

/* Form focus states */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Link colors */
a {
    color: var(--primary);
}

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

/* Button secondary with primary accent */
.btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* School name styling */
.school-name {
    color: var(--primary);
    font-weight: 600;
}

/* Logo container */
.portal-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    padding: 8px;
    background: white;
}

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

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

/* Progress bars */
.progress-bar {
    background-color: var(--primary);
}

/* Chart colors */
.chart-primary {
    color: var(--primary);
}

.chart-secondary {
    color: var(--secondary);
}