/* ==========================================================================
   fwre-ms.css — shared floor for the fwre-ms select component (multi+single).

   Structure + neutral colors for .fwre-ms everywhere; colors read the active
   design's --fwre-* tokens with neutral fallbacks, so any design can retheme
   by tokens alone and a design skin (e.g. official design-theme.css) only
   re-asserts what its higher-specificity control rules would otherwise
   override. Contract: docs/fwre-ms-unification.md.

   Also carries the SITE-side fwk-grid boot-flash guard below — unrelated to
   fwre-ms itself, but this is the one file the framework CSS (fw-uikit) is
   always immediately followed by on every platform (see site.php's <link>
   order), so it is the natural place for a fw-uikit boot-timing fix that has
   to land before any page content paints. docs/engineering-gotchas.md has
   the write-up (search "FOUC").
   ========================================================================== */

/* [fwk-grid] elements (e.g. the search module's field rows) get their display:flex
   ONLY once the fwk-grid JS component boots and adds the .fwk-grid class — before that,
   on cold/slow loads, they are plain stacked <div>s, then visibly SNAP into a row once JS
   attaches. The admin side already has this exact guard (fwa-admin-theme.css:
   ".fw-admin-uikit [fwk-grid]"); #fwre is the equivalent site root wrapper. */
/* No margin here: the gutter system's negative margin-left comes from the .fwk-grid-small/
   -medium/-large modifier class already present in markup pre-JS — only display:flex was
   missing. Setting margin here (higher specificity than that class, later in cascade order)
   would clobber it. */
#fwre [fwk-grid] { display: flex; flex-wrap: wrap; }
/* Zero-specificity on purpose (:where): the pre-JS margin cleanup must LOSE to the row-gap
   class UIkit adds after attach (.fwk-grid > .fwk-grid-margin { margin-top: ... }). The old
   `#fwre [fwk-grid] > *` form (1,1,1) out-specified it and silently killed vertical row
   spacing in EVERY site grid (agents list, listing grid, ...). */
