/* ────────────────────────────────────────────────────────────────
   components-shared.css

   Single source of truth for CSS classes used by SHARED components
   under Azamind.App.Shared/Common/ (and reused by Admin/ pages).

   Loaded by BOTH host apps (client web/MAUI + admin web/MAUI). A
   shared component must never depend on host-specific
   components-client.css / components-admin.css for layout — a class
   defined in only one of them renders "naked" in the other app
   (root cause of the recurring spacing complaints).

   External spacing uses --az-space-* tokens from tokens.css only.
   See .claude/memory/feedback_external_spacing_standard.md and
   feedback_shared_component_css_ownership.md.
   ──────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════
   Glass morphism, gold accents, luxury DeFi styling
   ══════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────── */
/* Safe-area clearance for horizontal insets only. Top inset is already handled by the
   sticky `<div class="status-bar-safe-area">` in Azamind.App.Client/wwwroot/index.html
   (under its `@supports (-webkit-touch-callout: none)` iOS rule); stacking my padding
   on top of that div doubles the gap, so the Y padding stays at --az-space-1 and only
   X sides honor the notch. Bottom inset is absorbed by BottomNav's own env() padding. */
.rz-layout {
    padding: var(--az-space-1)
            max(var(--az-safe-right, 0px), var(--az-space-1))
            var(--az-space-1)
            max(var(--az-safe-left, 0px), var(--az-space-1));
}

/* ── Background Depth (ambient gold orbs) ────────────────── */
body {
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: -20%;
    left: -10%;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, rgba(var(--az-gold-rgb), 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

body::after {
    content: '';
    position: fixed;
    bottom: -20%;
    right: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(var(--az-gold-rgb), 0.02) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* ── Cards — Glass Morphism ──────────────────────────────── */
.rz-card {
    background: var(--az-glass-bg) !important;
    backdrop-filter: blur(var(--az-glass-blur));
    -webkit-backdrop-filter: blur(var(--az-glass-blur));
    border: var(--az-glass-border) !important;
    border-radius: var(--az-radius-lg) !important;
    box-shadow: var(--az-shadow-2);
    transition: border-color var(--az-transition-normal),
                box-shadow var(--az-transition-normal);
}

.rz-card:hover {
    border-color: rgba(var(--az-gold-rgb), 0.20) !important;
    box-shadow: var(--az-shadow-gold);
}

/* ── Stat Cards — Gold Accent ────────────────────────────── */
.stat-card {
    padding: var(--az-space-3) !important;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--az-gold-gradient);
    opacity: 0.6;
}

.stat-card .rz-text-overline {
    color: var(--az-gold) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: var(--az-text-overline) !important;
}

.stat-card .stat-value {
    font-size: var(--az-text-display);
    font-weight: 700;
    background: var(--az-gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── DataGrid — Luxury Dark Table ────────────────────────── */
.rz-datatable {
    border-radius: var(--az-radius-lg) !important;
    overflow: hidden;
    background: var(--az-glass-bg) !important;
    backdrop-filter: blur(var(--az-glass-blur));
    -webkit-backdrop-filter: blur(var(--az-glass-blur));
    border: var(--az-glass-border) !important;
    box-shadow: var(--az-shadow-2);
}

.rz-datatable .rz-datatable-thead > tr > th {
    background: rgba(var(--az-gold-rgb), 0.04) !important;
    color: var(--az-gold) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--az-text-overline) !important;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(var(--az-gold-rgb), 0.12) !important;
}

.rz-datatable .rz-datatable-tbody > tr:hover > td {
    background: rgba(var(--az-gold-rgb), 0.04) !important;
}

.rz-datatable .rz-datatable-tbody > tr > td {
    border-bottom: 1px solid var(--az-surface-500) !important;
}

/* Last row — no border */
.rz-datatable .rz-datatable-tbody > tr:last-child > td {
    border-bottom: none !important;
}

/* ── Buttons — Gold Accent ───────────────────────────────── */

/* Primary: solid gold */
.rz-button.rz-primary {
    background: var(--az-gold) !important;
    color: var(--az-on-primary) !important;
    font-weight: 600;
    border: none !important;
    box-shadow: var(--az-shadow-1);
    transition: all var(--az-transition-fast);
}

.rz-button.rz-primary:hover:not(:disabled) {
    background: var(--az-gold-light) !important;
    box-shadow: var(--az-shadow-gold);
}

.rz-button.rz-primary:active:not(:disabled) {
    background: var(--az-gold-dark) !important;
}

/* Light / Secondary: outlined gold */
.rz-button.rz-light {
    background: transparent !important;
    border: 1px solid rgba(var(--az-gold-rgb), 0.3) !important;
    color: var(--az-gold) !important;
    transition: all var(--az-transition-fast);
}

.rz-button.rz-light:hover:not(:disabled) {
    background: rgba(var(--az-gold-rgb), 0.08) !important;
    border-color: var(--az-gold) !important;
}

/* Danger: semi-transparent red */
.rz-button.rz-danger {
    background: var(--az-danger-lighter) !important;
    color: var(--az-danger) !important;
    border: 1px solid rgba(255, 59, 48, 0.2) !important;
    transition: all var(--az-transition-fast);
}

.rz-button.rz-danger:hover:not(:disabled) {
    background: rgba(255, 59, 48, 0.2) !important;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.rz-sidebar {
    border: 1px solid var(--az-surface-600) !important;
    border-radius: var(--az-radius-xl);
    margin: 0;
    margin-right: var(--az-space-1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15),
                1px 0 0 rgba(var(--az-gold-rgb), 0.06);
    overflow: hidden;
}

@media (prefers-color-scheme: light) {
    .rz-sidebar {
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.06),
                    1px 0 0 rgba(var(--az-gold-rgb), 0.08);
    }
}

/* ── Panel Menu — Clean Styling ──────────────────────────── */

/* Remove Radzen Material ripple effect on menu links */
.rz-panel-menu .rz-navigation-item-link {
    background: none !important;
}

/* Vertical breathing room between menu items */
.rz-panel-menu .rz-navigation-item {
    margin-block: 2px;
}

/* Gold left accent bar on active item */
.rz-panel-menu .rz-navigation-item-wrapper-active {
    border-left: 3px solid var(--az-gold);
}

.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-link {
    font-weight: 600;
    color: var(--az-gold) !important;
}

.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
    color: var(--az-gold) !important;
}

/* Hover: gold text + icon */
.rz-panel-menu .rz-navigation-item-link:hover {
    color: var(--az-gold) !important;
}

.rz-panel-menu .rz-navigation-item-link:hover .rz-navigation-item-icon {
    color: var(--az-gold) !important;
}

.rz-panel-menu .rz-navigation-item-link:hover .rz-navigation-item-text {
    color: var(--az-gold) !important;
}

/* ── Responsive — Sidebar / Panel menu ───────────────────── */

/* Mobile: ≤ 768px — sidebar hidden, layout collapses to a single 1fr cell. */
@media (max-width: 768px) {
    .rz-sidebar {
        display: none !important;
    }

    .rz-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
        grid-template-areas: "rz-body" !important;
    }

    /* Edge-to-edge card + reserve space so the floating BottomNav capsule never
       overlaps the last scroll row. Capsule = 54px content + 12px vertical padding +
       4px lift above safe area + breathing room. */
    .az-body {
        border: none !important;
        border-radius: 0 !important;
        padding-bottom: calc(110px + var(--az-safe-bottom, 0px)) !important;
    }
}

/* Tablet: 769px–1024px — icon rail (labels hidden, icons centered) */
@media (min-width: 769px) and (max-width: 1024px) {
    .rz-sidebar {
        width: 64px !important;
        min-width: 64px !important;
    }

    .rz-panel-menu .rz-navigation-item-text {
        display: none !important;
    }

    .rz-panel-menu .rz-navigation-item-link {
        justify-content: center !important;
        padding-inline: 0 !important;
    }

    .rz-panel-menu .rz-navigation-item-icon {
        margin-inline-end: 0 !important;
    }
}

/* ── ProgressBar — Gold Gradient ─────────────────────────── */
.rz-progressbar .rz-progressbar-value {
    background: var(--az-gold-gradient) !important;
}

.rz-progressbar {
    background: var(--az-surface-600) !important;
    border-radius: var(--az-radius-full) !important;
}

/* ── Notifications — Dark Glass ──────────────────────────── */
.rz-notification {
    max-width: 380px !important;
    /* Above .rz-dialog-wrapper (z-index 1050) so toasts are never hidden
       behind an open modal. */
    z-index: 1100 !important;
    border-radius: var(--az-radius-lg) !important;
    box-shadow: var(--az-shadow-3) !important;
}

.rz-notification .rz-notification-item-wrapper {
    background-color: transparent !important;
    margin: 0.5rem 0 !important;
}

.rz-notification .rz-notification-item {
    border: var(--az-glass-border);
    backdrop-filter: blur(var(--az-glass-blur));
    -webkit-backdrop-filter: blur(var(--az-glass-blur));
}

.rz-notification-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Alerts — Themed Backgrounds ─────────────────────────── */
.rz-alert {
    border-radius: var(--az-radius-lg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.rz-alert.rz-alert-danger {
    background: var(--az-danger-lighter) !important;
    border: 1px solid rgba(255, 59, 48, 0.2) !important;
}

.rz-alert.rz-alert-info {
    background: var(--az-info-lighter) !important;
    border: 1px solid rgba(90, 200, 250, 0.15) !important;
}

.rz-alert.rz-alert-success {
    background: var(--az-success-lighter) !important;
    border: 1px solid rgba(52, 199, 89, 0.15) !important;
}

.rz-alert.rz-alert-warning {
    background: var(--az-warning-lighter) !important;
    border: 1px solid rgba(212, 160, 23, 0.15) !important;
}

/* ── WalletConnect Button — Gold Accent ──────────────────── */
.wc-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem 0.4rem 0.4rem;
    background: transparent;
    border: 1px solid rgba(var(--az-gold-rgb), 0.25) !important;
    border-radius: var(--az-radius-md) !important;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--az-gold) !important;
    transition: all var(--az-transition-fast);
    vertical-align: middle;
}

.wc-connect-btn:hover:not(:disabled) {
    background: rgba(var(--az-gold-rgb), 0.08) !important;
    border-color: var(--az-gold) !important;
    box-shadow: var(--az-shadow-gold);
}

.wc-connect-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.wc-connect-btn__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* ── Modal — Glass ───────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 460px;
    padding: 2rem;
    background: var(--az-glass-bg-elevated) !important;
    backdrop-filter: blur(var(--az-glass-blur-heavy));
    -webkit-backdrop-filter: blur(var(--az-glass-blur-heavy));
    border: var(--az-glass-border) !important;
    border-radius: var(--az-radius-xl) !important;
    box-shadow: var(--az-shadow-4);
}

