/* Global Styles - Moiren-3.0 (MudBlazor defaults, no overrides) */

/* text-security font for masking API keys without using input[type="password"] */
@font-face {
    font-family: 'text-security-disc';
    src: url('../fonts/text-security/text-security-disc.woff2') format('woff2');
}

/* MudBlazor default scale (100%) via root font-size */
:root {
    font-size: 16px; /* 100% */
}

/* Crisper type rendering (esp. on macOS/webkit) — Inter benefits visibly */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Responsive width utilities — !important required: MudBlazor sets
   .mud-input-control { width: auto !important; flex: 1 1 auto } */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.w-sm-auto { width: auto !important; }

@media (max-width: 599.98px) {
    .w-sm-auto { width: 100% !important; }
}

/* Mobile: remove MudGrid side gutters so MudItems use the full available width */
@media (max-width: 599.98px) {
    .mud-grid {
        margin-left: 0;
        margin-right: 0;
    }

    .mud-grid > .mud-grid-item {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Stats cards: add inner gap on mobile only, outer edges follow parent grid */
@media (max-width: 599.98px) {
    .stats-grid-item:nth-child(odd),
    .nav-hub-item:nth-child(odd) {
        padding-left: 0;
        padding-right: 2px;
    }

    .stats-grid-item:nth-child(even),
    .nav-hub-item:nth-child(even) {
        padding-left: 2px;
        padding-right: 0;
    }

    .stats-grid-item:nth-child(1),
    .stats-grid-item:nth-child(2) {
        padding-bottom: 2px;
    }

    .nav-hub-item {
        padding-bottom: 2px;
    }
}

/* Logs: interval select is capped on desktop, full-width on mobile */
.log-interval-select {
    max-width: 120px;
}

@media (max-width: 599.98px) {
    .log-interval-select {
        max-width: none;
    }
}

.log-action-btn {
    min-width: 150px;
}

/* Logs data grid: percentage-based column widths */
.logs-data-grid .mud-table-root {
    table-layout: fixed;
}

/* App bar title: MudBlazor h6 metrics below md breakpoint (CSS applies on first paint, no JS flicker) */
@media (max-width: 959.98px) {
    .app-bar-title {
        font-size: 1.25rem;
        font-weight: 500;
        letter-spacing: .0075em;
        line-height: 1.6;
    }
}

/* Mobile log grid: keep label column wide enough to prevent wrapping */
@media (max-width: 959.98px) {
    .logs-data-grid .mud-table-row .mud-table-cell:first-child {
        width: 100px;
        white-space: nowrap;
    }
}

/* Logs grid: natural height on mobile so the page scrolls instead of a small inner viewport */
@media (max-width: 959.98px) {
    .logs-data-grid .mud-table-container,
    .logs-data-grid .mud-table,
    .logs-data-grid .mud-data-grid {
        overflow-y: visible;
        max-height: none;
        height: auto;
    }

    /* Necessary: MudBlazor sets height via inline style from Height parameter, can't override otherwise */
    .logs-data-grid .mud-table-container {
        height: auto !important;
    }
}

/* Mobile data grid: consistent cell padding and data-label width for all views */
@media (max-width: 959.98px) {
    /* Extra specificity (.mud-table-root) to beat MudBlazor's .mud-xs-table.mud-table-dense .mud-table-cell (0,3,0) */
    .mud-data-grid .mud-table-root td.mud-table-cell {
        padding: 12px 16px;
    }

    .mud-data-grid td.mud-table-cell::before {
        min-width: 100px;
        padding-right: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Full-width tables — remove default MudBlazor max-width constraints.
   (.mud-grid must NOT be capped to width:100%: spaced grids rely on
   width:calc(100% + Npx) + margin-left:-Npx so outer edges align with
   siblings — capping the width breaks right-edge alignment.) */
.mud-table,
.mud-data-grid,
.mud-table-root,
.mud-table-container {
    max-width: 100%;
    width: 100%;
}

.mud-data-grid .mud-table,
.mud-data-grid table,
.mud-table table,
.mud-table-root table {
    table-layout: fixed;
    width: 100%;
}

/* Necessary: MudBlazor sets width:max-content inline when HorizontalScrollbar is true, can't override otherwise */
.mud-data-grid table {
    width: 100% !important;
}

/* Apply wrapping only to data cells, keep headers on one line */
.mud-data-grid .mud-table-cell,
.mud-table-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mud-data-grid td.mud-table-cell,
.mud-table td.mud-table-cell {
    word-wrap: break-word;
    /* break-word (not anywhere): unbreakable tokens like "SOL/USDC" or "19:56:08"
       move whole to the next line instead of splitting mid-token */
    overflow-wrap: break-word;
    white-space: normal;
}

/* Dense headers may wrap to two lines instead of truncating with an
   ellipsis — narrow columns keep their full label readable. */
.mud-table-dense th.mud-table-cell {
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.15;
}

/* Generic and mobile-only centering for headers and standalone text */
.text-center .page-header-title-row {
    justify-content: center;
}

.text-center .page-header-text,
.text-center .mud-typography,
.text-center.mud-typography {
    text-align: center;
}

@media (max-width: 599.98px) {
    .page-header .page-header-title-row,
    .text-center-mobile .page-header-title-row {
        justify-content: center;
    }

    .page-header .page-header-text,
    .page-header .mud-typography,
    .text-center-mobile .page-header-text,
    .text-center-mobile .mud-typography,
    .text-center-mobile.mud-typography {
        text-align: center;
    }
}
@media (max-width: 599.98px) {
    .symbol-monitoring-grid th:nth-child(2),
    .symbol-monitoring-grid td:nth-child(2) {
        display: none;
    }

    .symbol-monitoring-grid th:nth-child(1),
    .symbol-monitoring-grid td:nth-child(1) {
        width: 55%;
    }

    .symbol-monitoring-grid th:nth-child(3),
    .symbol-monitoring-grid td:nth-child(3) {
        width: 30%;
    }

    .symbol-monitoring-grid th:nth-child(4),
    .symbol-monitoring-grid td:nth-child(4) {
        width: 15%;
    }

    /* Order monitoring grid: hide summary column on xs, params stay reachable via Edit */
    .order-monitoring-grid th:nth-child(2),
    .order-monitoring-grid td:nth-child(2) {
        display: none;
    }

    .order-monitoring-grid th:nth-child(1),
    .order-monitoring-grid td:nth-child(1) {
        width: 76%;
    }

    .order-monitoring-grid th:nth-child(3),
    .order-monitoring-grid td:nth-child(3) {
        width: 24%;
    }

    /* Wallet monitoring grid: compact inline editors in narrow columns on xs */
    .wallet-monitoring-grid .mud-input .mud-input-slot {
        padding: 6px 8px;
        font-size: 0.8125rem;
    }
}

/* Wallet asset grid: fixed height + scroll on desktop, natural on mobile */
@media (min-width: 960px) {
    .wallet-asset-grid .mud-table-container {
        height: calc(50vh - 3rem);
        max-height: calc(50vh - 3rem);
        overflow-y: auto;
    }
}

@media (max-width: 959.98px) {
    .wallet-asset-grid .mud-table-container,
    .wallet-asset-grid .mud-table,
    .wallet-asset-grid .mud-data-grid {
        overflow-y: visible;
        max-height: none;
        height: auto;
    }

    /* Necessary: MudBlazor sets height via inline style from Height parameter, can't override otherwise */
    .wallet-asset-grid .mud-table-container {
        height: auto !important;
    }
}

/* Order view grid: fixed height + scroll on desktop, natural on mobile */
@media (min-width: 960px) {
    .order-view-grid .mud-table-container,
    .positions-overview-grid .mud-table-container {
        height: 60vh;
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* Order view grid: keep cell values on one line — clip with ellipsis instead of
   wrapping mid-token (e.g. "SOL/USD\nC", "19:56:0\n8"). Column proportions are
   set via Width="%" on the columns (all ten specified, so no single column
   absorbs the surplus). */
@media (min-width: 960px) {
    .order-view-grid td.mud-table-cell {
        white-space: nowrap;
    }
}

@media (max-width: 959.98px) {
    .order-view-grid .mud-table-container,
    .order-view-grid .mud-table,
    .order-view-grid .mud-data-grid,
    .positions-overview-grid .mud-table-container,
    .positions-overview-grid .mud-table,
    .positions-overview-grid .mud-data-grid,
    .asset-screener-grid .mud-table-container,
    .asset-screener-grid .mud-table,
    .asset-screener-grid .mud-data-grid {
        overflow-y: visible;
        max-height: none;
        height: auto;
    }

    /* Necessary: MudBlazor sets height via inline style from Height parameter, can't override otherwise */
    .order-view-grid .mud-table-container,
    .positions-overview-grid .mud-table-container,
    .asset-screener-grid .mud-table-container {
        height: auto !important;
    }

    .order-view-grid .mud-table-pagination,
    .order-view-grid .mud-data-grid-pager,
    .asset-screener-grid .mud-table-pagination,
    .asset-screener-grid .mud-data-grid-pager {
        display: none;
    }
}

/* AutoTrader grid: centered text, natural height on mobile; comfortable column widths on desktop */
@media (min-width: 960px) {
    .auto-trader-grid .mud-table-cell {
        min-width: 100px;
    }

    .auto-trader-grid th.mud-table-cell {
        min-width: 110px;
    }
}

@media (max-width: 959.98px) {
    .auto-trader-grid .mud-table-container,
    .auto-trader-grid .mud-table,
    .auto-trader-grid .mud-data-grid {
        overflow-y: visible;
        max-height: none;
        height: auto;
    }

    /* Necessary: MudBlazor sets text-align:start with !important on .mud-xs-table/.mud-sm-table .mud-table-cell, can't override otherwise */
    .auto-trader-grid .mud-table-cell {
        text-align: center !important;
    }
}

/* Stock symbol search: full width on mobile, capped on desktop */
.stock-symbol-search {
    max-width: 320px;
}

@media (max-width: 599.98px) {
    .stock-symbol-search {
        max-width: none;
    }
}

/* Account management layout: center headings/nav, full-width buttons and inputs on mobile */
@media (max-width: 599.98px) {
    .manage-layout .mud-typography {
        text-align: center;
    }

    .account-nav {
        width: 100%;
    }

    .account-nav .mud-nav-link,
    .account-nav .mud-nav-link > a {
        width: 100%;
        justify-content: center;
    }

    .account-nav .mud-nav-link .mud-nav-link-text,
    .account-nav .mud-nav-link span,
    .account-nav .mud-nav-link .mud-typography {
        text-align: center;
    }

    .manage-layout .mud-grid-item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .manage-layout .mud-button,
    .manage-layout .mud-static-button,
    .manage-layout button {
        width: 100%;
    }

    .manage-layout .mud-input,
    .manage-layout .mud-input input {
        width: 100%;
    }

    /* Necessary: MudBlazor sets width:auto with !important on .mud-input-control, can't override otherwise */
    .manage-layout .mud-input-control {
        width: 100% !important;
    }

    .manage-layout .mud-input-label,
    .manage-layout .mud-input-helper-text,
    .manage-layout .mud-input-helper,
    .manage-layout .mud-input input {
        text-align: center;
    }
}

/* UserManagement: hide empty Actions label and expand value on mobile */
@media (max-width: 599.98px) {
    .user-management-grid .mud-table-cell[data-label=""]:not(:has(> div .mud-select)) {
        display: none;
    }

    .user-management-grid .mud-table-cell:has(> div .mud-select) {
        width: 100%;
        display: block;
        padding: 14px 16px;
    }

    /* Remove the empty data-label pseudo-element to avoid a left column on the Actions row */
    .user-management-grid .mud-table-cell:has(> div .mud-select)::before {
        display: none;
    }

    /* Expand the MudSelect input slot so the selected value can be text-centered */
    .user-management-grid .mud-select .mud-input .mud-input-slot {
        flex: 1 1 0;
        text-align: center;
    }
}

/* Flat tabs: single divider under the tab strip instead of a bordered container */
.mud-tabs > .mud-tabs-tabbar:not(.mud-tabs-vertical) {
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* OrderView: stretch tabs to full width at every breakpoint
   (same flex chain as .responsive-tabs, per-tab wrappers excluded) */
.order-view-tabs .mud-tabs-tabbar-content {
    width: 100%;
}

.order-view-tabs .mud-tabs-tabbar-wrapper {
    display: flex;
    width: 100%;
}

.order-view-tabs .mud-tabs-tabbar-wrapper > :not(.mud-tab-slider) {
    flex: 1 0 auto;
}

/* OrderView layout: search/filters above order entries on mobile */
.order-view-filters {
    order: 1;
}

.order-view-data {
    order: 2;
}

.order-view-chart {
    order: 3;
}

@media (min-width: 960px) {
    .order-view-filters {
        order: 3;
    }

    .order-view-data {
        order: 2;
    }

    .order-view-chart {
        order: 4;
    }
}

/* OrderDetailContent: center all text and chips */
.order-detail-content .mud-typography {
    text-align: center;
}

.order-detail-content .mud-chip {
    justify-content: center;
}

.order-detail-content .mud-grid-item {
    text-align: center;
}

.log-category-chip {
    max-width: 100%;
    overflow: hidden;
}

/* Logs: structured exception rendering (expanded row + detail dialog) —
   headline = type/message in error color, stack frames keep their line
   breaks, method signature readable, "in file:line" de-emphasized */
.log-exception-view {
    white-space: pre-wrap;
    word-break: break-word;
}

.log-exception-headline {
    color: var(--mud-palette-error);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.log-exception-frame {
    padding-left: 1rem;
    text-indent: -1rem;
}

.log-frame-signature {
    color: var(--mud-palette-text-primary);
}

.log-frame-location {
    color: var(--mud-palette-text-secondary);
}

.log-exception-separator {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    margin: 0.15rem 0;
}

/* Logs grid: keep cells top-aligned — a wrapped
   multi-line message must grow the row without centering the other cells */
.logs-data-grid .mud-table-cell {
    vertical-align: top;
}

/* Log details dialog: long stack traces scroll inside a bounded block */
.log-exception-block {
    max-height: 40vh;
    overflow-y: auto;
}

/* Order balance slider: remove thumb border/ring only when disabled */
/* Necessary: MudBlazor sets box-shadow with !important on disabled slider thumbs, can't override otherwise */
.order-balance-slider.mud-slider .mud-slider-input:disabled::-webkit-slider-thumb,
.order-balance-slider.mud-slider.mud-slider-primary .mud-slider-input:disabled::-webkit-slider-thumb,
.order-balance-slider.mud-slider .mud-slider-input:disabled::-moz-range-thumb,
.order-balance-slider.mud-slider.mud-slider-primary .mud-slider-input:disabled::-moz-range-thumb {
    box-shadow: none !important;
}

/* Provider status timeline strip (admin/provider status page) */
.provider-timeline {
    display: flex;
    gap: 2px;
    height: 14px;
}

.provider-timeline-bucket {
    flex: 1 1 0;
    min-width: 3px;
    border-radius: 2px;
}

.provider-timeline-ok {
    background-color: var(--mud-palette-success);
    opacity: 0.35;
}

.provider-timeline-warning {
    background-color: var(--mud-palette-warning);
}

.provider-timeline-error {
    background-color: var(--mud-palette-error);
}

/* Numeric utility classes for financial data (tabular figures, monospace) */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.font-mono {
    font-family: "Consolas", "SFMono-Regular", "Liberation Mono", Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

/* LoadingProgress bar (indeterminate slide only — countdown removed in v2) */
.loading-progress-bar {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.loading-progress-bar.visible {
    opacity: 1;
}

.loading-progress-indeterminate {
    height: 100%;
    width: 40%;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--mud-palette-primary) 30%,
        var(--mud-palette-primary) 70%,
        transparent 100%);
    box-shadow: 0 0 8px 0 var(--mud-palette-primary);
    animation: loading-progress-slide 1.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes loading-progress-slide {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(150%); }
    100% { transform: translateX(350%); }
}

/* Respect OS-level reduced-motion preference (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .loading-progress-bar {
        transition: none;
    }

    .loading-progress-indeterminate {
        animation: none;
        width: 100%;
        opacity: 0.6;
    }
}

/* Market Indices grid: center header labels to match centered cell content.
   MudDataGrid renders header content in a flex container, so text-align alone does not apply.
   The .column-options icon buttons (sort/filter/menu) are opacity:0 when idle but still
   occupy layout space — positioning them absolutely keeps them hoverable without
   shifting the centered label. */
.market-indices-grid .mud-table-head .mud-table-cell {
    position: relative;
    text-align: center;
}

.market-indices-grid .mud-table-head .mud-table-cell .column-header,
.market-indices-grid .mud-table-head .mud-table-cell .sortable-column-header {
    justify-content: center;
    text-align: center;
}

.market-indices-grid .mud-table-head .mud-table-cell .column-header .column-options {
    position: absolute;
    inset-inline-end: 4px;
    top: 50%;
    transform: translateY(-50%);
}


/* PaperTrading grids: natural height on mobile so the page scrolls instead of a small inner viewport */
@media (max-width: 959.98px) {
    .paper-trading-grid .mud-table-container,
    .paper-trading-grid .mud-table,
    .paper-trading-grid .mud-data-grid {
        overflow-y: visible;
        max-height: none;
        height: auto;
    }

    /* Necessary: MudBlazor sets height via inline style from Height parameter, can't override otherwise */
    .paper-trading-grid .mud-table-container {
        height: auto !important;
    }
}

/* TaskActionButtons: prevent button label wrapping on mobile */
.task-action-buttons .mud-button-label {
    white-space: nowrap;
}

/* SymbolMonitoring: ellipsize overflowing cell content */
.ellipsis-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* SummaryCards: equal-width flex cards, one row on desktop, wraps on narrow screens */
.summary-card-item {
    flex: 1 1 0;
    min-width: 140px;
}

/* Skeleton fade-in: smooth appearance after the delay window elapses.
   Best practice: 150ms fade-in (rorklab, 21st.dev). */
.mud-skeleton {
    animation: skeleton-fade-in 150ms ease-out;
}

@keyframes skeleton-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Skeleton fade-out: smooth transition when real content replaces the skeleton. */
.skeleton-container {
    animation: skeleton-fade-in 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .mud-skeleton,
    .skeleton-container {
        animation: none;
    }
}

/* ── Utility Classes ─────────────────────────────────────────── */
.font-tabular { font-variant-numeric: tabular-nums; }
.min-w-140 { min-width: 140px; }
.min-w-160 { min-width: 160px; }
.min-h-50vh { min-height: 50vh; }
.text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.border-bottom-divider { border-bottom: 1px solid var(--mud-palette-divider); }

/* Hairline below the app bar — flat chrome look for light and dark themes */
.mud-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }

/* Soft ambient depth via MudBlazor elevation tokens: outlined surfaces get the
   (overridden, soft) elevation-2 shadow — visible in light mode, nearly
   invisible on dark backgrounds. Flat + hairline look stays, tokens stay
   themeable via Theme.Shadows.Elevation[]. */
.mud-paper-outlined { box-shadow: var(--mud-elevation-2); }

/* Interactive surfaces: subtle lift + accent border on hover */
.nav-hub-item .mud-paper,
.mud-card.cursor-pointer,
.mud-paper.cursor-pointer {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.nav-hub-item .mud-paper:hover,
.mud-card.cursor-pointer:hover,
.mud-paper.cursor-pointer:hover {
    transform: translateY(-1px);
    box-shadow: var(--mud-elevation-4);
    border-color: var(--mud-palette-primary);
}

/* Symbol screening grid: explicit column widths, Patterns takes the remainder */
.symbol-screening-grid th:nth-child(1),
.symbol-screening-grid td:nth-child(1) {
    width: 115px;
    min-width: 115px;
}

.symbol-screening-grid th:nth-child(2),
.symbol-screening-grid td:nth-child(2) {
    width: 160px;
    min-width: 160px;
}

.symbol-screening-grid th:nth-child(3),
.symbol-screening-grid td:nth-child(3) {
    width: 90px;
}

.symbol-screening-grid th:nth-child(4),
.symbol-screening-grid td:nth-child(4) {
    width: 120px;
}

.symbol-screening-grid th:nth-child(5),
.symbol-screening-grid td:nth-child(5) {
    width: 140px;
}

.symbol-screening-grid th:nth-child(6),
.symbol-screening-grid td:nth-child(6) {
    width: 210px;
}

.symbol-screening-grid th:nth-child(7),
.symbol-screening-grid td:nth-child(7) {
    width: 220px;
    min-width: 220px;
}

.symbol-screening-grid th:nth-child(8),
.symbol-screening-grid td:nth-child(8) {
    width: 80px;
}

.symbol-screening-grid th:nth-child(10),
.symbol-screening-grid td:nth-child(10) {
    width: 80px;
}

/* Stock screening grid: 13 columns — symbol+name, 7 numeric, valuation/score chips, zone, alert */
.stock-screening-grid th:nth-child(1),
.stock-screening-grid td:nth-child(1) {
    width: 150px;
    min-width: 150px;
}

.stock-screening-grid th:nth-child(2),
.stock-screening-grid td:nth-child(2) {
    width: 120px;
}

.stock-screening-grid th:nth-child(3),
.stock-screening-grid td:nth-child(3) {
    width: 90px;
}

.stock-screening-grid th:nth-child(4),
.stock-screening-grid td:nth-child(4) {
    width: 120px;
}

.stock-screening-grid th:nth-child(5),
.stock-screening-grid td:nth-child(5) {
    width: 100px;
}

.stock-screening-grid th:nth-child(6),
.stock-screening-grid td:nth-child(6) {
    width: 100px;
}

.stock-screening-grid th:nth-child(7),
.stock-screening-grid td:nth-child(7) {
    width: 80px;
}

.stock-screening-grid th:nth-child(8),
.stock-screening-grid td:nth-child(8) {
    width: 90px;
}

.stock-screening-grid th:nth-child(9),
.stock-screening-grid td:nth-child(9) {
    width: 170px;
    min-width: 170px;
}

.stock-screening-grid th:nth-child(10),
.stock-screening-grid td:nth-child(10) {
    width: 220px;
    min-width: 220px;
}

.stock-screening-grid th:nth-child(11),
.stock-screening-grid td:nth-child(11) {
    width: 120px;
}

.stock-screening-grid th:nth-child(12),
.stock-screening-grid td:nth-child(12) {
    width: 80px;
}

.stock-screening-grid th:nth-child(13),
.stock-screening-grid td:nth-child(13) {
    width: 70px;
}

/* Symbol screening filter row: 7 equal-width fields on desktop, wraps on smaller screens */
.symbol-screening-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.symbol-screening-filters > * {
    flex: 1 1 140px;
    min-width: 0;
}

.symbol-screening-filters > .filter-narrow {
    flex: 0.6 1 100px;
}

@media (max-width: 959.98px) {
    .symbol-screening-filters > * {
        flex: 1 1 calc(50% - 8px);
    }
}

@media (max-width: 599.98px) {
    .symbol-screening-filters > * {
        flex: 1 1 100%;
    }
}

.clickable {
    cursor: pointer;
}

/* ── Financial data conventions ───────────────────────────────
   Right-aligned numeric columns (fintech table convention).
   Usage: CellClass="col-num" HeaderClass="col-num" on the column.
   Header content sits in a flex container, so it needs
   justify-content instead of text-align (see market-indices-grid). */
td.mud-table-cell.col-num {
    text-align: right;
}

td.mud-table-cell.col-num .d-flex.flex-column {
    align-items: flex-end;
}

th.mud-table-cell.col-num .column-header,
th.mud-table-cell.col-num .sortable-column-header {
    justify-content: flex-end;
    text-align: right;
}

/* Same invisible-icon offset as market-indices-grid: the .column-options icon
   buttons are opacity:0 when idle but keep layout space, so a right-aligned
   header label ended ~icon-width short of the cell edge while the values below
   align to the edge. Absolute positioning keeps them hoverable. */
th.mud-table-cell.col-num {
    position: relative;
}

/* Anchored at the free left edge — at the right edge the revealed icons would
   overlap the right-aligned label itself. */
th.mud-table-cell.col-num .column-header .column-options {
    position: absolute;
    inset-inline-start: 4px;
    top: 50%;
    transform: translateY(-50%);
}


/* Opt-out of cell wrapping for live-updating multi-line cells (e.g. the
   positions P&L column) — a changing value must clip with ellipsis instead
   of reflowing, otherwise the row height jumps on every tick.
   Usage: CellClass="cell-nowrap" on the column. */
td.mud-table-cell.cell-nowrap {
    white-space: nowrap;
}

/* Tick-flash: brief background tint when a live value changes.
   Retriggered by recreating the element (@key bump). */
@keyframes moiren-flash-up {
    0% {
        background-color: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
        box-shadow: inset 0 -0.14em 0 0 var(--mud-palette-success);
    }
    100% {
        background-color: transparent;
        box-shadow: inset 0 -0.14em 0 0 transparent;
    }
}

@keyframes moiren-flash-down {
    0% {
        background-color: color-mix(in srgb, var(--mud-palette-error) 16%, transparent);
        box-shadow: inset 0 -0.14em 0 0 var(--mud-palette-error);
    }
    100% {
        background-color: transparent;
        box-shadow: inset 0 -0.14em 0 0 transparent;
    }
}

.moiren-flash-up {
    animation: moiren-flash-up 350ms ease-out;
    border-radius: 3px;
}

.moiren-flash-down {
    animation: moiren-flash-down 350ms ease-out;
    border-radius: 3px;
}

/* Filled success/error chips as soft badges: tinted fill + signal-colored
   text stays readable on both dark and light surfaces (the default dark
   text on a saturated fill is muddy, esp. in dark mode) */
.mud-chip-filled.mud-chip-color-success {
    background-color: color-mix(in srgb, var(--mud-palette-success) 20%, transparent);
    color: var(--mud-palette-success);
}

.mud-chip-filled.mud-chip-color-error {
    background-color: color-mix(in srgb, var(--mud-palette-error) 20%, transparent);
    color: var(--mud-palette-error);
}

@media (prefers-reduced-motion: reduce) {
    .moiren-flash-up,
    .moiren-flash-down {
        animation: none;
    }
}

/* Viewport-filling page body: Class="viewport-fill-grid" on the root MudGrid
   plus Class="viewport-fill-row" on the content MudItem converts the flex
   grid to CSS grid so the content row claims the remaining viewport height.
   Expects four rows (header, filters, cards, content) — pages with a
   different structure need an adjusted row template. Inner panels grow via
   flex; data grids use Height="100%", empty states use FillHeight. */
.mud-grid.viewport-fill-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto minmax(320px, 1fr);
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
}

.mud-grid.viewport-fill-grid > .mud-grid-item.viewport-fill-row {
    display: flex;
    flex-direction: column;
}

.mud-grid.viewport-fill-grid > .mud-grid-item.viewport-fill-row > .mud-paper {
    flex-grow: 1;
}

/* MudDataGrid applies Height to .mud-table-container — without a definite
   height on the outer .mud-data-grid box, Height="100%" resolves to auto.
   The box gets 100% + flex column so the container (inline height:100%,
   flex-shrink:1) claims the space between toolbar and pager and scrolls
   internally. */
.mud-grid.viewport-fill-grid .viewport-fill-row .mud-data-grid {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mud-grid.viewport-fill-grid .viewport-fill-row .mud-table-container {
    min-height: 0;
}

/* StockFundamentalsFragment: the collapse wrapper flips to overflow-y:auto
   once the panel reaches the entered state — while the content is still
   settling that briefly flashes a vertical scrollbar and shifts the layout.
   The panel has no MaxHeight, so it never needs an internal scrollbar. */
.fundamentals-panel .mud-collapse-wrapper {
    overflow-y: hidden;
}

/* SymbolAnalysis tool tabs: lands on the .mud-tabs-panels container via
   TabPanelsClass (MudTabPanel.PanelClass is display:contents — box styles
   there are ignored). A fixed height keeps the panel stable across tab
   switches and empty→result transitions; taller on xs where the columns
   stack, overflow-y + stable gutter cover overflow without width jitter. */
.analysis-tools-panel {
    height: 280px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* The grid's own spacing compensation shifts items up by -12px, which would
   misalign the full-height column divider and the centered content.
   Necessary: MudBlazor grid spacing classes force their own margin. */
.analysis-tools-grid {
    margin-top: 0 !important;
}

/* On xs the columns stack: keep each row at its natural height instead of
   stretching both rows to fill the fixed 280px panel — otherwise
   justify-center creates dead space above the controls. From sm the
   side-by-side layout keeps the intended vertical centering.
   The first row's item padding already provides the top gap, so the
   panel's own top padding is dropped — 24px stacked padding looked
   disconnected next to the 8–12px spacing between the other elements. */
@media (max-width: 599.98px) {
    .analysis-tools-grid {
        align-content: flex-start;
    }

    /* Necessary: MudBlazor pa-* utilities force their own padding */
    .analysis-tools-panel {
        padding-top: 0 !important;
    }

    /* h5 stat values ("Moderate", localized labels) overflow the ~100px
       wide xs tiles — scale them down to fit with margin. */
    .analysis-tools-panel .mud-typography-h5 {
        font-size: 1rem;
    }

    /* The global xs rule above strips horizontal gutters so page grids
       span the full width — but it also flattens the nested result grids
       (pattern-match cards, comparison tiles), making adjacent cards
       touch. Restore an 8px gutter using MudBlazor's own compensation:
       the grid widens past its host via a negative margin so the first
       and last cards stay flush with the panel edges. */
    .analysis-tools-panel .mud-grid .mud-grid {
        margin-left: -4px;
        margin-right: -4px;
        width: calc(100% + 8px);
        flex-shrink: 0;
    }

    .analysis-tools-panel .mud-grid .mud-grid > .mud-grid-item {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* Below lg the tabs in menus marked .responsive-tabs may only fill part
   of the tab bar — stretch them to equal widths so the full row is used.
   The tabs sit in per-tab wrappers inside the scrollable
   .mud-tabs-tabbar-wrapper, so the whole flex chain needs widening;
   flex 1 0 auto keeps content as the minimum so overflow still scrolls. */
@media (max-width: 1279.98px) {
    .responsive-tabs .mud-tabs-tabbar-content {
        width: 100%;
    }

    .responsive-tabs .mud-tabs-tabbar-wrapper {
        display: flex;
        width: 100%;
    }

    .responsive-tabs .mud-tabs-tabbar-wrapper > :not(.mud-tab-slider) {
        flex: 1 0 auto;
    }
}

@media (min-width: 600px) {
    .analysis-tools-panel {
        height: 180px;
    }

    /* Divider between the controls column and the result area —
       only in the side-by-side layout, not when columns stack on xs.
       padding-right gives the divider the same 12px gap on its left that
       the result column's spacing produces on its right. */
    .analysis-tools-controls {
        border-right: 1px solid var(--mud-palette-divider);
        padding-right: 12px;
    }
}

/* Clickable pattern-match cards inside the analysis tools panel. */
.analysis-match-card {
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.analysis-match-card:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.analysis-match-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
    background-color: var(--mud-palette-action-default-hover);
}

.analysis-match-card.selected {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}

/* Command palette dialog: cap the item list so it scrolls instead of
   overflowing the viewport when all entries are shown */
.command-palette-list {
    max-height: 60vh;
    overflow-y: auto;
}

/* Keep the page scrollbar visible while dialogs/drawers/overlays are open.
   MudBlazor's scroll lock adds body.scroll-locked(-no-padding) (overflow:hidden
   + fixed 8px/17px padding compensation), which hides the scrollbar and shifts
   the layout whenever the real scrollbar width differs. */
body.scroll-locked,
body.scroll-locked-no-padding {
    overflow: visible;
    padding-right: 0;
}

body.scroll-locked .mud-layout .mud-main-content .mud-scroll-to-top {
    padding-right: 0;
}