/* ============================================================
   Navbar layout fix — MUST load last (after core.css / Site.css)
   ============================================================
   Root causes:
   1) Template 100vw width overflows and clips left-side icons.
   2) #layout-navbar width rules must beat class-only selectors.
   3) Fixed height 3.5rem is too short for wallet/clock widgets →
      vertical misalignment.
   4) Finance (right) + actions (left) must stay on opposite sides.
   ============================================================ */

.layout-page {
    overflow-x: visible !important;
}

/* ----- Shell: height + box ----- */
#layout-navbar.layout-navbar.navbar-detached,
.layout-page > .layout-navbar.navbar-detached,
.layout-navbar.navbar-detached {
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: auto !important;
    min-height: 3.875rem !important;
    max-width: none !important;
    width: auto !important;
    padding: .55rem 1.15rem !important;
    border-radius: .5rem !important;
    overflow: visible !important;
}

/*
   Pin the fixed navbar with left/right insets that match the tab panel
   (sidebar + container-fluid 1.5rem gutters). Default = RTL (app default).
   Avoids 100vw and fragile width calc that clipped the profile avatar.
*/
@media (min-width: 1200px) {
    html.layout-navbar-fixed:not(.layout-menu-collapsed) #layout-navbar.layout-navbar.navbar-detached,
    html.layout-menu-fixed:not(.layout-menu-collapsed) #layout-navbar.layout-navbar.navbar-detached {
        top: 0 !important;
        left: 1.5rem !important;
        right: calc(16.25rem + 1.5rem) !important;
        width: auto !important;
        margin: 1rem 0 0 !important;
    }

    html.layout-navbar-fixed.layout-menu-collapsed #layout-navbar.layout-navbar.navbar-detached,
    html.layout-menu-fixed.layout-menu-collapsed #layout-navbar.layout-navbar.navbar-detached {
        top: 0 !important;
        left: 1.5rem !important;
        right: calc(4.375rem + 1.5rem) !important;
        width: auto !important;
        margin: 1rem 0 0 !important;
    }

    /* LTR override if language is flipped */
    html:not([dir=rtl]).layout-navbar-fixed:not(.layout-menu-collapsed) #layout-navbar.layout-navbar.navbar-detached,
    html:not([dir=rtl]).layout-menu-fixed:not(.layout-menu-collapsed) #layout-navbar.layout-navbar.navbar-detached {
        right: 1.5rem !important;
        left: calc(16.25rem + 1.5rem) !important;
    }

    html:not([dir=rtl]).layout-navbar-fixed.layout-menu-collapsed #layout-navbar.layout-navbar.navbar-detached,
    html:not([dir=rtl]).layout-menu-fixed.layout-menu-collapsed #layout-navbar.layout-navbar.navbar-detached {
        right: 1.5rem !important;
        left: calc(4.375rem + 1.5rem) !important;
    }
}

/* Below xl: sidebar overlays — gutters only (never 100vw) */
@media (max-width: 1199.98px) {
    html.layout-navbar-fixed #layout-navbar.layout-navbar.navbar-detached,
    #layout-navbar.layout-navbar.navbar-detached {
        top: 0 !important;
        left: 1.5rem !important;
        right: 1.5rem !important;
        width: auto !important;
        margin: 1rem 0 0 !important;
    }
}

@media (max-width: 991.98px) {
    html.layout-navbar-fixed #layout-navbar.layout-navbar.navbar-detached,
    #layout-navbar.layout-navbar.navbar-detached {
        left: 1rem !important;
        right: 1rem !important;
        width: auto !important;
        margin: .75rem 0 0 !important;
        padding: .5rem .85rem !important;
    }
}

/* Fixed navbar is taller than template 3.5rem — keep content clear */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
    padding-top: 5.25rem !important;
}

/* Same horizontal inset as tab panel */
.layout-page > .content-wrapper > .col-xxl-12 > .container-fluid {
    padding-inline: 1.5rem !important;
}