/* ── RadzenDialog — force viewport-centered overlay ──────────
   Radzen's default .rz-dialog-wrapper uses position:absolute, so when the
   dialog is mounted inside the Web client page wrapper (which sits in the
   RadzenLayout grid's content cell to the right of the sidebar), it
   positions relative to that cell, not the viewport — the dialog renders
   visibly shifted right of center. Force fixed-position viewport-size
   overlay with flex centering; neutralise the inline top/left/transform
   Radzen applies to .rz-dialog itself. */
.rz-dialog-wrapper {
    position: fixed !important;
    inset: 0 !important;
    width: 100dvw !important;
    height: 100dvh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1050;
}

.rz-dialog-wrapper > .rz-dialog {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
}

.rz-dialog-mask {
    position: fixed !important;
    inset: 0 !important;
}

/* Universal dialog body padding driven by --az-dialog-padding (tokens.css).
   Single source of truth — every modal in the project picks up the same
   inset, and the mobile media query in tokens.css halves it for phones.
   !important needed because Radzen ships its own padding on .rz-dialog-content. */
.rz-dialog-content {
    padding: var(--az-dialog-padding) !important;
}

/* ── RadzenSwitch — Gold ─────────────────────────────────── */
.rz-switch .rz-switch-checked {
    background: var(--az-gold) !important;
}

/* ── RadzenTooltip — Dark ────────────────────────────────── */
/* Canonical version: admin's more complete form — covers both the wrapper
   and the inner .rz-tooltip-content element for consistent bg/color/radius. */
.rz-tooltip,
.rz-tooltip .rz-tooltip-content {
    background: var(--az-surface-700, #1c1c1e) !important;
    border-radius: var(--az-radius-md, 10px) !important;
    color: #e8e8e8;
}

.rz-tooltip {
    border: var(--az-glass-border, 1px solid rgba(255, 255, 255, 0.14)) !important;
    box-shadow: var(--az-shadow-3, 0 8px 24px rgba(0, 0, 0, 0.45));
}

/* ── Responsive Utilities ────────────────────────────────── */

/* Stat grid — responsive columns */
.az-stat-grid {
    display: grid;
    gap: var(--az-space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 481px) {
    .az-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 769px) {
    .az-stat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Content container */
.az-content-container {
    padding: var(--az-space-2);
    width: 100%;
}

/* ── Scrollbar — Luxury ──────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--az-surface-400);
    border-radius: var(--az-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--az-surface-200);
}

/* ── Glass Fallback ──────────────────────────────────────── */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .rz-card,
    .rz-datatable,
    .rz-notification,
    .modal-card {
        background: var(--az-surface-800) !important;
    }

    .rz-sidebar {
        background: var(--az-surface-850) !important;
        box-shadow: none;
    }
}

/* ── Empty State ────────────────────────────────────────── */
.az-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--az-space-16) var(--az-space-4);
    max-width: 400px;
    margin: 0 auto;
}

.az-empty-icon {
    color: var(--az-surface-300);
    margin-bottom: var(--az-space-5);
    opacity: 0.6;
}

.az-empty-title {
    font-size: var(--az-text-h4);
    font-weight: 600;
    color: var(--az-on-surface);
    margin-bottom: var(--az-space-2);
}

.az-empty-text {
    font-size: var(--az-text-body);
    color: var(--az-on-surface-secondary);
    line-height: 1.6;
    margin-bottom: var(--az-space-6);
}

.az-empty-action {
    text-decoration: none;
}

.az-page-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

/* ── Wallets Hub Tabs — Sticky + Horizontal Scroll ─────────
   Radzen's `.rz-tabview` is `display: flex; flex-direction: column` and
   `.rz-tabview-panels` is `flex:1; overflow:auto`. The flex-column context
   + inner overflow-auto breaks `position: sticky` on the nav because sticky
   resolves against the nearest scroll ancestor, and the flex constraints
   confuse layout measurement. Force `.rz-tabview` to `display: block` and
   strip the panels' inner scroll so the outer `.az-body` becomes the sole
   scroll ancestor — sticky then pins correctly. */
.az-hub-tabs.rz-tabview,
.az-hub-tabs .rz-tabview-panels {
    display: block !important;
}

.az-hub-tabs .rz-tabview-panels {
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Sticky nav "busts out" of parent paddings (.az-content-container space-2 +
   .rz-layout space-1 on mobile) with negative margins + calc() width so the
   bar spans the full .az-body width, same visual as the fixed BottomNav.
   Opaque background + subtle blur keeps scrolled content from bleeding
   through on scroll. */
.az-hub-tabs .rz-tabview-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;
    /* Opaque, NOT liquid-glass: a sticky element with backdrop-filter
       re-composites its sampled backdrop whenever an overlay/repaint happens
       elsewhere (e.g. a RadzenTooltip opening over the grid), which visibly
       corrupted the strip background until a page reload. An opaque surface
       has no live backdrop to corrupt and also better satisfies this bar's
       own intent — keep scrolled content from bleeding through. */
    background: var(--az-surface-800);
    border-bottom: 1px solid rgba(var(--az-gold-rgb), 0.15);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    display: flex;
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--az-space-2));
    margin-top: calc(-1 * var(--az-space-2));
    padding-inline: var(--az-space-2);
}

