/* =========================================================
MOBILE TOGGLE
========================================================= */

.mobile-toggle {

    display: none;
}


/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:991px) {

    .sidebar {

        left: -100%;
    }

    .sidebar.show {

        left: 0;
    }

    .main-content {

        margin-left: 0;
    }

    .mobile-toggle {

        display: inline-flex;
    }
}


@media(max-width:576px) {

    .auth-card {

        padding: 30px;
    }

    .dashboard-card h2 {

        font-size: 28px;
    }

    .top-navbar {

        padding: 0 16px;
    }

    .main-content {

        padding: 16px;
    }
}

.table>:not(caption)>*>* {

    background-color: transparent;
    color: white;
}

th {
    color: var(--text-primary-light) !important;

}

/* ======================================================
SIDEBAR PROFILE
====================================================== */

.sidebar-profile-dropdown {

    margin-top: auto;

    padding-top: 20px;
}


.sidebar-profile-btn {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    border: none;

    background: rgba(255, 255, 255, .03);

    border-radius: 18px;

    padding: 14px;

    color: #fff;

    transition: .3s;
}


.sidebar-profile-btn:hover {

    background: rgba(255, 255, 255, .06);
}


.sidebar-profile-avatar {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid rgba(255, 255, 255, .08);
}


.sidebar-profile-menu {

    margin-top: 12px;

    background: rgba(255, 255, 255, .03);

    border-radius: 18px;

    overflow: hidden;
}


.sidebar-profile-menu a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 16px;

    color: #fff;

    text-decoration: none;

    transition: .3s;
}


.sidebar-profile-menu a:hover {

    background: rgba(255, 255, 255, .06);
}


.sidebar-divider {

    height: 1px;

    background: rgba(255, 255, 255, .08);

    margin: 4px 0;
}

/* ======================================================
NOTIFICATION
====================================================== */

.notification-wrapper {

    position: relative;
}


.notification-panel {

    position: absolute;

    top: 60px;

    right: 0;

    width: 360px;

    background: #132235;

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 20px;

    overflow: hidden;

    z-index: 9999;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}


.notification-header {

    padding: 18px 20px;

    font-weight: 700;

    border-bottom: 1px solid rgba(255, 255, 255, .06);

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.notification-actions {

    display: flex;

    align-items: center;

    gap: 8px;
}


.notification-action-btn {

    width: 34px;

    height: 34px;

    border: 1px solid rgba(255, 255, 255, .10);

    border-radius: 10px;

    background: rgba(255, 255, 255, .04);

    color: white;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: .25s;
}


.notification-action-btn:hover {

    background: rgba(255, 255, 255, .10);
}

.push-status-panel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(79, 209, 208, .08);
    color: #d8fbfb;
    font-size: 13px;
    line-height: 1.35;
}

.push-status-panel i {
    margin-top: 1px;
    color: #64edf0;
}

.push-status-panel span {
    min-width: 0;
    flex: 1;
}

.push-status-panel button {
    flex: 0 0 auto;
    border: 1px solid rgba(79, 209, 208, .36);
    border-radius: 999px;
    background: rgba(79, 209, 208, .18);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 10px;
}

.push-status-panel button:hover {
    background: rgba(79, 209, 208, .28);
}


.notification-list {

    max-height: 420px;

    overflow-y: auto;
}


.notification-item {

    display: flex;

    gap: 14px;

    padding: 16px 20px;

    transition: .3s;

    width: 100%;

    border: 0;

    border-bottom: 1px solid rgba(255, 255, 255, .04);

    background: transparent;

    color: white;

    text-align: left;
}


.notification-item:hover {

    background: rgba(255, 255, 255, .03);
}


.notification-item.unread {

    background: rgba(79, 209, 208, .07);
}


.notification-item.unread:hover {

    background: rgba(79, 209, 208, .11);
}


.notification-title {

    font-weight: 600;
}