@media (max-width: 991.98px) {
    .layout-page > .content-wrapper > .col-xxl-12 > .container-fluid {
        padding-inline: 1rem !important;
    }
}

/* ----- Two groups: finance (right) / actions (left) ----- */
#layout-navbar #navbar-collapse,
#layout-navbar .navbar-nav-right {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: .75rem !important;
    overflow: visible !important;
}

#layout-navbar .navbar-finance-group,
#layout-navbar .navbar-actions-group {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    list-style: none !important;
}

#layout-navbar .navbar-finance-group {
    margin: 0 !important;
    gap: .55rem !important;
}

#layout-navbar .navbar-actions-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-inline-end: 0 !important;
    margin-inline-start: auto !important;
    gap: .15rem !important;
}

#layout-navbar .navbar-finance-group > .nav-item,
#layout-navbar .navbar-actions-group > .nav-item {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
}

#layout-navbar .navbar-actions-group > .nav-item > .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* Keep profile avatar from collapsing */
#layout-navbar .navbar-actions-group > .dropdown-user .avatar {
    width: 2.375rem !important;
    height: 2.375rem !important;
}

#layout-navbar .navbar-actions-group > .dropdown-user .avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* ----- Wallet (unscoped so it always applies) ----- */
#layout-navbar .navbar-wallet-item {
    display: flex !important;
    align-items: center !important;
}

#layout-navbar .navbar-wallet {
    --navbar-theme-primary: var(--bs-primary, #685dd8);
    --navbar-theme-brand: var(--color-primary, #ff6d00);
    --navbar-theme-border: var(--color-border, #e2e6ed);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    width: max-content;
    max-width: 100%;
    height: 2.5rem;
    padding: .2rem;
    border: 1px solid var(--navbar-theme-border);
    border-radius: .875rem;
    background: linear-gradient(180deg, #fff, #fbfbfe);
    box-shadow:
        0 4px 14px rgba(31, 38, 67, .06),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

#layout-navbar .navbar-wallet > .mud-tooltip-root,
#layout-navbar .navbar-wallet > span {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

#layout-navbar .navbar-wallet button {
    border: 0;
    font-family: inherit;
    cursor: pointer;
    line-height: 1;
}

#layout-navbar .navbar-wallet__add {
    flex: none;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: .65rem;
    color: #fff;
    background: linear-gradient(135deg, var(--navbar-theme-primary), #8075e5);
    box-shadow: 0 6px 14px rgba(104, 93, 216, .25);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

#layout-navbar .navbar-wallet__add:hover {
    background: linear-gradient(135deg, #5d52c9, #776cda);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(104, 93, 216, .32);
}

#layout-navbar .navbar-wallet__add i {
    font-size: 1rem;
}

#layout-navbar .navbar-wallet__refresh {
    flex: none;
    width: 1.85rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: .55rem;
    color: #9aa5b6;
    background: transparent;
    transition: color .2s ease, background .2s ease;
}

#layout-navbar .navbar-wallet__refresh:hover:not(:disabled) {
    color: var(--navbar-theme-primary);
    background: rgba(104, 93, 216, .08);
}

#layout-navbar .navbar-wallet__refresh:disabled {
    cursor: wait;
}

#layout-navbar .navbar-wallet__refresh i {
    font-size: .92rem;
}

#layout-navbar .navbar-wallet__refresh i.is-loading {
    animation: navbar-wallet-spin .75s linear infinite;
}

#layout-navbar .navbar-wallet__balance {
    min-width: 0;
    width: auto;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 .45rem;
    border-radius: .55rem;
    color: #263147;
    background: transparent;
    text-align: start;
    transition: background .2s ease;
}

#layout-navbar .navbar-wallet__balance:hover {
    background: #f7f9fc;
}

