/* ==========================================
   SPI PLATFORM
   Premium Navbar
   Version 1.1.0
========================================== */


/* ==========================================
   NAVBAR
========================================== */

.spi-navbar {
    position: sticky;

    z-index: 500;

    top: 0;

    height: 78px;

    padding: 0 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    border-bottom:
        1px solid rgba(226, 232, 240, .8);

    box-shadow:
        0 4px 20px rgba(15, 23, 42, .025);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    transition:
        box-shadow .25s ease,
        background .25s ease;
}


/* subtle top highlight */

.spi-navbar::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(34, 197, 94, .18),
            rgba(14, 165, 233, .14),
            transparent
        );

    pointer-events: none;
}


/* ==========================================
   LEFT
========================================== */

.spi-navbar-left {
    display: flex;

    align-items: center;

    gap: 18px;

    min-width: 0;
}


/* ==========================================
   PAGE TITLE
========================================== */

.spi-navbar-page-title {
    margin: 0;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 750;

    letter-spacing: -.2px;

    color: #0f172a;

    white-space: nowrap;

    transition:
        color .2s ease;
}


/* ==========================================
   MENU BUTTON
========================================== */

.spi-menu-button {
    width: 40px;

    height: 40px;

    display: none;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 4px;

    border:
        1px solid #e2e8f0;

    border-radius: 11px;

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

    cursor: pointer;

    box-shadow:
        0 3px 10px rgba(15, 23, 42, .035);

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.spi-menu-button:hover {
    background:
        #f8fffb;

    border-color:
        rgba(34, 197, 94, .25);

    box-shadow:
        0 6px 16px rgba(34, 197, 94, .08);

    transform:
        translateY(-1px);
}

.spi-menu-button:active {
    transform:
        translateY(0)
        scale(.96);
}

.spi-menu-button span {
    width: 17px;

    height: 2px;

    border-radius: 5px;

    background:
        #475569;

    transition:
        background .2s ease,
        transform .2s ease;
}

.spi-menu-button:hover span {
    background:
        #16a34a;
}


/* ==========================================
   RIGHT
========================================== */

.spi-navbar-right {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}


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

.spi-navbar-icon {
    position: relative;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid #e2e8f0;

    border-radius: 12px;

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

    color:
        #64748b;

    cursor: pointer;

    box-shadow:
        0 3px 12px rgba(15, 23, 42, .025);

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.spi-navbar-icon:hover {
    color:
        #15803d;

    background:
        #f7fff9;

    border-color:
        rgba(34, 197, 94, .2);

    box-shadow:
        0 7px 18px rgba(34, 197, 94, .08);

    transform:
        translateY(-1px);
}

.spi-navbar-icon:active {
    transform:
        scale(.95);
}


/* notification icon */

.spi-navbar-icon svg {
    width: 19px;

    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform .25s ease;
}

.spi-navbar-icon:hover svg {
    transform:
        rotate(-8deg)
        scale(1.05);
}


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

.spi-notification-dot {
    position: absolute;

    top: 7px;

    right: 7px;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        #ef4444;

    border:
        2px solid #ffffff;

    box-shadow:
        0 0 0 2px rgba(239, 68, 68, .08);

    animation:
        spiNotificationPulse 2.2s ease-in-out infinite;
}


@keyframes spiNotificationPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 2px rgba(239, 68, 68, .08);
    }

    50% {
        box-shadow:
            0 0 0 5px rgba(239, 68, 68, .04);
    }

}


/* ==========================================
   USER AREA
========================================== */

.spi-navbar-user {
    position: relative;

    min-height: 46px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        4px 10px 4px 7px;

    border:
        1px solid transparent;

    border-radius: 13px;

    cursor: default;

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.spi-navbar-user:hover {
    background:
        #f8fafc;

    border-color:
        rgba(226, 232, 240, .8);

    box-shadow:
        0 5px 16px rgba(15, 23, 42, .035);
}


/* ==========================================
   NAVBAR AVATAR
========================================== */

.spi-navbar-avatar {
    position: relative;

    width: 40px;

    height: 40px;

    border-radius: 12px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #22c55e 0%,
            #14b8a6 45%,
            #0ea5e9 100%
        );

    color:
        #ffffff;

    font-size: 14px;

    font-weight: 800;

    box-shadow:
        0 6px 16px rgba(34, 197, 94, .16);

    overflow: hidden;
}