.notification-copy {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.notification-copy small {

    color: #c7d8df;

    line-height: 1.35;
}


.notification-copy span {

    color: #8ea6b1;

    font-size: 11px;
}


.notification-empty {

    padding: 28px 20px;

    color: #8ea6b1;

    text-align: center;
}


.notification-icon {

    width: 42px;

    height: 42px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;
}


.notification-icon.success {

    background: rgba(16, 185, 129, .15);

    color: #10b981;
}


.notification-icon.warning {

    background: rgba(245, 158, 11, .15);

    color: #f59e0b;
}


.notification-icon.danger {

    background: rgba(239, 68, 68, .15);

    color: #ef4444;
}

.notification-icon.chat {

    background: rgba(79, 209, 208, .15);

    color: #4fd1d0;
}


.notification-badge {

    position: absolute;

    top: -4px;

    right: -4px;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: #ef4444;

    color: white;

    font-size: 11px;

    display: flex;

    align-items: center;

    justify-content: center;
}



/* ======================================================
PROFILE
====================================================== */

.profile-dropdown-btn {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 8px 14px;
}


.profile-meta {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    line-height: 1.1;
}


.profile-meta span {

    font-weight: 600;
}


.profile-meta small {

    color: #94a3b8;
}


.profile-avatar {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    object-fit: cover;
}


.glass-dropdown {

    background: #132235;

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 18px;

    overflow: hidden;

    padding: 10px;
}


.glass-dropdown .dropdown-item {

    color: white;

    border-radius: 12px;

    padding: 12px 14px;

    transition: .3s;
}


.glass-dropdown .dropdown-item:hover {

    background: rgba(255, 255, 255, .06);
}

.swal2-popup.swal2-modal.swal2-icon-error.swal2-show {
    color: rgb(255, 255, 255);
    background: rgb(20 36 56 / 0%) !important;
    display: grid;
    backdrop-filter: blur(16px);
    border: 2px solid red !important;
    border-radius: 36px;
}

.swal2-popup.swal2-modal.swal2-icon-success.swal2-show {
    background: rgb(91 163 255 / 6%) !important;
    backdrop-filter: blur(16px);
    border: 2px solid green;
    border-radius: 53px;
}

button.swal2-confirm.swal2-styled {
    background: var(--primary) !important;
}

.swal2-popup.swal2-modal.swal2-icon-warning.swal2-show {
    background: transparent !important;
    backdrop-filter: blur(16px);
    border: 2px solid #ffc78d;
    border-radius: 30px;
}

/* ======================================================
MOBILE MENU TOGGLE
====================================================== */

.mobile-menu-toggle {

    width: 46px;

    height: 46px;

    border: none;

    border-radius: 14px;

    background: rgba(255, 255, 255, .06);

    display: none !important;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

    transition: .3s;

    position: relative;

    z-index: 99999;
}


.mobile-menu-toggle:hover {

    background: rgba(255, 255, 255, .1);
}


.menu-line {

    width: 22px;

    height: 2px;

    background: white;

    border-radius: 10px;

    transition: .35s ease;
}



/* ======================================================
ANIMATION
====================================================== */

.mobile-menu-toggle.active .menu-line:nth-child(1) {

    transform:

        translateY(7px) rotate(45deg);
}


.mobile-menu-toggle.active .menu-line:nth-child(2) {

    opacity: 0;
}


.mobile-menu-toggle.active .menu-line:nth-child(3) {

    transform:

        translateY(-7px) rotate(-45deg);
}



/* ======================================================
SIDEBAR OVERLAY
====================================================== */

.sidebar-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .55);

    backdrop-filter: blur(4px);

    z-index: 999;

    opacity: 0;

    visibility: hidden;

    transition: .3s;
}


.sidebar.show+.sidebar-overlay {

    opacity: 1;

    visibility: visible;
}



/* ======================================================
MOBILE SIDEBAR
====================================================== */

@media (max-width: 991px) {

    .mobile-menu-toggle {

        display: flex !important;
    }


    .sidebar {

        position: fixed;

        left: -320px;

        top: 0;

        bottom: 0;

        z-index: 9999;

        transition: .35s ease;

        width: min(300px, 88vw);

        padding: 24px 18px;

        opacity: 1;

        pointer-events: auto;
    }


    .sidebar.show {

        left: 0;
    }
}

/* ======================================================
SIDEBAR CLOSE BUTTON
====================================================== */

.sidebar-close-btn {

    position: absolute;

    top: 18px;

    right: 18px;

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 12px;

    background: rgba(255, 255, 255, .08);

    color: white;

    display: flex;

    visibility: hidden;

    opacity: 0;

    align-items: center;

    justify-content: center;

    transition: .3s;

    z-index: 99999;
}


.sidebar-close-btn:hover {

    background: rgba(255, 255, 255, .14);

    transform: rotate(90deg);
}

.sidebar.show .sidebar-close-btn {

    visibility: visible;

    opacity: 1;
}


.sidebar-close-btn i {

    font-size: 18px;
}



/* ======================================================
MOBILE ONLY
====================================================== */

@media (max-width: 991px) {

    .sidebar-close-btn {

        display: flex;
    }
}

/* ======================================================
MOBILE COMPANY CARD
====================================================== */

.mobile-company-card {

    background: rgba(255, 255, 255, .03);

    border: 1px solid rgba(255, 255, 255, .06);

    border-radius: 24px;

    padding: 20px;

    backdrop-filter: blur(10px);
}


.mobile-company-grid {

    display: flex;

    flex-direction: column;

    gap: 18px;
}


.mobile-company-item {

    display: flex;

    flex-direction: column;

    gap: 6px;
}


.mobile-company-item small {

    color: #94a3b8;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: .5px;
}

.mobile-company-item strong {

    font-size: 14px;

    font-weight: 600;
}

.swal2-popup.swal2-modal.swal2-show {
    backdrop-filter: blur(16px);
    background: transparent !important;
    border: 2px solid var(--primary-light);
    border-radius: 25px;
}

option {
    background: #102235 !important;
    color: #e9f6f8;
}

