/* Modern UI Marketplace - Additional styling beyond base CSS

   Base marketplace styling uses var(--x, fallback) pattern
   in marketplace.css. This file only contains EXTRA modern-specific rules.
*/

/* Vertical tab styling enhancements - main styling in panels.css */
body.modern-ui .marketplace-tabs {
    gap: 0.25rem;
}

/* Controls with backdrop blur */
body.modern-ui .market-controls,
body.modern-ui .market-equip-controls {
    backdrop-filter: var(--blur-light);
}

/* Buy/Sell trade panels with glass effect */
body.modern-ui .market-trade-panel {
    backdrop-filter: var(--blur-light);
    border-radius: var(--ui-radius-md);
}

body.modern-ui .market-buy-panel {
    background: linear-gradient(135deg, rgba(var(--success-color-rgb), 0.08) 0%, var(--surface-secondary) 100%);
    border-color: rgba(var(--success-color-rgb), 0.3);
}

body.modern-ui .market-sell-panel {
    background: linear-gradient(135deg, rgba(var(--warning-color-rgb), 0.08) 0%, var(--surface-secondary) 100%);
    border-color: rgba(var(--warning-color-rgb), 0.3);
}

body.modern-ui .market-trade-panel .section-header {
    border-bottom-color: rgba(var(--accent-color-rgb), 0.15);
}

body.modern-ui .market-buy-panel .section-header {
    border-bottom-color: rgba(var(--success-color-rgb), 0.2);
}

body.modern-ui .market-sell-panel .section-header {
    border-bottom-color: rgba(var(--warning-color-rgb), 0.2);
}

body.modern-ui .market-trade-form input {
    background: var(--surface-secondary);
    border-radius: var(--ui-radius-sm);
}

body.modern-ui .market-trade-actions button {
    border-radius: var(--ui-radius-sm);
}

body.modern-ui .market-buy-btn:hover {
    transform: var(--ui-transform-hover-lift);
    box-shadow: var(--ui-shadow-sm), 0 0 10px rgba(var(--success-color-rgb), 0.2);
}

body.modern-ui .market-sell-btn:hover {
    transform: var(--ui-transform-hover-lift);
    box-shadow: var(--ui-shadow-sm), 0 0 10px rgba(var(--warning-color-rgb), 0.2);
}

/* Order book panels with glass effect */
body.modern-ui .market-book-panel {
    backdrop-filter: var(--blur-light);
}

body.modern-ui .market-book-panel.bids-panel {
    background: linear-gradient(135deg, rgba(var(--success-color-rgb), 0.05) 0%, var(--surface-secondary) 100%);
}

body.modern-ui .market-book-panel.asks-panel {
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.05) 0%, var(--surface-secondary) 100%);
}

/* Order form with subtle gradient */
body.modern-ui .market-order-form {
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.03) 0%, var(--surface-secondary) 100%);
    backdrop-filter: var(--blur-light);
}

/* Input focus glow */
body.modern-ui .market-field input:focus,
body.modern-ui .market-field select:focus {
    box-shadow: var(--input-focus-shadow), var(--glow-accent);
}

/* Action buttons with gradients */
body.modern-ui .market-actions button:hover,
body.modern-ui .market-equip-actions button:hover {
    transform: var(--ui-transform-hover-lift);
    box-shadow: var(--ui-shadow-sm);
}

body.modern-ui .market-actions button:active,
body.modern-ui .market-equip-actions button:active {
    transform: var(--ui-transform-active-press);
}

/* Equipment table row enhancements */
body.modern-ui .market-equip-table {
    backdrop-filter: var(--blur-light);
}

body.modern-ui .market-equip-table tbody tr {
    border-left-width: 4px;
}

/* Enhanced rarity row backgrounds with gradients */
body.modern-ui .market-equip-table tbody tr.rarity-row-common {
    background: linear-gradient(90deg, rgba(var(--rarity-common-rgb), 0.06) 0%, transparent 50%);
}

