/* ══════════════════════════════════════════════════════════════════════════
   DarajaERP — Dropdown menus
   Covers Bootstrap dropdowns (table row actions, navbar, button menus) and
   Select2 result lists so both read as one component.

   Loaded after app.css/vendor.css so it wins over the stock Bootstrap look.
   POS and Appearance dropdowns are NOT touched: their rules in
   daraja-theme.css are two-class selectors (.daraja-pos-themed .dropdown-menu)
   and therefore still out-specify everything here — those must keep painting
   from the tenant theme tokens rather than the brand palette.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --dd-ink: #13203D;
    --dd-ink-soft: #33455E;
    --dd-muted: #6B7A90;
    --dd-line: #E5EAF1;
    --dd-hair: #EEF1F5;
    --dd-surface: #FFFFFF;
    --dd-cyan: #009CD5;
    --dd-cyan-tint: rgba(0, 156, 213, .09);
    --dd-navy: #13203D;
    --dd-danger: #DC2626;
    --dd-danger-tint: rgba(220, 38, 38, .08);
    --dd-radius: 12px;
    --dd-item-radius: 8px;
}

/* ── the panel ─────────────────────────────────────────────────────────── */
.dropdown-menu {
    min-width: 208px;
    padding: 6px;
    margin-top: 6px;
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius);
    background: var(--dd-surface);
    background-clip: padding-box;
    box-shadow:
        0 1px 2px rgba(19, 32, 61, .04),
        0 12px 28px rgba(19, 32, 61, .13);
    font-size: 13px;
    color: var(--dd-ink);
    animation: ddIn .13s ease-out;
}

@keyframes ddIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .dropdown-menu { animation: none; }
}

/* Menus that open upward should lift off the trigger, not sink into it. */
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
    margin-top: 0;
    margin-bottom: 6px;
}

/* ── items ─────────────────────────────────────────────────────────────── */
.dropdown-menu > li > a,
.dropdown-menu > li > button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--dd-item-radius);
    background: none;
    color: var(--dd-ink-soft);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > button:hover,
.dropdown-menu > li > button:focus {
    background: var(--dd-cyan-tint);
    color: var(--dd-navy);
    text-decoration: none;
    outline: 0;
}

/* Icons sit on a fixed rail so labels align no matter the glyph width. */
.dropdown-menu > li > a > i,
.dropdown-menu > li > a > .fa,
.dropdown-menu > li > a > .fas,
.dropdown-menu > li > a > .far,
.dropdown-menu > li > a > .glyphicon,
.dropdown-menu > li > button > i {
    flex: none;
    width: 16px;
    text-align: center;
    font-size: 12.5px;
    color: var(--dd-muted);
    transition: color .12s ease;
    top: auto;          /* glyphicons ship position:relative + top:1px */
}

.dropdown-menu > li > a:hover > i,
.dropdown-menu > li > a:hover > .fa,
.dropdown-menu > li > a:hover > .fas,
.dropdown-menu > li > a:hover > .far,
.dropdown-menu > li > a:hover > .glyphicon,
.dropdown-menu > li > button:hover > i {
    color: var(--dd-cyan);
}

/* ── active ────────────────────────────────────────────────────────────── */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background: var(--dd-cyan-tint);
    color: var(--dd-cyan);
    font-weight: 600;
}

.dropdown-menu > .active > a > i,
.dropdown-menu > .active > a > .fa,
.dropdown-menu > .active > a > .glyphicon {
    color: var(--dd-cyan);
}

/* ── disabled ──────────────────────────────────────────────────────────── */
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
    background: none;
    color: #A6B0BF;
    cursor: not-allowed;
}

/* ── destructive actions ───────────────────────────────────────────────── */
.dropdown-menu > li > a.text-danger,
.dropdown-menu > li > a.text-red,
.dropdown-menu > li > a[class*="delete"] {
    color: var(--dd-danger);
}

.dropdown-menu > li > a.text-danger:hover,
.dropdown-menu > li > a.text-red:hover,
.dropdown-menu > li > a[class*="delete"]:hover {
    background: var(--dd-danger-tint);
    color: var(--dd-danger);
}

.dropdown-menu > li > a.text-danger:hover > i,
.dropdown-menu > li > a.text-red:hover > i,
.dropdown-menu > li > a[class*="delete"]:hover > i,
.dropdown-menu > li > a.text-danger > i,
.dropdown-menu > li > a[class*="delete"] > i {
    color: var(--dd-danger);
}

/* ── dividers and headers ──────────────────────────────────────────────── */
.dropdown-menu .divider {
    height: 1px;
    margin: 5px 6px;
    background: var(--dd-hair);
    overflow: hidden;
}

.dropdown-menu .dropdown-header {
    padding: 9px 12px 5px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dd-muted);
}

/* ── the trigger caret ─────────────────────────────────────────────────── */
.dropdown-toggle .caret {
    margin-left: 6px;
    border-top-width: 4px;
    border-right-width: 4px;
    border-left-width: 4px;
    opacity: .65;
}

/* ══════════════════════════════════════════════════════════════════════════
   Select2 — matched to the same panel so filters and menus agree.
   ══════════════════════════════════════════════════════════════════════════ */
.select2-container--default .select2-dropdown {
    border: 1px solid var(--dd-line);
    border-radius: var(--dd-radius);
    background: var(--dd-surface);
    box-shadow:
        0 1px 2px rgba(19, 32, 61, .04),
        0 12px 28px rgba(19, 32, 61, .13);
    overflow: hidden;
}

.select2-container--default .select2-results > .select2-results__options {
    padding: 6px;
    max-height: 260px;
}

.select2-container--default .select2-results__option {
    padding: 9px 12px;
    border-radius: var(--dd-item-radius);
    color: var(--dd-ink-soft);
    font-size: 13px;
    font-weight: 500;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background: var(--dd-cyan-tint);
    color: var(--dd-navy);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--dd-cyan-tint);
    color: var(--dd-cyan);
    font-weight: 600;
}

.select2-container--default .select2-search--dropdown {
    padding: 8px 8px 4px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid var(--dd-line);
    border-radius: 9px;
    background: #FBFCFE;
    font-size: 13px;
    outline: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--dd-cyan);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 156, 213, .12);
}

.select2-container--default .select2-results__message {
    padding: 12px;
    color: var(--dd-muted);
    font-size: 12.5px;
}

/* ── narrow screens: full-width items are easier to hit ────────────────── */
@media (max-width: 767px) {
    .dropdown-menu {
        min-width: 180px;
    }

    .dropdown-menu > li > a,
    .dropdown-menu > li > button {
        padding: 11px 12px;
    }
}