/* ==========================================================================
   EDUNOVA MARKETING - STYLES SUR MESURE (CSS EXTENSION FOR TAILWIND)
   ========================================================================== */

/* Glow Effects */
.custom-glow {
    box-shadow: 0 20px 40px -15px rgba(30, 64, 175, 0.15);
}

.dark .custom-glow {
    box-shadow: 0 25px 50px -12px rgba(56, 189, 248, 0.15);
}

/* Glassmorphism Header & Cards */
.glass-panel {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dark .glass-panel {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Domain Pill Badge */
.domain-badge {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.12) 0%, rgba(30, 64, 175, 0.18) 100%);
    border: 1px solid rgba(56, 189, 248, 0.3);
}

/* Custom Scrollbar for Long Screenshots in Modal */
.modal-image-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.modal-image-container::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.1);
    border-radius: 9999px;
}

.dark .modal-image-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 9999px;
}

.modal-image-container::-webkit-scrollbar-thumb {
    background: rgba(30, 64, 175, 0.4);
    border-radius: 9999px;
}

.dark .modal-image-container::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.4);
    border-radius: 9999px;
}

.modal-image-container::-webkit-scrollbar-thumb:hover {
    background: rgba(30, 64, 175, 0.7);
}

.dark .modal-image-container::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.7);
}

/* Gallery Filter Transition */
.gallery-card {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, box-shadow 0.25s ease;
}

.gallery-card:hover {
    transform: translateY(-4px);
}

/* Device Switcher active state */
.device-btn-active {
    background-color: #1e40af !important;
    color: #ffffff !important;
    border-color: #1e40af !important;
    box-shadow: 0 4px 12px -2px rgba(30, 64, 175, 0.35);
}

.dark .device-btn-active {
    background-color: #38bdf8 !important;
    color: #0f172a !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 4px 12px -2px rgba(56, 189, 248, 0.35);
}

/* Modal Popup Overlay */
.gallery-modal-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.gallery-modal-content {
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-modal-overlay.active .gallery-modal-content {
    transform: scale(1) translateY(0);
}

/* Image Fade Transition in Modal */
#modal-image {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

#modal-image.changing {
    opacity: 0;
    transform: scale(0.98);
}

/* Toast notification */
#toast-notification {
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#toast-notification.show {
    transform: translateY(0);
    opacity: 1;
}

/* --- CSS TABS SYSTEM FOR ECOSYSTEM TOUR --- */
.role-panel {
    display: none !important;
}

#role-eleve:checked ~ div .panel-eleve,
#role-enseignant:checked ~ div .panel-enseignant,
#role-parent:checked ~ div .panel-parent,
#role-admin:checked ~ div .panel-admin {
    display: block !important;
}

#role-eleve:checked ~ div label[for="role-eleve"],
#role-enseignant:checked ~ div label[for="role-enseignant"],
#role-parent:checked ~ div label[for="role-parent"],
#role-admin:checked ~ div label[for="role-admin"] {
    background-color: #1e40af;
    color: #ffffff;
    border-color: #1e40af;
    box-shadow: 0 4px 12px -2px rgba(30, 64, 175, 0.35);
}

.dark #role-eleve:checked ~ div label[for="role-eleve"],
.dark #role-enseignant:checked ~ div label[for="role-enseignant"],
.dark #role-parent:checked ~ div label[for="role-parent"],
.dark #role-admin:checked ~ div label[for="role-admin"] {
    background-color: #38bdf8;
    color: #0f172a;
    border-color: #38bdf8;
    box-shadow: 0 4px 12px -2px rgba(56, 189, 248, 0.35);
}

/* Sub-views Student */
.student-view-panel {
    display: none !important;
}

#sub-student-home:checked ~ div .view-student-home,
#sub-student-qcm:checked ~ div .view-student-qcm,
#sub-student-tutor:checked ~ div .view-student-tutor,
#sub-student-offline:checked ~ div .view-student-offline {
    display: block !important;
}

#sub-student-home:checked ~ div label[for="sub-student-home"],
#sub-student-qcm:checked ~ div label[for="sub-student-qcm"],
#sub-student-tutor:checked ~ div label[for="sub-student-tutor"],
#sub-student-offline:checked ~ div label[for="sub-student-offline"] {
    background-color: #38bdf8;
    color: #0f172a;
    border-color: #38bdf8;
}

/* Sub-views Admin */
.admin-view-panel {
    display: none !important;
}

#sub-admin-tests:checked ~ div .view-admin-tests,
#sub-admin-print:checked ~ div .view-admin-print {
    display: block !important;
}

#sub-admin-tests:checked ~ div label[for="sub-admin-tests"],
#sub-admin-print:checked ~ div label[for="sub-admin-print"] {
    background-color: #38bdf8;
    color: #0f172a;
    border-color: #38bdf8;
}