body.modern-ui .market-equip-table tbody tr.rarity-row-uncommon {
    background: linear-gradient(90deg, rgba(var(--rarity-uncommon-rgb), 0.08) 0%, transparent 50%);
}

body.modern-ui .market-equip-table tbody tr.rarity-row-rare {
    background: linear-gradient(90deg, rgba(var(--rarity-rare-rgb), 0.1) 0%, transparent 50%);
}

body.modern-ui .market-equip-table tbody tr.rarity-row-epic {
    background: linear-gradient(90deg, rgba(var(--rarity-epic-rgb), 0.12) 0%, transparent 50%);
}

/* Enhanced hover states */
body.modern-ui .market-equip-table tbody tr:hover {
    transform: translateX(2px);
}

body.modern-ui .market-equip-table tbody tr.rarity-row-uncommon:hover {
    background: linear-gradient(90deg, rgba(var(--rarity-uncommon-rgb), 0.15) 0%, rgba(var(--rarity-uncommon-rgb), 0.05) 100%);
}

body.modern-ui .market-equip-table tbody tr.rarity-row-rare:hover {
    background: linear-gradient(90deg, rgba(var(--rarity-rare-rgb), 0.18) 0%, rgba(var(--rarity-rare-rgb), 0.05) 100%);
}

body.modern-ui .market-equip-table tbody tr.rarity-row-epic:hover {
    background: linear-gradient(90deg, rgba(var(--rarity-epic-rgb), 0.2) 0%, rgba(var(--rarity-epic-rgb), 0.05) 100%);
}

/* Signature badge glow */
body.modern-ui .market-equip-badge.sig-badge {
    box-shadow: 0 0 8px rgba(255, 170, 50, 0.3);
}

body.modern-ui .market-equip-badge.req-badge {
    box-shadow: 0 0 8px rgba(var(--error-color-rgb), 0.25);
}

/* Action buttons with modern hover */
body.modern-ui .market-equip-btn:hover {
    transform: var(--ui-transform-hover-lift);
    box-shadow: var(--ui-shadow-sm);
}

body.modern-ui .market-equip-btn.buy-btn {
    background: linear-gradient(135deg, rgba(var(--success-color-rgb), 0.1) 0%, transparent 100%);
}

body.modern-ui .market-equip-btn.buy-btn:hover {
    box-shadow: var(--ui-shadow-sm), 0 0 12px rgba(var(--success-color-rgb), 0.2);
}

body.modern-ui .market-equip-btn.buy-btn-level-locked {
    background: linear-gradient(135deg, rgba(var(--warning-color-rgb), 0.12) 0%, transparent 100%);
}

body.modern-ui .market-equip-table tbody tr.level-locked-row {
    box-shadow: inset 0 0 0 1px rgba(var(--error-color-rgb), 0.35);
}

/* Pagination with glass effect */
body.modern-ui .market-equip-pagination {
    backdrop-filter: var(--blur-light);
}

body.modern-ui .market-equip-pagination button:hover:not(:disabled) {
    transform: var(--ui-transform-hover-lift);
}

/* Toast notifications with enhanced glass effect */
body.modern-ui .market-toast {
    backdrop-filter: var(--blur-medium);
    border-radius: var(--ui-radius-lg);
}

body.modern-ui .market-toast.toast-success {
    background: linear-gradient(135deg, rgba(var(--success-color-rgb), 0.15) 0%, var(--surface-tertiary) 100%);
}

body.modern-ui .market-toast.toast-error {
    background: linear-gradient(135deg, rgba(var(--error-color-rgb), 0.15) 0%, var(--surface-tertiary) 100%);
}

/* Empty state styling */
body.modern-ui #market-equip-empty {
    backdrop-filter: var(--blur-light);
    border-style: dashed;
    border-color: rgba(var(--accent-color-rgb), 0.2);
}

/* My orders table enhancements */
body.modern-ui .market-orders .market-table {
    backdrop-filter: var(--blur-light);
}

body.modern-ui .market-cancel-btn:hover {
    transform: var(--ui-transform-hover-lift);
    box-shadow: 0 0 8px rgba(var(--error-color-rgb), 0.2);
}