:root {
    --planner-select-accent: var(--planner-primary, #0f67d8);
    --planner-select-bg: var(--bs-body-bg, #fff);
    --planner-select-border: var(--planner-line, #dce4ef);
    --planner-select-ink: var(--planner-ink, #17233c);
    --planner-select-muted: var(--planner-muted, #6f7f97);
    --planner-select-hover: #f3f7fc;
    --planner-select-selected: #eaf3ff;
}

.planner-select {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    width: 100%;
}

.planner-select.w-auto {
    display: inline-block;
    flex: 0 0 auto;
    width: auto !important;
}

.planner-select > select.planner-select__native {
    appearance: none;
    -webkit-appearance: none;
    background-image: none !important;
    cursor: pointer;
    overflow: hidden;
    padding-inline-end: 2.65rem !important;
    text-overflow: ellipsis;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
    white-space: nowrap;
    width: 100% !important;
}

.planner-select > select.planner-select__native:disabled {
    cursor: not-allowed;
}

.planner-select__chevron {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    color: var(--planner-select-muted);
    height: 8px;
    inset-inline-end: 1rem;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-65%) rotate(45deg);
    transition: color .16s ease, transform .16s ease;
    width: 8px;
    z-index: 2;
}

.planner-select--open .planner-select__chevron {
    color: var(--planner-select-accent);
    transform: translateY(-30%) rotate(225deg);
}

.planner-select:has(> select:disabled) .planner-select__chevron {
    opacity: .45;
}

.planner-select__panel {
    background: var(--planner-select-bg);
    border: 1px solid var(--planner-select-border);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(25, 48, 82, .18), 0 3px 10px rgba(25, 48, 82, .08);
    box-sizing: border-box;
    color: var(--planner-select-ink);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
    position: fixed;
    scrollbar-color: #b9c7d9 transparent;
    scrollbar-width: thin;
    z-index: 1095;
}

.planner-select__panel::-webkit-scrollbar {
    width: 8px;
}

.planner-select__panel::-webkit-scrollbar-thumb {
    background: #b9c7d9;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.planner-select__option {
    align-items: center;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    min-height: 44px;
    padding: 9px 10px;
    transition: background-color .13s ease, color .13s ease;
    user-select: none;
}

.planner-select__option-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-select__option.is-active:not(.is-selected) {
    background: var(--planner-select-hover);
}

.planner-select__option.is-selected {
    background: var(--planner-select-selected);
    color: var(--planner-select-accent);
    font-weight: 700;
}

.planner-select__option[data-disabled="true"] {
    cursor: not-allowed;
    opacity: .48;
}

.planner-select__check {
    color: var(--planner-select-accent);
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 900;
    opacity: 0;
}

.planner-select__option.is-selected .planner-select__check {
    opacity: 1;
}

.planner-select__group {
    color: var(--planner-select-muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 10px 10px 5px;
    text-transform: uppercase;
}

:where(html[data-planner-theme="dark"], html[data-planner-theme-effective="dark"]) {
    --planner-select-bg: #111b2d;
    --planner-select-border: #334560;
    --planner-select-hover: #1a2940;
    --planner-select-selected: #17365d;
}

@media (max-width: 899px) {
    .planner-select__option {
        min-height: 48px;
        padding-inline: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .planner-select > select.planner-select__native,
    .planner-select__chevron,
    .planner-select__option {
        transition: none;
    }
}

@media (forced-colors: active) {
    .planner-select__panel,
    .planner-select__option.is-selected,
    .planner-select__option.is-active {
        border: 1px solid CanvasText;
    }
}