/**
 * TangoHUB Select / Dropdown Components
 * Standardized select and dropdown styles using design tokens
 *
 * Provides a unified look for BOTH native <select> elements and custom
 * <button>-based dropdowns.  Use these classes anywhere a dropdown
 * selector is needed — wizard forms, dashboard filters, email compose, etc.
 *
 * CLASS REFERENCE:
 *
 *   .tgh-select              Base styles (works on <select>, <button>, <div>).
 *                             On native <select> adds appearance:none + chevron.
 *   .tgh-select--custom      Variant for <button>-triggered custom dropdowns.
 *                             Adds flex layout + space for a trailing arrow icon.
 *   .tgh-select--filter      Compact variant for dashboard filter bars.
 *                             Smaller padding, optional min-width.
 *   .tgh-select--placeholder Muted text color when nothing is selected.
 *   .tgh-select--open        Focus ring shown while dropdown list is visible.
 *
 *   .tgh-select__text        Truncated label inside a custom trigger.
 *   .tgh-select__arrow       Chevron icon (SVG) inside a custom trigger.
 *   .tgh-select__dropdown    Absolutely-positioned dropdown list container.
 *   .tgh-select__option      Individual option inside the dropdown list.
 *
 * SPECIFICITY NOTE (ADR-008):
 * BuddyBoss theme.min.css styles bare <button> and <select> with primary
 * colors.  All critical visual resets use compound selectors or !important
 * to guarantee the component never inherits BuddyBoss chrome.
 *
 * TYPOGRAPHY (LOGIC-021):
 * - font-family: inherit on <button> / <select> (non-inheriting elements)
 * - NEVER set font-family on labels or headings
 *
 * @package TangoHUB_Event_Manager
 * @since   1.2.7
 * @see     docs/decisions/ADR-008-buddyboss-styling-integration.md
 * @see     docs/logic/LOGIC-021-buddyboss-styling.md
 */

/* ==========================================================================
   Base Select Styles
   Works on <select>, <button>, or any wrapper element.
   ========================================================================== */

.tgh-select {
    display: block;
    width: 100%;
    padding: var(--tgh-spacing-sm) var(--tgh-spacing-md);
    font-family: inherit;  /* LOGIC-021 — <button>/<select> don't inherit */
    font-size: var(--tgh-font-size-sm);
    line-height: 1.5;
    color: var(--tgh-color-text);
    background: var(--tgh-color-background);
    border: 1px solid var(--tgh-color-border);
    border-radius: var(--tgh-border-radius-md, 6px);
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color var(--tgh-transition-fast);

    /* Strip native chrome */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Native <select> — add CSS chevron arrow */
select.tgh-select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

/* Hover */
.tgh-select:hover {
    border-color: var(--tgh-color-text-light);
}

/* Focus / Open */
.tgh-select:focus,
.tgh-select--open {
    border-color: var(--tgh-color-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.15);
}

/* ==========================================================================
   BuddyBoss Specificity Override — Hard Reset
   BuddyBoss theme.min.css sets background, color, border on bare <button>
   and <select> elements with specificity 0,0,1.  We use compound classes
   (0,2,0) + !important to reliably win.
   ========================================================================== */

.tgh-select.tgh-select {
    background-color: var(--tgh-color-background) !important; /* NOT shorthand — preserves background-image (chevron) */
    color: var(--tgh-color-text) !important;
    border: 1px solid var(--tgh-color-border) !important;
    border-radius: var(--tgh-border-radius-md, 6px) !important;
}

.tgh-select.tgh-select:hover {
    border-color: var(--tgh-color-text-light) !important;
}

.tgh-select.tgh-select:focus,
.tgh-select.tgh-select.tgh-select--open {
    border-color: var(--tgh-color-primary) !important;
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.15) !important;
}

/* ==========================================================================
   Placeholder Modifier
   Muted text when nothing is selected (like an empty <select>).
   ========================================================================== */

.tgh-select--placeholder {
    color: var(--tgh-color-text-secondary, #999);
}

/* Triple-compound to beat .tgh-select.tgh-select (0,3,0 > 0,2,0) */
.tgh-select.tgh-select.tgh-select--placeholder {
    color: var(--tgh-color-text-secondary, #999) !important;
}

/* Placeholder styling for native <select> first option */
select.tgh-select option[value=""] {
    color: var(--tgh-color-text-secondary, #999);
}

/* ==========================================================================
   Custom Dropdown Variant (.tgh-select--custom)
   For <button>-triggered dropdowns with JS-driven open/close.
   Adds flex layout so the label and chevron arrow sit side-by-side.
   ========================================================================== */

.tgh-select--custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

/* Truncated label text */
.tgh-select__text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Trailing chevron arrow */
.tgh-select__arrow {
    flex-shrink: 0;
    margin-left: var(--tgh-spacing-sm);
    opacity: 0.5;
    transition: transform var(--tgh-transition-fast);
}

/* Rotate arrow when open */
.tgh-select--open .tgh-select__arrow {
    transform: rotate(180deg);
}

/* ==========================================================================
   Filter Variant (.tgh-select--filter)
   Compact select used in dashboard filter bars.
   Tighter padding, optional min-width for readability.
   ========================================================================== */

.tgh-select--filter {
    padding: var(--tgh-spacing-xs) var(--tgh-spacing-sm);
    min-width: 120px;
}

/* On mobile, filters stretch full width */
@media (max-width: 768px) {
    .tgh-select--filter {
        width: 100%;
        min-width: auto;
    }
}

/* ==========================================================================
   Dropdown List Container (.tgh-select__dropdown)
   Absolutely-positioned panel that appears below the trigger.
   ========================================================================== */

.tgh-select__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--tgh-z-dropdown);
    margin-top: var(--tgh-spacing-xs);
    background: var(--tgh-color-background);
    border: 1px solid var(--tgh-color-border);
    border-radius: var(--tgh-border-radius-md);
    box-shadow: var(--tgh-shadow-lg);
    max-height: 280px;
    overflow-y: auto;
}

/* ==========================================================================
   Dropdown Option Items (.tgh-select__option)
   Individual clickable items inside the dropdown list.
   Works on <button>, <a>, or <div>.
   ========================================================================== */

.tgh-select__option {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-family: inherit;  /* LOGIC-021 */
    font-size: var(--tgh-font-size-sm);
    text-align: left;
    border: none;
    background: none;
    color: var(--tgh-color-text);
    cursor: pointer;
    box-sizing: border-box;
    transition: background var(--tgh-transition-fast);

    /* Reset native chrome */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* BuddyBoss override for option items */
.tgh-select__dropdown .tgh-select__option {
    background: none !important;
    color: var(--tgh-color-text) !important;
    border: none !important;
}

.tgh-select__option:hover,
.tgh-select__dropdown .tgh-select__option:hover {
    background: var(--tgh-color-background-alt) !important;
}

/* Separator between options */
.tgh-select__option + .tgh-select__option {
    border-top: 1px solid var(--tgh-color-background-alt);
}

/* Empty state message */
.tgh-select__empty {
    padding: 12px 14px;
    font-size: var(--tgh-font-size-xs);
    color: var(--bb-alternate-text-color, var(--tgh-color-text-light));
    font-style: italic;
}

/* ==========================================================================
   Disabled State
   ========================================================================== */

.tgh-select:disabled,
.tgh-select[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}