/* ==========================================================================
   MetaGenius — Spot Trading UX/UI (Pro Exchange Grade)
   Scoped to the spot trade page only. Loaded via @push('style') in trade/index.

   IMPORTANT — theme model:
   The site's real theme is the `--mg-*` design system (metagenius-public.css),
   which is correctly named: `:root`/[data-theme=dark] = dark, [data-theme=light]
   = light. The legacy main.css vars (`--section-bg`, `--white`, `--black`) are
   INVERTED and must NOT be used on this page. Everything here is driven by the
   `--mg-*` tokens so the panels match the index page in both modes.
   ========================================================================== */

/* ---------- Design tokens (mg-system aware) ---------- */
.trading-section {
    --panel-radius: 10px;
    --ob-buy: #0ecb81;
    --ob-sell: #f6465d;
    --ob-buy-bg: rgba(14, 203, 129, 0.14);
    --ob-sell-bg: rgba(246, 70, 93, 0.14);
    --panel-bg: var(--mg-card);
    --panel-bg-2: var(--mg-card-2);
    --ob-line: var(--mg-border);
    --ob-inset: rgba(255, 255, 255, 0.04);
    --ob-hover: rgba(255, 255, 255, 0.06);
    --ob-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.005));
}

/* Light appearance overrides (dark-on-light overlays) */
[data-theme="light"] .trading-section {
    --ob-inset: rgba(9, 9, 11, 0.03);
    --ob-hover: rgba(9, 9, 11, 0.05);
    --ob-wash: linear-gradient(180deg, rgba(9, 9, 11, 0.02), rgba(9, 9, 11, 0.005));
}

/* ==========================================================================
   PAGE SURFACE — match the index page background
   ========================================================================== */
.trading-section.bg-color,
.trading-section {
    background: var(--mg-bg) !important;
}

/* ==========================================================================
   PANEL SURFACES — use the mg card tokens (not the inverted legacy vars)
   ========================================================================== */
.trading-section .trading-left,
.trading-section .trading-right,
.trading-section .trading-right__bottom,
.trading-section .trading-bottom,
.trading-section .trading-bottom__fixed,
.trading-section .trading-table,
.trading-section .trading-header,
.trading-section .trading-sidebar .trading-table,
.trading-section .trading-history,
.trading-section .trading-left__top,
.trading-section .trading-bottom__header,
.trading-section .trading-bottom__wrapper,
.trading-section .buy-sell__wrapper {
    background-color: var(--panel-bg) !important;
    border-color: var(--ob-line) !important;
    border-radius: var(--panel-radius);
    box-shadow: 0 1px 0 var(--ob-inset) inset, 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Slightly elevated inner surfaces (spread row, selected states) */
.trading-section .ob-spread,
.trading-section .input-group,
.trading-section .input--group,
.trading-section .trading-right__top,
.trading-section .trading-table thead {
    background-color: var(--panel-bg-2) !important;
    border-color: var(--ob-line) !important;
}

/* Order book list rows keep a transparent base so depth bars show */
.trading-section .trading-left__list {
    background-color: transparent !important;
}

.trading-section .trading-left__list:hover {
    background-color: var(--ob-hover) !important;
}

/* ==========================================================================
   TEXT — readable in both modes (mg-fg headings, mg-fg-2 secondary)
   ========================================================================== */
.trading-section {
    color: var(--mg-fg-2);
}

.trading-section .trading-header__title,
.trading-section .trading-left__top-title,
.trading-section .trading-right__title,
.trading-section .trading-history__title,
.trading-section .trading-table__title,
.trading-section .buy-sell__title,
.trading-section .trading-left__bottom-title,
.trading-section .trading-header__number,
.trading-section .trading-header-number,
.trading-section .ob-spread__price {
    color: var(--mg-fg) !important;
}

.trading-section .trading-left__header,
.trading-section .price__title,
.trading-section .amount__title,
.trading-section .total__title,
.trading-section .ob-spread__label,
.trading-section .trading-history,
.trading-section .trading-history span,
.trading-section .trading-history__title,
.trading-section .form--label,
.trading-section .input--group span,
.trading-section .input-group-text {
    color: var(--mg-fg-2) !important;
}

/* ==========================================================================
   ORDER BOOK — Binance-style cumulative depth bars
   ========================================================================== */
.trading-left__list {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    transition: background-color 0.12s ease;
    font-variant-numeric: tabular-nums;
}

.trading-left__list .ob-depth-bar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    transition: width 0.25s ease;
    border-radius: 0 3px 3px 0;
}

.trading-left__list .ob-depth-bar.ob-bid {
    background: linear-gradient(to left, var(--ob-buy-bg), transparent);
}

.trading-left__list .ob-depth-bar.ob-ask {
    background: linear-gradient(to left, var(--ob-sell-bg), transparent);
}

.trading-left__list > li {
    position: relative;
    z-index: 1;
}

/* Sell side (asks) price tint */
.trading-left__buy .price__item {
    color: var(--ob-sell) !important;
}

/* Buy side (bids) price tint */
.trading-left__bottom .price__item,
.trading-left__buy.left-two .price__item {
    color: var(--ob-buy) !important;
}