@media (max-width: 768px) {
    .az-hub-tabs .rz-tabview-nav {
        margin-inline: calc(-1 * var(--az-space-2));
        margin-top: calc(-1 * var(--az-space-2));
    }
}

/* Mobile + dark theme — push the sticky tab strip darker than the default
   --az-surface-800 (#141414) so it visually separates from page content
   that uses the same surface token. Light theme keeps the existing
   --az-surface-800 (#FFFFFF) untouched. */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    .az-hub-tabs .rz-tabview-nav {
        background: #0A0A0A;
    }
}


.az-hub-tabs .rz-tabview-nav::-webkit-scrollbar {
    display: none;
}

.az-hub-tabs .rz-tabview-nav > li {
    flex-shrink: 0;
    border-radius: var(--az-radius-md) var(--az-radius-md) 0 0;
    overflow: hidden;
    transition: background var(--az-transition-fast);
}

.az-hub-tabs .rz-tabview-nav > li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
    background-color: rgba(var(--az-gold-rgb), 0.12) !important;
}

.az-hub-tabs .rz-tabview-nav .rz-tabview-nav-link {
    white-space: nowrap;
    padding: var(--az-space-3) var(--az-space-5);
    color: var(--az-surface-100) !important;
    border-bottom: 2px solid transparent;
    transition: color var(--az-transition-fast), border-color var(--az-transition-fast);
    opacity: 0.75;
}

.az-hub-tabs .rz-tabview-nav .rz-tabview-nav-link:hover {
    color: var(--az-gold) !important;
    opacity: 1;
}

.az-hub-tabs .rz-tabview-nav .rz-tabview-selected .rz-tabview-nav-link {
    color: var(--az-gold) !important;
    border-bottom-color: var(--az-gold) !important;
    font-weight: 700;
    opacity: 1;
}

.az-hub-tabs .rz-tabview-panels {
    padding: var(--az-space-4) 0 0 0;
}

.az-hub-tabs .rz-tabview-panel {
    padding: 0;
}

/* Custom (non-RadzenTabs) protocol tab strip used by LiquidityPoolsContent /
   LendingContent. Reuses the .az-hub-tabs .rz-tabview-* visual rules above
   (sticky gold nav, selected underline) but the root is a plain <div> — there
   is no .rz-tabview ancestor, so the compound `.az-hub-tabs.rz-tabview` rule
   does not apply here. Re-assert block layout + reset the <ul> list chrome so
   the strip renders identically to the old RadzenTabs nav. */
.az-custom-tabs {
    display: block;
}

.az-custom-tabs > .rz-tabview-nav {
    list-style: none;
    margin-block: 0;
    padding-block: 0;
}

.az-custom-tabs > .rz-tabview-nav > li {
    list-style: none;
}

.az-custom-tabs .rz-tabview-nav .rz-tabview-nav-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}

/* Deterministic placeholder when a protocol logo is missing/404. The img's
   onerror reveals this sibling (display:flex) — same palette as
   TokenLogoFallback. Sizing/shape live here; visibility is inline. */
.az-tab-logo-fallback {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    line-height: 1;
}

/* ── Provider Badge — Debug Diagnostic ──────────────────── */
.provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.7;
    font-size: 0.75rem;
}

/* Pull-to-refresh was handled by a JS gesture handler + absolute-positioned indicator
   until it became clear the WKWebView elastic overscroll on iOS (and the lack of a
   native gesture on Android BlazorWebView) made the JS approach feel broken. Replaced
   with native UIRefreshControl (iOS/MacCatalyst) + SwipeRefreshLayout (Android) wired
   in MainPage. No CSS needed — native spinners handle presentation. Web users rely on
   the browser's built-in refresh. */
.az-body {
    position: relative;
}

/* ── DataGrid Mobile Polish ───────────────────────────────── */

/* Touch scroll momentum on the scrollable data area. Snap behavior was removed —
   scroll-snap-type: x proximity + scroll-snap-align on every column made the table
   feel like it had an "auto-doводчик": releasing the finger mid-row pulled the
   viewport back/forward to a column edge, hiding partially-visible data. Free
   scrolling is more legible for wide grids with narrow phone widths. */
.rz-data-grid-data {
    -webkit-overflow-scrolling: touch;
}

/* Right-edge shadow: visual hint that more columns exist */
@media (max-width: 768px) {
    .rz-data-grid {
        position: relative;
    }

    .rz-data-grid::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 18px;
        background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.35));
        pointer-events: none;
        z-index: 1;
    }

    /* Light theme: the hard black fade reads as a dark stripe on white surfaces.
       Use the surface background color so it fades into the edge naturally. */
    @media (prefers-color-scheme: light) {
        .rz-data-grid::after {
            background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.06));
        }
    }
}

/* Table-layout: keep the grid table at its natural content width and let
   `.rz-data-grid-data` (Radzen's scroll container) provide horizontal scroll
   on any viewport narrower than the table needs. Applied unconditionally —
   at wide-desktop widths max-content is below container width so width:100%
   still fills naturally (no scroll); at iPad portrait / phone widths the
   parent scrolls instead of squeezing columns into each other. */
.rz-data-grid-data > .rz-grid-table {
    display: table !important;
    table-layout: auto !important;
    width: 100% !important;
    min-width: max-content;
}

/* Compact density on mobile via CSS token override */
@media (max-width: 768px) {
    .rz-data-grid {
        --rz-grid-cell-padding: 6px 8px;
        --rz-grid-header-cell-padding: 6px 8px;
        font-size: 12px;
    }

    /* Radzen injects inline style="width:Xpx" on every <col>, including those
       belonging to hide-on-mobile columns. Even with table-layout:auto those
       inline widths act as column minimums, so the hidden column's <col> still
       reserves its full pixel quota (e.g. 120px), leaving a blank scroll gap.
       Resetting col widths to auto lets the browser ignore the hidden column's
       reservation and distribute the remaining width across visible columns. */
    .rz-data-grid-data .rz-grid-table col {
        width: auto !important;
        min-width: 0 !important;
    }
}

/* Hide-on-mobile utility: header + data cells */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}

/* ── Dashboard grid ──────────────────────────────────────── */

.az-dashboard-grid {
    display: grid;
    gap: var(--az-space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 481px) {
    .az-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .az-dashboard-grid > *:nth-child(3) {
        grid-column: span 2;
    }
}

@media (min-width: 1025px) {
    .az-dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .az-dashboard-grid > *:nth-child(3) {
        grid-column: auto;
    }
}

/* Chart + transactions side-by-side row (2 cols on desktop, stacked otherwise).
   align-items: stretch makes both columns equal height; the inner card/list grows
   via flex: 1 inside .az-dashboard-col. */
.az-dashboard-row {
    display: grid;
    gap: var(--az-space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 1025px) {
    .az-dashboard-row {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}

.az-dashboard-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.az-dashboard-col > .chart-mini-card,
.az-dashboard-col > .az-tx-list,
.az-dashboard-col > .az-empty-state {
    flex: 1;
    min-height: 0;
}

/* ── Card link wrapper — preserves full card click target ─── */
.az-card-link,
.az-card-link:visited {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--az-radius-lg);
    transition: transform var(--az-transition-fast);
}

.az-card-link:hover {
    transform: translateY(-2px);
}

.az-card-link .rz-card {
    height: 100%;
}

/* ── Mini chart card ──────────────────────────────────────── */
.chart-mini-card {
    padding: var(--az-space-2) !important;
    position: relative;
    overflow: hidden;
}

.chart-mini-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--az-gold-gradient);
    opacity: 0.6;
}

