/*
 * The desktop top header: logo, search, wallet, notifications, messages, avatar.
 *
 * MOVED OUT OF app.css AND LOADED DIRECTLY, not through Minify.
 *
 * Every rule here was present in app.css and present in the built bundle -- verified by
 * grepping both -- yet the browser's parsed stylesheet did not contain them:
 * `[...document.styleSheets].some(ss => [...ss.cssRules].some(r => r.selectorText ===
 * '.fx-top-header'))` returned FALSE, and the computed padding was 0px against a rule
 * saying `0 24px !important`.
 *
 * A rule that is in the served text but absent from the parsed sheet means the parser gave
 * up before reaching it -- a syntax error earlier in a 350KB concatenation. Brace counting
 * does not catch that class of fault, which is why the file looked balanced throughout.
 *
 * Rather than hunt one bad character in a generated bundle, the header's CSS is its own
 * file, linked directly. A parse error anywhere in app.css can no longer take the site
 * header with it.
 */

/* ============================================================
   Full-width top header (desktop): Logo · Search · Balance/notif/msg/avatar.
   Sits above the 3-column layout (layouts.user-no-nav). Sticky.
   ============================================================ */
.fx-top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    gap: 20px;
    height: 60px;
    max-height: 60px;
    padding: 0 24px !important;
    background: #ffffff;
    border-bottom: 1px solid #ECEAF0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* The ONE and only header offset lives here (desktop): push the container below the 60px fixed
   header and lock it to the viewport, so the left/right rails stay put and ONLY the feed scrolls.
   Nothing inside needs its own 60px. Mobile uses its own top bar, so this is desktop-only. */
