/**
 * Props Odds Engine - Base Component Classes
 * ===========================================
 * Reusable component patterns to reduce duplication
 * This file should be loaded AFTER variables.css
 */

/* =========================
   Base Chip Component
   =========================
   Reduces 94 duplicate chip patterns to one base class
*/

.props-odds .chip {
    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;

    /* Sizing */
    height: var(--chip-height);
    padding: 0 14px;
    min-width: fit-content;

    /* Typography */
    font-family: var(--props-font-primary) !important;
    font-size: var(--props-text-base) !important;
    font-weight: var(--props-font-medium) !important;
    line-height: 1 !important;
    white-space: nowrap;

    /* Colors */
    color: var(--chip-text) !important;
    background: var(--chip-bg) !important;

    /* Borders */
    border: 1px solid var(--chip-border) !important;
    border-radius: var(--chip-radius) !important;

    /* Effects */
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition-interactive);
    cursor: pointer;

    /* Reset button styles if chip is a button */
    outline: none;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Chip Hover State */
.props-odds .chip:hover {
    background: var(--chip-bg-hover) !important;
    border-color: var(--chip-border-hover) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px);
}

/* Chip Active/Selected State */
.props-odds .chip.active,
.props-odds .chip.selected,
.props-odds .chip[aria-pressed="true"],
.props-odds .chip[aria-selected="true"] {
    color: var(--chip-text-light) !important;
    background: var(--chip-bg-active) !important;
    border-color: var(--chip-border-active) !important;
    box-shadow: var(--shadow-active) !important;
    font-weight: var(--props-font-semibold) !important;
}

/* Chip Focus State */
.props-odds .chip:focus-visible {
    box-shadow: var(--shadow-focus) !important;
    outline: none !important;
}

/* Chip Count Badge */
.props-odds .chip .chip-count,
.props-odds .chip .badge {
    margin-left: auto;
    padding: 2px 6px;
    font-size: var(--props-text-xs) !important;
    font-weight: var(--props-font-semibold) !important;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
}

/* Chip Icon */
.props-odds .chip .chip-icon,
.props-odds .chip svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Chip Variants */
.props-odds .chip--large {
    height: var(--chip-height-lg);
    padding: 0 16px;
    font-size: 15px !important;
}

.props-odds .chip--small {
    height: 24px;
    padding: 0 10px;
    font-size: var(--props-text-sm) !important;
}

.props-odds .chip--square {
    border-radius: var(--radius-lg) !important;
}

/* Chip Container Patterns */
.props-odds .chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--props-space-2);
}

.props-odds .chips-container--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* =========================
   Base Panel Component
   =========================
   Reduces 199 duplicate panel patterns
*/

.props-odds .panel {
    /* Positioning */
    position: absolute;
    top: 100%;
    z-index: var(--z-dropdown);

    /* Layout */
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    width: 400px;
    max-height: 680px;
    margin-top: 8px;

    /* Styling */
    background: var(--panel-bg) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--panel-radius) !important;
    box-shadow: var(--panel-shadow) !important;
    overflow: hidden;
}

/* Panel Header */
.props-odds .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--props-space-3) var(--props-space-4);
    background: var(--panel-header-bg);
    border-bottom: 1px solid var(--panel-border);
    font-weight: var(--props-font-semibold);
}

/* Panel Controls (tabs, filters) */
.props-odds .panel-controls {
    display: flex;
    gap: var(--props-space-2);
    padding: var(--props-space-3) var(--props-space-4);
    border-bottom: 1px solid var(--panel-border);
}

/* Panel Content/List */
.props-odds .panel-content,
.props-odds .panel-list {
    overflow-y: auto;
    padding: var(--props-space-3);
}

/* Panel Actions (footer) */
.props-odds .panel-actions {
    display: flex;
    gap: var(--props-space-2);
    padding: var(--props-space-3) var(--props-space-4);
    border-top: 1px solid var(--panel-border);
    background: var(--panel-header-bg);
}

