/*
 * Authenticated KryptoFlexi application workspace.
 * The selectors are deliberately scoped to .rx-app-workspace so the public
 * website header, footer and marketing pages retain their existing layout.
 */
.rx-app-workspace {
    --rx-workspace-gutter: clamp(14px, 1.6vw, 30px);
    width: 100%;
}

/* Several legacy user pages add their own Bootstrap .container.  Do not let
 * those nested containers reintroduce a desktop max-width inside the app. */
.rx-app-workspace .container,
.rx-app-workspace .container-fluid {
    max-width: none !important;
}

.rx-app-workspace .container,
.rx-app-workspace .container-fluid,
.rx-app-workspace .rx-trades,
.rx-app-workspace .rx-buy-page,
.rx-app-workspace .chain-history-page,
.rx-app-workspace .rx-escrow-shell {
    width: 100%;
}

/* Keep a compact, intentional edge gutter rather than the old wide empty
 * columns.  This applies only to app content, never the public header/footer. */
.rx-app-workspace > .container,
.rx-app-workspace > .container-fluid,
.rx-app-workspace > main.container,
.rx-app-workspace > main.container-fluid,
.rx-app-workspace .rx-trades,
.rx-app-workspace .rx-buy-page,
.rx-app-workspace .chain-history-page {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--rx-workspace-gutter) !important;
    padding-right: var(--rx-workspace-gutter) !important;
}

/* Legacy pages with a page-level max-width now use the full dashboard canvas. */
.rx-app-workspace .rx-trades,
.rx-app-workspace .rx-buy-page,
.rx-app-workspace .chain-history-page,
.rx-app-workspace .rx-escrow-shell {
    max-width: none !important;
}

.rx-app-workspace .chain-history-page {
    margin-top: 32px;
    margin-bottom: 40px;
}

.rx-workspace-section {
    padding-top: 34px !important;
    padding-bottom: 48px !important;
}

/* The sidebar layout was already fluid; this prevents its content column from
 * gaining a second constrained container on individual dashboard pages. */
.dashboard-layout-shell .dashboard-body .container,
.dashboard-layout-shell .dashboard-body .container-fluid {
    max-width: none !important;
}

@media (max-width: 767.98px) {
    .rx-app-workspace {
        --rx-workspace-gutter: 12px;
    }

    .rx-workspace-section {
        padding-top: 22px !important;
        padding-bottom: 30px !important;
    }

    /* A restrained mobile type scale: readable, but without oversized headings
     * that consume the screen on trade, escrow and wallet pages. */
    .rx-app-workspace h1,
    .rx-app-workspace .h1 {
        font-size: clamp(1.45rem, 6vw, 1.8rem) !important;
        line-height: 1.2 !important;
    }

    .rx-app-workspace h2,
    .rx-app-workspace .h2 {
        font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
        line-height: 1.25 !important;
    }

    .rx-app-workspace h3,
    .rx-app-workspace .h3 {
        font-size: 1.18rem !important;
        line-height: 1.3 !important;
    }

    .rx-app-workspace h4,
    .rx-app-workspace h5,
    .rx-app-workspace h6 {
        font-size: 1.02rem !important;
        line-height: 1.35 !important;
    }

    .rx-app-workspace .btn,
    .rx-app-workspace button,
    .rx-app-workspace input,
    .rx-app-workspace select,
    .rx-app-workspace textarea {
        font-size: .9rem;
    }

    .rx-app-workspace .table,
    .rx-app-workspace .table td,
    .rx-app-workspace .table th {
        font-size: .84rem;
    }

    .rx-app-workspace .rx-trades,
    .rx-app-workspace .rx-buy-page,
    .rx-app-workspace .chain-history-page {
        padding-left: var(--rx-workspace-gutter) !important;
        padding-right: var(--rx-workspace-gutter) !important;
    }
}

/* Authenticated desktop navigation: the legacy theme gives every link and
 * wallet item 33px vertical padding, making the app header look oversized.
 * Keep this scoped to the signed-in workspace; the public site is untouched. */
