/* =========================================================
   FUMIDESK — UNIFIED LIBRARY-STYLE DROPDOWNS
   ========================================================= */

:root {
    --fumi-dropdown-radius: 13px;
    --fumi-dropdown-option-radius: 9px;
    --fumi-dropdown-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

/* Closed selectors */

.cloudshelf-dropdown:not(.cloudshelf-editable-dropdown) > .cloudshelf-dropdown-toggle,
.palette-dropdown-toggle,
.feedback-category-button {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 9px 36px 9px 12px !important;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 24%, var(--ios-line)) !important;
    border-radius: 11px !important;
    color: var(--ios-text) !important;
    background: color-mix(in srgb, var(--theme-primary) 6%, var(--ios-glass-strong)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
    transform: none !important;
}

.cloudshelf-dropdown:not(.cloudshelf-editable-dropdown) > .cloudshelf-dropdown-toggle:hover,
.cloudshelf-dropdown:not(.cloudshelf-editable-dropdown).open > .cloudshelf-dropdown-toggle,
.cloudshelf-dropdown:not(.cloudshelf-editable-dropdown) > .cloudshelf-dropdown-toggle:focus-visible,
.palette-dropdown-toggle:hover,
.palette-dropdown.open .palette-dropdown-toggle,
.palette-dropdown-toggle:focus-visible,
.feedback-category-button:hover,
.feedback-category-button:focus-visible,
.feedback-category-button[aria-expanded="true"] {
    outline: 0 !important;
    border-color: var(--theme-primary) !important;
    background: color-mix(in srgb, var(--theme-primary) 9%, var(--ios-glass-strong)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 12%, transparent) !important;
}

.cloudshelf-dropdown:not(.cloudshelf-editable-dropdown) > .cloudshelf-dropdown-toggle svg,
.palette-dropdown-toggle svg,
.feedback-category-button svg {
    position: absolute !important;
    top: 50% !important;
    right: 11px !important;
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    transition: transform 150ms ease !important;
}

.cloudshelf-dropdown.open:not(.cloudshelf-editable-dropdown) > .cloudshelf-dropdown-toggle svg,
.palette-dropdown.open .palette-dropdown-toggle svg,
.feedback-category-button[aria-expanded="true"] svg {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Editable template fields retain typing while sharing the same surface. */

.cloudshelf-editable-dropdown > input {
    min-height: 42px !important;
    padding-right: 44px !important;
    border-color: color-mix(in srgb, var(--theme-primary) 24%, var(--ios-line)) !important;
    border-radius: 11px !important;
    color: var(--ios-text) !important;
    background: color-mix(in srgb, var(--theme-primary) 6%, var(--ios-glass-strong)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.cloudshelf-editable-dropdown > input:hover,
.cloudshelf-editable-dropdown > input:focus {
    outline: 0 !important;
    border-color: var(--theme-primary) !important;
    background: color-mix(in srgb, var(--theme-primary) 9%, var(--ios-glass-strong)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 12%, transparent) !important;
}

/* Open menu panels */

.cloudshelf-dropdown-menu,
.palette-dropdown-menu,
.feedback-category-menu {
    display: grid !important;
    grid-auto-flow: row !important;
    gap: 0 !important;
    width: 100% !important;
    max-height: 260px !important;
    padding: 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 22%, var(--ios-line)) !important;
    border-radius: var(--fumi-dropdown-radius) !important;
    color: var(--ios-text) !important;
    background: color-mix(in srgb, var(--theme-primary) 6%, var(--ios-glass-strong)) !important;
    box-shadow: var(--fumi-dropdown-shadow) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--theme-primary) 76%, var(--ios-muted)) transparent;
}

.cloudshelf-dropdown-menu[hidden],
.palette-dropdown-menu[hidden],
.feedback-category-menu[hidden] {
    display: none !important;
}

/* Flat menu rows */

.cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option,
.palette-dropdown-menu > button,
.feedback-category-menu > button {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 18px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: var(--fumi-dropdown-option-radius) !important;
    color: var(--ios-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
    transform: none !important;
}

.cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover,
.cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible,
.cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.keyboard-active,
.cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-highlighted,
.palette-dropdown-menu > button:hover,
.palette-dropdown-menu > button:focus-visible,
.feedback-category-menu > button:hover,
.feedback-category-menu > button:focus-visible {
    outline: 0 !important;
    color: var(--ios-text) !important;
    background: color-mix(in srgb, var(--theme-primary) 10%, var(--ios-glass-strong)) !important;
}

.cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.active,
.cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-selected,
.palette-dropdown-menu > button.active,
.feedback-category-menu > button.is-selected {
    color: var(--theme-primary) !important;
    background: color-mix(in srgb, var(--theme-primary) 14%, var(--ios-glass-strong)) !important;
    font-weight: 700 !important;
}

.palette-dropdown-menu > button.active::after,
.feedback-category-menu > button.is-selected::after {
    position: static !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    content: "✓" !important;
    color: var(--theme-primary) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    transform: none !important;
}

.cloudshelf-dropdown-check {
    display: inline-grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    color: var(--theme-primary) !important;
}

.cloudshelf-dropdown-menu::-webkit-scrollbar,
.palette-dropdown-menu::-webkit-scrollbar,
.feedback-category-menu::-webkit-scrollbar {
    width: 7px;
}

.cloudshelf-dropdown-menu::-webkit-scrollbar-track,
.palette-dropdown-menu::-webkit-scrollbar-track,
.feedback-category-menu::-webkit-scrollbar-track {
    background: transparent;
}

.cloudshelf-dropdown-menu::-webkit-scrollbar-thumb,
.palette-dropdown-menu::-webkit-scrollbar-thumb,
.feedback-category-menu::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-primary) 76%, var(--ios-muted));
    background-clip: padding-box;
}

