/* Custom CSS Overrides for EduVault Theme */
/* This file loads after style.css and style-ext.css to override default styles */

/* ===== HAMBURGER MENU VISIBILITY ===== */

/* FORCE mmenu-trigger to be visible and clickable on ALL screen sizes */
div.mmenu-trigger,
.mmenu-trigger,
.menu-right-side .mmenu-trigger,
header .mmenu-trigger {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    float: right !important;
    /* Remove all background and border styling */
    background: none !important;
    border: none !important;
    background-color: transparent !important;
    padding: 10px !important;
}

/* Force hidden dashboard navigation to stay hidden */
.dashboard-nav-inner[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Hide dashboard-nav sidebar on mobile/tablet (< 1201px) */
@media (max-width: 1200px) {
    .dashboard-nav {
        min-width: 90% !important;
        max-width: 90% !important;
        margin: 0 5% !important;
        border-radius: 0 0 4px 4px !important;
        position: relative !important;
        min-height: auto !important;
        opacity: 1 !important;
        visibility: hidden !important;
        max-height: 0 !important;
        padding: 0 !important;
        transition: all 0.3s !important;
        display: none !important;
        overflow: hidden !important;
    }

    /* Expand dashboard-content to full width when nav is hidden */
    .dashboard-content {
        padding: 20px 20px !important;
        padding-bottom: 0 !important;
        height: auto !important;
        width: 100% !important;
        margin-left: 0 !important;
        flex: 1 !important;
    }

    /* Make dashboard container adjust properly */
    #dashboard {
        display: block !important;
        width: 100% !important;
}
}

/* Login brand icon */
.login-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    text-decoration: none;
}

.login-brand-circle {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4935B5 0%, #33208C 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(51, 32, 140, 0.25);
}

.login-brand-circle .fa {
    font-size: 45px;
    color: #F7C948;
    padding-top: 7px;
}

