/* 
?? UNIVFORM MODERN COLORFUL THEME 
Vibrant yet professional color scheme
*/

:root {
    /* ?? Primary Brand Colors */
    --primary-gradient-start: #6a11cb; /* Vibrant Purple */
    --primary-gradient-end: #2575fc; /* Bright Blue */
    --primary-color: #4a00e0; /* Rich Purple */
    --primary-light: #8e2de2; /* Light Purple */
    --primary-dark: #2c007e; /* Dark Purple */
    /* ?? Secondary Colors */
    --secondary-color: #00b09b; /* Teal Green */
    --secondary-light: #96c93d; /* Lime Green */
    --secondary-dark: #00a8a8; /* Dark Teal */
    /* ?? Accent Colors */
    --accent-1: #ff6b6b; /* Coral Red */
    --accent-2: #ffd166; /* Sunny Yellow */
    --accent-3: #06d6a0; /* Mint Green */
    --accent-4: #118ab2; /* Ocean Blue */
    /* ?? Status Colors */
    --success-color: #06d6a0; /* Mint Green */
    --success-light: #c5f9e5; /* Light Mint */
    --warning-color: #ffd166; /* Sunny Yellow */
    --warning-light: #fff3cd; /* Light Yellow */
    --danger-color: #ef476f; /* Pink Red */
    --danger-light: #f8d7da; /* Light Pink */
    --info-color: #118ab2; /* Ocean Blue */
    --info-light: #d1ecf1; /* Light Blue */
    /* ??? Neutral Colors */
    --dark-color: #073b4c; /* Deep Navy */
    --light-color: #f8f9fa; /* Light Gray */
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    /* ?? Gradient Combinations */
    --gradient-primary: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
    --gradient-accent: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    --gradient-success: linear-gradient(135deg, var(--success-color), #0ac99c);
    --gradient-warning: linear-gradient(135deg, var(--warning-color), #ffc145);
    --gradient-danger: linear-gradient(135deg, var(--danger-color), #ff8fa3);
    /* ?? UI Element Colors */
    --border-color: #dee2e6;
    --shadow-color: rgba(106, 17, 203, 0.1);
    --card-bg: #ffffff;
    --modal-bg: rgba(255, 255, 255, 0.95);
    --overlay-bg: rgba(7, 59, 76, 0.7);
    /* ? Special Effects */
    --glow-effect: 0 0 20px rgba(106, 17, 203, 0.3);
    --hover-glow: 0 0 30px rgba(106, 17, 203, 0.4);
}

/* ?? THEME APPLICATIONS */

/* ?? Navbar - Gradient */
.navbar {
    background: var(--gradient-primary);
    box-shadow: 0 4px 20px rgba(106, 17, 203, 0.2);
}

/* ?? Dashboard Cards */
.dashboard-card.primary {
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: white;
}

.dashboard-card.success {
    background: linear-gradient(135deg, #06d6a0, #0ac99c);
    color: white;
}

.dashboard-card.warning {
    background: linear-gradient(135deg, #ffd166, #ffc145);
    color: var(--dark-color);
}

.dashboard-card.info {
    background: linear-gradient(135deg, #118ab2, #1ba5d1);
    color: white;
}

.dashboard-card.accent {
    background: linear-gradient(135deg, #ff6b6b, #ff8fa3);
    color: white;
}

/* ?? Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border: none;
    color: white;
    transition: all 0.3s ease;
}

    .btn-primary:hover {
        background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
        transform: translateY(-2px);
        box-shadow: var(--hover-glow);
    }

.btn-success {
    background: linear-gradient(135deg, var(--success-color), #0ac99c);
    border: none;
    color: white;
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning-color), #ffc145);
    border: none;
    color: var(--dark-color);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color), #ff8fa3);
    border: none;
    color: white;
}

.btn-info {
    background: linear-gradient(135deg, var(--info-color), #1ba5d1);
    border: none;
    color: white;
}

/* ?? Status Badges */
.badge.bg-success {
    background: var(--gradient-success) !important;
    color: white;
}

.badge.bg-warning {
    background: var(--gradient-warning) !important;
    color: var(--dark-color);
}

.badge.bg-danger {
    background: var(--gradient-danger) !important;
    color: white;
}

.badge.bg-info {
    background: linear-gradient(135deg, var(--info-color), #1ba5d1);
    color: white;
}

.badge.bg-primary {
    background: var(--gradient-primary) !important;
    color: white;
}

/* ??? Cards & Sections */
.card-header {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
    color: white;
    border-bottom: none;
}

.form-section {
    background: linear-gradient(135deg, rgba(248, 249, 250, 0.9), rgba(233, 236, 239, 0.9));
    border-left: 4px solid var(--secondary-color);
}

.form-title {
    color: var(--primary-color);
    border-bottom: 2px solid var(--secondary-light);
}

/* ?? Form Elements */
.form-control:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 0.25rem rgba(106, 17, 203, 0.25);
}

.form-check-input:checked {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* ?? File Upload Area */
.file-upload-area {
    background: linear-gradient(135deg, rgba(142, 45, 226, 0.1), rgba(37, 117, 252, 0.1));
    border: 2px dashed var(--primary-light);
}

    .file-upload-area:hover {
        background: linear-gradient(135deg, rgba(142, 45, 226, 0.2), rgba(37, 117, 252, 0.2));
        border-color: var(--secondary-color);
    }

/* ?? Process Timeline */
.timeline-step.completed .timeline-marker {
    background: var(--gradient-success);
    color: white;
}

.timeline-step.current .timeline-marker {
    background: var(--gradient-primary);
    color: white;
}

.timeline-step .timeline-marker {
    background: var(--gray-300);
    color: var(--gray-600);
}

/* ?? Calendar */
.calendar-day.today {
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.2), rgba(255, 193, 69, 0.2));
    border: 2px solid var(--warning-color);
}

.reservation-item.academic {
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.2), rgba(10, 201, 156, 0.2));
    border-left: 3px solid var(--success-color);
}

.reservation-item.cultural {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 143, 163, 0.2));
    border-left: 3px solid var(--accent-1);
}

.reservation-item.sports {
    background: linear-gradient(135deg, rgba(17, 138, 178, 0.2), rgba(27, 165, 209, 0.2));
    border-left: 3px solid var(--info-color);
}

/* ?? Progress Bars */
.progress-bar {
    background: var(--gradient-primary);
}

/* ?? Alerts */
.alert-success {
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.1), rgba(10, 201, 156, 0.1));
    border-left: 4px solid var(--success-color);
    color: var(--dark-color);
}

