/* ============================================================
   CruxDropdown.css  —  Custom Dropdown Component
   Extracted from CruxGlobal.css for better modularity.
   Used across all views (datatables, forms, transaction).
   ============================================================ */


/* ── Dropdown Wrapper ─────────────────────────────────────────── */
.custom-ddl-wrap {
    position:    relative;
    user-select: none;
}


/* ── Trigger (closed) ─────────────────────────────────────────── */
.custom-ddl-trigger {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    background:      var(--bg-notepad);
    border:          var(--crux-input-border-w, 1.5px) solid var(--border-subtle, rgba(255,255,255,0.12));
    border-radius:   var(--crux-input-radius, 6px);
    padding:         var(--crux-input-padding, 11px 14px);
    font-size:       var(--crux-input-font-size, 14px);
    color:           var(--text-primary, #e2e8f4);
    cursor:          pointer;
    transition:      border-color 0.15s, background 0.15s;
}

.custom-ddl-trigger:hover {
    border-color: rgba(var(--accent-rgb, 61,139,255), 0.50);
    background:   var(--bg-notepad);
}


/* ── Trigger (open) ───────────────────────────────────────────── */
.custom-ddl-wrap.open .custom-ddl-trigger {
    border-color:              var(--accent, #3d8bff);
    background:                rgba(var(--accent-rgb, 61,139,255), 0.06);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


/* ── Chevron ──────────────────────────────────────────────────── */
.custom-ddl-chevron {
    font-size:   11px;
    color:       var(--text-muted, #6e7d99);
    transition:  transform 0.2s ease;
    flex-shrink: 0;
}

.custom-ddl-wrap.open .custom-ddl-chevron {
    transform: rotate(180deg);
    color:     var(--accent, #3d8bff);
}


/* ── Selected text ────────────────────────────────────────────── */
.custom-ddl-selected {
    flex:          1;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    color:         var(--text-muted, #9aaabf);
}

.custom-ddl-wrap.has-value .custom-ddl-selected {
    color: var(--text-primary, #e2e8f4);
}


/* ── Options list ─────────────────────────────────────────────── */
.custom-ddl-options {
    display:                   none;
    position:                  absolute;
    top:                       100%;
    left:                      0;
    right:                     0;
    list-style:                none;
    background:                var(--bg-card, rgba(13,18,32,0.97));
    border:                    1px solid var(--accent, #3d8bff);
    border-top:                none;
    border-bottom-left-radius: var(--crux-input-radius, 6px);
    border-bottom-right-radius: var(--crux-input-radius, 6px);
    overflow:                  hidden;
    z-index:                   200;
    box-shadow:                0 16px 40px rgba(0, 0, 0, 0.60);
    backdrop-filter:           blur(14px);
    max-height:                220px;
    overflow-y:                auto;
}

.custom-ddl-wrap.open .custom-ddl-options {
    display:   block;
    animation: crux-ddl-slide-in 0.18s ease;
}

/* Drop-up: flip border-radius, shadow, and slide direction */
.custom-ddl-options.opens-up {
    border-top:                1px solid var(--accent, #3d8bff);
    border-bottom:             none;
    border-top-left-radius:    var(--crux-input-radius, 6px);
    border-top-right-radius:   var(--crux-input-radius, 6px);
    border-bottom-left-radius: 0;
    border-bottom-right-radius:0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
    animation: crux-ddl-slide-up 0.18s ease;
}

@keyframes crux-ddl-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes crux-ddl-slide-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}


/* ── Option items ─────────────────────────────────────────────── */
.custom-ddl-options li {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       11px 14px;
    font-size:     13px;
    color:         var(--text-secondary, #c0cde4);
    cursor:        pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition:    background 0.12s, color 0.12s;
}

.custom-ddl-options li:last-child { border-bottom: none; }

.custom-ddl-options li:hover {
    background: rgba(var(--accent-rgb, 61,139,255), 0.10);
    color:      var(--text-primary, #ffffff);
}

.custom-ddl-options li.selected {
    background: rgba(var(--accent-rgb, 61,139,255), 0.16);
    color:      var(--accent, #3d8bff);
}

.custom-ddl-options li.selected .custom-ddl-code {
    background: rgba(var(--accent-rgb, 61,139,255), 0.20);
    color:      rgba(var(--accent-rgb, 61,139,255), 0.85);
}


/* ── Code badge inside option ─────────────────────────────────── */
.custom-ddl-code {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color:          var(--accent, #3d8bff);
    background:     rgba(var(--accent-rgb, 61,139,255), 0.10);
    padding:        3px 8px;
    border-radius:  4px;
    white-space:    nowrap;
    flex-shrink:    0;
}


/* ── Scrollbar inside dropdown ────────────────────────────────── */
.custom-ddl-options::-webkit-scrollbar       { width: 4px; }
.custom-ddl-options::-webkit-scrollbar-track { background: transparent; }
.custom-ddl-options::-webkit-scrollbar-thumb {
    background:    rgba(var(--accent-rgb, 61,139,255), 0.30);
    border-radius: 4px;
}


/* ── Searchable dropdown ──────────────────────────────────────── */
.custom-ddl-search-item {
    position:        sticky;
    top:             0;
    padding:         6px 8px !important;
    background:      var(--bg-card, rgba(13,18,32,0.97)) !important;
    border-bottom:   1px solid rgba(255,255,255,0.10) !important;
    cursor:          default !important;
    z-index:         1;
}
.custom-ddl-search-item:hover {
    background: var(--bg-card, rgba(13,18,32,0.97)) !important;
    color:      inherit !important;
}
.custom-ddl-search {
    width:         100%;
    box-sizing:    border-box;
    padding:       5px 10px;
    font-size:     12px;
    border:        1.5px solid var(--border-subtle);
    border-radius: 4px;
    background:    var(--bg-input, rgba(255,255,255,0.07));
    color:         var(--text-primary);
    outline:       none;
    transition:    border-color 0.15s;
    cursor:        text;
}
.custom-ddl-search::placeholder { color: var(--text-muted); font-style: italic; }
.custom-ddl-search:focus         { border-color: var(--accent); }