:root {

            --primary: #8B5CF6;

            --primary-light: #f3e8ff;

            --primary-dark: #7c3aed;

            --primary-gradient: linear-gradient(135deg, #8B5CF6 0%, #7c3aed 100%);

            --text-dark: #212529;

            --bg-light: #f8fafc;

            --border-color: #e2e8f0;

            --success: #10b981;

            --accent: #f59e0b;

            --warning: #f59e0b;

            --error: #ef4444;

        }

        body { 

            font-family: 'Inter', sans-serif; 

            background: var(--bg-light); 

            color: var(--text-dark); 

            padding: 15px; 

        }

        .dashboard-container { 

            max-width: 1400px; 

            margin: 0 auto; 

        }

        .config-card { 

            background: #fff; 

            border-radius: 16px; 

            box-shadow: 0 8px 20px rgba(139, 92, 246, 0.15); 

            height: 100%; 

            border: 1px solid var(--border-color);

        }

        /* Header responsive */

        .dashboard-header {

            display: flex;

            flex-wrap: wrap;

            align-items: center;

            gap: 12px;

            margin-bottom: 1.5rem;

            margin-top:1.5rem;

        }

        .dashboard-header h1 {

            margin: 0;

            font-size: 1.75rem;

            flex: 1;

            min-width: 280px;

            background: var(--primary-gradient);

            -webkit-background-clip: text;

            -webkit-text-fill: transparent;

            background-clip: text;

        }

        .dashboard-header i {

            font-size: 1.5rem;

            color: var(--primary);

        }

        /* Tabs - Mobile optimized */

        .nav-pills {

            overflow-x: auto;

            flex-wrap: nowrap;

            padding-bottom: 8px;

            margin-bottom: 16px;

            background: var(--primary-light);

            border-radius: 12px;

            padding: 8px;

        }

        .nav-pills .nav-link { 

            color: var(--text-dark); 

            border-radius: 10px; 

            font-weight: 600; 

            padding: 10px 18px; 

            white-space: nowrap;

            min-width: 140px;

            text-align: center;

            background: white;

            border: 2px solid var(--border-color);

            transition: all 0.2s ease;

        }

        .nav-pills .nav-link:hover {

            background: var(--primary-light);

            border-color: var(--primary);

        }

        .nav-pills .nav-link.active { 

            background: var(--primary-gradient);

            color: #fff; 

            border-color: var(--primary);

        }

        .tab-pane { 

            padding: 16px 0; 

        }

        /* Categories (Chips) */

        .category-chip { 

            display: inline-flex; 

            align-items: center; 

            background: var(--primary-light);

            color: var(--primary-dark); 

            border-radius: 50px; 

            padding: 0.25rem 0.85rem; 

            margin: 4px; 

            font-size: 0.85rem; 

            font-weight: 600;

            border: 2px solid var(--primary);

            max-width: 120px;

            overflow: hidden;

            text-overflow: ellipsis;

        }

        .category-chip-text {

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

            max-width: 90px;

        }

        .category-chip .remove-btn { 

            cursor: pointer; 

            margin-left: 6px; 

            color: var(--primary-dark); 

            opacity: 0.7; 

            transition: 0.15s; 

            font-size: 0.8rem;

        }

        .category-chip .remove-btn:hover { 

            opacity: 1; 

            color: var(--error); 

        }

        /* Category input */

        .category-input-section {

            margin-bottom: 16px;

        }

        .category-input-section .input-group {

            flex-wrap: nowrap;

        }

        .category-input-section input {

            min-width: 0;

            flex: 1;

            border: 2px solid var(--border-color);

            border-radius: 12px;

            padding: 10px 14px;

        }

        .category-input-section .btn {

            white-space: nowrap;

            border-radius: 12px;

            padding: 10px 16px;

            font-weight: 600;

            background: var(--primary-gradient);

            border: none;

        }

        .category-input-section .btn:hover {

            opacity: 0.9;

        }

        /* Warning banner */

        .warning-banner {

            background: #fffbeb;

            border: 2px solid var(--warning);

            border-radius: 12px;

            padding: 16px;

            margin-bottom: 20px;

            color: #975a16;

        }

        .warning-banner h5 {

            color: var(--warning);

            margin-bottom: 8px;

            font-weight: 700;

        }

        .warning-banner ul {

            margin: 8px 0 0 0;

            padding-left: 20px;

        }

        .warning-banner li {

            margin-bottom: 4px;

            font-size: 0.95rem;

        }

        /* Toast notification */

        .toast-container {

            position: fixed;

            top: 20px;

            right: 20px;

            z-index: 1050;

        }

        .toast {

            min-width: 300px;

            border-radius: 8px;

            box-shadow: 0 4px 12px rgba(0,0,0,0.15);

        }

        .toast-header {

            background: var(--error);

            color: white;

            border-radius: 8px 8px 0 0 !important;

        }

        .toast-body {

            color: var(--text-dark);

        }

        /* Non-editable section */

        .non-editable-section {

            background-color: #f8f9fa;

            border: 2px dashed #dee2e6;

            border-radius: 12px;

            padding: 16px;

            margin-top: 20px;

            opacity: 0.9;

        }

        .non-editable-section h5 {

            color: #6c757d;

            font-weight: 600;

            margin-bottom: 12px;

            display: flex;

            align-items: center;

            gap: 8px;

        }

        .non-editable-section h5 i {

            color: #adb5bd;

        }

        .alumni-chip {

            background: #e9ecef;

            color: #6c757d;

            border: 1px solid #ced4da;

            padding: 4px 12px;

            border-radius: 20px;

            font-size: 0.85rem;

            font-weight: 500;

            display: inline-block;

            margin: 4px;

        }

        /* Department Builder (Accordion) */

        .dept-title-input, .level-name-input {

            font-size: 1.15rem; 

            font-weight: 700; 

            padding: 0; 

            border: 2px solid var(--border-color);

            background: transparent; 

            transition: all 0.2s;

            width: 100%;

            color: var(--primary-dark);

            border-radius: 8px;

        }

        .dept-title-input:focus, .level-name-input:focus {

            background: #f8fafc; 

            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);

            border-color: var(--primary);

        }

        .level-item-card { 

            background: #fff; 

            border: 2px dashed var(--border-color); 

            border-radius: 12px; 

            padding: 16px; 

            margin-bottom: 16px;

            display: flex; 

            flex-direction: column;

            gap: 12px; 

        }

        .level-input-group {

            display: flex;

            flex-direction: column;

            gap: 8px;

        }

        .level-input-group label {

            font-size: 0.85rem;

            color: #64748b;

            margin: 0;

            font-weight: 600;

        }

        .level-input-group input {

            padding: 10px 14px;

            font-size: 0.95rem;

            border: 2px solid var(--border-color);

            border-radius: 10px;

        }

        /* Category checkboxes */

        .category-checkboxes {

            display: flex;

            flex-wrap: wrap;

            gap: 12px;

            margin-top: 8px;

        }

        .category-checkbox-item {

            display: flex;

            align-items: center;

            gap: 8px;

            padding: 8px 12px;

            background: var(--primary-light);

            border-radius: 8px;

            border: 2px solid var(--border-color);

            transition: all 0.2s ease;

        }

        .category-checkbox-item:hover {

            border-color: var(--primary);

            background: #e9d5ff;

        }

        .category-checkbox-item input[type="checkbox"] {

            width: 18px;

            height: 18px;

            accent-color: var(--primary);

        }

        .category-checkbox-item label {

            margin: 0;

            font-size: 0.9rem;

            font-weight: 500;

            color: var(--primary-dark);

        }

        .level-actions {

            display: flex;

            gap: 10px;

            margin-top: 10px;

            flex-wrap: wrap;

        }

        .level-actions .btn {

            padding: 8px 16px;

            font-size: 0.9rem;

            border-radius: 8px;

            font-weight: 600;

        }

        /* Template buttons */

        .template-buttons {

            display: flex;

            flex-wrap: wrap;

            gap: 10px;

            margin-bottom: 16px;

        }

        .template-buttons .btn {

            padding: 8px 16px;

            font-size: 0.9rem;

            white-space: nowrap;

            min-width: fit-content;

            border-radius: 10px;

            font-weight: 600;

            border: 2px solid var(--border-color);

            background: white;

        }

        .template-buttons .btn:hover {

            background: var(--primary-light);

            border-color: var(--primary);

        }

        .template-buttons .btn-primary {

            background: var(--primary-gradient);

            border: none;

            color: white;

        }

        .template-buttons .btn-primary:hover {

            opacity: 0.9;

        }

        .template-buttons .btn i {

            margin-right: 6px;

        }

        /* Clear button */

        .clear-button {

            margin-top: 12px;

        }

        .clear-button .btn {

            border-radius: 10px;

            padding: 8px 16px;

            font-size: 0.9rem;

            font-weight: 600;

        }

        /* Accordion button */

        .accordion-button {

            padding: 14px 20px !important;

            background: var(--primary-light) !important;

            color: var(--primary-dark) !important;

            font-weight: 700 !important;

            border-radius: 12px !important;

            border: 2px solid var(--border-color) !important;

            box-shadow: none !important;

        }

        .accordion-button:not(.collapsed) {

            background: white !important;

            border-color: var(--primary) !important;

            color: var(--primary-dark) !important;

        }

        .accordion-button:focus {

            border-color: var(--border-color) !important;

            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25) !important;

        }

        .accordion-button::after {

            background-image: none !important;

            color: var(--primary) !important;

            font-family: "bootstrap-icons" !important;

            content: "\f487" !important;

            font-size: 1rem !important;

            transition: transform 0.2s;

        }

        .accordion-button:not(.collapsed)::after {

            transform: rotate(180deg);

        }

        /* Accordion body */

        .accordion-body {

            background: white;

            border: 2px solid var(--border-color);

            border-top: none;

            padding: 20px !important;

            border-radius: 0 0 12px 12px;

        }

        /* Department actions */

        .dept-actions {

            display: flex;

            flex-wrap: wrap;

            gap: 12px;

            margin-top: 16px;

        }

        .dept-actions .btn {

            padding: 10px 18px;

            font-size: 0.95rem;

            white-space: nowrap;

            min-width: fit-content;

            border-radius: 10px;

            font-weight: 600;

        }

        .dept-actions .btn-add-level {

            background: var(--primary-light);

            color: var(--primary-dark);

            border: 2px solid var(--primary);

        }

        .dept-actions .btn-add-level:hover {

            background: var(--primary);

            color: white;

        }

        .dept-actions .btn-outline-danger {

            border: 2px solid #fecaca;

            color: #dc2626;

        }

        .dept-actions .btn-outline-danger:hover {

            background: #fee2e2;

        }

        .dept-actions .btn i {

            margin-right: 6px;

        }

        /* Add department button */

        .add-department-section {

            margin-top: 20px;

        }

        .add-department-section .btn {

            width: 100%;

            padding: 14px 20px;

            font-size: 1.05rem;

            font-weight: 700;

            white-space: normal;

            background: var(--primary-gradient);

            color: white;

            border: none;

            border-radius: 14px;

        }

        .add-department-section .btn:hover {

            opacity: 0.95;

            transform: translateY(-2px);

        }

        .add-department-section .btn i {

            margin-right: 10px;

        }

        /* Class Preview Panel */

        .preview-panel { 

            background: linear-gradient(135deg, #8B5CF6 0%, #7c3aed 100%);

            color: #fff; 

            border-radius: 16px; 

            padding: 24px; 

            box-shadow: 0 12px 28px rgba(139, 92, 246, 0.3); 

        }

        .preview-panel h4 { 

            font-size: 1.4rem;

            margin-bottom: 20px; 

            font-weight: 800;

        }

        .preview-panel i {

            margin-right: 10px;

            font-size: 1.2rem;

        }

        .preview-panel p {

            font-size: 0.95rem;

            margin-bottom: 24px;

            opacity: 0.9;

        }

        .preview-table { 

            min-width: 100%;

        }

        .preview-table th { 

            background: rgba(255, 255, 255, 0.15);

            backdrop-filter: blur(10px);

            color: #fff; 

            border-color: rgba(255, 255, 255, 0.2);

            font-size: 0.9rem;

            padding: 12px 16px;

            font-weight: 700;

        }

        .preview-table td { 

            font-size: 0.85rem; 

            color: #e2e8f0; 

            padding: 12px 16px;

            background: rgba(255, 255, 255, 0.05);

        }

        .preview-table td:nth-child(2) { 

            color: #fcd34d; 

            font-weight: 700; 

        }

        /* Submit button */

        .submit-button-section {

            margin-top: 24px;

        }

        .submit-button-section .btn {

            width: 100%;

            padding: 16px 20px;

            font-size: 1.15rem;

            font-weight: 800;

            white-space: normal;

            background: #10b981;

            color: white;

            border: none;

            border-radius: 14px;

            box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);

        }

        .submit-button-section .btn:hover {

            background: #059669;

            transform: translateY(-2px);

        }

        .submit-button-section .btn i {

            margin-right: 10px;

        }

        /* Utilities */

        .btn-primary { 

            background: var(--primary-gradient);

            border: none; 

        }

        .btn-primary:hover { 

            opacity: 0.9;

        }

        .btn-success { 

            background: #10b981;

            border: none;

        }

        .btn-add-level { 

            background: var(--primary-light);

            border: 2px solid var(--primary);

            color: var(--primary-dark);

            font-weight: 600;

        }

        .btn-add-level:hover { 

            background: var(--primary);

            color: white;

        }

        /* Empty state */

        .empty-state {

            text-align: center;

            padding: 28px;

            color: #94a3b8;

        }

        .empty-state i {

            font-size: 2.5rem;

            margin-bottom: 16px;

            color: rgba(255, 255, 255, 0.3);

        }

        .empty-state div {

            font-size: 1.1rem;

            font-weight: 600;

        }

        /* Scroll to top button */

        .scroll-to-top {

            position: fixed;

            bottom: 20px;

            right: 20px;

            width: 50px;

            height: 50px;

            background: var(--primary-gradient);

            color: white;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 1.25rem;

            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);

            cursor: pointer;

            z-index: 1000;

            transition: all 0.3s ease;

            transform: rotate(180deg); /* Points upward */

            display: none;

        }

        .scroll-to-top:hover {

            transform: rotate(180deg) scale(1.1);

            box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);

        }

        

           .main-title {

            font-weight: 800;

            background: var(--primary-gradient);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

            margin-bottom: 8px;

            font-size: 2.5rem;

        }

        

        /* Responsive adjustments */

        @media (max-width: 768px) {

            .toast-container {

                top: 10px;

                right: 10px;

                min-width: 280px;

            }

            .scroll-to-top {

                bottom: 15px;

                right: 15px;

                width: 45px;

                height: 45px;

            }

            body {

                padding: 12px;

            }

            .dashboard-header h1 {

                font-size: 1.5rem;

            }

            .config-card {

                border-radius: 12px;

            }

            .preview-panel {

                padding: 20px;

            }

            .preview-panel h4 {

                font-size: 1.25rem;

            }

            .level-item-card {

                padding: 14px;

            }

            .accordion-button {

                padding: 12px 16px !important;

            }

            .accordion-body {

                padding: 16px !important;

            }

            .category-checkboxes {

                gap: 8px;

            }

            .category-checkbox-item {

                padding: 6px 10px;

                font-size: 0.85rem;

            }

        }

        @media (max-width: 576px) {

            .dashboard-header {

                gap: 8px;

            }

            .dashboard-header h1 {

                font-size: 1.35rem;

            }

            .nav-pills .nav-link {

                padding: 8px 14px;

                font-size: 0.85rem;

                min-width: 120px;

            }

            .template-buttons .btn,

            .dept-actions .btn {

                padding: 6px 12px;

                font-size: 0.85rem;

            }

            .add-department-section .btn,

            .submit-button-section .btn {

                padding: 14px 16px;

                font-size: 1.05rem;

            }

            .category-checkbox-item {

                padding: 5px 8px;

                font-size: 0.8rem;

            }

        }