.alert-warning {
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.1), rgba(255, 193, 69, 0.1));
    border-left: 4px solid var(--warning-color);
    color: var(--dark-color);
}

.alert-danger {
    background: linear-gradient(135deg, rgba(239, 71, 111, 0.1), rgba(255, 143, 163, 0.1));
    border-left: 4px solid var(--danger-color);
    color: var(--dark-color);
}

.alert-info {
    background: linear-gradient(135deg, rgba(17, 138, 178, 0.1), rgba(27, 165, 209, 0.1));
    border-left: 4px solid var(--info-color);
    color: var(--dark-color);
}

/* ?? Mobile Menu */
.offcanvas-header {
    background: var(--gradient-primary);
    color: white;
}

/* ?? Quick Actions */
.quick-action-card {
    background: white;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

    .quick-action-card:hover {
        transform: translateY(-5px);
        border-color: var(--primary-light);
        box-shadow: 0 10px 25px rgba(106, 17, 203, 0.15);
    }

/* ?? Welcome Banner */
.welcome-banner {
    background: var(--gradient-primary);
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ?? Approver Status */
.approver-status.approved {
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.15), rgba(10, 201, 156, 0.15));
    border: 2px solid var(--success-color);
}

.approver-status.pending {
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.15), rgba(255, 193, 69, 0.15));
    border: 2px solid var(--warning-color);
}

/* ?? Table Styling */
.table-hover tbody tr:hover {
    background: linear-gradient(135deg, rgba(142, 45, 226, 0.05), rgba(37, 117, 252, 0.05));
}