@media (min-width: 1200px) {
    body.rx-authenticated-nav .header#header {
        height: 70px !important;
        min-height: 70px !important;
        display: flex;
        align-items: center;
    }

    body.rx-authenticated-nav .header#header > .container,
    body.rx-authenticated-nav .header#header .navbar,
    body.rx-authenticated-nav .header#header .navbar-collapse,
    body.rx-authenticated-nav .header#header .nav-menu,
    body.rx-authenticated-nav .header#header .header-right {
        height: 100%;
        align-items: center;
    }

    body.rx-authenticated-nav .header#header .nav-menu .nav-item .nav-link {
        height: 70px;
        display: flex;
        align-items: center;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        font-size: 1rem;
    }

    body.rx-authenticated-nav .header#header .header-right .wallet-wrapper {
        height: 70px;
        display: inline-flex;
        align-items: center;
        padding-top: 0;
        padding-bottom: 0;
    }

    body.rx-authenticated-nav .header#header .header-right .wallet-wrapper .wallet {
        font-size: 1rem;
    }

    /* Wallet and profile use older, differently named components. Normalise
       them into the same centered control row as the desktop navigation. */
    body.rx-authenticated-nav .header#header .header-right {
        display: flex !important;
        justify-content: flex-end;
        gap: 18px;
    }

    body.rx-authenticated-nav .header#header .header-right .wallet-wrapper,
    body.rx-authenticated-nav .header#header .header-right .account-wrapper {
        height: 70px;
        min-height: 70px;
        display: flex;
        align-items: center;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.rx-authenticated-nav .header#header .header-right .wallets {
        height: 42px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        line-height: 1;
        white-space: nowrap;
        font-size: 1rem;
    }

    body.rx-authenticated-nav .header#header .header-right .wallets img {
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

    body.rx-authenticated-nav .header#header .header-right .header-right__button {
        width: 42px;
        height: 42px;
        margin-left: 0;
    }

    body.rx-authenticated-nav .header#header .navbar-brand {
        margin-right: 32px;
    }
}

/* The Contact page remains a public route even for signed-in users. When the
 * authenticated navigation is rendered there, keep its geometry and visual
 * treatment identical to the application workspace instead of inheriting the
 * tall public-header rules. */
body.rx-authenticated-nav {
    --rx-auth-nav-bg: rgba(7, 8, 18, .94);
    --rx-auth-nav-line: rgba(174, 119, 255, .16);
    --rx-auth-nav-text: #aaa6bd;
    --rx-auth-nav-text-strong: #f7f4ff;
    --rx-auth-nav-field: #0d0f1b;
}

body.rx-authenticated-nav .header#header {
    position: sticky !important;
    top: 0;
    z-index: 1050;
    border-bottom: 1px solid var(--rx-auth-nav-line) !important;
    background: var(--rx-auth-nav-bg) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

body.rx-authenticated-nav .header#header .nav-link {
    color: var(--rx-auth-nav-text) !important;
    font-size: .9rem !important;
    font-weight: 650;
}

body.rx-authenticated-nav .header#header .nav-link:hover,
body.rx-authenticated-nav .header#header .nav-link:focus-visible {
    color: var(--rx-auth-nav-text-strong) !important;
}

body.rx-authenticated-nav .header#header :is(.wallets, .header-right__button, .rx-notification-bell) {
    border: 1px solid var(--rx-auth-nav-line) !important;
    border-radius: 12px !important;
    color: var(--rx-auth-nav-text) !important;
    background: var(--rx-auth-nav-field) !important;
}

html[data-rupexcart-theme="light"] body.rx-authenticated-nav.rx-dashboard-theme {
    --rx-auth-nav-bg: rgba(255, 255, 255, .94);
    --rx-auth-nav-line: rgba(62, 45, 96, .12);
    --rx-auth-nav-text: #625e76;
    --rx-auth-nav-text-strong: #161426;
    --rx-auth-nav-field: #f8f8fc;
}

@media (max-width: 1199.98px) {
    body.rx-authenticated-nav :is(.tablet-header-wrapper, .mobile-header) {
        border-bottom: 1px solid var(--rx-auth-nav-line) !important;
        background: var(--rx-auth-nav-bg) !important;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
}