.top-navbar {
    overflow: visible !important;
}

/* =====================================================
GLOBAL SEARCH
===================================================== */

.search-results-dropdown {
    position: absolute;

    top: 58px;
    left: 0;

    width: 100%;

    background: #132235;

    border-radius: 18px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.45);

    overflow: hidden;

    z-index: 99999;

    max-height: 400px;

    overflow-y: auto;

    backdrop-filter: blur(14px);
}

.search-section {
    padding: 14px;
}

.search-section-title {
    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: #94a3b8;

    margin-bottom: 10px;
}

.search-results-dropdown a {
    display: flex;

    align-items: center;

    gap: 6px;

    padding: 12px 14px;

    border-radius: 12px;

    text-decoration: none;

    color: white;

    transition: 0.25s;

    margin-bottom: 6px;
}

.search-results-dropdown a span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-results-dropdown a strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.search-results-dropdown a small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #9fb5bf;
    font-size: 12px;
}

.search-results-dropdown a:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* =========================================================
FINAL NAVBAR FIX
========================================================= */

.top-navbar {

    position: relative;

    overflow: visible !important;

    z-index: 100;
}

/* =========================================================
SEARCH
========================================================= */

.search-wrapper {

    position: relative;

    width: 320px;

    z-index: 9999;
}

.search-results-dropdown {

    position: absolute;

    top: 58px;

    left: 0;

    width: 100%;

    background: rgba(19, 34, 53, 0.96);

    backdrop-filter: blur(18px);

    border-radius: 22px;

    border: 1px solid rgba(255, 255, 255, .08);

    overflow: hidden;

    z-index: 999999;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .45);

    animation: dropdownFade .25s ease;
}

.search-section {

    padding: 14px;
}

.search-section-title {

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: #8ea6b1;

    margin-bottom: 10px;

    font-weight: 700;
}

.search-results-dropdown a {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 13px 14px;

    border-radius: 14px;

    color: white;

    transition: .25s;

    font-size: 14px;
}

.search-results-dropdown a span {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;
}

.search-results-dropdown a strong,
.search-results-dropdown a small {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.search-results-dropdown a small {

    color: #9fb5bf;

    font-size: 12px;
}

.search-results-dropdown a:hover {

    background: rgba(255, 255, 255, .08);

    transform: translateX(3px);
}

/* =========================================================
PROFILE
========================================================= */

.profile-dropdown {

    position: relative;

    z-index: 999999;
}

.profile-btn {

    border: 1px solid rgba(255, 255, 255, .08);

    background: rgba(255, 255, 255, .04);

    color: white;

    border-radius: 18px;

    padding: 10px 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    min-width: 240px;

    transition: .3s;
}

.profile-btn:hover {

    background: rgba(255, 255, 255, .08);
}

.profile-menu {

    position: absolute;

    top: 72px;

    right: 0;

    width: 270px;

    background: rgba(19, 34, 53, 0.97);

    backdrop-filter: blur(20px);

    border-radius: 24px;

    border: 1px solid rgba(255, 255, 255, .08);

    overflow: hidden;

    z-index: 9999999;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .45);

    animation: dropdownFade .25s ease;
}

.profile-menu a {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px 18px;

    color: white;

    transition: .25s;

    font-size: 14px;
}

.profile-menu a:hover {

    background: rgba(255, 255, 255, .08);
}

.profile-menu i {

    font-size: 18px;
}

.profile-avatar {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    object-fit: cover;
}

.avatar {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    color: white;

    background:
        linear-gradient(135deg,
            #377688,
            #4FD1D0);
}

.sidebar-divider {

    height: 1px;

    background: rgba(255, 255, 255, .08);
}

/* =========================================================
ANIMATION
========================================================= */

@keyframes dropdownFade {

    from {

        opacity: 0;

        transform:
            translateY(-10px) scale(.98);
    }

    to {

        opacity: 1;

        transform:
            translateY(0) scale(1);
    }
}

/* =========================================================
NOTIFICATION FIX
========================================================= */

.notification-panel {

    z-index: 999999;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:768px) {

    .profile-btn {

        min-width: auto;

        padding: 10px 12px;
    }

    .profile-menu {

        right: -10px;

        width: 240px;
    }

    .lantern-footer {
        width: calc(100vw - 24px);
        flex-direction: column;
        gap: 10px;
    }

    .lantern-footer-dock {
        width: 100%;
    }

    .lantern-footer-links {
        width: 100%;
        justify-content: center;
    }

    .lantern-footer-links a {
        flex: 1 1 0;
    }
}

.sidebar.show .sidebar-close-btn {

    visibility: visible;

    opacity: 1;
}

/* sweetalert */
div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=left] {
    display: none !important;
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=right] {
    display: none !important;
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line] {
    display: none !important;
}

.swal2-success-fix {
    opacity: 0;
}

h2#swal2-title {
    color: var(--body-color);
}

div#swal2-html-container {
    color: var(--text-muted);
}