.chart-mini-header {
    margin-bottom: var(--az-space-2);
}

.chart-mini-header .rz-text-overline {
    color: var(--az-gold) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: var(--az-text-overline) !important;
}

.chart-skeleton--mini {
    height: 180px;
}

/* ── Recent transactions list ────────────────────────────── */
.az-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--az-space-4);
}

.az-view-all-link {
    font-size: var(--az-text-body-sm);
    color: var(--az-gold);
    text-decoration: none;
    transition: color var(--az-transition-fast);
    white-space: nowrap;
}

.az-view-all-link:hover {
    color: var(--az-gold-light);
    text-decoration: underline;
}

.az-view-all-row {
    text-align: right;
}

.az-tx-list {
    display: flex;
    flex-direction: column;
    border-radius: var(--az-radius-lg);
    overflow: hidden;
    background: var(--az-glass-bg);
    backdrop-filter: blur(var(--az-glass-blur));
    -webkit-backdrop-filter: blur(var(--az-glass-blur));
    border: var(--az-glass-border);
    box-shadow: var(--az-shadow-2);
}

.az-tx-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: var(--az-space-4);
    padding: var(--az-space-4) var(--az-space-5);
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--az-surface-500);
    transition: background var(--az-transition-fast);
}

.az-tx-row:last-child {
    border-bottom: none;
}

.az-tx-row:hover {
    background: rgba(var(--az-gold-rgb), 0.04);
}

.az-tx-asset {
    display: flex;
    align-items: center;
    gap: var(--az-space-2);
    min-width: 0;
}

.az-tx-symbol {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.az-tx-no-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-block;
}

.az-tx-direction {
    font-weight: 600;
    font-size: var(--az-text-body-sm);
}

.az-tx-in {
    color: var(--az-success);
}

.az-tx-out {
    color: var(--az-danger);
}

.az-tx-self {
    color: var(--az-on-surface-secondary);
}

.az-tx-amount {
    font-size: var(--az-text-body-sm);
    color: var(--az-on-surface-secondary);
    text-align: right;
    font-family: monospace;
    white-space: nowrap;
}

.az-tx-time {
    font-size: var(--az-text-body-sm);
    color: var(--az-on-surface-secondary);
    text-align: right;
    white-space: nowrap;
    min-width: 60px;
}

@media (max-width: 480px) {
    .az-tx-row {
        grid-template-columns: 1fr auto auto;
        gap: var(--az-space-3);
        padding: var(--az-space-3) var(--az-space-4);
    }

    .az-tx-amount {
        display: none;
    }
}

/* ── Light-theme input placeholders ───────────────────────────
   Material's default placeholder is rgba(0,0,0,0.20) — near-invisible on
   warm off-white surfaces. Force a readable tone; keep it subtly lighter
   than filled text so placeholder/value distinction stays obvious. */
@media (prefers-color-scheme: light) {
    .rz-placeholder,
    .rz-dropdown-label,
    input::placeholder,
    textarea::placeholder {
        color: var(--az-surface-200) !important;
        opacity: 1 !important;
    }
}

/* ── Gold Accent Utility ─────────────────────────────────────
   Apply to text where the luxury metallic shimmer should appear
   (brand, page titles, key numbers). Uses the --az-gold-gradient
   token so it stays theme-aware. */
.az-text-gold {
    background: var(--az-gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ── Unauthenticated shell ───────────────────────────────────
   Layout container shown while AuthorizeView is in its NotAuthorized
   branch (login / signup / redirect pages). Full-height, content
   vertically centered. Uses grid + place-items so inline <style> tags
   in child components stay `display: none` (UA default preserved on
   grid items that don't already have an explicit display). */
.az-auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--az-safe-top, 0px)
            var(--az-safe-right, 0px)
            var(--az-safe-bottom, 0px)
            var(--az-safe-left, 0px);
}

/* ── Spin animation ──────────────────────────────────────────
   Used on the deep-scan button icon while a background scan is in flight.
   Pure CSS rotation, no JS. */
@keyframes az-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.az-spin {
    display: inline-block;
    animation: az-spin 1s linear infinite;
}

/* ── Lending ─────────────────────────────────────────────────
   Shared across LendingContent, LendingPositionsView, and
   LendingMarketsView (scoped CSS would not cross component
   boundaries). */
.az-lending-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--az-space-12);
}

.az-lending-cards {
    margin-bottom: var(--az-space-8);
}

.az-lending-card {
    margin-bottom: var(--az-space-6);
}

.az-lending-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--az-space-4);
}

.az-lending-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: var(--az-text-body);
}

.az-lending-card-value {
    font-weight: 700;
    font-size: var(--az-text-body-lg);
}

.az-lending-health {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 0;
    font-size: var(--az-text-body-sm);
}

.az-lending-health-label {
    color: var(--az-on-surface-secondary);
}

.az-lending-health-value {
    font-weight: 600;
}

.az-lending-health-value.health-safe {
    color: var(--az-health-safe);
}

.az-lending-health-value.health-warning {
    color: var(--az-health-warning);
}

.az-lending-health-value.health-danger {
    color: var(--az-health-danger);
}

