/* =========================================================
GLASS CARD
========================================================= */

.glass-card {

    background:
        linear-gradient(135deg, rgba(255, 255, 255, .34), rgba(169, 177, 174, .22)),
        var(--glass-bg);

    backdrop-filter: blur(18px) saturate(115%);

    -webkit-backdrop-filter: blur(18px) saturate(115%);

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

    border-radius: 8px;

    box-shadow:

        var(--shadow-lg),

        inset 0 1px 2px rgba(255, 255, 255, .34);

    position: relative;

    overflow: hidden;
}

.glass-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(135deg,
            rgba(255, 255, 255, .08),
            transparent);

    pointer-events: none;
}


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

.sidebar {

    width: 0;

    height: 100vh;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1000;

    background: rgba(53, 58, 58, .92);

    backdrop-filter: blur(18px);

    border-right: 1px solid rgba(255, 255, 255, .05);

    transition: var(--transition);

    padding: 0;

    overflow-y: auto;

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
SIDEBAR BRAND
========================================================= */

.sidebar-brand {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 40px;
}

.sidebar-brand img {

    width: 170px;

    max-width: 100%;
}


/* =========================================================
SIDEBAR MENU
========================================================= */

.sidebar-menu {

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.sidebar-menu a {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 15px 18px;

    border-radius: 18px;

    color: var(--text-light);

    transition: var(--transition);

    font-weight: 500;

    font-size: 13px;
}

.sidebar-menu a i {

    font-size: 16px;
}

.sidebar-menu a:hover {

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

    color: white;

    transform: translateX(4px);
}

.sidebar-menu a.active {

    background:

        linear-gradient(135deg,
            var(--primary),
            var(--primary-light));

    color: white;

    box-shadow: var(--shadow-primary);
}


/* =========================================================
MAIN CONTENT
========================================================= */

.main-content {

    margin-left: 0;

    min-height: 100vh;

    padding: 18px;

    position: relative;
}


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

.top-navbar {

    width: min(520px, calc(100vw - 48px));

    min-height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 6px 10px 6px 12px;

    margin: 28px auto 18px;

    border-radius: 13px;

    background:
        linear-gradient(180deg, rgba(244, 247, 243, .54), rgba(122, 132, 130, .58)),
        rgba(164, 171, 168, .42);

    backdrop-filter: blur(16px) saturate(120%);

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

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .23),
        inset 0 1px 1px rgba(255, 255, 255, .54),
        inset 0 -1px 1px rgba(47, 54, 54, .18);
}

.navbar-title {

    font-size: 20px;

    font-weight: 700;
}


/* =========================================================
PAGE CONTENT
========================================================= */

.page-content {

    padding: 10px;

    /* Keep the final row/action clear of the viewport edge and mobile safe area. */
    padding-bottom: max(116px, calc(env(safe-area-inset-bottom, 0px) + 104px));
}

.workspace-screen-label {
    position: fixed;
    top: 27px;
    left: 18px;
    z-index: 95;
    color: rgba(238, 241, 239, .68);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

.lantern-top-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 158px;
    height: 54px;
    flex: 0 0 158px;
    overflow: hidden;
}

.lantern-top-brand img,
.lantern-footer-brand img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, .36)) drop-shadow(0 0 5px rgba(87, 231, 230, .48));
}

.lantern-clock {
    min-width: 86px;
    color: rgba(255, 255, 255, .92);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .32);
}

.lantern-top-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.lantern-top-actions .btn-outline-custom,
.lantern-top-actions .profile-btn {
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border-color: rgba(255, 255, 255, .62);
    background: linear-gradient(180deg, rgba(242, 245, 243, .38), rgba(117, 126, 125, .28));
    color: rgba(255, 255, 255, .86);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .46);
}

.lantern-top-actions .btn-outline-custom:hover,
.lantern-top-actions .profile-btn:hover {
    background: rgba(139, 242, 224, .28);
    border-color: rgba(160, 255, 238, .76);
    color: #fff;
    transform: none;
}

.lantern-top-actions .btn-outline-custom i,
.lantern-top-actions .profile-btn i {
    font-size: 14px;
    line-height: 1;
}