.table thead th {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
    color: white;
    border: none;
}

/* ?? Form Steps */
.step-indicator .step.active {
    background: var(--gradient-primary);
    color: white;
}

.step-indicator .step.completed {
    background: var(--gradient-success);
    color: white;
}

/* ?? Notifications */
.notification.unread {
    background: linear-gradient(135deg, rgba(142, 45, 226, 0.05), rgba(37, 117, 252, 0.05));
    border-left: 4px solid var(--primary-color);
}

/* ?? Footer */
.footer {
    background: linear-gradient(135deg, var(--dark-color), #052835);
    color: white;
}

/* ? Special Highlights */
.highlight {
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.2), rgba(255, 193, 69, 0.2));
    padding: 10px;
    border-radius: 8px;
}

.glow-effect {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 10px rgba(106, 17, 203, 0.2);
    }

    to {
        box-shadow: 0 0 20px rgba(106, 17, 203, 0.4);
    }
}

/* ?? Colorful Tags */
.tag-primary {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
    color: white;
}

.tag-success {
    background: linear-gradient(135deg, var(--success-color), #0ac99c);
    color: white;
}

.tag-warning {
    background: linear-gradient(135deg, var(--warning-color), #ffc145);
    color: var(--dark-color);
}

.tag-danger {
    background: linear-gradient(135deg, var(--danger-color), #ff8fa3);
    color: white;
}

.tag-info {
    background: linear-gradient(135deg, var(--info-color), #1ba5d1);
    color: white;
}

/* ?? Loading Spinners */
.spinner-primary {
    border-color: var(--primary-light) transparent var(--primary-light) transparent;
}

/* ?? Achievement Badges */
.achievement-badge {
    background: var(--gradient-accent);
    color: white;
    box-shadow: var(--glow-effect);
}

/* ?? Chart Colors */
.chart-color-1 {
    background: var(--primary-color);
}

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

.chart-color-3 {
    background: var(--accent-1);
}

.chart-color-4 {
    background: var(--accent-2);
}

.chart-color-5 {
    background: var(--accent-3);
}

.chart-color-6 {
    background: var(--accent-4);
}

/* ?? Theme Switcher Options */
.theme-purple {
    --primary-gradient-start: #6a11cb;
    --primary-gradient-end: #2575fc;
}

.theme-teal {
    --primary-gradient-start: #00b09b;
    --primary-gradient-end: #96c93d;
}

.theme-coral {
    --primary-gradient-start: #ff6b6b;
    --primary-gradient-end: #ff8fa3;
}

.theme-ocean {
    --primary-gradient-start: #118ab2;
    --primary-gradient-end: #06d6a0;
}

/* ? Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(106, 17, 203, 0.15);
    }

.hover-glow:hover {
    box-shadow: var(--hover-glow);
}

/* ?? Color Utility Classes */
.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.text-success {
    color: var(--success-color) !important;
}

.text-warning {
    color: var(--warning-color) !important;
}

.text-danger {
    color: var(--danger-color) !important;
}

.text-info {
    color: var(--info-color) !important;
}

.text-accent-1 {
    color: var(--accent-1) !important;
}

.text-accent-2 {
    color: var(--accent-2) !important;
}

.text-accent-3 {
    color: var(--accent-3) !important;
}

.text-accent-4 {
    color: var(--accent-4) !important;
}

.bg-primary-gradient {
    background: var(--gradient-primary) !important;
}

.bg-secondary-gradient {
    background: var(--gradient-secondary) !important;
}

.bg-success-gradient {
    background: var(--gradient-success) !important;
}

.bg-warning-gradient {
    background: var(--gradient-warning) !important;
}

.bg-danger-gradient {
    background: var(--gradient-danger) !important;
}

/* ?? Final Touches */
::selection {
    background: rgba(142, 45, 226, 0.3);
    color: var(--dark-color);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--gray-200);
}

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

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

/* ?? Print Styles */
@media print {
    .no-print {
        display: none !important;
    }

    .print-color {
        color: var(--primary-color) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}