:root {
    --app-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --mud-typography-default-family:   var(--app-font);
    --mud-typography-h1-family:        var(--app-font);
    --mud-typography-h2-family:        var(--app-font);
    --mud-typography-h3-family:        var(--app-font);
    --mud-typography-h4-family:        var(--app-font);
    --mud-typography-h5-family:        var(--app-font);
    --mud-typography-h6-family:        var(--app-font);
    --mud-typography-subtitle1-family: var(--app-font);
    --mud-typography-subtitle2-family: var(--app-font);
    --mud-typography-body1-family:     var(--app-font);
    --mud-typography-body2-family:     var(--app-font);
    --mud-typography-button-family:    var(--app-font);
    --mud-typography-caption-family:   var(--app-font);
    --mud-typography-overline-family:  var(--app-font);
}

html, body {
    font-family: var(--app-font);
}

body {
    background-color: #0E1524;
    /* secondary-500 → secondary-700 → secondary-900 — same pattern as the main Layerswap app */
    background-image: linear-gradient(to bottom right, #0B111F, #0E1524, #070C17);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.mud-main-content {
    background: transparent !important;
}

/* Reserve the vertical scrollbar's gutter so the layout never shifts sideways
   when it appears/disappears (e.g. content height changing during a refresh). */
html {
    scrollbar-gutter: stable;
}

/* Rebalance v2 masonry — height-packed columns via CSS multi-column. column-width
   lets the browser fit as many ~480px columns as the viewport allows (1 narrow,
   2 typical desktop, 3+ ultrawide); break-inside keeps each card whole. */
.rv2-masonry {
    column-width: 480px;
    column-gap: 24px;
}

.rv2-masonry-item {
    break-inside: avoid;
    margin-bottom: 24px;
}

/* Distinguish the token-group cards from the page gradient: a lighter panel
   surface (Secondary500 — the palette's "surface for cards") plus a hairline
   border, rather than the default Surface which sits close to the background. */
.rv2-card.mud-paper {
    background-color: #171F31;
    border: 1px solid var(--mud-palette-lines-default, #1F283D);
}

/* A MudTable inside a card paints its own (darker) default surface, which clashes
   with the lighter card fill. Make it transparent so it inherits the card colour;
   header cells keep an opaque card-coloured fill so rows scroll under them. */
.rv2-card .mud-table,
.rv2-card .mud-table-container,
.rv2-card .mud-table-root,
.rv2-card .mud-table-pagination {
    background-color: transparent !important;
}

.rv2-card .mud-table thead th {
    background-color: #171F31 !important;
}

/* Rebalance v2 token cards — fixed-layout table so refreshing balances can't
   reflow columns or toggle a per-card scrollbar. */
.rv2-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.rv2-table th,
.rv2-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-divider, rgba(255, 255, 255, 0.10));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv2-table th {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary, #A3ADC2);
}

.rv2-table tbody tr:last-child td {
    border-bottom: none;
}

.rv2-network-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv2-asset-label {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #A3ADC2);
}

/* Fixed-height placeholder for a balance that has never loaded — same line box
   as the number, so first paint doesn't change row height. */
.rv2-balance-skeleton {
    display: inline-block;
    width: 54px;
    height: 12px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    vertical-align: middle;
}

#boot-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Transparent so the body gradient shows through (matches the rest of the app). */
    z-index: 10000;
}

/* The reconnect-card has a panel-like bg + border by default — strip it on
   the boot loader and the SignalR reconnect modal so they look like
   minimal overlays on the gradient backdrop. */
#boot-loader .reconnect-card,
#components-reconnect-modal .reconnect-card {
    background: transparent;
    border: none;
}

/* Inner content box — fills the outer MudPaper, no separate bg. */
.lp-inner {
    height: 100%;
}

/* Breadcrumb: the "current page" item is marked disabled by MudBlazor and
   ships washed out. Force full opacity + white + medium weight so it reads
   as the active location. */
.mud-breadcrumb-item.mud-disabled,
.mud-breadcrumb-item.mud-disabled *,
.mud-breadcrumbs .mud-disabled,
.mud-breadcrumbs .mud-disabled * {
    opacity: 1 !important;
    color: #D1D5DB !important; /* slightly greyed — readable but clearly inactive */
    font-weight: 500 !important;
    pointer-events: none;
}

/* Small inline link-like toggle buttons (e.g. period selectors). */
.lp-link {
    color: #A3ADC2;
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition: color 0.12s;
}