:where(#fwre [fwk-grid] > *) { margin: 0; }

.fwre-ms { position: relative; margin-bottom: var(--fwre-space-14, 14px); flex: 1 1 auto; min-width: 0; } /* flex: expands in flex form rows (hint icons stay beside); inert in block/grid contexts */
/* `button.` on purpose: the toggle also carries `.fwk-button`, whose `display: inline-block` has the
   SAME specificity, so which one wins was decided by stylesheet ORDER — and on WordPress the demo
   theme re-enqueued the framework CSS after this file, flipping it. inline-block makes the label (a
   flex container itself) claim the full width and pushes the caret out of the button onto its own
   line (incidental-findings #287). One extra element in the selector and the order stops mattering
   anywhere. */
button.fwre-ms-toggle,
.fwre-ms-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fwre-space-6, 6px);
    height: 40px;
    padding: 0 var(--fwre-space-10, 10px);
    text-align: left;
    font-weight: var(--fwre-weight-normal, 400);
    text-transform: none;
    color: var(--fwre-black, #323232);
    background: var(--fwre-grey-light, #F3F3F3);
    border: 1px solid var(--fwre-grey-border, #E1E1E1);
    border-radius: var(--fwre-radius, 4px);
}
.fwre-ms:focus-within .fwre-ms-toggle {
    background: var(--fwre-white, #fff);
    border-color: var(--fwre-green, #5EB55E);
}
/* Selected display — the fwre-select DESIGN, ported (docs/fwre-ms-unification.md):
   multi = green pill tags with a per-tag ×, ONE line, overflow folds into a "+N"
   counter chip (fwre-ms.js collapse()); single = plain value text. Same var(--fwa-*)
   + hex fallback pattern fwre-select.css used, so the rendered look is identical. */
.fwre-ms-label {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.fwre-ms-ph { color: var(--fwre-grey, #ADADAD); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fwre-ms-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fwre-ms-tag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 4px 2px 9px;
    font-size: 13px;
    line-height: 18px;
    color: var(--fwa-green-hover, #1A8842);
    background: var(--fwa-green-light, #E6F7EC);
    border: 1px solid var(--fwa-green-pale, #D8F1E1);
    border-radius: 4px;
}
.fwre-ms-tag-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}
.fwre-ms-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    opacity: .7;
}
.fwre-ms-tag-remove:hover {
    opacity: 1;
    color: #fff;
    background: var(--fwa-green, #34A55D);
}
.fwre-ms-tag-count {
    flex: none;
    padding: 2px 8px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: var(--fwa-green-hover, #1A8842);
    background: var(--fwa-green-light, #E6F7EC);
    border: 1px solid var(--fwa-green-pale, #D8F1E1);
    border-radius: 4px;
}
/* The caret: same glyph, same DARK #666, same 20px box as the native fwk-select rule below. */
.fwre-ms-caret { flex: 0 0 auto; }
.fwre-ms-caret svg { color: #666; width: 20px; height: 20px; }
/* Closed by default (like the framework's own .fwk-drop) — the fwk-dropdown JS component only
   toggles its "cls" class (fwk-open) on show/hide, it does not set inline display itself; since this
   panel uses fwre-ms-drop instead of fwk-drop it never picked up the framework's base display:none,
   so it rendered expanded (all options visible) for the one paint before JS attached (FOUC). */
.fwre-ms-drop { display: none; }
.fwre-ms-drop.fwk-open {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: var(--fwre-space-6, 6px);
    background: var(--fwre-white, #fff);
    border: 1px solid var(--fwre-grey-border, #E1E1E1);
    border-radius: var(--fwre-radius, 4px);
    box-shadow: var(--fwre-shadow-small, 0 4px 13px rgba(30, 35, 66, .11));
}
.fwre-ms-filter { margin-bottom: var(--fwre-space-6, 6px); }
.fwre-ms-filter .fwk-input { height: 34px; }
/* Dropdown rows — the fwre-select option DESIGN, ported: plain text rows (the checkbox/
   radio input stays functional but invisible; the wrapping label still toggles it),
   hover/active = white on green, selected = green on green-light with a right ✓. */
.fwre-ms-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.fwre-ms-opt { margin: 0; }
.fwre-ms-opt > label {
    display: flex;
    align-items: center;
    padding: 7px 12px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: var(--fwre-weight-normal, 400);
}
.fwre-ms-opt input[type="checkbox"],
.fwre-ms-opt input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.fwre-ms-opt > label:hover {
    color: #fff;
    background: var(--fwa-green, #34A55D);
}
.fwre-ms-opt > label:has(input:checked) {
    color: var(--fwa-green, #34A55D);
    background: var(--fwa-green-light, #E6F7EC);
}
.fwre-ms-opt > label:has(input:checked)::after {
    content: "\2713";
    margin-left: auto;
    padding-left: 8px;
    color: var(--fwa-green, #34A55D);
}
.fwre-ms-opt > label:has(input:checked):hover { color: #fff; background: var(--fwa-green, #34A55D); }
.fwre-ms-opt > label:has(input:checked):hover::after { color: #fff; }
.fwre-ms-hidden { display: none; }

/* ==========================================================================
   The ONE caret glyph (docs/fwre-ms-unification.md): UIkit's chevron-down
   polyline (points 16 7 10 13 4 7) on every native single <select>, replacing
   the vendored double up/down triangle. IDENTICAL to the fwre-ms toggle's
   fwk-icon caret in geometry, size (20px box, native 1.03 stroke), color
   (#666; white-70 on the foundation's dark surfaces - selector list mirrors
   the vendored fw-uikit rule) and inset (10px right). The admin theme keeps
   its own colorway in fwa-admin-theme.css / fwa-admin-dark.css, same glyph
   and size.
   ========================================================================== */
.fwk-select:not([multiple]):not([size]) {
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolyline fill='none' stroke='%23666' stroke-width='1.03' points='16 7 10 13 4 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
}
.fwk-card-primary .fwk-select:not([multiple]):not([size]),
.fwk-light .fwk-select:not([multiple]):not([size]),
.fwk-offcanvas-bar .fwk-select:not([multiple]):not([size]),
.fwk-overlay-primary .fwk-select:not([multiple]):not([size]),
.fwk-section-primary .fwk-select:not([multiple]):not([size]),
.fwk-section-secondary .fwk-select:not([multiple]):not([size]),
.fwk-tile-primary .fwk-select:not([multiple]):not([size]),
.fwk-tile-secondary .fwk-select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolyline fill='none' stroke='white' stroke-opacity='.7' stroke-width='1.03' points='16 7 10 13 4 7'/%3E%3C/svg%3E");
}