/**
 * Hub SaaS - Custom Select Component Styling
 * 
 * Estilização premium para substitutos do select nativo, herdando tokens do Design System.
 */

.hub-custom-select {
    position: relative;
    display: block;
    width: 100%;
}

.hub-custom-select__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--hub-control-height, 36px);
    padding: 0 var(--hub-space-3, 12px);
    background: var(--hub-input-bg);
    border: 1px solid var(--hub-border-strong);
    border-radius: var(--hub-radius, 4px);
    color: var(--hub-text);
    font-size: var(--hub-text-body, 14px);
    font-weight: var(--hub-weight-light, 300);
    cursor: pointer;
    list-style: none;
    user-select: none;
    box-sizing: border-box;
    transition: border-color var(--hub-transition-base, 160ms ease);
}

/* Remove a seta padrão do details no Safari/Chrome/Firefox */
.hub-custom-select__summary::-webkit-details-marker {
    display: none;
}
.hub-custom-select__summary::marker {
    display: none;
}

/* Adiciona indicador visual de seta */
.hub-custom-select__summary::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: var(--hub-space-2, 8px);
    border-right: 1.5px solid var(--hub-text-muted);
    border-bottom: 1.5px solid var(--hub-text-muted);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--hub-transition-fast, 120ms ease), border-color var(--hub-transition-fast, 120ms ease);
    flex-shrink: 0;
}

.hub-custom-select[open] .hub-custom-select__summary {
    border-color: var(--hub-primary);
}

.hub-custom-select[open] .hub-custom-select__summary::after {
    transform: rotate(-135deg) translateY(-2px);
    border-color: var(--hub-primary);
}

.hub-custom-select__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: var(--hub-space-1, 4px);
}

.hub-custom-select__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: var(--hub-z-sticky, 20);
    max-height: 240px;
    min-width: 200px;
    overflow-y: auto;
    padding: var(--hub-space-2, 8px);
    display: grid;
    gap: var(--hub-space-1, 4px);
    background: var(--hub-surface-raised, #1e2024);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius, 4px);
    box-shadow: var(--hub-modal-shadow);
    box-sizing: border-box;
}

/* Opção compacta */
.hub-custom-select__option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--hub-space-2, 8px);
    min-height: 32px;
    padding: var(--hub-space-1, 4px) var(--hub-space-2, 8px);
    border-radius: var(--hub-radius-sm, 3px);
    color: var(--hub-text);
    font-size: var(--hub-text-body-compact, 12px);
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    transition: background var(--hub-transition-fast, 120ms ease);
}

/* Estilo para seletores de opção única (sem checkbox) */
.hub-custom-select__option--single {
    grid-template-columns: 1fr;
}

.hub-custom-select__option--active {
    background: rgba(var(--hub-primary-rgb), 0.12) !important;
    color: var(--hub-primary) !important;
    font-weight: var(--hub-weight-medium, 500);
}

.hub-custom-select__option:hover {
    background: var(--hub-surface-hover, rgba(255, 255, 255, 0.04));
}

.hub-custom-select__option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    min-width: 15px;
    min-height: 15px;
    margin: 0;
    padding: 0;
    border-radius: var(--hub-radius-sm, 3px);
    flex-shrink: 0;
    appearance: auto;
    background: transparent;
    border: 0;
    accent-color: var(--hub-primary);
    cursor: pointer;
}

.hub-custom-select__option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-custom-select__empty {
    padding: var(--hub-space-3, 12px);
    text-align: center;
    color: var(--hub-text-muted);
    font-size: var(--hub-text-label, 12px);
    font-style: italic;
}