/* =============================================================================
   macc-select — styled dropdown (custom listbox) that progressively enhances a
   native <select>. The native element stays in the DOM as the value holder and
   for form posts; this only replaces the visual control + the option menu so the
   OPEN dropdown is on-brand instead of the OS-native list.

   Theming: consumes the same tokens as the notification dropdown floating panel
   (macc-layout.css), with the same fallbacks, so light/dark come for free.
   ========================================================================== */

/* Wrapper takes the place of the native select in layout flow. */
.macc-select {
    position: relative;
    display: inline-flex;
    width: 100%;
    min-width: 0;
}

/* The native <select> is kept for form submission + as source of truth, but is
   removed from the visual/pointer layer. Not display:none so validation UI and
   label association still work. */
.macc-select > select.macc-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
}

/* Trigger button — mirrors .form-select's look so enhanced controls sit flush
   next to any not-yet-enhanced ones. */
.macc-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    min-height: 2.45rem;
    padding: 0.42rem 2.1rem 0.42rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    color: var(--macc-input-text, var(--macc-text, #0f172a));
    background-color: var(--macc-input-bg, var(--macc-surface, #fff));
    border: 1px solid var(--macc-input-border, var(--macc-border-subtle, rgba(15, 23, 42, 0.18)));
    border-radius: var(--macc-radius-control, 0.5rem);
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.macc-select-trigger:hover {
    border-color: var(--macc-input-border-hover, var(--macc-brand-teal, rgba(20, 124, 139, 0.55)));
}

.macc-select-trigger:focus-visible,
.macc-select[data-open="true"] .macc-select-trigger {
    outline: none;
    border-color: var(--macc-brand-teal, rgba(20, 124, 139, 0.75));
    box-shadow: 0 0 0 3px var(--macc-focus-ring, rgba(20, 124, 139, 0.28));
}

.macc-select-trigger[disabled],
.macc-select-trigger[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.62;
    box-shadow: none;
}

/* Selected-value label; ellipsis so long option text never blows out the width. */
.macc-select-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Placeholder (the empty-value option, e.g. "Select client"). */
.macc-select-value.is-placeholder {
    color: var(--macc-text-muted, #64748b);
}

/* Chevron, absolutely pinned right to match .form-select's built-in caret slot. */
.macc-select-caret {
    position: absolute;
    top: 50%;
    right: 0.7rem;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--macc-text-muted, #64748b);
    font-size: 0.8rem;
    transition: transform 0.15s ease;
    pointer-events: none;
}

.macc-select[data-open="true"] .macc-select-caret {
    transform: translateY(-50%) rotate(180deg);
}

/* -------- Popup listbox ---------------------------------------------------- */
.macc-select-popup {
    position: fixed;
    z-index: 1080; /* above topbar/sticky toolbars, below Bootstrap modals (1055 backdrop / 1060) — see note */
    margin: 0;
    padding: 0.3rem;
    max-height: min(18rem, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--macc-card-border, var(--macc-border-subtle, rgba(15, 23, 42, 0.12)));
    border-radius: var(--macc-radius-panel, 8px);
    background: var(--macc-popup-bg, var(--macc-surface, #fff));
    color: var(--macc-popup-text, var(--macc-text, #0f172a));
    box-shadow: var(--macc-popup-shadow, var(--macc-shadow-lg, 0 18px 45px rgba(15, 23, 42, 0.18)));
    /* Hidden until opened; JS toggles [data-open]. */
    display: none;
}

.macc-select-popup[data-open="true"] {
    display: block;
}

/* Optgroup label. */
.macc-select-group-label {
    padding: 0.45rem 0.6rem 0.25rem;
    font-size: var(--macc-font-size-micro, 0.72rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--macc-text-muted, #64748b);
}

.macc-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: calc(var(--macc-radius-control, 0.5rem) - 0.15rem);
    font-size: 0.88rem;
    line-height: 1.35;
    color: inherit;
    cursor: pointer;
    user-select: none;
}

/* Options nested in a group get a slight indent so the hierarchy reads. */
.macc-select-group .macc-select-option {
    padding-left: 0.9rem;
}

.macc-select-option:hover,
.macc-select-option.is-active {
    /* Tint the row; keep the label at body-text color for contrast (matches the
       notification-item hover, and satisfies the accent-as-foreground guard). */
    background: var(--macc-accent-soft, rgba(20, 124, 139, 0.1));
}

.macc-select-option.is-selected {
    font-weight: 600;
}

/* Check mark for the currently-selected option. */
.macc-select-option-check {
    margin-left: auto;
    display: inline-flex;
    opacity: 0;
    /* Link-token primary (contrast-safe for glyphs/text), brand-teal only as a
       nested fallback - the same pattern the notification panel uses. */
    color: var(--macc-link, var(--macc-brand-teal, rgba(20, 124, 139, 1)));
}

.macc-select-option.is-selected .macc-select-option-check {
    opacity: 1;
}

.macc-select-option[aria-disabled="true"] {
    color: var(--macc-text-muted, #64748b);
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.macc-select-empty {
    padding: 0.6rem;
    text-align: center;
    color: var(--macc-text-muted, #64748b);
    font-size: 0.85rem;
}

/* -------- Dark theme ------------------------------------------------------- */
html[data-bs-theme="dark"] .macc-select-trigger {
    background-color: var(--macc-input-bg, #0f172a);
    border-color: var(--macc-input-border, rgba(255, 255, 255, 0.14));
}

html[data-bs-theme="dark"] .macc-select-popup {
    background: var(--macc-popup-bg, #111827);
    border-color: var(--macc-card-border, rgba(255, 255, 255, 0.12));
}

html[data-bs-theme="dark"] .macc-select-option:hover,
html[data-bs-theme="dark"] .macc-select-option.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--macc-text, #e5e7eb);
}

/* -------- Topbar appliance switcher --------------------------------------- */
/* The switcher lives in a bespoke pill; make the enhanced trigger transparent
   and borderless so it inherits the pill instead of drawing its own box. */
.macc-topbar-appliance-form .macc-select {
    width: auto;
    height: 100%;
    align-items: center;
}

.macc-topbar-appliance-form .macc-select-trigger {
    min-height: 0;
    height: 100%;
    padding: 0 1.35rem 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--macc-input-text, var(--macc-text, #0f172a));
    font-size: 0.9rem;
    font-weight: 600;
}

.macc-topbar-appliance-form .macc-select-trigger:hover {
    border-color: transparent;
}

.macc-topbar-appliance-form .macc-select-trigger:focus-visible {
    box-shadow: none;
    outline: 2px solid var(--macc-focus-ring, rgba(20, 124, 139, 0.35));
    outline-offset: 2px;
    border-radius: var(--macc-radius-control, 0.5rem);
}

.macc-topbar-appliance-form .macc-select-caret {
    right: 0.1rem;
}

/* -------- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .macc-select-trigger,
    .macc-select-caret {
        transition: none;
    }
}