/**
 * Extensions Store Header Styles - WordPress Standard
 * 
 * @package YOOAdmin_Extended
 * @since 2.0.0
 */

/* Use WordPress standard header - no custom styles needed */

/* Toolbar - Clean */
.yp-store-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    margin-bottom: 20px;
}

/* Filter Wrapper - Match Search Width */
.yp-store-filter-wrapper {
    position: relative;
    width: 250px;
    min-width: 150px;
}

/* Filter wrapper - no additional styling needed */

/* Search Box - WordPress Standard */
.yp-store-search {
    width: 250px;
}

.yp-store-search input[type="search"] {
    width: 100%;
}

/* Filter Select - Match Search Style Exactly */
/* IMPORTANT: Override wp-admin global focus styles that set border-color: transparent */
/* Also override WordPress Core blue colors (#2271b1, #0a4b78) with YOOPixel orange */

/* Override WordPress Core .wp-core-ui select:focus blue colors */
.wp-core-ui select.yp-store-filter:focus,
.wp-core-ui select.yp-store-filter:focus-visible {
    border-color: #dcdcde !important;
    color: #2c3338 !important;
    box-shadow: none !important;
}

body.wp-admin select.yp-store-filter,
body.wp-admin select.yp-store-filter:focus,
body.wp-admin select.yp-store-filter:focus-visible,
body.wp-admin select.yp-store-filter:active,
body.wp-admin select.yp-store-filter.yp-filter-active {
    border: 1px solid #dcdcde !important;
    border-color: #dcdcde !important;
    outline: none !important;
    box-shadow: none !important;
    color: #2c3338 !important;
}

select.yp-store-filter {
    width: 100%;
    padding: 8px 32px 8px 12px;
    border: 1px solid #dcdcde !important;
    border-color: #dcdcde !important;
    border-radius: 4px;
    background: #fff !important;
    background-color: #fff !important;
    /* Arrow icon - MUST be visible */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 10 5"><path fill="%23646970" d="M0 0l5 5 5-5z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 10px 5px !important;
    font-size: 14px;
    color: #2c3338;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.15s ease-in-out;
    box-sizing: border-box;
}

/* Override wp-admin global focus styles for hover state */
body.wp-admin select.yp-store-filter:hover {
    border: 1px solid #8c8f94 !important;
    border-color: #8c8f94 !important;
}

select.yp-store-filter:hover {
    border: 1px solid #8c8f94 !important;
    border-color: #8c8f94 !important;
}

/* Keep original gray border ALWAYS visible - override all states including wp-admin global */
/* Also override WordPress Core .wp-core-ui select:focus blue colors */
.wp-core-ui select.yp-store-filter:focus,
.wp-core-ui select.yp-store-filter:focus-visible,
.wp-core-ui select.yp-store-filter:active,
body.wp-admin select.yp-store-filter:focus,
body.wp-admin select.yp-store-filter:focus-visible,
body.wp-admin select.yp-store-filter:active,
body.wp-admin select.yp-store-filter[open],
body.wp-admin select.yp-store-filter.yp-filter-active,
select.yp-store-filter:focus,
select.yp-store-filter:focus-visible,
select.yp-store-filter:active,
select.yp-store-filter[open],
select.yp-store-filter.yp-filter-active {
    border: 1px solid #dcdcde !important;
    border-color: #dcdcde !important;
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    color: #2c3338 !important;
    /* Ensure arrow stays visible */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 10 5"><path fill="%23646970" d="M0 0l5 5 5-5z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 10px 5px !important;
}

/* Dropdown Options Styling - Force styles to override WordPress blue */
/* Override WordPress Core blue colors (#2271b1, #0a4b78) with YOOPixel orange */
select.yp-store-filter option {
    padding: 8px 12px;
    font-size: 14px;
    color: #2c3338 !important;
    background: #fff !important;
    background-color: #fff !important;
    line-height: 1.5;
}

/* Selected option - Force white background (remove WordPress blue #2271b1) */
select.yp-store-filter option:checked,
select.yp-store-filter option[selected],
select.yp-store-filter option[selected="selected"] {
    background: #fff !important;
    background-color: #fff !important;
    color: #2c3338 !important;
}

/* Hover state - YOOPixel Orange (replaces WordPress blue #2271b1) */
select.yp-store-filter option:hover,
select.yp-store-filter option:focus {
    background: #EFB54D !important;
    background-color: #EFB54D !important;
    color: #fff !important;
}

/* Override WordPress Core blue highlight in dropdown */
.wp-core-ui select.yp-store-filter option:checked,
.wp-core-ui select.yp-store-filter option[selected] {
    background: #fff !important;
    background-color: #fff !important;
    color: #2c3338 !important;
}