.az-lending-network-logo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.az-logo-sm {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.az-logo-md {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.az-lending-market-badge {
    font-size: var(--az-text-overline);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(var(--az-gold-rgb), 0.10);
    color: var(--az-gold);
    border: 1px solid rgba(var(--az-gold-rgb), 0.28);
    white-space: nowrap;
}

.az-lending-leverage-badge {
    font-size: var(--az-text-overline);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(var(--az-health-warning-rgb), 0.14);
    color: var(--az-health-warning);
    border: 1px solid rgba(var(--az-health-warning-rgb), 0.32);
    white-space: nowrap;
}

.az-lending-multiply-badge {
    font-size: var(--az-text-overline);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(138, 92, 245, 0.14);
    color: #a47bff;
    border: 1px solid rgba(138, 92, 245, 0.32);
    white-space: nowrap;
}

.az-lending-network-labels {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.az-lending-network-name {
    font-weight: 500;
    color: var(--az-on-surface);
    font-size: var(--az-text-body-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.az-lending-network-market {
    font-size: var(--az-text-caption);
    font-weight: 500;
    color: var(--az-gold);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.az-lending-section {
    margin-top: var(--az-space-3);
}

.az-lending-section-header {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    padding: 8px 0;
    font-size: var(--az-text-overline);
    color: var(--az-on-surface-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.az-lending-section-header span:last-child {
    text-align: right;
    min-width: 100px;
}

.az-lending-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    padding: 12px 0;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.az-lending-row:last-child {
    border-bottom: none;
}

.az-lending-asset {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    /* Constrain to the parent cell. Without max-width the flex row grows to fit content,
       which fights the column Width= and Radzen's table-layout expands the whole column. */
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.az-lending-asset-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0; /* allow flex-shrink below content width so ellipsis can kick in */
    overflow: hidden;
    flex: 1 1 auto;
}

.az-lending-asset-info > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Pair name truncates; fee-tier badge stays pinned right and always visible */
.az-lending-asset-info > span.az-lp-pair-line {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: visible;
}

.az-lp-pair-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.az-fee-tier-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(var(--az-gold-rgb), 0.12);
    color: var(--az-gold);
    border: 1px solid rgba(var(--az-gold-rgb), 0.3);
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0.2px;
}

.az-lp-pair-line .az-fee-tier-badge {
    flex: 0 0 auto;
}

/* Neutral muted badge for pool-deployment origin (e.g. "Factory" — Curve's permissionless
   factory-deployed pools). Sits next to the pair name, distinct from the gold FeeTier badge
   so the colour difference signals "metadata" vs "fee accent". */
.az-pool-origin-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.14);
    color: var(--az-on-surface-secondary);
    border: 1px solid rgba(128, 128, 128, 0.28);
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0.2px;
    flex: 0 0 auto;
}

/* Force the frozen Asset column cell + header to honour its Width=140px — Radzen's
   table-layout otherwise grows the column to fit the longest pair (e.g. "syrupUSDT /
   USDT-USDC"), which on mobile eats half the viewport. CssClass=az-lending-col-asset
   is applied to both th and td by Radzen. */
.az-lending-col-asset {
    max-width: 140px;
}

.az-lending-asset-name {
    font-size: 0.8em;
    font-weight: 400;
    color: var(--az-on-surface-secondary);
}

.az-token-symbol-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: var(--az-on-surface-secondary);
    font-size: 8px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.az-lending-token-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.az-lp-network-logo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.az-lp-pair-logos {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.az-lp-token-logo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--az-surface-100, #1a1a1a);
}

.az-lp-token-logo-overlap {
    margin-left: -8px;
    border: 2px solid var(--az-surface, #0d0d0d);
}

.az-lp-token-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 9px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    overflow: hidden;
    box-sizing: border-box;
}

.az-lp-stack {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

/* Liquidity-efficiency badge — colored dot next to the pool name. Reflects the share of
   pool TVL that's actively tradeable at the current tick (V3/V4 concentrated liquidity
   can leave most deposits out-of-range and inflate raw subgraph TVL).
     green  — >=50% active (healthy concentrated pool, narrow band around current price)
     yellow — 5%-50%       (mixed; some out-of-range positions but core is alive)
     red    — <5%          (wide-range / mostly parked; subgraph TVL misleading)
     unknown — null ActiveTvl (sync hasn't populated yet) — neutral grey */
.az-lp-efficiency {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 6px;
    box-shadow: 0 0 0 2px var(--az-surface, #0d0d0d);
}

.az-lp-efficiency-green   { background: var(--az-success); }
.az-lp-efficiency-yellow  { background: var(--az-warning); }
.az-lp-efficiency-red     { background: var(--az-danger); }
.az-lp-efficiency-unknown { background: #6b7280; }

.az-lp-muted {
    color: var(--az-on-surface-secondary);
    font-size: var(--az-text-body-sm);
}

.az-lp-market-view {
    padding: var(--az-space-4) 0;
}

.az-lp-market-version-badge {
    display: inline-block;
    font-size: var(--az-text-overline);
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.az-lp-market-version-badge--v2 {
    background: rgba(201, 168, 76, 0.12);
    color: var(--az-gold);
    border-color: rgba(201, 168, 76, 0.30);
}

.az-lp-market-version-badge--v3 {
    background: rgba(99, 179, 237, 0.12);
    color: var(--az-text-secondary, #8e9ab0);
    border-color: rgba(99, 179, 237, 0.25);
}

.az-lp-market-version-badge--v4 {
    background: rgba(154, 117, 237, 0.12);
    color: var(--az-text-secondary, #8e9ab0);
    border-color: rgba(154, 117, 237, 0.25);
}

.az-lp-market-usd {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.az-lp-market-fee {
    font-size: var(--az-text-body-sm);
    color: var(--az-on-surface-secondary);
    font-variant-numeric: tabular-nums;
}

.az-lp-market-apr {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--az-gold);
}

.az-lending-balance {
    color: var(--az-on-surface-secondary);
    font-size: var(--az-text-body-sm);
}

.az-lending-usd-value {
    text-align: right;
    font-weight: 600;
    min-width: 100px;
}

.az-lending-usd-secondary {
    font-size: 0.82em;
    color: var(--az-on-surface-secondary);
    font-weight: 500;
    margin-top: 2px;
}

.az-lending-pnl-badge {
    font-size: var(--az-text-overline);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.az-lending-pnl-positive {
    background: rgba(var(--az-health-safe-rgb), 0.14);
    color: var(--az-health-safe);
    border-color: rgba(var(--az-health-safe-rgb), 0.32);
}

.az-lending-pnl-negative {
    background: rgba(var(--az-health-danger-rgb), 0.14);
    color: var(--az-health-danger);
    border-color: rgba(var(--az-health-danger-rgb), 0.32);
}

.az-frozen-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--az-text-body-sm);
    color: var(--az-on-surface-secondary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.az-lending-network-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--az-text-body-sm);
    color: var(--az-on-surface-secondary);
    min-width: 0;
}

.az-markets-row--frozen {
    opacity: 0.5;
}

.az-markets-dual-cell {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.az-markets-amount {
    font-weight: 500;
}

.az-markets-usd {
    font-size: 0.85em;
    color: var(--az-on-surface-secondary);
}

.az-markets-apy {
    color: var(--az-health-safe);
    font-weight: 500;
}

.az-col-head {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.az-col-hint {
    font-size: 14px;
    color: var(--az-on-surface-secondary);
    cursor: help;
    opacity: 0.65;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.az-col-hint:hover {
    opacity: 1;
    color: var(--az-gold);
}

.az-apr-combined {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: help;
}

.az-apr-flame {
    font-size: 0.85em;
    line-height: 1;
}

/* Highlight rows with an active farm-incentive campaign. !important required to
   beat Radzen's frozen-cell rule which hardcodes background-color via the theme
   variable on td.rz-frozen-cell — without it the Pool column stays untinted while
   the rest of the row picks up the gold wash. Scoped to .az-lp-markets-grid so it
   doesn't bleed into admin / client grids that have their own row styling. */
.az-lp-markets-grid tbody tr.rz-data-row.az-row-incentive > td,
.az-lp-markets-grid tbody tr.rz-data-row.az-row-incentive > td.rz-frozen-cell {
    background-color: rgba(var(--az-gold-rgb), 0.05) !important;
}
.az-lp-markets-grid tbody tr.rz-data-row.az-row-incentive > td:first-child {
    box-shadow: inset 2px 0 0 rgba(var(--az-gold-rgb), 0.55);
}

/* Desktop-only hover, also scoped to the LP markets grid. (hover: hover) +
   (pointer: fine) excludes coarse-pointer devices (phones / tablets) where the
   sticky-hover state would persist after a tap. Radzen's own hover is gated by
   .rz-selectable which we don't enable — own rule fills the gap. */
@media (hover: hover) and (pointer: fine) {
    .az-lp-markets-grid tbody tr.rz-data-row:hover > td,
    .az-lp-markets-grid tbody tr.rz-data-row:hover > td.rz-frozen-cell {
        background-color: rgba(var(--az-gold-rgb), 0.06) !important;
    }
    .az-lp-markets-grid tbody tr.rz-data-row.az-row-incentive:hover > td,
    .az-lp-markets-grid tbody tr.rz-data-row.az-row-incentive:hover > td.rz-frozen-cell {
        background-color: rgba(var(--az-gold-rgb), 0.10) !important;
    }
}

.az-apr-stack {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    gap: 1px;
    cursor: help;
}

.az-apr-leg {
    font-size: 0.72em;
    color: var(--az-on-surface-secondary);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.az-apr-leg-label {
    opacity: 0.7;
    margin-left: 3px;
    text-transform: lowercase;
}

.az-markets-volume-cell {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    gap: 1px;
}

.az-markets-volume-usd {
    font-weight: 500;
}

.az-markets-volume-period {
    margin-left: 4px;
    font-size: 0.75em;
    font-weight: 400;
    color: var(--az-on-surface-secondary);
    text-transform: lowercase;
}

.az-markets-volume-token {
    font-size: 0.75em;
    color: var(--az-on-surface-secondary);
    font-variant-numeric: tabular-nums;
}

.az-markets-volume-token-symbol {
    opacity: 0.7;
    margin-left: 2px;
}

.az-markets-volume-empty {
    color: var(--az-on-surface-secondary);
    font-weight: 400;
}

.az-markets-incentives {
    margin-left: 6px;
    cursor: help;
    font-size: 0.95em;
    vertical-align: baseline;
}

.az-lp-closed-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.12);
    color: var(--az-on-surface-secondary);
    border: 1px solid rgba(128, 128, 128, 0.25);
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

.az-lp-row-closed td {
    color: var(--az-on-surface-secondary);
}

.az-markets-tvl {
    font-weight: 600;
    text-align: right;
}

/* Suspicious-TVL warning — a single LP pool above the sanity ceiling is
   almost certainly a scam / mispriced token. Red so it reads as "do not
   trust this number", not a soft hint. */
.az-tvl-warn {
    color: var(--az-health-danger);
    font-size: 16px;
    vertical-align: middle;
    margin-left: var(--az-space-1);
    cursor: help;
}

@media (max-width: 768px) {
    .az-lending-section-header {
        grid-template-columns: 1fr auto;
    }

    .az-lending-section-header span:nth-child(2) {
        display: none;
    }

    .az-lending-row {
        grid-template-columns: 1fr auto;
    }

    .az-lending-balance {
        display: none;
    }
}

/* ── Risk dashboard (/risk) ────────────────────────────────────────── */

.az-risk-hero {
    margin-bottom: var(--az-space-3);
    padding: var(--az-space-4);
    border-radius: var(--az-radius-lg, 14px);
    border: 1px solid rgba(var(--az-gold-rgb), 0.28);
    background: linear-gradient(135deg,
        rgba(var(--az-gold-rgb), 0.10),
        rgba(var(--az-gold-rgb), 0.02));
}

.az-risk-hero-danger {
    border-color: rgba(229, 57, 53, 0.45);
    background: linear-gradient(135deg,
        rgba(229, 57, 53, 0.18),
        rgba(229, 57, 53, 0.02));
}

.az-risk-hero-warning {
    border-color: rgba(200, 164, 21, 0.40);
    background: linear-gradient(135deg,
        rgba(200, 164, 21, 0.14),
        rgba(200, 164, 21, 0.02));
}

.az-risk-hero-safe {
    border-color: rgba(76, 175, 80, 0.35);
    background: linear-gradient(135deg,
        rgba(76, 175, 80, 0.12),
        rgba(76, 175, 80, 0.02));
}

.az-risk-hero-label {
    font-size: var(--az-text-overline);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--az-on-surface-secondary);
    margin-bottom: 6px;
}

.az-risk-hero-title {
    font-size: var(--az-text-h4, 1.25rem);
    font-weight: 700;
    color: var(--az-on-surface);
    line-height: 1.3;
}

.az-risk-hero-hf {
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}

.az-risk-hero-subtitle {
    margin-top: 8px;
    font-size: var(--az-text-body-sm);
    color: var(--az-on-surface-secondary);
}

.az-risk-tiles {
    margin-bottom: var(--az-space-3);
}

.az-risk-grid {
    width: 100%;
}

.az-risk-cell-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.az-risk-cell-collateral {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.az-risk-collateral-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.az-risk-collateral-usd {
    font-variant-numeric: tabular-nums;
    color: var(--az-text-secondary, inherit);
    white-space: nowrap;
}

.az-risk-collateral-sep {
    font-weight: 900;
    color: var(--az-text-primary, inherit);
    margin: 0 2px;
}

.az-risk-collateral-header {
    width: 100%;
}

/* Radzen 10.x wraps HeaderTemplate in a chain:
     th > div > span.rz-column-title > span.rz-column-title-content > <our HeaderTemplate>
   .rz-column-title is inline-flex flex:auto width:100% — fine. The real shrink is at
   .rz-column-title-content which defaults to display:inline-block + white-space:nowrap,
   collapsing our inner grid to intrinsic content width. Force it to block full-width
   so the "Collateral" / "Supply" cells line up with the body-cell USD values. */
th.az-risk-collateral-head .rz-column-title,
th.az-risk-collateral-head .rz-column-title-content {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
}

.az-risk-collateral-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
    margin-top: 2px;
    border-top: 1px dashed var(--az-border-subtle, rgba(255, 255, 255, 0.08));
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--az-text-primary, inherit);
}

.az-risk-collateral-total > span:first-child {
    font-size: var(--az-text-overline);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--az-text-secondary, inherit);
}

.az-risk-protocol-logo,
.az-risk-network-logo,
.az-risk-token-logo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* ── Perps & Vaults page ──────────────────────────────── */

.az-perps-section-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--az-surface-200);
    margin: 0 0 var(--az-space-3) 0;
}

.az-perps-vaults-section {
    margin-bottom: var(--az-space-6);
}

.az-perps-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--az-space-3);
}

@media (max-width: 640px) {
    .az-perps-card-grid {
        grid-template-columns: 1fr;
    }
}

.az-perps-vault-card,
.az-perps-position-card {
    display: flex;
    flex-direction: column;
    gap: var(--az-space-2);
}

.az-perps-vault-header,
.az-perps-pos-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.az-perps-vault-name {
    font-weight: 600;
    font-size: 15px;
    flex: 1;
}

.az-perps-asset {
    font-weight: 700;
    font-size: 18px;
    margin-left: auto;
}

.az-perps-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--az-radius-full);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.az-perps-badge--hlp {
    background: var(--az-gold-lighter);
    color: var(--az-gold);
    border: 1px solid rgba(var(--az-gold-rgb), 0.3);
}

.az-perps-badge--curated {
    background: rgba(255, 255, 255, 0.06);
    color: var(--az-surface-100);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.az-perps-badge--tradfi {
    background: rgba(100, 150, 255, 0.12);
    color: #6496ff;
    border: 1px solid rgba(100, 150, 255, 0.25);
}

.az-perps-vault-leader {
    font-size: 12px;
    color: var(--az-surface-200);
}

.az-perps-mono {
    font-family: monospace;
    font-size: 11px;
}

.az-perps-vault-stats,
.az-perps-pos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--az-space-2);
}

.az-perps-pos-grid {
    grid-template-columns: repeat(2, 1fr);
}

.az-perps-stat,
.az-perps-pos-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.az-perps-stat-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--az-surface-200);
}

.az-perps-stat-value {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.az-perps-vault-lock {
    font-size: 11px;
    color: var(--az-surface-200);
    margin-top: var(--az-space-1);
}

.az-perps-side-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--az-radius-full);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.az-perps-side-badge--sm {
    padding: 2px 7px;
    font-size: 10px;
}

.az-perps-long {
    background: var(--az-gold-lighter);
    color: var(--az-gold);
    border: 1px solid rgba(var(--az-gold-rgb), 0.3);
}

.az-perps-short {
    background: rgba(229, 57, 53, 0.12);
    color: #ef5350;
    border: 1px solid rgba(229, 57, 53, 0.25);
}

.az-perps-pos-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.az-perps-liq-price {
    color: #ef5350;
}

.az-perps-pos-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--az-space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: var(--az-space-2);
    margin-top: var(--az-space-1);
}

.az-perps-pos-pnl,
.az-perps-pos-margin,
.az-perps-pos-leverage {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.az-pnl-pos { color: #4caf50; }
.az-pnl-neg { color: #ef5350; }
.az-pnl-zero { color: var(--az-surface-200); }

.az-perps-liq-bar-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-top: var(--az-space-2);
}

.az-perps-liq-bar-fill {
    height: 100%;
    width: 100%;
    border-radius: 2px;
}

.az-perps-liq-bar-fill.az-liq-danger  { background: #ef5350; }
.az-perps-liq-bar-fill.az-liq-warning { background: #c8a415; }
.az-perps-liq-bar-fill.az-liq-safe    { background: #4caf50; }

.az-perps-history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--az-space-3);
    margin-bottom: var(--az-space-4);
    align-items: center;
}

.az-perps-kind-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--az-radius-full);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: capitalize;
}

.az-perps-kind-trade       { background: rgba(255,255,255,0.06); color: var(--az-surface-50); }
.az-perps-kind-funding     { background: rgba(100,150,255,0.12); color: #6496ff; }
.az-perps-kind-liquidation { background: rgba(229,57,53,0.12);   color: #ef5350; }

.az-perps-direction {
    font-size: 11px;
    color: var(--az-surface-200);
    margin-left: 4px;
}

.az-perps-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-top: var(--az-space-4);
}

.az-perps-page-info {
    font-size: 13px;
    color: var(--az-surface-200);
    min-width: 60px;
    text-align: center;
}

/* Light theme adjustments */
@media (prefers-color-scheme: light) {
    .az-perps-liq-bar-track {
        background: rgba(0, 0, 0, 0.08);
    }

    .az-perps-pos-footer {
        border-top-color: rgba(0, 0, 0, 0.08);
    }

    .az-perps-kind-trade {
        background: rgba(0, 0, 0, 0.06);
        color: var(--az-surface-50);
    }
}

/* ── Full-height admin data grid ─────────────────────────────
   Sizes the RadzenDataGrid to fill the viewport minus the page chrome
   above it (header + admin-page-header + admin-toolbar) so internal
   virtualization handles scrolling and the page itself doesn't scroll.
   Use `--tabs` modifier when the page has a RadzenTabs row above the grid.
   Mobile (≤768px) reserves extra space for the floating BottomNav. */
.admin-grid-full {
    height: calc(100dvh - 200px);
    min-height: 360px;
}

.admin-grid-full--tabs {
    height: calc(100dvh - 260px);
}

@media (max-width: 768px) {
    .admin-grid-full {
        height: calc(100dvh - 200px - var(--az-bottom-nav-reserve, 80px));
    }

    .admin-grid-full--tabs {
        height: calc(100dvh - 260px - var(--az-bottom-nav-reserve, 80px));
    }
}

.az-autoheight-host {
    display: block;
}

/* ── Transactions infinite-scroll loader ───────────────────────────────
   Host wraps the height-capped grid; the pill floats over the grid's
   bottom edge so it never adds page height (no page scroll). */
.az-tx-grid-host {
    position: relative;
}

.az-tx-loadmore-pill {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--az-gold);
    background: var(--az-liquid-glass-bg);
    backdrop-filter: var(--az-liquid-glass-filter);
    -webkit-backdrop-filter: var(--az-liquid-glass-filter);
    border: 1px solid var(--az-liquid-glass-border);
    box-shadow: var(--az-liquid-glass-shadow);
    z-index: 5;
    pointer-events: none;
}

/* ── Grid reload overlay ───────────────────────────────────────────────
   Masks the grid while a sort / search / filter reissues the first page
   from the server. Without it Radzen briefly renders the already-loaded
   page re-sorted client-side before the fresh server result lands. Shown
   only on a first-page reload — LoadMoreAsync (append) never sets _loading. */
.az-grid-shell {
    position: relative;
}

.az-grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--az-surface-800) 78%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ── Blocked-account full-screen guard ─────────────────────────────────
   Rendered by MainLayout instead of the sidebar/header/body/BottomNav when
   the API reports the signed-in user is blocked. No navigation is reachable. */
.az-blocked {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--az-space-6);
    background:
        radial-gradient(circle at 50% 30%, rgba(var(--az-gold-rgb), 0.06), transparent 60%),
        var(--az-surface-900);
}

