/* =============================================================================
   smart-select.css  -  Looks for the "smart" type-to-search dropdowns.
   Goes with wwwroot/js/smart-select.js. Added Oct 27, 2026.
   Colors match Bootstrap (the look the rest of the site uses).
   ============================================================================= */

/* The box: a text box that looks like a Bootstrap dropdown. */
.smart-select {
    position: relative;               /* the list panel is placed under this box */
}
.smart-select-input {
    padding-left: .6rem;              /* a little tighter than normal so short boxes (State, ZIP) fit their label */
    padding-right: 1.85rem;           /* room for the arrow on the right */
    text-overflow: ellipsis;          /* long names end in "..." instead of running under the arrow */
    cursor: pointer;
}
.smart-select.open .smart-select-input {
    cursor: text;                     /* while open it's a typing box */
}
.smart-select-input::placeholder {
    color: #212529;                   /* "All members (patients)" reads like a normal choice, not faded hint text */
    opacity: 1;
}

/* The little down-arrow on the right (same arrow picture Bootstrap uses). */
.smart-select-arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 1.85rem;
    height: 100%;
    cursor: pointer;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat center / 16px 12px;
}

/* The list that drops down. At least as wide as the box; wider when names are long. */
.smart-select-list {
    position: absolute;
    z-index: 1050;                    /* above the table */
    top: calc(100% + 2px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: min(34rem, 92vw);
    max-height: 22rem;                /* scrolls after about 12 rows */
    overflow-y: auto;
    margin: 0;
    padding: .25rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .175);
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

/* One choice in the list. */
.smart-select-item {
    padding: .3rem .75rem;
    cursor: pointer;
    white-space: nowrap;
}
.smart-select-item.active {          /* highlighted by the mouse/arrow keys */
    background: #0d6efd;
    color: #fff;
}
.smart-select-item.selected {        /* the choice currently in effect */
    font-weight: 600;
}
.smart-select-item:hover:not(.active) {
    background: #e9ecef;
}
.smart-select-all {                   /* the "All ..." line at the top */
    border-bottom: 1px solid #dee2e6;
    color: #495057;
}
.smart-select-item.active.smart-select-all {
    color: #fff;
}

/* The typed letters, highlighted yellow inside each match. */
.smart-select-item mark {
    padding: 0;
    background: #fff3cd;
    color: inherit;
    font-weight: 600;
}
.smart-select-item.active mark {
    background: #ffda6a;
    color: #000;
}

/* The grey line at the bottom: "12 matches" / "keep typing to narrow the list". */
.smart-select-note {
    padding: .3rem .75rem;
    font-size: .8rem;
    color: #6c757d;
    border-top: 1px solid #f1f3f5;
    cursor: default;
    white-space: nowrap;
}

/* While the list is open and nothing is typed yet, the "All ..." hint fades to grey
   so it's clear you can type. */
.smart-select.open .smart-select-input::placeholder {
    color: #6c757d;
}

/* WILDCARD line: 'All containing "brown"  (12 matches)' - picks every match at once. */
.smart-select-contains {
    font-style: italic;
    color: #0a58ca;
    border-bottom: 1px solid #dee2e6;
}
.smart-select-item.active.smart-select-contains {
    color: #fff;
}