/**
 * Searchable single-select — the styling half of components/combo.js.
 *
 * Lifted verbatim from pages/financial/invoice-review.css, where this control was born and
 * where it was the only thing standing between the next page that needs one and a fourth
 * hand-written copy. Renamed .ir-combo -> .app-combo; nothing else changed, so the invoice
 * review screen must render pixel-identically.
 *
 * One rule deliberately did NOT move: the 190px input width lives under
 * .inv-review-filters, because it sizes the control for that specific filter bar rather
 * than describing what a combo is. A component stylesheet that carries one page's layout
 * is how a component stops being reusable.
 *
 * Logical properties throughout (inset-inline-*), so the menu and the clear button sit
 * correctly in both directions without a mirrored ruleset.
 */
.app-combo{position:relative;display:inline-flex;align-items:center}
.app-combo__x{position:absolute;inset-inline-end:21px;border:0;background:none;font-size:17px;line-height:1;color:#98a2b3;cursor:pointer;padding:0 3px}
.app-combo__x:hover{color:#111827}
.app-combo__x[hidden]{display:none}
.app-combo__caret{position:absolute;inset-inline-end:4px;border:0;background:none;cursor:pointer;padding:0 3px;color:#6b7280;line-height:1}
.app-combo__caret:hover{color:#111827}
.app-combo__menu{position:absolute;z-index:1500;top:calc(100% + 4px);inset-inline-start:0;min-width:230px;max-width:320px;max-height:280px;overflow:auto;background:#fff;border:1px solid var(--tbl-border,#bcc3cd);border-radius:6px;box-shadow:0 8px 24px rgba(15,23,42,.12);padding:5px}
.app-combo__menu[hidden]{display:none}
.app-combo__opt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 8px;font-size:12px;font-weight:600;color:var(--app-text,#1f2937);cursor:pointer;border-radius:5px}
.app-combo__opt:hover,.app-combo__opt.is-active{background:var(--app-surface-muted,#f6f8fb)}
.app-combo__opt b{color:var(--app-text-muted,#6b7280);font-weight:700;flex:0 0 auto}

/* ---- multi mode (ARCombo.create with opts.multi) -----------------------------
   A tick column, not a checkbox input: the row is already a click target that
   toggles, and a real <input> inside it would need its own label/for wiring and
   would swallow the click the row handler wants. aria-selected on the row is what
   carries the state to a screen reader; this is the visual half only.

   The column has a FIXED WIDTH so labels line up whether or not they are ticked --
   without it every tick shifts its own row's text sideways by a character, and a
   list of reps becomes a ragged edge that reads as a rendering bug. */
.app-combo__tick{flex:0 0 1.1em;min-width:1.1em;text-align:center;color:var(--app-primary,#2563eb);font-weight:800}
.app-combo__opt.is-picked{background:color-mix(in srgb, var(--app-primary,#2563eb) 8%, transparent)}
.app-combo__opt.is-picked:hover,.app-combo__opt.is-picked.is-active{background:color-mix(in srgb, var(--app-primary,#2563eb) 14%, transparent)}
/* The box shows a count ("3 مناديب") rather than a name once more than one is
   picked, so the control needs to look engaged -- otherwise a summary reads like
   placeholder text and the reader cannot tell a filter is applied. */
.app-combo.is-multi-active .app-combo__input{font-weight:700;border-color:var(--app-primary,#2563eb)}

.app-combo__empty,.app-combo__more{padding:6px 8px;font-size:11.5px;color:var(--app-text-muted,#6b7280)}
.app-combo__more{border-top:1px solid var(--app-border,#eef1f5);margin-top:3px}

/* ---- attach mode -------------------------------------------------------------
   ARCombo.attach() hangs its menu off an input the page already owns — the List
   View's search box — so the list is a <ul> rather than the <div> create() builds,
   and it inherits the positioning of whatever anchor the framework resolved. The
   anchor is never the search SLOT: that spans the control bar, and an absolutely
   positioned menu there is as wide as the window. See the note on
   .app-list-view__field--search in list-view.css.

   These rules replace four page-local copies that differed in padding, radius and
   which of them bothered to style an empty state at all. */
.app-combo__menu--attached {
    margin: 0;
    padding: 4px 0;
    list-style: none;
    min-width: 100%;
}

.app-combo__menu--attached .app-combo__opt {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: start;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.app-combo__menu--attached .app-combo__opt:hover,
.app-combo__menu--attached .app-combo__opt:focus,
.app-combo__menu--attached .app-combo__opt.is-active {
    background: var(--app-surface-muted, #f6f8fb);
}

/* The states three of the four copies each phrased differently: nothing found,
   keep typing, the search failed. A menu that is simply empty tells the reader
   nothing about which of the three happened. */
.app-combo__menu--attached .app-combo__empty,
.app-combo__menu--attached .app-combo__more {
    padding: 8px 12px;
    color: var(--app-text-muted, #6b7280);
    font-size: 0.86rem;
    list-style: none;
}

/* A row may carry a second line: one code for a customer, or code · barcode · price for a
   product. Kept as two spans so the name stays readable when the meta is long. */
.app-combo__menu--attached .app-combo__opt-name { display: block; }

.app-combo__menu--attached .app-combo__opt-meta {
    display: block;
    margin-top: 1px;
    color: var(--app-text-muted, #6b7280);
    font-size: 0.74rem;
    font-weight: 400;
}