.lp-link:hover {
    color: #FFFFFF;
}

.lp-link.active {
    color: #CC2D5D;
    font-weight: 500;
}

.lp-link-sep {
    color: #374151;
    font-size: 0.75rem;
    user-select: none;
}

/* Sidebar nav: bold white label/icon on the active item; keep MudBlazor's
   default background highlight so the selection is visible. */
.mud-nav-link.active,
.mud-nav-link.active .mud-nav-link-text,
.mud-nav-link.active .mud-nav-link-icon {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* Highlight the section header when one of its children is active. The
   group title is rendered as a direct-child .mud-nav-link of .mud-nav-group;
   the > combinator keeps this scoped to the header row and out of the
   nested child links (which keep their own .active style above). */
.nav-group-active > .mud-nav-link,
.nav-group-active > .mud-nav-link .mud-nav-link-text,
.nav-group-active > .mud-nav-link .mud-nav-link-icon {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* Collapsed mini drawer: hide nav labels entirely, center icons. */
.lp-drawer-collapsed .mud-nav-link-text {
    display: none !important;
}

.lp-drawer-collapsed .mud-nav-link {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Two-column page layout with a sticky right-rail "Contents" TOC, like the
   MudBlazor docs site. Used by NetworkOverview and potentially other detail
   pages with several stacked section cards. */
.lp-page-with-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 24px;
    align-items: start;
}

.lp-page-main {
    min-width: 0; /* lets cards inside shrink under flex/grid layouts */
}

.lp-page-toc {
    position: sticky;
    /* Clear the 56px MudAppBar + a bit of breathing room. */
    top: 80px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}

/* Drop the aside on narrower viewports — the cards take the full width and
   the TOC vanishes rather than wrapping under or pushing the content. */
@media (max-width: 1199px) {
    .lp-page-with-toc {
        grid-template-columns: 1fr;
    }

    .lp-page-toc {
        display: none;
    }
}

/* Style for the MudPageContentNavigation panel itself — leans into the same
   look as the rest of the page (transparent panel, muted text). */
.lp-page-toc .mud-navmenu {
    background: transparent;
}

.lp-page-toc .mud-typography.title {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* MudChart axis + legend labels. The chart renders as SVG so the labels are
   <text> elements that take fill (not color). MudBlazor's defaults are a
   washed-out grey on our dark gradient — bump to white + heavier weight +
   bigger size so date/value labels are actually readable. The legend rule
   targets the HTML chip that MudChart renders below the SVG when
   ShowLegend=true; bar/line charts share the same .mud-chart-legend-item
   class so this covers any chart we add later. */
.mud-chart svg text {
    fill: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.mud-chart .mud-chart-legend-item,
.mud-chart .mud-chart-legend-item .mud-typography {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}

/* The drawer is position: fixed in MudBlazor — pin the footer to its bottom edge
   via absolute positioning. Add bottom padding to nav so its last item doesn't
   hide behind the footer. */
.lp-drawer .lp-drawer-footer {
    position: absolute !important;
    bottom: 0;
    left: 0;
    right: 0;
}

.lp-drawer .mud-nav-menu {
    padding-bottom: 120px;
}

/* Force the AppBar toolbar to left-align its content so breadcrumbs sit
   on the left and only the cog gets pushed right by the spacer. */
.mud-appbar .mud-toolbar {
    justify-content: flex-start !important;
}

/* Breadcrumbs in the AppBar — strip default padding/margin so they sit
   vertically centered in the 56px-tall toolbar and don't grab extra width. */
.lp-breadcrumbs {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
}

.lp-breadcrumbs .mud-breadcrumb-item {
    line-height: 1 !important;
}

/* Slim filter inputs for the panel header row. Only width + font; let MudBlazor's
   Dense+Outlined handle the box geometry so MudSelect / MudTextField stay consistent. */
.lp-filter        { width: 150px; }
.lp-filter-search { width: 210px; }

.lp-filter .mud-input-slot,
.lp-filter .mud-input-label-outlined {
    font-size: 0.8125rem !important;
}

/* Bootstrap-style input groups: adjacent filters share borders, no gap.
   In MudBlazor 8 the outlined box is the .mud-input-slot itself. */
.lp-input-group {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
}

.lp-input-group > * {
    flex: 0 0 auto;
}

.lp-input-group > *:not(:last-child) .mud-input-slot,
.lp-input-group > *:not(:last-child) .mud-input-outlined-border {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right-width: 0 !important;
}

.lp-input-group > *:not(:first-child) .mud-input-slot,
.lp-input-group > *:not(:first-child) .mud-input-outlined-border {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.lp-input-group > *:not(:first-child) {
    margin-left: -1px;
}

/* Focused / hovered item rises so its border wins over the merged neighbour. */
.lp-input-group > *:hover,
.lp-input-group > *:focus-within {
    z-index: 1;
    position: relative;
}

/* MudAppBar Dense=true shrinks the inner toolbar to 75% of --mud-appbar-height
   (`.mud-appbar.mud-appbar-dense .mud-toolbar-appbar { height: calc(... * 3/4) }`),
   so even though we pin the bar to 56px the breadcrumbs render in a 42px-tall
   toolbar and sit above the visual centerline. Let the toolbar fill the bar
   instead. */
.mud-appbar.mud-appbar-dense .mud-toolbar-appbar {
    height: 100%;
}

/* Panel header — divider line below, sits above the panel's content. */
.lp-panel-title {
    padding-bottom: 12px;
    margin-bottom: 12px !important;
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Card heading at the top of each overview panel ("Overview", "Related
   swaps", "Transactions", ...). Lighter than h5 and underlined so the card
   visually starts with a clear title bar. */
.lp-card-title {
    padding-bottom: 12px;
    margin-bottom: 16px !important;
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Header row variant of lp-card-title for cards that have an action button
   alongside their title (Add node / Add token / etc.). The wrapper carries
   the divider so the title and button sit vertically aligned ABOVE the
   line, not on it. Pair with <MudText Typo="Typo.h6" Class="lp-card-header-text"> */
.lp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
}
.lp-card-header-text {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Tool tile on the /tools page. Subtle hover lift to signal click affordance;
   the disabled variant suppresses elevation/transform so it visually recedes. */
.lp-tool-card {
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.lp-tool-card:not(.lp-tool-card-disabled):hover {
    transform: translateY(-2px);
    box-shadow: var(--mud-elevation-4);
}
.lp-tool-card-disabled {
    opacity: 0.6;
}

/* Generic clickable dashboard tile — same hover behavior as a tool card but
   without the disabled variant. Apply alongside MudPaper for tiles that link
   somewhere on click. */
.lp-clickable-card {
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.lp-clickable-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mud-elevation-4);
}

/* Workflow tree visualization. Child executions render inside their parent
   with a left border + indent so the master → children → grandchildren chain
   reads as a tree without resorting to MudTreeView (which is heavier and
   tougher to compose with our card+timeline layout). */
.lp-workflow-children {
    margin-left: 16px;
    padding-left: 16px;
    border-left: 2px solid var(--mud-palette-divider);
}
.lp-workflow-child {
    /* Inner nodes get a subtle background tint instead of elevation so
       only the root execution panels visually "lift". */
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
}

/* MudBlazor dialog defaults read cramped against our card-heavy layout: the
   built-in title font is ~1.25rem and the content hugs the dialog border.
   Bumping the title to h4-ish and adding consistent 24px gutters everywhere
   gives forms room to breathe and makes the heading scan as a heading. */
.mud-dialog .mud-dialog-title {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.25;
    padding: 24px 24px 8px;
}
.mud-dialog .mud-dialog-content {
    padding: 16px 24px 24px;
}
.mud-dialog .mud-dialog-actions {
    padding: 12px 24px 20px;
    gap: 8px;
}

/* Section heading inside an overview panel ("Pair", "Details", ...).
   The default subtitle text reads too close to the field captions; the
   uppercase tracking + divider below make the boundary unmistakable. */
.lp-section-title {
    text-transform: uppercase;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary) !important;
    padding-bottom: 8px;
    margin-bottom: 16px !important;
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Logo wrapper with initials fallback. If the <img> 404s, onerror hides it
   and the initials behind become visible. No overflow:hidden on the parent
   so the .lp-logo-network badge can overhang the bottom-right corner; the
   asset image clips itself to a circle via border-radius. */
.lp-logo {
    position: relative;
    border-radius: 50%;
    background: linear-gradient(135deg, #CC2D5D, #7C3AED);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
}

.lp-logo > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Overlapping cluster of logos. Each subsequent logo overlaps the previous by 6px,
   and a ring matching the panel surface separates them visually. */
.lp-logo-stack {
    display: inline-flex;
    align-items: center;
}

.lp-logo-stack > .lp-logo:not(:first-child) {
    margin-left: -6px;
}

.lp-logo-stack .lp-logo {
    box-shadow: 0 0 0 2px var(--mud-palette-surface);
}

/* Network badge overlaid on the bottom-right of an asset logo. Sized as a
   fraction of the parent via 'em' so it stays in proportion when the host
   .lp-logo changes Size. A ring matching the panel surface separates it
   from the asset disk underneath. */
.lp-logo-network {
    position: absolute;
    right: -10%;
    bottom: -10%;
    width: 55%;
    height: 55%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 2px var(--mud-palette-surface);
    background: var(--mud-palette-surface);
    z-index: 1;
}

.lp-logo-network img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover-only upload affordance used on /networks/{name}. The page only
   renders the overlay when the CDN probe reports the logo is missing,
   so the operator sees the initials fallback and, on hover, a cloud-
   upload tile inviting them to fix it. The <label> is the click target
   so the hidden InputFile behind it receives the change event. */
.lp-logo-hover-upload .lp-logo-upload-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.lp-logo-hover-upload:hover .lp-logo-upload-overlay,
.lp-logo-hover-upload .lp-logo-upload-overlay:focus-within {
    display: flex;
}

.lp-logo-hover-upload .lp-logo-upload-overlay:hover {
    background: rgba(0, 0, 0, 0.7);
}


.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Transparent — body gradient shows through. */
    padding: 24px;
}

/* Mirror MudBlazor's mud-overlay-scrim.mud-overlay-dark for the backdrop:
   semi-transparent dark wash with a hint of blur so the dialog feels
   like a modal rather than a banner. Mud itself uses rgba(0,0,0,0.5) on
   .mud-overlay-dark; the blur is our addition because the rest of the
   page sits behind it and "Something went wrong" reads better with the
   underlying UI dimmed out. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10000;
    padding: 24px;
}

.error-card-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-card {
    position: relative;
    background: #0B111F;
    border: 1px solid #1F283D;
    border-radius: 12px;
    padding: 32px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    color: #FFFFFF;
}

.error-icon {
    font-size: 32px;
    margin-bottom: 12px;
    color: #FF6161;
}

.error-title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #FFFFFF;
}

.error-sub {
    font-size: 0.875rem;
    color: #A3ADC2;
    margin-bottom: 20px;
}

#blazor-error-ui .error-button,
#blazor-error-ui .error-button:link,
#blazor-error-ui .error-button:visited {
    display: inline-block;
    background: #CC2D5D;
    color: #FFFFFF !important;
    border: none;
    border-radius: 8px;
    padding: 9px 22px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.12s;
}

#blazor-error-ui .error-button:hover {
    background: #EB5481;
    color: #FFFFFF !important;
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    font-size: 22px;
    color: #A3ADC2;
    line-height: 1;
    background: transparent;
    border: 0;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
}

#blazor-error-ui .dismiss:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

/* ---------- SignalR reconnect modal ---------- */

#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 22, 0.05);
    backdrop-filter: blur(4px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.reconnect-card {
    background: #0B111F;
    border: 1px solid #1F283D;
    border-radius: 12px;
    padding: 32px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    color: #FFFFFF;
}

.reconnect-state { display: none; }
#components-reconnect-modal.components-reconnect-show   .reconnect-state-loading  { display: block; }
#components-reconnect-modal.components-reconnect-failed .reconnect-state-failed   { display: block; }
#components-reconnect-modal.components-reconnect-rejected .reconnect-state-rejected { display: block; }

.reconnect-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid #1F283D;
    border-top-color: #CC2D5D;
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: reconnect-spin 0.8s linear infinite;
}

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

.reconnect-icon {
    font-size: 28px;
    margin-bottom: 12px;
    color: #FFC94A;
}

.reconnect-state-rejected .reconnect-icon {
    color: #A3ADC2;
}

.reconnect-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #FFFFFF;
}

.reconnect-sub {
    font-size: 0.875rem;
    color: #A3ADC2;
    margin-bottom: 20px;
}

.reconnect-button {
    background: #CC2D5D;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s;
}

.reconnect-button:hover {
    background: #EB5481;
}

/* CurrencyPicker dialog rows — network headers and token rows. */
.lp-picker-row {
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.lp-picker-row:hover {
    background-color: var(--mud-palette-action-default-hover);
}