/*
 * m0 Design System — Panels: OTC / Opportunity Exchange (CANONICAL)
 * Panel-scoped styles for the opportunity_exchange panel — the Gold Markets,
 * Order Book, Trade Form, and OTC view sub-views. One definition per class,
 * token-driven. The classes below are used only in this panel (verified via
 * `rg` of the rust sources). Shared primitives (.stat-card / .stat-value /
 * .stat-label / .order-book / .order-row / .pool-* / .amm-view /
 * .gold-markets-view / .order-book-view) stay in the monolith or components
 * layer; only the .otc-* / .trade-form / .book-* / .market-* / .price-*
 * rules live here per the css-canon migration scope.
 */

/* ── Market Tabs ─────────────────────────────────────────────── */
.market-tabs {
    display: flex;
    gap: var(--spacing-xs);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-xs);
}

.market-tabs .tab {
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: all 0.2s ease;
}

.market-tabs .tab:hover {
    background: color-mix(in srgb, var(--star-white) 5%, transparent);
    color: var(--text-primary);
}

.market-tabs .tab.active {
    background: color-mix(in srgb, var(--text-accent) 10%, transparent);
    color: var(--primary-blue);
    border-bottom: 0.125rem solid var(--primary-blue);
}

/* ── Market header + price display ────────────────────────────── */
.market-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-display {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.price-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.price-value {
    font-size: 1.5rem;
    font-weight: 600;
}

.price-change {
    font-size: 0.85rem;
}

.price-change.positive {
    color: var(--status-success);
}

.price-change.negative {
    color: var(--status-error);
}

/* ── Order book sides + spread ────────────────────────────────── */
.book-side {
    padding: var(--spacing-md);
    background: var(--card-bg);
    border-radius: var(--radius-md);
}

.book-side h4 {
    margin: 0 0 var(--spacing-sm);
    font-size: 0.85rem;
}

.book-side.asks h4 {
    color: var(--status-error);
}

.book-side.bids h4 {
    color: var(--status-success);
}

.book-spread {
    text-align: center;
    padding: var(--spacing-sm);
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Trade Form ───────────────────────────────────────────────── */
.trade-form {
    padding: var(--spacing-md);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.trade-form h4 {
    margin: 0 0 var(--spacing-md);
}

.trade-form .form-row {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.trade-form .btn-buy,
.trade-form .btn-sell {
    flex: 1;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.trade-form .btn-buy.active {
    background: color-mix(in srgb, var(--status-success) 15%, transparent);
    border-color: var(--status-success);
    color: var(--status-success);
}

.trade-form .btn-sell.active {
    background: color-mix(in srgb, var(--status-error) 15%, transparent);
    border-color: var(--status-error);
    color: var(--status-error);
}

.trade-form .form-group {
    margin-bottom: var(--spacing-md);
}

.trade-form label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.trade-form input {
    width: 100%;
    padding: var(--spacing-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

/* ── OTC View ─────────────────────────────────────────────────── */
.otc-view h3 {
    margin: 0 0 var(--spacing-xs);
}

.otc-desc {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: var(--spacing-lg);
}

.otc-listings {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.otc-card {
    padding: var(--spacing-md);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.otc-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.otc-type {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.otc-type.sell {
    background: color-mix(in srgb, var(--status-error) 15%, transparent);
    color: var(--status-error);
}

.otc-type.buy {
    background: color-mix(in srgb, var(--status-success) 15%, transparent);
    color: var(--status-success);
}

.otc-amount {
    font-weight: 600;
}

.otc-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.otc-details .detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.otc-details .label {
    color: var(--text-muted);
}

.otc-details .verified {
    color: var(--status-success);
}

.btn-create-otc {
    width: 100%;
}