.az-blocked-card {
    width: min(440px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--az-space-4);
    padding: var(--az-space-10) var(--az-space-8);
    background: var(--az-surface-850);
    border: 1px solid var(--az-surface-400);
    border-radius: var(--az-radius-xl);
    box-shadow: var(--az-shadow-4);
}

.az-blocked-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--az-radius-full);
    color: var(--az-gold);
    background: rgba(var(--az-gold-rgb), 0.10);
    border: 1px solid rgba(var(--az-gold-rgb), 0.35);
}

.az-blocked-title {
    margin: 0;
    font-size: var(--az-text-h3);
    font-weight: 700;
}

.az-blocked-message {
    margin: 0;
    color: var(--az-on-surface-secondary);
    line-height: 1.6;
}

.az-blocked-action,
a.az-blocked-action:visited {
    margin-top: var(--az-space-2);
    padding: var(--az-space-3) var(--az-space-6);
    border-radius: var(--az-radius-md);
    border: 1px solid rgba(var(--az-gold-rgb), 0.45);
    background: transparent;
    color: var(--az-gold);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    font: inherit;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.az-blocked-action:hover {
    background: rgba(var(--az-gold-rgb), 0.12);
    border-color: var(--az-gold);
}

.az-blocked-loading {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--az-surface-900);
}

