/* Overrides for the clinical "sheet" views' custom multi-select component
   (CATARACTSHEET / Glaucoma / INJECTIONSHEET / Keratoplasty /
   OphthalmicOncology / RETINASHEET — Create & Details), whose base styling
   lives in Content/css/injection-sheet.css under .med-sheet. Kept as its own
   file rather than editing injection-sheet.css directly, so that file stays
   a clean port of the original clinical-sheet design and this stays a
   clearly separate, removable theme layer.

   Each of those 12 views loads injection-sheet.css as a plain <link> in the
   page BODY (not through _Layout's <head>), which puts it AFTER this
   stylesheet in source order despite this file loading first. Same
   selectors, same specificity either way, so !important is required here to
   win regardless of that per-view load order — matches the approach already
   used for Select2 for the identical reason.

   Only visual chrome (border/radius/focus ring/hover color) changes to match
   the rest of the site's redesigned inputs/dropdowns. .med-sheet's own
   layout, colors elsewhere, and its deliberate LTR orientation are untouched. */

/* Retint the whole sheet by redefining injection-sheet.css's own custom
   properties, rather than duplicating every rule that reads them. Since
   .med-sheet declares --primary/--border-color/etc. itself (same selector,
   same specificity as this block), !important is needed here too — same
   load-order reason as above.
     --primary  (form header bar, section-title text, the Yes/No toggle's
                 selected state, "Save & Sign" button, view-link) was a light
                 sky-blue (#0284c7, matches --wl-mohp-500 exactly) -> the same
                 navy the header/buttons use elsewhere (--wl-mohp-700).
     --border-color / --bg-page were already near-identical to our slate
                 scale by coincidence -> pinned to the exact tokens.
   --text-main/--text-muted are left alone: they already equal --wl-slate-800
   /--wl-slate-500 exactly. --od-color/--os-color (the right/left eye tints
   in the eye-comparison matrices) are clinical meaning, not branding, so
   also left alone. */
.med-sheet {
    --primary: var(--wl-mohp-700) !important;
    --border-color: var(--wl-slate-200) !important;
    --section-header-bg: var(--wl-sky-50) !important;
    --bg-page: var(--wl-slate-50) !important;
}

.med-sheet .multi-select-trigger {
    border-radius: 10px !important;
    border-color: var(--wl-slate-200, var(--border-color)) !important;
    transition: border-color .15s, box-shadow .15s;
}
.med-sheet .multi-select.open .multi-select-trigger {
    border-color: var(--wl-mohp-600, var(--primary)) !important;
    box-shadow: 0 0 0 3px rgba(3, 105, 161, .15) !important;
}

.med-sheet .multi-select-dropdown {
    border-radius: 0 0 10px 10px !important;
    border-color: var(--wl-slate-200, var(--border-color)) !important;
    box-shadow: 0 10px 25px -6px rgba(15, 23, 42, .18) !important;
}

.med-sheet .multi-select-dropdown label:hover {
    background-color: var(--wl-sky-50, var(--section-header-bg)) !important;
    color: var(--wl-mohp-700, var(--text-main)) !important;
}