/* Slim Select — dark-green theme matching the Debt Minder palette.
   Overrides the library's CSS variables (its supported theming API) plus a few
   element tweaks for the popup, search box and option states.
   Must be linked AFTER slimselect.css so these win the cascade. */
:root {
    --ss-primary-color: #8EB69B;
    --ss-bg-color: #0B2B26;
    --ss-font-color: #DAF1DE;
    --ss-font-placeholder-color: rgba(218, 241, 222, 0.55);
    --ss-disabled-color: rgba(218, 241, 222, 0.35);
    --ss-border-color: rgba(218, 241, 222, 0.18);
    --ss-highlight-color: #8EB69B;
    --ss-success-color: #8EB69B;
    --ss-error-color: #ffb4b4;
    --ss-main-height: 44px;
    --ss-content-height: 280px;
    --ss-border-radius: 10px;
    --ss-animation-timing: 0.18s;
}

/* Control (the closed select box) */
.ss-main {
    background-color: var(--ss-bg-color);
    border: 1px solid var(--ss-border-color);
    color: var(--ss-font-color);
    transition: border-color 0.15s ease, background 0.15s ease;
    /* Keep the value + dropdown arrow on one CENTRED row with the arrow pinned right
       (Tailwind preflight on some pages was pushing the arrow below/under the text). */
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

    .ss-main .ss-values,
    .ss-main .ss-single {
        flex: 1 1 auto;
        min-width: 0;
        align-self: center;
    }

    .ss-main .ss-arrow {
        flex: 0 0 auto;
        margin-left: auto;
        align-self: center !important;
    }

    .ss-main:focus,
    .ss-main.ss-open-below,
    .ss-main.ss-open-above {
        border-color: #8EB69B;
        box-shadow: none;
    }

    /* Deselect "x" + dropdown arrow tint */
    .ss-main .ss-arrow path,
    .ss-main .ss-deselect path {
        stroke: #8EB69B;
    }

/* The open dropdown popup */
.ss-content {
    background-color: var(--ss-bg-color);
    border: 1px solid var(--ss-border-color);
    border-radius: 10px !important; /* keep all four corners rounded in every open position */
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    z-index: 13000;
    overflow: hidden;
    /* Lay the popup out as a column: the search keeps its height and the list fills the rest
       and scrolls inside. The popup's overall height is capped here. */
    display: flex !important;
    flex-direction: column !important;
    max-height: var(--ss-content-height);
    padding: 6px; /* insets the list so its scrollbar stays inside the rounded corners */
}

    .ss-content .ss-search {
        flex: 0 0 auto;
    }

    /* The list fills the space left after the search (instead of being the full popup
       height) so its scrollbar ends inside the popup, not past the bottom. */
    .ss-content .ss-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    /* Search box at the top of the popup */
    .ss-content .ss-search input {
        background-color: rgba(218, 241, 222, 0.07);
        border: 1px solid var(--ss-border-color);
        color: var(--ss-font-color);
        border-radius: 8px;
    }

        .ss-content .ss-search input::placeholder {
            color: var(--ss-font-placeholder-color);
        }

        .ss-content .ss-search input:focus {
            border-color: #8EB69B;
            box-shadow: none;
        }

/* Options — the hover/selected highlight is rounded and inset slightly so it reads
   as a floating pill on the list background (matching the app's table rows). */
.ss-content .ss-list .ss-option {
    color: var(--ss-font-color);
    border-radius: 8px;
    margin: 1px 6px;
}

    .ss-content .ss-list .ss-option:not(.ss-disabled):not(.ss-selected):hover,
    .ss-content .ss-list .ss-option.ss-highlighted {
        background-color: #163832;
        color: #FFFFFF;
    }

    .ss-content .ss-list .ss-option.ss-selected {
        background-color: #8EB69B;
        color: #051F20;
    }

    .ss-content .ss-list .ss-option.ss-disabled {
        color: var(--ss-font-placeholder-color);
        background-color: transparent;
        cursor: default;
    }

/* Strip any inherited background-image (e.g. Bootstrap .form-select chevron) so a ghost
   arrow doesn't show behind the Slim Select arrow or on the option rows. */
.form-select,
.ss-main,
.ss-main .ss-single,
.ss-main .ss-values,
.ss-content .ss-list .ss-option {
    background-image: none !important;
}

/* Themed scrollbar for the scrollable dropdown list (replaces the generic OS one). */
.ss-content,
.ss-content .ss-list {
    scrollbar-width: thin;                  /* Firefox */
    scrollbar-color: #8EB69B transparent;   /* Firefox: thumb / track */
}

    .ss-content::-webkit-scrollbar,
    .ss-content .ss-list::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .ss-content::-webkit-scrollbar-track,
    .ss-content .ss-list::-webkit-scrollbar-track {
        background: transparent;
        margin: 4px 0;
    }

    .ss-content::-webkit-scrollbar-thumb,
    .ss-content .ss-list::-webkit-scrollbar-thumb {
        background-color: #8EB69B;
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

        .ss-content::-webkit-scrollbar-thumb:hover,
        .ss-content .ss-list::-webkit-scrollbar-thumb:hover {
            background-color: #DAF1DE;
        }