/* Panel Variants */
.props-odds .panel--wide {
    width: 480px;
}

.props-odds .panel--narrow {
    width: 320px;
}

.props-odds .panel--tall {
    max-height: 80vh;
}

/* Panel Animation */
@keyframes panelSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.props-odds .panel {
    animation: panelSlideDown 200ms ease-out;
}

/* =========================
   Base Button Component
   ========================= */

.props-odds .btn {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--props-space-2);

    /* Sizing */
    height: var(--button-height);
    padding: 0 var(--props-space-4);

    /* Typography */
    font-family: var(--props-font-primary);
    font-size: var(--props-text-base);
    font-weight: var(--props-font-medium);
    line-height: 1;

    /* Styling */
    background: var(--props-bg-primary);
    color: var(--props-text-primary);
    border: 1px solid var(--props-border-default);
    border-radius: var(--button-radius);

    /* Interaction */
    cursor: pointer;
    transition: var(--transition-interactive);
    outline: none;
    text-decoration: none;
}

.props-odds .btn:hover {
    background: var(--props-bg-hover);
    border-color: var(--props-border-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.props-odds .btn:active {
    transform: translateY(0);
}

.props-odds .btn:focus-visible {
    box-shadow: var(--shadow-focus);
}

/* Button Variants */
.props-odds .btn--primary {
    background: var(--props-primary);
    color: white;
    border-color: var(--props-primary);
}

.props-odds .btn--primary:hover {
    background: var(--props-primary-hover);
    border-color: var(--props-primary-hover);
}

.props-odds .btn--ghost {
    background: transparent;
    border-color: transparent;
}

.props-odds .btn--ghost:hover {
    background: var(--props-bg-hover);
}

/* =========================
   Input Component
   ========================= */

.props-odds input[type="text"],
.props-odds input[type="search"],
.props-odds input[type="number"],
.props-odds select {
    /* Sizing */
    height: var(--input-height);
    padding: 0 var(--props-space-3);
    width: 100%;

    /* Typography */
    font-family: var(--props-font-primary);
    font-size: var(--props-text-base);

    /* Styling */
    background-color: var(--props-bg-primary);
    color: var(--props-text-primary);
    border: 1px solid var(--props-border-light);
    border-radius: var(--input-radius);

    /* Interaction */
    transition: var(--transition-colors);
    outline: none;
}

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

.props-odds input:focus,
.props-odds select:focus {
    border-color: var(--props-primary);
    box-shadow: var(--shadow-focus);
}

/* =========================
   Utility Classes
   ========================= */

/* Flexbox Utilities */
.props-odds .flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

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

.props-odds .flex-start {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Spacing Utilities */
.props-odds .gap-1 { gap: var(--props-space-1) !important; }
.props-odds .gap-2 { gap: var(--props-space-2) !important; }
.props-odds .gap-3 { gap: var(--props-space-3) !important; }
.props-odds .gap-4 { gap: var(--props-space-4) !important; }

.props-odds .p-2 { padding: var(--props-space-2) !important; }
.props-odds .p-3 { padding: var(--props-space-3) !important; }
.props-odds .p-4 { padding: var(--props-space-4) !important; }

.props-odds .px-3 { padding-left: var(--props-space-3) !important; padding-right: var(--props-space-3) !important; }
.props-odds .px-4 { padding-left: var(--props-space-4) !important; padding-right: var(--props-space-4) !important; }

.props-odds .py-2 { padding-top: var(--props-space-2) !important; padding-bottom: var(--props-space-2) !important; }
.props-odds .py-3 { padding-top: var(--props-space-3) !important; padding-bottom: var(--props-space-3) !important; }

/* Text Utilities */
.props-odds .text-sm { font-size: var(--props-text-sm) !important; }
.props-odds .text-base { font-size: var(--props-text-base) !important; }
.props-odds .text-lg { font-size: var(--props-text-lg) !important; }

.props-odds .font-medium { font-weight: var(--props-font-medium) !important; }
.props-odds .font-semibold { font-weight: var(--props-font-semibold) !important; }
.props-odds .font-bold { font-weight: var(--props-font-bold) !important; }

.props-odds .text-muted { color: var(--props-text-muted) !important; }
.props-odds .text-primary { color: var(--props-text-primary) !important; }

/* Border Utilities */
.props-odds .rounded { border-radius: var(--radius-md) !important; }
.props-odds .rounded-lg { border-radius: var(--radius-lg) !important; }
.props-odds .rounded-full { border-radius: var(--radius-full) !important; }

/* Shadow Utilities */
.props-odds .shadow-sm { box-shadow: var(--shadow-sm) !important; }
.props-odds .shadow-md { box-shadow: var(--shadow-md) !important; }
.props-odds .shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* Visibility */
.props-odds .hidden { display: none !important; }
.props-odds .invisible { visibility: hidden !important; }

/* =========================
   Mobile Responsive Helpers
   ========================= */

@media (max-width: 768px) {
    .props-odds .panel {
        width: 100vw;
        max-width: 100vw;
        left: 0;
        right: 0;
        border-radius: 0;
        max-height: 70vh;
    }

    .props-odds .chips-container--scroll {
        padding-bottom: var(--props-space-2);
    }

    /* Hide scrollbar on mobile for better UX */
    .props-odds .chips-container--scroll::-webkit-scrollbar {
        display: none;
    }
}

/* ============================================
   CONSOLIDATED FROM: minimal-fixes.css
   Component-specific fixes
   ============================================ */

/* Fix 1b: Remove hover transform effects */
.props-odds .chip:hover,
.props-odds button:hover,
.props-odds .props-market-filter .props-quick-chips .chip:hover,
.props-odds .props-more-panel .market-pill:hover,
.props-odds .game-card:hover {
    transform: none !important;
}

/* Fix 3: Mobile Viewport Fixes */
@media (max-width: 768px) {
    /* Fix chip container width */
    .props-odds .props-quick-chips {
        max-width: 100vw !important;
        overflow-x: auto !important;
    }

    /* Fix drawer width */
    .props-odds .props-drawer,
    .props-odds .props-all-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* Fix 4: Market Pills Padding Fix */
.props-odds .props-more-panel .panel-list .market-list .market-pill,
.props-odds .props-more-panel .panel-list .market-list button.market-pill,
.props-odds-scope .props-more-panel .panel-list .market-list .market-pill {
    /* Force proper padding - override any button resets from theme */
    padding: 7px 14px !important;
    box-sizing: border-box !important;
    /* Ensure the padding is not stripped by any CSS reset */
    -webkit-padding-before: 7px !important;
    -webkit-padding-after: 7px !important;
    -webkit-padding-start: 14px !important;
    -webkit-padding-end: 14px !important;
}

/* Fix 5: Matchups Panel Padding */
.props-odds .props-matchups-panel {
    /* Let the existing CSS handle it, just ensure it's not stripped */
    padding: initial !important;
}

.props-odds .props-matchups-panel .panel-header {
    padding: 14px 16px !important;
}

.props-odds .props-matchups-panel .panel-controls {
    padding: 12px 16px !important;
}

.props-odds .props-matchups-panel .panel-filters {
    padding: 12px 16px !important;
}

/* Fix 6: All Props Panel Items */
/* Remove excessive panel padding - let internal elements handle their own spacing */
.props-odds .props-more-panel {
    padding: 0 !important;
}

.props-odds .props-more-panel .panel-header {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.props-odds .props-more-panel .chips {
    padding: 12px !important;
    gap: 8px !important;
}

/* Fix oversized buttons in All Props dropdown */
.props-odds .props-more-panel .chips .chip,
.props-odds .props-more-panel .chip {
    margin: 4px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    gap: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    line-height: 1.4 !important;
}

/* Category tabs in All Props dropdown */
.props-odds .props-more-panel .tabs {
    padding: 8px 12px !important;
    gap: 8px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.props-odds .props-more-panel .tabs .tab {
    padding: 6px 12px !important;
    font-size: 13px !important;
    border-radius: 16px;
}

/* Push badge/count to the right */
.props-odds .props-more-panel .chip .chip-count {
    margin-left: auto !important;
    font-size: 12px !important;
    padding: 2px 6px !important;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.08);
}

/* Fix 8: Badges and Position Indicators */
/* Quick chips count badges */
.props-odds .props-market-filter .props-quick-chips .chip .chip-count {
    padding: 0 6px !important;
}

/* Matchups button badge */
.props-matchups-button .badge {
    padding: 2px 6px !important;
    font-size: 12px !important;
}

/* Position badges styles are now in table.css */

/* Hide checkboxes in scope (likely for custom styling) */
.props-odds-scope input[type=checkbox] {
    display: none !important;
}

/* Fix 10: Dropdown Chevron Alignment Fix */
/* Standardize right padding for all dropdown buttons to align chevrons */
.props-odds .props-market-filter .props-matchups-button,
.props-odds .props-market-filter .props-select-toggle,
.props-odds-scope .props-market-filter button#props-matchups-toggle.props-matchups-button,
.props-odds-scope .props-select-toggle,
.props-odds-scope #props-positions .props-select-toggle {
    padding-right: 36px !important;
}

/* Ensure chevron is positioned consistently */
.props-odds .props-market-filter .filter-chevron,
.props-odds .props-market-filter .props-matchups-button .filter-chevron,
.props-odds-scope .props-select .chevron {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
}

/* Fix 11: Hide Close Buttons on Mobile Drawers */
/* Hide the close button for Matchups and All (More) panels on mobile */
@media (max-width: 768px) {
    .props-odds .props-matchups-panel .panel-close-button,
    .props-odds .props-more-panel .panel-close-button,
    .props-odds-scope .props-matchups-panel .panel-close-button,
    .props-odds-scope .props-more-panel .panel-close-button {
        display: none !important;
    }
}

/* CONSOLIDATED FROM: search-icon-fix.css - Chip/Tab Sizing in All Props Panel */
/* Make tabs/chips more compact - MAXIMUM SPECIFICITY */
body .props-odds-engine .props-odds .props-more-panel .tabs,
body .props-odds .props-more-panel .tabs {
    padding: 6px 12px !important;  /* Reduced vertical padding */
    gap: 5px !important;  /* Reduced from 8px */
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Target ALL possible chip selectors with maximum specificity */
body .props-odds-engine .props-odds .props-more-panel .tabs .tab,
body .props-odds-engine .props-odds .props-more-panel .chips .chip,
body .props-odds-engine .props-odds .props-more-panel .chip,
body .props-odds-engine .props-odds-scope .props-more-panel .tabs .tab,
body .props-odds-engine .props-odds-scope .props-more-panel .chips .chip,
body .props-odds .props-more-panel .tabs .tab,
body .props-odds .props-more-panel .tabs button.tab,
body .props-odds .props-more-panel .chips .chip,
body .props-odds .props-more-panel .chips button.chip,
body .props-odds .props-more-panel .chip,
body .props-odds .props-more-panel button.chip,
body .props-odds-scope .props-more-panel .tabs .tab,
body .props-odds-scope .props-more-panel .chips .chip,
.props-more-panel .tabs .tab,
.props-more-panel .chips .chip {
    height: 38px !important;  /* Set to 38px as requested */
    padding: 0 14px !important;  /* Appropriate padding for 38px height */
    font-size: 14px !important;  /* Larger font for 38px height */
    line-height: 38px !important;
    margin: 0 !important;  /* Remove the 4px margin */
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;  /* Appropriate gap for larger size */
    min-height: 38px !important;  /* Override any min-height */
    max-height: 38px !important;  /* Force maximum height too */
}