/* The support priority control is a dynamically enhanced native select. */

.support-contact-form .fumi-select-support {
    width: 100%;
    font-weight: 400;
}

.support-contact-form .fumi-select-support .fumi-select-trigger {
    min-height: 48px;
    padding: 11px 38px 11px 14px;
    border-radius: 12px;
}

.support-contact-form .fumi-select-support .fumi-select-menu {
    z-index: 10020;
}

@media (max-width: 600px) {
    .cloudshelf-dropdown-menu,
    .palette-dropdown-menu,
    .feedback-category-menu {
        max-height: min(260px, 42vh) !important;
    }
}

/* =========================================================
   ADD / EDIT TEMPLATE — HIGH-SPECIFICITY EDITABLE MENUS
   Older dialog rules use container IDs and !important, so this
   block intentionally matches that specificity and loads last.
   ========================================================= */

#add-template-container .cloudshelf-editable-dropdown > input,
#edit-template-container .cloudshelf-editable-dropdown > input {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 9px 46px 9px 12px !important;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 24%, var(--ios-line)) !important;
    border-radius: 11px !important;
    color: var(--ios-text) !important;
    background: color-mix(in srgb, var(--theme-primary) 6%, var(--ios-card, #ffffff)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

#add-template-container .cloudshelf-editable-dropdown > input:hover,
#add-template-container .cloudshelf-editable-dropdown > input:focus,
#edit-template-container .cloudshelf-editable-dropdown > input:hover,
#edit-template-container .cloudshelf-editable-dropdown > input:focus {
    outline: 0 !important;
    border-color: var(--theme-primary) !important;
    background: color-mix(in srgb, var(--theme-primary) 9%, var(--ios-card, #ffffff)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 12%, transparent) !important;
}

#add-template-container .cloudshelf-editable-dropdown > button.cloudshelf-dropdown-toggle,
#edit-template-container .cloudshelf-editable-dropdown > button.cloudshelf-dropdown-toggle {
    top: 0 !important;
    right: 0 !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    border: 0 !important;
    border-left: 1px solid color-mix(in srgb, var(--theme-primary) 18%, var(--ios-line)) !important;
    border-radius: 0 11px 11px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#add-template-container .cloudshelf-editable-dropdown > button.cloudshelf-dropdown-toggle:hover,
#add-template-container .cloudshelf-editable-dropdown > button.cloudshelf-dropdown-toggle:focus-visible,
#edit-template-container .cloudshelf-editable-dropdown > button.cloudshelf-dropdown-toggle:hover,
#edit-template-container .cloudshelf-editable-dropdown > button.cloudshelf-dropdown-toggle:focus-visible {
    outline: 0 !important;
    color: var(--theme-primary) !important;
    background: color-mix(in srgb, var(--theme-primary) 10%, transparent) !important;
}

#add-template-container .cloudshelf-dropdown-menu,
#edit-template-container .cloudshelf-dropdown-menu {
    display: grid !important;
    grid-auto-flow: row !important;
    gap: 0 !important;
    max-height: 260px !important;
    padding: 6px !important;
    color: var(--ios-text) !important;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 22%, var(--ios-line)) !important;
    border-radius: 13px !important;
    background: color-mix(in srgb, var(--theme-primary) 7%, var(--ios-card, #ffffff)) !important;
    box-shadow: var(--fumi-dropdown-shadow) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
}

#add-template-container .cloudshelf-dropdown-menu[hidden],
#edit-template-container .cloudshelf-dropdown-menu[hidden] {
    display: none !important;
}

#add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option,
#edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 18px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 9px !important;
    color: var(--ios-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    transform: none !important;
    cursor: pointer !important;
}

#add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover,
#add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible,
#add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-highlighted,
#edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover,
#edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible,
#edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-highlighted {
    outline: 0 !important;
    color: var(--ios-text) !important;
    background: color-mix(in srgb, var(--theme-primary) 10%, var(--ios-card, #ffffff)) !important;
}

#add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-selected,
#edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-selected {
    color: var(--theme-primary) !important;
    background: color-mix(in srgb, var(--theme-primary) 14%, var(--ios-card, #ffffff)) !important;
    font-weight: 700 !important;
}

#add-template-container .cloudshelf-dropdown-check,
#edit-template-container .cloudshelf-dropdown-check {
    display: inline-grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--theme-primary) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-menu,
html[data-theme="dark"] #edit-template-container .cloudshelf-dropdown-menu {
    color: var(--ios-text) !important;
    background: color-mix(in srgb, var(--theme-primary-dark) 24%, var(--ios-card, #111827)) !important;
}

html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option,
html[data-theme="dark"] #edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    color: var(--ios-text) !important;
    background: transparent !important;
}