/* =====================================================================
   List picker  -  the "2_list" combobox appearance
   (App\Core\Gctypes\Components\FormComponents\ComboboxComponent::List)

   Used by the Roles / Units / Governorate pickers on the user Permissions
   tab and by any other checkbox/radio list field.

   Deliberately no Bootstrap grid class names: `col-*` collides with the
   theme even inside a scoped block, so widths are set here on own classes.
   ===================================================================== */

.lp-col {
    /* Parent is usually a flex .row; on a plain block parent this simply
       falls back to full width, which is still far better than col-md-1. */
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
}

@media (min-width: 768px) {
    .lp-col { flex-basis: 50%; max-width: 50%; }
}

@media (min-width: 1400px) {
    .lp-col { flex-basis: 33.3333%; max-width: 33.3333%; }
}

/* A picker that declares many options gets the full row to itself on
   medium screens so long labels stay readable. */
@media (min-width: 768px) and (max-width: 1399.98px) {
    .lp-col.lp-col-wide { flex-basis: 100%; max-width: 100%; }
}

.lp {
    border: 1px solid #e3e8ef;
    border-radius: .5rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lp:focus-within {
    border-color: #a8bbe4;
    box-shadow: 0 0 0 .15rem rgba(114, 124, 245, .12);
}

/* ── header ─────────────────────────────────────────────────────────── */
.lp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .5rem .75rem;
    background: #f7f9fc;
    border-bottom: 1px solid #eef2f7;
}

.lp-title {
    margin: 0;
    font-weight: 600;
    font-size: .8125rem;
    color: #343a40;
    display: flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}

.lp-count {
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1;
    padding: .25rem .5rem;
    border-radius: 1rem;
    background: #e9ebfd;
    color: #4750c9;
    white-space: nowrap;
}

.lp-count.lp-count-zero {
    background: #eef2f7;
    color: #8a94a6;
}

/* ── toolbar ────────────────────────────────────────────────────────── */
.lp-tools {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid #eef2f7;
    flex-wrap: wrap;
}

.lp-search {
    position: relative;
    flex: 1 1 160px;
    min-width: 0;
}

.lp-search > .mdi-magnify {
    position: absolute;
    left: .5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #98a6ad;
    pointer-events: none;
    font-size: 1rem;
}

.lp-search input {
    width: 100%;
    padding: .3rem .0rem .3rem 1.75rem;
    padding-right: 1.6rem;
    font-size: .8125rem;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    background: #fff;
}

.lp-search input:focus {
    outline: 0;
    border-color: #a8bbe4;
}

.lp-search-clear {
    position: absolute;
    right: .25rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #98a6ad;
    line-height: 1;
    padding: .15rem .3rem;
    border-radius: .25rem;
    cursor: pointer;
}

.lp-search-clear:hover { color: #343a40; background: #eef2f7; }
.lp-search-clear[hidden] { display: none !important; }

.lp-actions {
    display: flex;
    gap: .25rem;
    flex: 0 0 auto;
}

.lp-actions .btn { --bs-btn-padding-y: .15rem; }

/* ── option list ────────────────────────────────────────────────────── */
.lp-list {
    max-height: 260px;
    overflow-y: auto;
    padding: .375rem .5rem .5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 .75rem;
    align-content: start;
}

/* Wider pickers spread options across columns instead of one long scroll. */
@media (min-width: 992px) {
    .lp-col-wide .lp-list { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

.lp-opt {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .3rem .4rem;
    border-radius: .3rem;
    min-width: 0;
}

.lp-opt:hover { background: #f4f7fb; }

.lp-opt input {
    margin: .15rem 0 0 0;
    flex: 0 0 auto;
    cursor: pointer;
}

.lp-opt label {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.35;
    color: #4b5566;
    cursor: pointer;
    overflow-wrap: anywhere;
    min-width: 0;
}

.lp-opt input:checked ~ label { color: #1c2430; font-weight: 600; }
.lp-opt input:disabled ~ label { color: #98a6ad; cursor: not-allowed; }

/* Hidden by the search box. Attribute rather than a class so Vue never
   overwrites it when it patches the element. */
.lp-opt[data-lp-hidden] { display: none; }

.lp-empty {
    grid-column: 1 / -1;
    padding: .75rem .4rem;
    font-size: .8125rem;
    color: #8a94a6;
    text-align: center;
}

.lp-empty[hidden] { display: none !important; }

/* ── small screens ──────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .lp-head, .lp-tools { padding-left: .5rem; padding-right: .5rem; }
    .lp-actions { width: 100%; }
    .lp-actions .btn { flex: 1 1 0; }
    .lp-list { max-height: 220px; }
}

/* ── dark mode, if the theme switches ───────────────────────────────── */
body[data-bs-theme="dark"] .lp,
html[data-bs-theme="dark"] .lp {
    background: #2b3648;
    border-color: #3c4a5f;
}

body[data-bs-theme="dark"] .lp-head,
body[data-bs-theme="dark"] .lp-tools,
html[data-bs-theme="dark"] .lp-head,
html[data-bs-theme="dark"] .lp-tools {
    background: #313d52;
    border-color: #3c4a5f;
}

body[data-bs-theme="dark"] .lp-opt label,
html[data-bs-theme="dark"] .lp-opt label { color: #aab8c5; }

body[data-bs-theme="dark"] .lp-opt:hover,
html[data-bs-theme="dark"] .lp-opt:hover { background: #3a465c; }

body[data-bs-theme="dark"] .lp-search input,
html[data-bs-theme="dark"] .lp-search input {
    background: #2b3648;
    border-color: #3c4a5f;
    color: #dee2e6;
}