.w-auto {
    width: auto !important;
}

.top-0 {
    top: 0 !important;
}

.right-0 {
    right: 0 !important;
}

.bottom-0 {
    bottom: 0 !important;
}

.left-0 {
    left: 0 !important;
}

/* ==========================================================================
   Shared surfaces & data tables.

   These live here rather than in a scoped .razor.css because more than one
   view needs the exact same look (positions, assets, fx, …). Scoped CSS can't
   be shared, and copying it per view is how two tables quietly drift apart.
   Component-specific bits (price flashes, tiles) stay scoped to their view.
   ========================================================================== */

/* --- card ---------------------------------------------------------------- */

.st-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.st-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* gutter matches the table cells so headings line up with the first column */
    padding: 12px 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.st-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.st-card__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 56px 24px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.88rem;
    text-align: center;
}

/* --- segmented toggle ---------------------------------------------------- */

/* Two views of the *same* list — not navigation, and not a filter that narrows a query.
   Shared because the strategy page and the cycle dialog show the same trades, and a control
   that means the same thing in both places has to look the same in both places. */

.st-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.st-toggle__chip {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    padding: 4px 12px;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

    .st-toggle__chip:hover {
        color: var(--mud-palette-text-primary);
        background: rgba(var(--mud-palette-primary-rgb), 0.08);
    }

    .st-toggle__chip.is-active {
        color: var(--mud-palette-primary);
        background: rgba(var(--mud-palette-primary-rgb), 0.16);
    }

/* --- dropdown menu ------------------------------------------------------- */

/* MudBlazor teleports popover content into MudPopoverProvider, so it sits outside the owning
   component's scoped-CSS subtree — these have to be global and are opted into via PopoverClass. */

.st-menu .mud-popover {
    margin-top: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.st-menu .mud-list.st-menu__list {
    padding: 6px;
}

.st-menu .mud-list-item {
    border-radius: 8px;
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 0.85rem;
}

    .st-menu .mud-list-item:hover {
        background: rgba(var(--mud-palette-primary-rgb), 0.1);
    }

.st-menu .mud-list-item-icon {
    min-width: 32px;
    color: var(--mud-palette-text-secondary);
}

.st-menu .mud-divider {
    margin: 6px 0;
}

/* --- dialog shell -------------------------------------------------------- */

/* MudBlazor renders the dialog's own chrome (paper, title, content, actions), which sits outside the
   owning component's scoped-CSS subtree — same story as the popovers above. Only the shell lives
   here; everything a dialog puts *inside* these slots is its own markup and stays scoped.
   Padding is zeroed so the dialog's own sections can run edge to edge. */

/* Width is decided here rather than through DialogOptions.MaxWidth: those are fixed pixel buckets
   (Small 600, Medium 960) that don't grow with the window, and these two-class selectors outrank the
   .mud-dialog-width-* class MudBlazor emits anyway — so setting both would just be two sources of
   truth disagreeing. A dialog picks its size with a modifier class on the shell.

   Both terms matter: the vw keeps a half-width browser window from spending a fifth of itself on
   backdrop, and the cap keeps a wide monitor from stretching one line of prose across the desk. */
.st-dialog.mud-dialog {
    --st-dialog-w: 760px;
    width: 100%;
    max-width: min(94vw, var(--st-dialog-w));
    border: 1px solid var(--mud-palette-lines-default);
}

/* a search or a form: more room than MudBlazor's Small, still a single comfortable column */
.st-dialog--md.mud-dialog {
    --st-dialog-w: 900px;
}

/* the detail dialogs, whose stat grids and trade rows genuinely use the room */
.st-dialog--wide.mud-dialog {
    --st-dialog-w: 1180px;
}

.st-dialog .st-dialog__title {
    padding: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.st-dialog .st-dialog__content {
    padding: 0;
}

.st-dialog .st-dialog__actions {
    padding: 10px 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* --- dialog backdrop ----------------------------------------------------- */

/* Only the dialog scrim, not every overlay: a drawer or a select menu is a layer on top of the page
   you're still working in, while a dialog is meant to take it over. Blurring the page underneath drops
   it out of focus so the card reads as the only live thing on screen.

   The colour deliberately stays MudBlazor's `--mud-palette-overlay-dark`, which SwingTraderTheme sets
   per palette — how dark the scrim goes is a theme decision and belongs there, not here. */
.mud-overlay.mud-overlay-dialog .mud-overlay-scrim {
    backdrop-filter: blur(5px) saturate(0.85);
    -webkit-backdrop-filter: blur(5px) saturate(0.85);
}

/* --- dialog transition --------------------------------------------------- */

/* MudBlazor toggles .mud-dialog--open / .mud-dialog--close on the dialog and .mud-overlay-visible
   on the scrim, so the two halves are animated separately: the scrim only fades (a moving backdrop
   reads as a second dialog), while the card also rises and settles.

   Closing is quicker than opening on purpose — an exit that takes as long as an entrance feels like
   the app is arguing with you. */

@keyframes st-dialog-in {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes st-dialog-out {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 6px, 0) scale(0.99);
    }
}

/* Two classes deep on purpose. MudBlazor sets its own `animation` on `.mud-dialog`, and its
   stylesheet is loaded *after* this one — at equal specificity it would win, so this has to outrank
   it rather than merely follow it.

   `.is-closing` comes from CustomDialogBase, which holds the close back long enough for the exit to
   play. Keep the 130ms below in step with CloseAnimationMs there. */
.mud-dialog-container .mud-dialog {
    animation: st-dialog-in 260ms cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

    .mud-dialog-container .mud-dialog.is-closing {
        animation: st-dialog-out 180ms ease-in both;
    }

/* on a phone a centred card wastes the screen — take all of it */
@media (max-width: 599.98px) {
    .st-dialog.mud-dialog {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        border: 0;
        border-radius: 0;
        /* Stretching the shell is only half of going fullscreen. Its three slots keep their natural
           height, so a short dialog left the actions stranded in the middle of a tall empty box with
           the backdrop showing through beneath them. The content takes the slack instead, and it —
           not the page behind it — is what scrolls when there is more than fits. */
        display: flex;
        flex-direction: column;
    }

    .st-dialog .st-dialog__title,
    .st-dialog .st-dialog__actions {
        flex: 0 0 auto;
    }

    .st-dialog .st-dialog__content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* full-bleed, so it slides up from the edge it's attached to rather than scaling in mid-air */
    @keyframes st-dialog-in {
        from {
            opacity: 0;
            transform: translate3d(0, 24px, 0);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
}

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

/* --- dense data table ---------------------------------------------------- */

.st-scroll {
    overflow-x: auto;
}

.st-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    line-height: 1.35;
}

    .st-grid th,
    .st-grid td {
        padding: 6px 14px;
        text-align: left;
        white-space: nowrap;
    }

        .st-grid th.num,
        .st-grid td.num {
            text-align: right;
        }

    .st-grid thead th {
        padding: 0;
        border-bottom: 1px solid var(--mud-palette-lines-default);
        font-weight: 500;
        font-size: 0.65rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
    }

    .st-grid tbody tr {
        border-bottom: 1px solid var(--mud-palette-divider-light);
    }

        .st-grid tbody tr:last-child {
            border-bottom: 0;
        }

        .st-grid tbody tr:hover {
            background: var(--mud-palette-table-hover);
        }

    .st-grid td {
        color: var(--mud-palette-text-primary);
        font-variant-numeric: tabular-nums;
    }

        .st-grid td.num {
            font-weight: 500;
        }

/* sortable header button */

.st-grid .th-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    transition: color 120ms ease;
}

    .st-grid .th-btn:hover {
        color: var(--mud-palette-text-primary);
    }

.st-grid .num .th-btn {
    justify-content: flex-end;
}

.st-grid .caret {
    min-width: 7px;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--mud-palette-primary);
}

/* shared cell atoms */

.st-grid .sym {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.st-grid .cur {
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.st-grid .is-gain {
    color: var(--mud-palette-success);
}

.st-grid .is-loss {
    color: var(--mud-palette-error);
}

@media (max-width: 599.98px) {
    .st-grid th,
    .st-grid td,
    .st-grid .th-btn {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* rows stay dense, but sort headers are buttons and need a thumb-sized target */
    .st-grid .th-btn {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}