/* My-order highlight ring */
.trading-left__list.has-my-order {
    box-shadow: inset 2px 0 0 rgba(59, 91, 253, 0.7);
}

/* Order book header stays visible while the list scrolls */
.trading-left__top {
    position: sticky;
    top: 0;
    z-index: 3;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ob-line);
}

/* Mid-price / spread row */
.ob-spread {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin: 6px 0;
    border-top: 1px solid var(--ob-line);
    border-bottom: 1px solid var(--ob-line);
    border-radius: 6px;
    font-size: 0.8rem;
}

.ob-spread .ob-spread__price {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}

.ob-spread .ob-spread__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   BUY / SELL PANEL
   ========================================================================== */
.buy-sell__title {
    letter-spacing: -0.2px;
}

/* Buy button (green) */
.trading-section .btn--base-two {
    background: linear-gradient(180deg, #0ecb81, #0aa867);
    border: none;
    box-shadow: 0 6px 16px rgba(14, 203, 129, 0.25);
    transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.2s ease;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff !important;
}

.trading-section .btn--base-two:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 20px rgba(14, 203, 129, 0.35);
    transform: translateY(-1px);
}

.trading-section .btn--base-two:active {
    transform: translateY(0);
}

/* Sell button (red) */
.trading-section .btn--danger {
    background: linear-gradient(180deg, #f6465d, #d63246);
    border: none;
    box-shadow: 0 6px 16px rgba(246, 70, 93, 0.25);
    transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.2s ease;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff !important;
}

.trading-section .btn--danger:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 20px rgba(246, 70, 93, 0.35);
    transform: translateY(-1px);
}

.trading-section .btn--danger:active {
    transform: translateY(0);
}

/* Order type tabs */
.trading-bottom__header .nav-pills .nav-link {
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--mg-fg-2) !important;
    transition: color 0.15s ease;
}

.trading-bottom__header .nav-pills .nav-link.active {
    color: var(--mg-fg) !important;
    background: var(--panel-bg-2) !important;
}

/* Price / amount / total inputs */
.buy-sell__price .form--control,
.buy-sell__price .form-control {
    font-variant-numeric: tabular-nums;
    color: var(--mg-fg) !important;
    background: var(--panel-bg-2) !important;
    border-color: var(--ob-line) !important;
}

.buy-sell__price .form--control:focus,
.buy-sell__price .form-control:focus {
    box-shadow: 0 0 0 3px hsl(var(--base) / 0.12);
}

/* ==========================================================================
   TICKER HEADER (pair.blade.php)
   ========================================================================== */
.trading-header {
    gap: 8px;
}

.trading-header__title {
    font-weight: 700;
    letter-spacing: -0.3px;
    font-size: 1.25rem;
}

/* ==========================================================================
   SELECT2 + MODALS on the trade page — theme-correct surfaces
   ========================================================================== */
.trading-section .select2-dropdown,
.trading-section .select2-container--open .select2-dropdown {
    background-color: var(--panel-bg) !important;
    border-color: var(--ob-line) !important;
}

.trading-section .select2-dropdown .select2-results__option {
    color: var(--mg-fg) !important;
}

.trading-section .select2-dropdown .select2-results__option--highlighted {
    background-color: var(--panel-bg-2) !important;
}

/* ==========================================================================
   POLISH — responsive / completeness
   ========================================================================== */
@media (max-width: 1199.98px) {
    .trading-section .trading-left__top {
        position: static;
    }
}

/* ==========================================================================
   THEME CONSISTENCY — chart container + My-Order table container
   These were still driven by the inverted legacy --section-bg variable, so
   when the mg theme changes they fell out of sync with the panels and looked
   "off". Everything below is forced onto the single --mg-* theme.
   ========================================================================== */
.trading-section .trading-chart {
    background-color: var(--panel-bg) !important;
    border: 1px solid var(--ob-line) !important;
    border-radius: var(--panel-radius);
    box-shadow: 0 1px 0 var(--ob-inset) inset, 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* My Order — scrollable container sits on the themed card surface */
.trading-section .table-wrapper-two {
    background: var(--panel-bg) !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none;
}

.trading-section .table-wrapper-two .my-order-list-table thead {
    background: var(--panel-bg-2) !important;
    border-color: var(--ob-line) !important;
}

.trading-section .my-order-list-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mg-fg-2);
    --bs-table-border-color: var(--ob-line);
    color: var(--mg-fg-2) !important;
}

.trading-section .my-order-list-table tbody tr,
.trading-section .my-order-list-table tbody td {
    background: transparent !important;
    color: var(--mg-fg-2) !important;
    border-color: var(--ob-line) !important;
}

/* Theme-following scrollbars on the trade page panels */
.trading-section ::-webkit-scrollbar,
.trading-section .table-wrapper-two::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.trading-section ::-webkit-scrollbar-track,
.trading-section .table-wrapper-two::-webkit-scrollbar-track {
    background: transparent;
}
.trading-section ::-webkit-scrollbar-thumb,
.trading-section .table-wrapper-two::-webkit-scrollbar-thumb {
    background: var(--ob-hover);
    border-radius: 8px;
}