/* ── Markets toolbar (LendingMarketsView / LiquidityPoolsMarketsView) ── */

.az-markets-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--az-space-4);
    row-gap: var(--az-space-3);
    margin-bottom: var(--az-space-4);
}

.az-toolbar-dropdown {
    min-width: 160px;
    flex-shrink: 0;
}

.az-toolbar-dropdown--network {
    min-width: 220px;
}

.az-toolbar-network-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.az-toolbar-search {
    flex: 0 1 360px;
    max-width: 360px;
    min-width: 200px;
    width: 100%;
}

/* ── Search input (Markets views + admin Users/Tokens pages) ──────────
   The wrapper is flex so an optional leading <svg.az-search-icon>
   centres vertically with no transform hack. Left padding on the
   <input> is applied ONLY when the icon is present (adjacent-sibling
   selector) — admin Users/Tokens render no icon and must not get a
   blank 36px gutter. */

.az-search-input {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.az-search-icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--az-on-surface-secondary);
    pointer-events: none;
    flex-shrink: 0;
    transition: color var(--az-transition-fast);
    z-index: 1;
}

.az-search-input:focus-within .az-search-icon {
    color: var(--az-gold);
}

.az-search-input > .rz-textbox {
    width: 100%;
    padding-right: 32px;
}

.az-search-icon + .rz-textbox {
    padding-left: 36px;
}

.az-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: var(--az-on-surface-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms ease, color 120ms ease;
}

.az-search-clear:hover {
    background: var(--az-surface-200);
    color: var(--az-on-surface-primary);
}

/* ── Verified/Trusted/All visibility SelectBar (Markets views) ──────── */