.button-shadow {
    background: linear-gradient(135deg, #4935B5 0%, #33208C 100%) !important;
    color: #F7C948 !important;
    box-shadow: 0 8px 18px rgba(51, 32, 140, 0.25);
    border: none !important;
}

.button-shadow:hover,
.button-shadow:focus {
    color: #ffffff !important;
}

.button-gray {
    background-color: #66676b !important;
    color: #cecece !important;
    border: none !important;
}

.button-gray:hover,
.button-gray:focus {
    color: #ffffff !important;
}


.button-wide {
    background-color: #66676b !important;
    top: 0 !important;
    padding: 15px 50px !important;
    position: relative !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    margin-right: 6px !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 50px !important;
}

/* Button loading spinner styles */
.button .fa-spinner,
.button .fa-spin {
    font-size: 14px !important;
    margin-right: 5px;
    display: inline-block;
    animation: fa-spin 1s infinite linear;
    color: #ffffff !important;
}

.button .button-text {
    display: inline;
}

.button:disabled {
    opacity: 0.7;
    cursor: not-allowed !important;
}

/* Ensure spinner is white on button-shadow buttons */
.button-shadow .fa-spinner,
.button-shadow .fa-spin,
.button-wide .fa-spinner,
.button-wide .fa-spin {
    color: #ffffff !important;
}

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

/* Desktop specific rules */
@media only screen and (min-width: 1201px) {
    div.mmenu-trigger,
    .mmenu-trigger,
    .menu-right-side .mmenu-trigger,
    header .mmenu-trigger {
        display: inline-block !important;
        visibility: visible !important;
        float: right !important;
    }
}

/* Mobile specific rules */
@media only screen and (max-width: 1200px) {
    /* Hide dashboard trigger on mobile */
    a.dashboard-responsive-nav-trigger {
        display: none !important;
    }

    .hamburger-menu-container {
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 1000000 !important;
        width: auto !important;
        transform: none !important;
    }

    /* Force hamburger icon to stay in viewport during MMMenu slide */
    body .mmenu-trigger,
    html .mmenu-trigger,
    .mm-page .mmenu-trigger,
    .mm-slideout .mmenu-trigger,
    .mm-opened .mmenu-trigger {
        position: static !important;
        transform: none !important;
        right: auto !important;
        left: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* AGGRESSIVE: Keep hamburger fixed when mmenu is active */
    .hamburger-menu-container,
    .mm-slideout .hamburger-menu-container,
    .mm-opened .hamburger-menu-container,
    .mm-page .hamburger-menu-container,
    body.mm-opened .hamburger-menu-container,
    html.mm-opened .hamburger-menu-container,
    .mm-wrapper .hamburger-menu-container {
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 9999999 !important; /* Ultra high z-index */
        transform: none !important;
        transition: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        height: auto !important;
    }

    /* Ensure hamburger button itself stays visible */
    .mm-opened .hamburger-menu-container .mmenu-trigger,
    .mm-opened .hamburger-menu-container .hamburger,
    body.mm-opened .hamburger-menu-container .mmenu-trigger,
    body.mm-opened .hamburger-menu-container .hamburger {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 9999999 !important;
    }

    /* Disable mmenu's default close button and gestures */
    .mm-menu .mm-navbar .mm-btn.mm-btn_prev,
    .mm-menu .mm-navbar .mm-title {
        display: none !important;
    }

    /* Completely disable background click-to-close */
    .mm-wrapper_background,
    .mm-wrapper__blocker {
        pointer-events: none !important;
        display: none !important;
        visibility: hidden !important;
    }

    /* Ensure extracted hamburger is always visible */
    .mmenu-extracted {
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 9999999 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ===== HAMBURGER ICON STYLING ===== */

/* Make hamburger button visible and clickable */
.hamburger {
    padding: 12px !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0;
    overflow: visible;
    pointer-events: auto !important;
    color: #555555 !important;
    min-width: 40px !important;
    min-height: 40px !important;
    box-shadow: none;
}

.hamburger i {
    font-size: 22px;
    line-height: 1;
}

.transparent-header .hamburger,
header.transparent .hamburger {
    color: #ffffff !important;
}

/* Desktop dropdown menu for hamburger */
.hamburger-menu-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

/* Hover scale effect for hamburger icon - Desktop only */
@media (min-width: 1201px) {
    .mmenu-trigger .hamburger i {
        transition: transform 0.3s ease;
        transform-origin: center;
    }

    .mmenu-trigger .hamburger:hover i {
        transform: scale(1.1);
    }

    /* Ensure both icon states have the same hover effect */
    .mmenu-trigger .hamburger:hover i.sl.sl-icon-Menu,
    .mmenu-trigger .hamburger:hover i.im.im-icon-Close {
        transform: scale(1.1);
    }
}

.menu-right-side {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 16px;
    width: 100%;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.chosen-container-active.chosen-with-drop .chosen-drop {
    z-index: 999;
}

.desktop-menu-panel {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 200px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 34, 58, 0.15);
    padding: 10px 0;
    z-index: 10000;
    /* Animation properties */
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.desktop-menu-panel.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.desktop-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.desktop-menu-list li {
    margin: 0;
}

.desktop-menu-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: #2c3038;
    font-size: 14px;
    text-decoration: none;
}

.desktop-menu-list li a i {
    font-size: 16px;
    width: 18px;
    text-align: center;
}

.desktop-menu-list li a:hover {
    background: #f4f6fb;
    color: #1f59d1;
}

@media (max-width: 1200px) {
    .desktop-menu-panel {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* ===== SIMPLIFIED LOGO STYLING ===== */

/* Logo container - consistent white background across all breakpoints */
.dashboard #logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 80px !important;
    background-color: #fff !important; /* White background for light logo */
    position: relative !important;
    z-index: 10;
    padding: 0 !important;
    padding-left: 12px !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
}

/* Logo link - auto-centered */
.dashboard #logo a {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    margin: 0 !important;
    position: relative;
}

/* Logo image - allow natural sizing with max width */
.dashboard #logo img,
.dashboard #logo a img {
    width: auto !important;
    max-width: 150px !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
    display: block !important;
    margin: 0 !important;
}

/* Always Sticky Header Styles */
#header.always-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    background-color: #fff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
}

/* Add padding to body to compensate for fixed header */
body {
    padding-top: 80px !important; /* Adjust based on your header height */
}

/* Optional: Different styling when scrolled */
#header.always-sticky.scrolled {
    box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
}

/* Logo max width for sticky header */
#header.always-sticky #logo img {
    max-width: 150px !important;
}

/* ===== VALIDATION ERROR STYLING ===== */

/* Form validation error messages */
.error,
.field-validation-error {
    color: #e74c3c !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    display: block !important;
    margin-top: 5px !important;
    line-height: 1.3 !important;
}