/* avatar shine */

.spi-navbar-avatar::after {
    content: "";

    position: absolute;

    top: -50%;

    left: -80%;

    width: 55%;

    height: 200%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .28),
            transparent
        );

    transform:
        rotate(25deg);

    transition:
        left .55s ease;
}

.spi-navbar-user:hover .spi-navbar-avatar::after {
    left: 140%;
}


/* ==========================================
   USER INFO
========================================== */

.spi-navbar-user-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 2px;
}

.spi-navbar-user-info strong {
    max-width: 150px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 700;

    color:
        #334155;
}

.spi-navbar-user-info span {
    max-width: 150px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    margin-top: 1px;

    font-size: 10px;

    line-height: 1.3;

    color:
        #94a3b8;

    font-weight: 500;
}


/* ==========================================
   LOGOUT
========================================== */

.spi-logout-form {
    margin: 0;

    padding: 0;
}

.spi-logout-button {
    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(244, 63, 94, .08);

    border-radius: 12px;

    background:
        rgba(255, 241, 242, .9);

    color:
        #e11d48;

    cursor: pointer;

    box-shadow:
        0 3px 12px rgba(225, 29, 72, .025);

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.spi-logout-button:hover {
    background:
        #fff1f2;

    border-color:
        rgba(225, 29, 72, .18);

    color:
        #be123c;

    box-shadow:
        0 7px 18px rgba(225, 29, 72, .08);

    transform:
        translateY(-1px);
}

.spi-logout-button:active {
    transform:
        scale(.94);
}

.spi-logout-button svg {
    width: 18px;

    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform .25s ease;
}

.spi-logout-button:hover svg {
    transform:
        translateX(2px);
}


/* ==========================================
   FOCUS ACCESSIBILITY
========================================== */

.spi-navbar-icon:focus-visible,
.spi-logout-button:focus-visible,
.spi-menu-button:focus-visible {
    outline:
        3px solid rgba(34, 197, 94, .18);

    outline-offset:
        2px;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1100px) {

    .spi-navbar {
        padding:
            0 24px;
    }

    .spi-navbar-user-info strong,
    .spi-navbar-user-info span {
        max-width: 120px;
    }

}


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

@media (max-width: 900px) {

    .spi-navbar {
        height: 72px;

        padding:
            0 24px;
    }

    .spi-menu-button {
        display: flex;
    }

    .spi-navbar-left {
        gap: 13px;
    }

    .spi-navbar-right {
        gap: 8px;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 640px) {

    .spi-navbar {
        height: 68px;

        padding:
            0 16px;
    }

    .spi-navbar-page-title {
        font-size: 15px;
    }

    .spi-navbar-user {
        padding:
            3px;
    }

    .spi-navbar-user-info {
        display: none;
    }

    .spi-navbar-avatar {
        width: 38px;

        height: 38px;

        border-radius: 11px;
    }

    .spi-navbar-icon {
        width: 38px;

        height: 38px;

        border-radius: 11px;
    }

    .spi-logout-button {
        width: 38px;

        height: 38px;

        border-radius: 11px;
    }

    .spi-navbar-right {
        gap: 6px;
    }

}


/* ==========================================
   EXTRA SMALL
========================================== */

@media (max-width: 380px) {

    .spi-navbar {
        padding:
            0 12px;
    }

    .spi-navbar-left {
        gap: 9px;
    }

    .spi-navbar-page-title {
        font-size: 14px;
    }

    .spi-navbar-icon {
        width: 36px;
        height: 36px;
    }

    .spi-navbar-avatar {
        width: 36px;
        height: 36px;
    }

    .spi-logout-button {
        width: 36px;
        height: 36px;
    }

}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .spi-navbar,
    .spi-menu-button,
    .spi-navbar-icon,
    .spi-navbar-user,
    .spi-navbar-avatar,
    .spi-logout-button {
        transition: none !important;
    }

    .spi-notification-dot {
        animation: none !important;
    }

}