/**
 * Props Odds Engine - Specificity Helper
 * =======================================
 * Higher specificity rules to override theme without !important
 * Load this AFTER other CSS to win cascade battles naturally
 */

/* =========================
   Specificity Boost Pattern
   =========================
   Instead of: .props-odds .chip { color: red !important; }
   We use: .props-odds-engine .props-odds .chip { color: red; }
   This adds specificity without !important
*/

/* =========================
   Typography Overrides
   ========================= */

/* Boost specificity for font-family without !important */
.props-odds-engine .props-odds,
.props-odds-engine .props-odds * {
    font-family: var(--props-font-primary);
}

/* Monospace odds with high specificity - ALL odds cells and their children */
.props-odds-engine .props-odds .over-odds,
.props-odds-engine .props-odds .under-odds,
.props-odds-engine .props-odds-scope .over-odds,
.props-odds-engine .props-odds-scope .under-odds,
.props-odds-engine .props-odds .props-table .odds-cell,
.props-odds-engine .props-odds .props-table td.odds-cell,
.props-odds-engine .props-odds table .odds-cell,
.props-odds-engine .props-odds .odds-value,
.props-odds-engine .props-odds .line-prefix,
.props-odds-engine .props-odds [class*="odds"],
/* All children of odds cells should also be monospace */
.props-odds-engine .props-odds td.odds-cell *,
.props-odds-engine .props-odds .odds-cell span,
.props-odds-engine .props-odds .odds-cell .line-prefix,
.props-odds-engine .props-odds .over-odds span,
.props-odds-engine .props-odds .under-odds span,
.props-odds-engine .props-odds .over-odds .line-prefix,
.props-odds-engine .props-odds .under-odds .line-prefix {
    font-family: var(--props-font-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* =========================
   Layout Overrides
   ========================= */

/* Force display values without !important */
.props-odds-engine .props-odds .props-more-filter.open .props-more-panel,
.props-odds-engine .props-odds .props-matchups-filter.open .props-matchups-panel {
    display: grid;
}

.props-odds-engine .props-odds .props-more-panel:not(.open),
.props-odds-engine .props-odds .props-matchups-panel:not(.open) {
    display: none;
}

/* Width overrides for mobile */
@media (max-width: 768px) {
    body .props-odds-engine .props-odds .props-drawer,
    body .props-odds-engine .props-odds .props-all-drawer,
    body .props-odds-engine .props-odds .props-more-panel,
    body .props-odds-engine .props-odds .props-matchups-panel {
        width: 100vw;
        max-width: 100vw;
    }
}

/* =========================
   Component Overrides
   ========================= */

/* Chips with higher specificity */
body .props-odds-engine .props-odds .chip,
html body .props-odds-engine .props-odds button.chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--chip-border);
    background: var(--chip-bg);
    color: var(--chip-text);
    cursor: pointer;
    line-height: 1;
}

/* Active chips without !important */
body .props-odds-engine .props-odds .chip.active,
body .props-odds-engine .props-odds .chip[aria-pressed="true"] {
    background: var(--chip-bg-active);
    color: var(--chip-text-light);
    border-color: var(--chip-border-active);
}

/* Market pills padding with maximum specificity */
html body .props-odds-engine .props-odds .props-more-panel .panel-list .market-list .market-pill,
html body .props-odds-engine .props-odds .props-more-panel .panel-list .market-list button.market-pill {
    padding: 7px 14px;
    box-sizing: border-box;
}

/* =========================
   Table Overrides
   ========================= */

/* Table cells without !important */
body .props-odds-engine .props-odds .props-table th,
body .props-odds-engine .props-odds .props-table td {
    padding: 8px 12px;
    text-align: left;
    vertical-align: middle;
}

/* Odds cells */
body .props-odds-engine .props-odds .props-table .odds-cell {
    padding: 6px 8px;
    text-align: center;
}

/* =========================
   Form Controls
   ========================= */

/* Input fields with high specificity */
html body .props-odds-engine .props-odds input[type="text"],
html body .props-odds-engine .props-odds input[type="search"],
html body .props-odds-engine .props-odds input[type="number"],
html body .props-odds-engine .props-odds select {
    height: var(--input-height);
    padding: 0 var(--props-space-3);
    font-family: var(--props-font-primary);
    font-size: var(--props-text-base);
    border: 1px solid var(--props-border-light);
    background-color: var(--props-bg-primary);
    color: var(--props-text-primary);
}

/* =========================
   Button Overrides
   ========================= */