.lantern-top-actions .profile-avatar,
.lantern-top-actions .avatar {
    width: 25px;
    height: 25px;
    font-size: 11px;
    border: 1px solid rgba(255, 255, 255, .52);
}

.lantern-footer {
    position: fixed;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 52px;
    transform: translateX(-50%);
    pointer-events: none;
}

.lantern-footer-dock,
.lantern-footer-links {
    pointer-events: auto;
    display: flex;
    align-items: center;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, .54);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(244, 247, 243, .50), rgba(113, 122, 121, .58)),
        rgba(157, 165, 162, .44);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    box-shadow:
        0 16px 36px rgba(0, 0, 0, .28),
        inset 0 1px 1px rgba(255, 255, 255, .48);
}

.lantern-footer-dock {
    gap: 10px;
    width: min(520px, calc(100vw - 40px));
    padding: 6px 10px;
}

.lantern-footer-brand {
    display: inline-flex;
    align-items: center;
    width: 150px;
    height: 45px;
    flex: 0 0 150px;
    overflow: hidden;
}

.lantern-footer-search {
    width: clamp(150px, 18vw, 220px);
    flex: 1 1 auto;
    min-width: 0;
}

.lantern-footer-search .form-control {
    width: 100%;
    min-height: 30px;
    height: 30px;
    padding: 3px 30px 3px 12px;
    border-radius: 999px;
    background: rgba(232, 236, 233, .46);
    border-color: rgba(255, 255, 255, .52);
    color: #eef5f1;
    font-size: 12px;
    box-shadow: inset 0 1px 3px rgba(37, 42, 42, .25);
}

.lantern-footer-search .form-control::placeholder {
    color: rgba(255, 255, 255, .76);
}

.lantern-footer-search-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: rgba(42, 49, 49, .66);
    font-size: 13px;
}

.lantern-view-select {
    width: auto;
    height: 31px;
    flex: 0 0 124px;
    border: 1px solid rgba(118, 255, 229, .48);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(130, 246, 222, .46), rgba(81, 140, 132, .42));
    color: #f3fffb;
    font-size: 12px;
    font-weight: 500;
    outline: 0;
    padding: 0 26px 0 11px;
    appearance: auto;
}

.lantern-footer-links {
    gap: 4px;
    padding: 0;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(227, 231, 228, .48), rgba(116, 125, 124, .62)),
        rgba(150, 157, 154, .54);
}

.lantern-footer-links a,
.lantern-orb-btn {
    min-height: 43px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .22);
    background: transparent;
    color: rgba(255, 255, 255, .84);
    font-size: 14px;
    line-height: 1;
}

.lantern-footer-links a:first-child {
    border-left: 0;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.lantern-footer-links a:hover,
.lantern-footer-links a.active,
.lantern-orb-btn:hover {
    background: rgba(255, 255, 255, .13);
    color: #fff;
}

.lantern-orb-btn {
    width: 48px;
    min-width: 48px;
    margin-left: 4px;
    border: 1px solid rgba(92, 248, 232, .54);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 45%, rgba(0, 0, 0, .16) 0 30%, transparent 31%),
        radial-gradient(circle, rgba(65, 226, 214, .42), rgba(16, 66, 70, .72));
    box-shadow:
        0 0 0 4px rgba(11, 48, 52, .45),
        0 0 18px rgba(76, 236, 228, .38),
        inset 0 0 10px rgba(69, 245, 231, .38);
}

.lantern-orb-btn i {
    color: #8dfff1;
    font-size: 20px;
}


/* =========================================================
DASHBOARD CARDS
========================================================= */

.dashboard-card {

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

    backdrop-filter: blur(18px);

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

    border-radius: 24px;

    padding: 24px;

    transition: var(--transition);

    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);

}

.dashboard-card:hover {

    transform: translateY(-5px);

    border-color: rgba(255, 255, 255, .12);
}

.dashboard-card h6 {

    color: var(--text-muted);

    margin-bottom: 10px;

    font-size: 14px;
}

.dashboard-card h2 {

    font-size: 38px;

    font-weight: 800;

    margin: 0;
}