@media (min-width: 768px) {
    body .flex-fill > .container-xl {
        padding-top: 60px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body .flex-fill > .container-xl > .main-wrapper {
        height: auto !important;
        max-height: none !important;
        min-height: calc(100vh - 60px) !important;
    }
    /* LEFT rail: sticky positioning below top header */
    .fx-layout-sidebar {
        position: -webkit-sticky !important;
        position: sticky !important;
        /* Kept in step with the copy in liquid-sidebar.css, which loads later and wins. */
        top: 60px !important;
        align-self: flex-start !important;
        height: calc(100vh - 60px) !important;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-top: 10px !important;
        scrollbar-width: none;
    }
    .fx-layout-sidebar::-webkit-scrollbar { width: 0; display: none; }
    /* Content holder */
    .fx-layout-content {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .fx-layout-content > .container,
    .fx-layout-content > .container > .row {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }
    /* FEED column (.second) */
    .fx-layout-content .row > .second {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    /* RIGHT rail (.suggestions-wrapper): STICKY below top header */
    /*
        THE STICKY BEHAVIOUR IS DEFINED ONCE, in the 1004px block below.

        It used to be repeated here in full, and because this is the wider media query it
        came later in the cascade and overrode the more specific block on every desktop
        screen -- so the column pinned wherever THIS said, and editing the block that looked
        authoritative did nothing at all. Two rules for one element is a trap laid for
        whoever edits it next; there is one now.

        What remains here is only what the narrower range needs, and the values match.
    */
    .fx-layout-content .row > .suggestions-wrapper,
    .suggestions-wrapper.min-vh-100 {
        min-height: 0 !important;
    }
    .fx-layout-content .row > .suggestions-wrapper::-webkit-scrollbar { width: 0; display: none; }
}

/* 3-Column Layout: Left sidebar no right border, Right sidebar no left border, Middle (.second) has left & right borders */
@media (min-width: 1004px) {
    .fx-layout-content .row > .second {
        flex: 0 0 62.821% !important;
        max-width: 62.821% !important;
        width: 62.821% !important;
        /*
            No border on the LEFT: the sidebar beside it already draws one, and two lines a
            pixel apart read as a double rule rather than as one divider.
        */
        border-left: none !important;
        border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    body.fx-theme-dark .fx-layout-content .row > .second,
    body.fx-theme-dark .second {
        border-left: none !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .fx-layout-content .row > .suggestions-wrapper,
    .suggestions-wrapper.min-vh-100 {
        flex: 0 0 37.179% !important;
        max-width: 37.179% !important;
        width: 37.179% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        /*
            Pinned to the header's own height, with no padding above it.
            
            At 70px it sat a further ten pixels down and carried another ten inside, so the
            column started twenty pixels below the header for no reason -- visible as a gap
            beside a feed that begins right under it.
        */
        top: 60px !important;
        align-self: flex-start !important;
        height: auto !important;
        /* Measured from the header's own height, so the column can use the rest of it. */
        max-height: calc(100vh - 60px) !important;
        padding-top: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none;
        border-left: none !important;
    }
}

body.fx-theme-light .fx-glass-sidebar,
body.fx-theme-light .fx-glass-sidebar.side-menu-theme-light {
    background: #ffffff !important;
    border-right: none !important;
    box-shadow: none !important;
}
body.fx-theme-dark .fx-glass-sidebar,
body.fx-theme-dark .fx-glass-sidebar.side-menu-theme-dark {
    background: #18191a !important;
    border-right: none !important;
    box-shadow: none !important;
}
body.fx-theme-light .suggestions-wrapper,
body.fx-theme-light .fx-layout-content .row > .suggestions-wrapper,
body.fx-theme-dark .suggestions-wrapper,
body.fx-theme-dark .fx-layout-content .row > .suggestions-wrapper {
    border-left: none !important;
}

/* Progressive Media Loading & Shimmer Placeholders */
.fx-media-shimmer-box, .fx-media-figure {
    background-color: #f0f2f5 !important;
    background-image: linear-gradient(90deg, #f0f2f5 0px, #e4e6eb 40px, #f0f2f5 80px) !important;
    background-size: 600px 100% !important;
    animation: fx-shimmer-media 1.5s infinite linear !important;
}
body.fx-theme-dark .fx-media-shimmer-box,
body.fx-theme-dark .fx-media-figure {
    background-color: #242526 !important;
    background-image: linear-gradient(90deg, #242526 0px, #3a3b3c 40px, #242526 80px) !important;
}
@keyframes fx-shimmer-media {
    0% { background-position: -200px 0; }
    100% { background-position: 400px 0; }
}
.fx-media-img {
    opacity: 0;
    transition: opacity 0.25s ease-in-out !important;
}
.fx-media-img.fx-img-loaded {
    opacity: 1 !important;
}
body.fx-theme-dark .fx-top-header {
    background: #18191a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
/* LEFT: logo — fixed width so the search stays visually centred */
.fx-top-header .fx-th-logo {
    flex: 0 0 auto;
    min-width: 200px;
    gap: 12px !important;
    color: inherit;
}
.fx-top-header .fx-th-logo-img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    display: block;
    object-fit: contain;
}
.fx-top-header .fx-th-logo-text {
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}
body.fx-theme-light .fx-top-header .fx-th-logo-text { color: #17171c; }
body.fx-theme-dark .fx-top-header .fx-th-logo-text { color: #ffffff; }

/* CENTER: search — takes the middle, capped so it doesn't sprawl */
.fx-top-header .fx-th-search {
    flex: 1 1 auto;
    max-width: 520px !important;
    margin: 0 24px !important;
}
.fx-top-header .fx-th-search .search-box-wrapper { position: relative; margin: 0; }
.fx-top-header .fx-th-search .form-control {
    height: 38px !important;
    border-radius: 10px !important;
    padding-left: 18px !important;
    font-size: 14px !important;
    background: #f0f2f5 !important;
    border: 1px solid transparent !important;
    color: #16151a !important;
    transition: all 0.2s ease !important;
}
body.fx-theme-dark .fx-top-header .fx-th-search .form-control {
    background: #242526 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f4f3f7 !important;
}
.fx-top-header .fx-th-search .form-control:focus {
    background: #ffffff !important;
    border-color: var(--primary, #d10054) !important;
    box-shadow: 0 0 0 3px rgba(209, 0, 84, 0.12) !important;
}
body.fx-theme-dark .fx-top-header .fx-th-search .form-control:focus {
    background: #18191a !important;
    border-color: var(--primary, #d10054) !important;
    box-shadow: 0 0 0 3px rgba(209, 0, 84, 0.2) !important;
}
.fx-top-header .fx-th-search .input-group-text {
    background: transparent !important;
    border: none !important;
    padding-right: 6px !important;
}
.fx-top-header .fx-search-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
}
.fx-top-header .fx-search-svg {
    width: 17px !important;
    height: 17px !important;
    stroke: #65676b !important;
    stroke-width: 2.2 !important;
    fill: none !important;
    transition: stroke 0.15s ease !important;
}
body.fx-theme-dark .fx-top-header .fx-search-svg {
    stroke: #b0b3b8 !important;
}
.fx-top-header .fx-search-btn:hover .fx-search-svg {
    stroke: var(--primary, #d10054) !important;
}

/* RIGHT: balance + icons + avatar */
.fx-top-header .fx-th-right {
    flex: 0 0 auto;
    gap: 16px !important;
    margin-left: auto;
}

/* Premium Wallet Card */
.fx-top-header .fx-wallet-card--v2,
.fx-wallet-card--v2 {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    padding: 2px 4px 2px 12px !important;
    gap: 8px !important;
    border-radius: 999px !important;
    background: #f8f9fa !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}
body.fx-theme-dark .fx-top-header .fx-wallet-card--v2,
body.fx-theme-dark .fx-wallet-card--v2 {
    background: #242526 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}
.fx-wallet-card--v2 .fx-wallet-card-amount {
    font-size: 13.5px !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
    color: #1c1e21 !important;
    line-height: 1 !important;
    padding: 0 2px !important;
}
body.fx-theme-dark .fx-wallet-card--v2 .fx-wallet-card-amount {
    color: #f4f3f7 !important;
}
.fx-wallet-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--primary, #d10054) !important;
    color: #ffffff !important;
    border: none !important;
    text-decoration: none !important;
    transition: filter 0.15s ease, transform 0.15s ease !important;
    flex-shrink: 0 !important;
}
.fx-wallet-add-btn:hover {
    filter: brightness(1.08) !important;
    transform: scale(1.06) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.fx-add-plus {
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin: 0 !important;
    margin-top: -1px !important;
    display: inline-block !important;
}

/* Icon Buttons: Notification & Messenger with thin theme border */
.fx-top-header .fx-th-icons { gap: 10px !important; }
.fx-top-header .fx-icon-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #65676b !important;
    transition: all 0.15s ease !important;
}
.fx-top-header .fx-icon-btn:hover,
.fx-top-header .fx-icon-btn.active {
    background: #f0f2f5 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--primary, #d10054) !important;
}
body.fx-theme-dark .fx-top-header .fx-icon-btn {
    background: #242526 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #b0b3b8 !important;
}
body.fx-theme-dark .fx-top-header .fx-icon-btn:hover,
body.fx-theme-dark .fx-top-header .fx-icon-btn.active {
    background: #3a3b3c !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--primary, #d10054) !important;
}
.fx-top-header .fx-badge-count {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background: #e41e3f !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    border: 2px solid #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 4px !important;
}
body.fx-theme-dark .fx-top-header .fx-badge-count {
    border-color: #18191a !important;
}

/* Premium Wallet Settings Page Available Balance Card */
.fx-wallet-balance-card {
    background: linear-gradient(135deg, rgba(209, 0, 84, 0.04) 0%, rgba(209, 0, 84, 0.01) 100%), #ffffff !important;
    border: 1px solid rgba(209, 0, 84, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    position: relative;
    overflow: hidden;
}
body.fx-theme-dark .fx-wallet-balance-card {
    background: linear-gradient(135deg, rgba(209, 0, 84, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%), #1e222d !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}
.badge-soft-success {
    background: rgba(40, 167, 69, 0.12) !important;
    color: #28a745 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    border: 1px solid rgba(40, 167, 69, 0.2) !important;
}
body.fx-theme-dark .badge-soft-success {
    background: rgba(40, 167, 69, 0.2) !important;
    color: #34d399 !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}
.fx-active-pulse {
    width: 7px;
    height: 7px;
    background-color: #28a745;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    animation: fx-pulse-green 1.8s infinite;
}
body.fx-theme-dark .fx-active-pulse {
    background-color: #34d399;
}
@keyframes fx-pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(40, 167, 69, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

/* Segmented Deposit / Withdraw Button Switcher */
.fx-wallet-tab-segmented {
    background: #f0f2f5 !important;
    border: 1px solid #e4e6eb !important;
    border-radius: 999px !important;
    padding: 4px !important;
    gap: 4px !important;
}
body.fx-theme-dark .fx-wallet-tab-segmented {
    background: #18191a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.fx-wallet-tab-btn {
    height: 42px !important;
    border-radius: 999px !important;
    color: #65676b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
}
body.fx-theme-dark .fx-wallet-tab-btn {
    color: #b0b3b8 !important;
}
.fx-wallet-tab-btn.active {
    color: #ffffff !important;
    box-shadow: none !important;
    background: #d10054 !important;
}
.fx-wallet-tab-btn.active:hover {
    color: #ffffff !important;
    box-shadow: none !important;
    background: #ab0045 !important;
}
.fx-wallet-tab-btn:not(.active):hover {
    color: var(--primary, #d10054) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}
body.fx-theme-dark .fx-wallet-tab-btn:not(.active):hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
.fx-top-header .fx-th-avatar {
    display: inline-flex !important;
    line-height: 0;
}
.fx-top-header .fx-th-avatar img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid transparent !important;
    transition: border-color 0.15s ease !important;
}
.fx-top-header .fx-th-avatar:hover img {
    border-color: var(--primary, #d10054) !important;
}
.fx-right-avatar-dot {
    width: 10px !important;
    height: 10px !important;
    background: #31a24c !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
}