/* Reset button defaults with specificity */
html body .props-odds-engine .props-odds button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    overflow: visible;
    text-transform: none;
    -webkit-appearance: button;
}

/* Button hover states */
html body .props-odds-engine .props-odds button:hover:not(:disabled) {
    transform: translateY(-1px);
}

html body .props-odds-engine .props-odds button:active:not(:disabled) {
    transform: translateY(0);
}

/* =========================
   Z-Index Management
   ========================= */

/* Ensure dropdowns appear above other content */
body .props-odds-engine .props-odds .props-more-panel,
body .props-odds-engine .props-odds .props-matchups-panel,
body .props-odds-engine .props-odds .props-filters-panel {
    z-index: var(--z-dropdown);
}

/* Modals and overlays */
body .props-odds-engine .props-odds .modal-overlay {
    z-index: var(--z-overlay);
}

body .props-odds-engine .props-odds .modal {
    z-index: var(--z-modal);
}

/* =========================
   Transition Overrides
   ========================= */

/* Smooth transitions without !important */
body .props-odds-engine .props-odds .chip,
body .props-odds-engine .props-odds button,
body .props-odds-engine .props-odds input,
body .props-odds-engine .props-odds .panel {
    transition: var(--transition-interactive);
}

/* =========================
   Flex Layout Fixes
   ========================= */

/* Flex containers with proper alignment */
body .props-odds-engine .props-odds .flex-center,
body .props-odds-engine .props-odds .chips-container,
body .props-odds-engine .props-odds .filter-buttons {
    display: flex;
    align-items: center;
}

body .props-odds-engine .props-odds .flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =========================
   Shadow Overrides
   ========================= */

/* Shadows without !important */
body .props-odds-engine .props-odds .chip {
    box-shadow: var(--shadow-sm);
}

body .props-odds-engine .props-odds .chip:hover {
    box-shadow: var(--shadow-md);
}

body .props-odds-engine .props-odds .panel {
    box-shadow: var(--panel-shadow);
}

/* =========================
   Color Overrides
   ========================= */

/* Text colors with specificity */
body .props-odds-engine .props-odds {
    color: var(--props-text-primary);
}

body .props-odds-engine .props-odds .text-muted {
    color: var(--props-text-muted);
}

body .props-odds-engine .props-odds .text-light {
    color: var(--props-text-light);
}

/* Background colors */
body .props-odds-engine .props-odds {
    background-color: var(--props-bg-primary);
}

body .props-odds-engine .props-odds .bg-secondary {
    background-color: var(--props-bg-secondary);
}

/* =========================
   Border Overrides
   ========================= */

/* Borders without !important */
body .props-odds-engine .props-odds .chip,
body .props-odds-engine .props-odds .panel,
body .props-odds-engine .props-odds input {
    border-color: var(--props-border-light);
    border-style: solid;
    border-width: 1px;
}

body .props-odds-engine .props-odds .chip:hover,
body .props-odds-engine .props-odds input:hover {
    border-color: var(--props-border-default);
}

body .props-odds-engine .props-odds .chip.active,
body .props-odds-engine .props-odds input:focus {
    border-color: var(--props-primary);
}

/* =========================
   Border Radius Overrides
   ========================= */

/* Rounded corners without !important */
body .props-odds-engine .props-odds .chip {
    border-radius: var(--chip-radius);
}

body .props-odds-engine .props-odds .panel {
    border-radius: var(--panel-radius);
}

body .props-odds-engine .props-odds input {
    border-radius: var(--input-radius);
}

/* =========================
   Special Cases
   ========================= */

/* Override theme's universal line-height */
html body .props-odds-engine {
    line-height: 1.5;
}

html body .props-odds-engine .props-odds * {
    line-height: inherit;
}

/* Override theme's forced uppercase on headings */
html body .props-odds-engine .props-odds h1,
html body .props-odds-engine .props-odds h2,
html body .props-odds-engine .props-odds h3,
html body .props-odds-engine .props-odds h4,
html body .props-odds-engine .props-odds h5,
html body .props-odds-engine .props-odds h6 {
    text-transform: none;
}

/* Override theme's table width forcing */
html body .props-odds-engine .props-odds table {
    width: auto;
    table-layout: auto;
}

/* Override theme's input height forcing */
html body .props-odds-engine .props-odds input:not([type="checkbox"]):not([type="radio"]) {
    height: var(--input-height);
}

/* Override theme's button transparency */
html body .props-odds-engine .props-odds button {
    background-color: var(--props-bg-primary);
    opacity: 1;
}