.wp-core-ui select.yp-store-filter option:hover,
.wp-core-ui select.yp-store-filter option:focus {
    background: #EFB54D !important;
    background-color: #EFB54D !important;
    color: #fff !important;
}

/* For Firefox */
select.yp-store-filter option:-moz-selected,
select.yp-store-filter option:-moz-focusring {
    background: #EFB54D !important;
    background-color: #EFB54D !important;
    color: #fff !important;
}

/* Override WordPress default blue (#2271b1) - Multiple approaches */
select.yp-store-filter option:checked:not(:disabled) {
    background: #fff !important;
    background-color: #fff !important;
    color: #2c3338 !important;
}

select.yp-store-filter option:checked {
    background-color: #fff !important;
    background: #fff !important;
    color: #2c3338 !important;
}

/* Force YOOPixel orange for hover/focus (replace WordPress blue) */
select.yp-store-filter option:focus,
select.yp-store-filter option:active {
    background: #EFB54D !important;
    background-color: #EFB54D !important;
    color: #fff !important;
}

/* Additional browser-specific fixes for dropdown border */
select.yp-store-filter::-ms-expand {
    display: none;
}

/* IMPORTANT NOTE: 
   WordPress default blue (#2271b1) is applied by the browser natively for select dropdowns.
   Some browsers (especially Windows Chrome/Edge) control dropdown appearance completely
   and may override CSS styling. The CSS above attempts to override it, but native browser
   controls may still apply the blue color in some cases.
   
   For complete control, consider using a custom dropdown component instead of native <select>.
*/

/* Dark mode — Studio Hub (html attr from active admin theme; mirrors selectors above) */
html[data-yooadmin-studio-color-mode-effective="dark"] select.yp-store-filter,
html[data-yooadmin-studio-color-mode-effective="dark"] select#yp-extensions-filter,
html[data-yooadmin-studio-color-mode-effective="dark"] body.wp-admin select.yp-store-filter,
html[data-yooadmin-studio-color-mode-effective="dark"] body.wp-admin select.yp-store-filter:focus,
html[data-yooadmin-studio-color-mode-effective="dark"] body.wp-admin select.yp-store-filter:focus-visible,
html[data-yooadmin-studio-color-mode-effective="dark"] body.wp-admin select.yp-store-filter:active,
html[data-yooadmin-studio-color-mode-effective="dark"] body.wp-admin select.yp-store-filter.yp-filter-active,
html[data-yooadmin-studio-color-mode-effective="dark"] body.wp-admin select.yp-store-filter:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] select.yp-store-filter:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .wp-core-ui select.yp-store-filter:focus,
html[data-yooadmin-studio-color-mode-effective="dark"] .wp-core-ui select.yp-store-filter:focus-visible,
html[data-yooadmin-studio-color-mode-effective="dark"] .wp-core-ui select.yp-store-filter:active,
html[data-yooadmin-studio-color-mode-effective="dark"] select.yp-store-filter:focus,
html[data-yooadmin-studio-color-mode-effective="dark"] select.yp-store-filter:focus-visible,
html[data-yooadmin-studio-color-mode-effective="dark"] select.yp-store-filter:active,
html[data-yooadmin-studio-color-mode-effective="dark"] select.yp-store-filter[open],
html[data-yooadmin-studio-color-mode-effective="dark"] select.yp-store-filter.yp-filter-active,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] select.yp-store-filter,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] select#yp-extensions-filter {
    color-scheme: dark !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #22262e !important;
    background-color: #22262e !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 10 5"><path fill="%239aa5b1" d="M0 0l5 5 5-5z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 10px 5px !important;
    color: #cfd6e0 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
    outline: none !important;
}

html[data-yooadmin-studio-color-mode-effective="dark"] body.wp-admin select.yp-store-filter:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] select.yp-store-filter:hover {
    border-color: rgba(255, 255, 255, 0.22) !important;
}

html[data-yooadmin-studio-color-mode-effective="dark"] select.yp-store-filter option,
html[data-yooadmin-studio-color-mode-effective="dark"] select.yp-store-filter option:checked,
html[data-yooadmin-studio-color-mode-effective="dark"] select.yp-store-filter option[selected] {
    background: #22262e !important;
    background-color: #22262e !important;
    color: #cfd6e0 !important;
}

/* Store Actions */
.yp-store-actions {
    display: flex;
    gap: 8px;
}

.yp-store-actions .button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    line-height: 30px;
    padding: 0 12px;
    font-size: 13px;
}