/* Validation summary styling */
.notification.error {
    background-color: #fdedec !important;
    border: 1px solid #e74c3c !important;
    color: #e74c3c !important;
    padding: 15px !important;
    border-radius: 4px !important;
    margin-bottom: 20px !important;
}

.notification.error p {
    margin: 0 !important;
    font-weight: 600 !important;
}

.notification.error .close {
    float: right !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    opacity: 0.6 !important;
}

.notification.error .close:hover {
    opacity: 1 !important;
}

/* Input field error state styling */
.input-validation-error,
.input-text.input-validation-error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.2) !important;
}

/* Required field asterisk */
.required {
    color: #e74c3c !important;
    font-weight: bold !important;
    margin-left: 3px !important;
}




/* Override any conflicting rules from other CSS files */
body .dashboard #logo,
body #dashboard #logo,
.dashboard-nav + .dashboard-content #logo,
#header-container.dashboard #logo {
    background-color: #fff !important;
}

/* Ensure menu left side aligns properly */
.menu-left-side {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Clean header background */
.dashboard #header {
    background-color: #fff !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
}

/* Remove any dashboard-logo references (cleanup) */
.dashboard-logo,
a.dashboard-logo,
.dashboard #logo a.dashboard-logo {
    display: none !important;
}

/* ===== MOBILE MENU SECTION HEADERS ===== */

/* Style menu section headers in mobile menu */
.mm-menu .menu-section-header {
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
    margin-top: 10px !important;
}

.mm-menu .menu-section-header:first-child {
    margin-top: 0 !important;
    border-top: none !important;
}

.mm-menu .menu-section-header span {
    display: block !important;
    padding: 10px 20px !important;
    font-weight: bold !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    color: #6c757d !important;
    letter-spacing: 0.5px !important;
}

/* ===== REGISTRATION FORM SECTIONS ===== */

/* Additional information sections - conditionally hidden */
.additional-info-section {
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.additional-info-section.hidden {
    display: none !important;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

/* Toggle button for additional sections (admin/development use) */
.toggle-additional-info {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #6c757d;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    margin: 20px 0;
    text-align: center;
    display: block;
    width: 100%;
}

.toggle-additional-info:hover {
    background: #e9ecef;
    color: #495057;
}

/* Form section headers styling */
.form-section h5 {
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 20px !important;
    color: #333;
    font-weight: 600;
}

.form-section h5 small {
    color: #6c757d;
    font-weight: normal;
    font-size: 11px;
}

/* ===== MENU ICON FIXES ===== */

/* Fix icon width in dashboard navigation and mobile menu */
.dashboard-nav ul li a i,
.dashboard-nav-inner ul li a i,
.mm-menu ul li a i {
    width: 20px !important;
    min-width: 20px !important;
    text-align: center !important;
    display: inline-block !important;
    margin-right: 10px !important;
}

/* Ensure consistent icon styling for sl and im icons */
.dashboard-nav ul li a i[class*="sl-"],
.dashboard-nav-inner ul li a i[class*="sl-"],
.mm-menu ul li a i[class*="sl-"],
.dashboard-nav ul li a i[class*="im-"],
.dashboard-nav-inner ul li a i[class*="im-"],
.mm-menu ul li a i[class*="im-"] {
    font-size: 16px !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}

/* ===== CUSTOM BUTTON STYLES ===== */

/* Light grey button for secondary actions (e.g., gear icon dropdown trigger) */
.button-lightgrey {
    background-color: rgb(213, 215, 223) !important;
    color: #666 !important;
    border: none !important;
}

.button-lightgrey:hover {
    background-color: rgb(195, 197, 205) !important;
    color: #333 !important;
}

.button-lightgrey:active,
.button-lightgrey.active {
    background-color: rgb(180, 182, 190) !important;
    color: #333 !important;
}

/* 3-dot icon button - icon only, no background */
.actions-menu-trigger {
    background: none !important;
    border: none !important;
    padding: 8px 12px !important;
    cursor: pointer;
    color: #999 !important;
    font-size: 20px;
    transition: all 0.2s ease;
    min-width: 0;
    width: auto;
}

.actions-menu-trigger:hover {
    color: #666 !important;
    background: none !important;
    transform: none !important;
}

.actions-menu-trigger:active,
.actions-menu.active .actions-menu-trigger {
    color: #333 !important;
    background: none !important;
}

.actions-menu-trigger:focus {
    outline: none;
    box-shadow: none !important;
}