#layout-navbar .navbar-wallet__icon {
    flex: none;
    width: 1.55rem;
    height: 1.55rem;
    display: grid;
    place-items: center;
    border-radius: .5rem;
    color: var(--navbar-theme-primary);
    background: rgba(104, 93, 216, .1);
    box-shadow: inset 0 0 0 1px rgba(104, 93, 216, .07);
}

#layout-navbar .navbar-wallet__icon i {
    font-size: .9rem;
}

#layout-navbar .navbar-wallet__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

#layout-navbar .navbar-wallet__text small {
    margin-bottom: 1px;
    color: #9aa5b6;
    font-size: .58rem;
    font-weight: 600;
}

#layout-navbar .navbar-wallet__text b {
    color: #293148;
    font-size: .76rem;
    font-weight: 900;
    white-space: nowrap;
}

#layout-navbar .navbar-wallet__text em {
    color: #9aa5b6;
    font-size: .55rem;
    font-style: normal;
    font-weight: 500;
}

#layout-navbar .navbar-wallet__skeleton {
    position: relative;
    overflow: hidden;
    width: 72px;
    height: 9px;
    margin-top: 2px;
    border-radius: 5px;
    background: #e9edf3;
}

#layout-navbar .navbar-wallet__skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
    animation: navbar-wallet-shimmer 1.1s infinite;
}

@keyframes navbar-wallet-spin {
    to { transform: rotate(360deg); }
}

@keyframes navbar-wallet-shimmer {
    to { transform: translateX(100%); }
}

/* ----- Clock ----- */
#layout-navbar .navbar-clock-item {
    display: flex !important;
    align-items: center !important;
}

#layout-navbar .navbar-clock {
    --navbar-theme-primary: var(--bs-primary, #685dd8);
    --navbar-theme-brand: var(--color-primary, #ff6d00);
    --navbar-theme-border: var(--color-border, #e2e6ed);
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 2.5rem;
    padding: .2rem .65rem;
    border: 1px solid var(--navbar-theme-border);
    border-radius: .875rem;
    color: #293148;
    background: linear-gradient(180deg, #fff, #fbfbfe);
    box-shadow:
        0 4px 14px rgba(31, 38, 67, .05),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

#layout-navbar .navbar-clock__icon {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: .55rem;
    color: var(--navbar-theme-brand);
    background: rgba(255, 109, 0, .09);
    box-shadow: inset 0 0 0 1px rgba(255, 109, 0, .07);
}

#layout-navbar .navbar-clock__icon i {
    font-size: .95rem;
}

#layout-navbar .navbar-clock__date {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

#layout-navbar .navbar-clock__date small {
    margin-bottom: 1px;
    color: #9ba5b6;
    font-size: .56rem;
    font-weight: 600;
}

#layout-navbar .navbar-clock__date b {
    color: #394258;
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}

#layout-navbar .navbar-clock__divider {
    width: 1px;
    height: 1.35rem;
    background: linear-gradient(transparent, #dfe4ec, transparent);
}

#layout-navbar .navbar-clock__time {
    min-width: 3.4rem;
    color: var(--navbar-theme-primary);
    font-size: .72rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1;
}

/* Responsive: shrink before clipping left icons */
@media (max-width: 1200px) {
    #layout-navbar .navbar-wallet__refresh,
    #layout-navbar .navbar-wallet__icon,
    #layout-navbar .navbar-wallet__text small,
    #layout-navbar .navbar-clock__icon {
        display: none;
    }

    #layout-navbar .navbar-wallet__balance {
        min-width: auto;
        padding-inline: .4rem;
    }

    #layout-navbar .navbar-clock {
        gap: .35rem;
        padding-inline: .45rem;
    }
}

@media (max-width: 960px) {
    #layout-navbar .navbar-clock-item {
        display: none !important;
    }
}

@media (max-width: 720px) {
    #layout-navbar .navbar-wallet__text b {
        font-size: .7rem;
    }
}

@media (max-width: 520px) {
    #layout-navbar .navbar-wallet__balance {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #layout-navbar .navbar-wallet *,
    #layout-navbar .navbar-wallet *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}