.az-lp-visibility.rz-selectbar {
    flex-shrink: 0;
    display: inline-flex;
    gap: var(--az-space-2);
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.az-lp-visibility.rz-selectbar .rz-button {
    height: var(--rz-input-height);
    padding-inline: var(--az-space-4);
    font-size: var(--az-text-body-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--az-on-surface-secondary);
    border: var(--az-glass-border);
    border-radius: var(--az-radius-md);
    background: var(--az-glass-bg);
    backdrop-filter: blur(var(--az-glass-blur));
    -webkit-backdrop-filter: blur(var(--az-glass-blur));
    transition:
        background-color var(--az-transition-fast),
        color var(--az-transition-fast),
        box-shadow var(--az-transition-fast);
    white-space: nowrap;
}

.az-lp-visibility.rz-selectbar .rz-button:not(.rz-state-active):hover {
    background: rgba(var(--az-gold-rgb), 0.07) !important;
    color: var(--az-gold) !important;
}

.az-lp-visibility.rz-selectbar .rz-button.rz-state-active {
    background: rgba(var(--az-gold-rgb), 0.12) !important;
    color: var(--az-gold) !important;
    font-weight: 600;
    border: 1px solid var(--az-gold) !important;
    box-shadow: inset 0 0 0 1px var(--az-gold);
}

@media (max-width: 768px) {
    .az-toolbar-search {
        flex: 1 1 100%;
        max-width: none;
    }

    .az-lp-visibility.rz-selectbar {
        width: 100%;
    }

    .az-lp-visibility.rz-selectbar .rz-button {
        flex: 1;
    }
}

@media (prefers-color-scheme: light) {
    .az-lp-visibility.rz-selectbar .rz-button:not(.rz-state-active):hover {
        background: rgba(var(--az-gold-rgb), 0.09) !important;
        color: var(--az-gold-dark) !important;
    }

    .az-lp-visibility.rz-selectbar .rz-button.rz-state-active {
        background: rgba(var(--az-gold-rgb), 0.11) !important;
        color: var(--az-gold-dark) !important;
        border: 1px solid var(--az-gold-dark) !important;
        box-shadow: inset 0 0 0 1px var(--az-gold-dark);
    }

    .az-search-icon {
        color: var(--az-surface-300);
    }

    .az-search-input:focus-within .az-search-icon {
        color: var(--az-gold-dark);
    }
}

/* ── Shared layout chrome (brand / sidebar / header / body) ──────────
   Used identically by Client MainLayout and Admin AdminLayout. Single
   source of truth so the top header, brand block, sidebar and body
   look identical in both apps. Per-layout responsive differences
   (mobile chrome: client hides the header, admin keeps it) stay in
   each layout's *.razor.css. Canonical decisions on the two rules
   that had diverged:
     - .az-header        → space-between + gap (works whether or not a
                            menu button precedes .az-header-user).
     - .az-header-email  → gold + link-safe props (project rule: links
                            are always gold; admin renders it as <a>,
                            client as <span> — gold is correct for both
                            and makes the header look the same).
   ──────────────────────────────────────────────────────────────── */

.az-brand-name {
    font-family: var(--az-font-family);
    font-size: 1.35rem;
    font-weight: 700;
    background: var(--az-gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.12em;
}

.az-brand-tagline {
    font-size: var(--az-text-overline);
    color: var(--az-surface-200);
    letter-spacing: 0.12em;
    text-transform: lowercase;
    margin-top: 2px;
}

.az-sidebar {
    padding-top: 0;
    display: flex;
    flex-direction: column;
}

.az-sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--az-space-3) var(--az-space-2);
    border-bottom: 1px solid rgba(var(--az-gold-rgb), 0.06);
}

.az-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--az-space-3);
    padding: var(--az-space-2) var(--az-space-4);
    min-height: 44px;
    border-bottom: 1px solid var(--az-surface-600);
}

.az-header-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--az-on-surface-secondary);
    border-radius: var(--az-radius-sm);
    cursor: pointer;
    transition: color var(--az-transition-fast), background var(--az-transition-fast);
}

.az-header-menu:hover {
    color: var(--az-gold);
    background: rgba(var(--az-gold-rgb), 0.08);
}

.az-header-user {
    display: flex;
    align-items: center;
    gap: var(--az-space-3);
    margin-left: auto;
}

.az-header-email {
    font-size: var(--az-text-body-sm);
    color: var(--az-gold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    text-decoration: none;
    transition: color var(--az-transition-fast);
}

.az-header-email:hover {
    color: var(--az-gold);
    text-decoration: underline;
}

.az-header-logout,
a.az-header-logout:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--az-radius-sm);
    color: var(--az-on-surface-secondary);
    transition: color var(--az-transition-fast), background var(--az-transition-fast);
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.az-header-logout:hover {
    color: var(--az-gold);
    background: rgba(var(--az-gold-rgb), 0.08);
}

.az-body {
    grid-area: rz-body;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 0;
    border: 1px solid var(--az-surface-600);
    border-radius: var(--az-radius-xl);
    margin: 0;
}

/* Tablet 769–1024px: brand block hidden (icons-only sidebar rail). */
@media (min-width: 769px) and (max-width: 1024px) {
    .az-sidebar-brand {
        display: none;
    }
}

/* ── Collapsible nav section (custom — sidesteps RadzenPanelMenuItem nesting) ───
   Behaviour fully owned in C# state field. Top-level items stay inside
   RadzenPanelMenu in the host nav file; this section is a sibling block
   with its own classes to avoid Radzen specificity wars. Used by:
   - Client NavMenu — "DeFi" group (Lending / Pools / Perps / Vaults / Risk).
   - Admin AdminNavMenu — "Observability" group (Sync traces / DB stats / RPC quotas).
   Selector family kept named `az-nav-defi*` for backward-compat with the
   client's first usage; safe to rename later if a third group lands. */
.az-nav-defi {
    margin-top: var(--az-space-3);
}

.az-nav-defi-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    font-weight: 600;
    color: var(--az-surface-200);
    text-align: start;
    transition: color var(--az-transition-fast), background var(--az-transition-fast);
}

.az-nav-defi-header:hover {
    color: var(--az-gold);
    background: rgba(var(--az-gold-rgb), 0.04);
}

.az-nav-defi-header:hover .rzi {
    color: var(--az-gold);
}

.az-nav-defi-header > .rzi:first-of-type {
    font-size: 18px;
    opacity: 0.8;
}

.az-nav-defi-label {
    flex: 1;
}

.az-nav-defi-chevron {
    margin-inline-start: auto;
    font-size: 18px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.az-nav-defi.az-defi-open .az-nav-defi-chevron {
    transform: rotate(180deg);
}

/* Collapsible panel — grid-rows trick gives smooth height transition */
.az-nav-defi-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;
}

.az-nav-defi.az-defi-open .az-nav-defi-panel {
    grid-template-rows: 1fr;
}

.az-nav-defi-panel-inner {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--az-space-2);
    padding-block-start: var(--az-space-2);
    padding-inline-start: var(--az-space-4);   /* indent sub-items 16px */
    padding-inline-end: var(--az-space-2);     /* breathing room on the right */
}

/* Specificity bump (`.az-nav-defi .az-nav-defi-item`) is required to beat the
   project-wide `a { color: var(--az-gold) }` base rule for `<a>`-rendered NavLinks. */
.az-nav-defi .az-nav-defi-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--az-radius-md);
    color: var(--rz-panel-menu-item-color);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.02);
    transition: color var(--az-transition-fast), background var(--az-transition-fast), box-shadow var(--az-transition-fast);
    font-size: 14px;
}

.az-nav-defi-item:hover {
    color: var(--az-gold);
    background: rgba(var(--az-gold-rgb), 0.06);
}

.az-nav-defi-item:hover .rzi {
    color: var(--az-gold);
}

.az-nav-defi-item.az-defi-active {
    color: var(--az-gold);
    background: rgba(var(--az-gold-rgb), 0.1);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--az-gold);   /* respects border-radius — no sharp ::before bar */
}

.az-nav-defi-item .rzi {
    font-size: 18px;
    opacity: 0.9;
    transition: color var(--az-transition-fast);
}

/* Tablet: 769px–1024px — icon rail adjustments for collapsible nav block.
   Radzen's icon-rail rules above don't reach this block because it sidesteps
   RadzenPanelMenuItem. Without these rules the label + chevron bleed past
   the 64px rail. Hide label + chevron + sub-item text, center the icons. */
@media (min-width: 769px) and (max-width: 1024px) {
    .az-nav-defi-header {
        justify-content: center !important;
        padding-inline: 0 !important;
        gap: 0 !important;
    }

    .az-nav-defi-label,
    .az-nav-defi-chevron {
        display: none !important;
    }

    /* Sub-items stay visible as icons (panel remains expandable via header click);
       reset the indented padding that assumed a 250px-wide rail. */
    .az-nav-defi-panel-inner {
        padding-inline: 0 !important;
    }

    .az-nav-defi-item {
        justify-content: center !important;
        padding-inline: 0 !important;
        gap: 0 !important;
    }

    .az-nav-defi-item > span {
        display: none !important;
    }
}