/* * hd-filter — the light-panel (pharmacy) filter drawer. * * The admin `.adx-filterbar` drawer is scoped to the dark `body.adx` theme, so the light pharmacy * panel needs its own. The critical rule: hd-filter.js PORTALS the

to , so its * position:fixed is viewport-relative — escaping the containing block that `.pos-an` * (animation ending on transform:translateY(0)) creates around every .pos-card. Without that the * drawer renders trapped inside the card/table instead of covering the screen from the right. * * Uses --brand-primary-base directly (property-guarded) since it comes from the DB and can be empty. */ /* Seated just BELOW the ADX float layer (.adx-floats is z-index:1090) so the custom dropdown and range-picker panels opened from inside the drawer render ON TOP of it, not trapped behind. */ .hd-filterscrim { position: fixed; inset: 0; z-index: 1078; background: rgba(15, 23, 42, .34); opacity: 0; visibility: hidden; transition: opacity .2s ease; } .hd-filterscrim.show { opacity: 1; visibility: visible; } .hd-filter[data-hd-drawer] { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1080; width: min(430px, 100%); max-width: 100vw; background: #fff; box-shadow: -16px 0 44px rgba(15, 23, 42, .18); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .24s cubic-bezier(.22, .61, .36, 1); } .hd-filter[data-hd-drawer].open { transform: translateX(0); } .hd-filter__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #e6ebf2; flex: 0 0 auto; } .hd-filter__head h3 { margin: 0; font-size: 15px; font-weight: 600; color: #1e293b; } .hd-filter__close { border: 0; background: transparent; font-size: 24px; line-height: 1; color: #64748b; cursor: pointer; padding: 0 4px; } .hd-filter__close:hover { color: #1e293b; } .hd-filter__body { flex: 1 1 auto; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; } .hd-filter__field { display: flex; flex-direction: column; gap: 6px; } .hd-filter__field > label { font-size: 11.5px; color: #64748b; font-weight: 500; } /* Make every control fill the drawer width so the fields line up in one clean column. */ .hd-filter__field .pos-select, .hd-filter__field .pos-input, .hd-filter__field .adxs, .hd-filter__field .adxd-input, .hd-filter__field select, .hd-filter__field input { width: 100%; } .hd-filter__foot { display: flex; gap: 10px; padding: 12px 18px; border-top: 1px solid #e6ebf2; flex: 0 0 auto; } .hd-filter__foot button, .hd-filter__foot a { flex: 1; height: 40px; border-radius: 9px; font-size: 13.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .hd-filter__reset { border: 1px solid #e2e8f0; background: #fff; color: #475569; } .hd-filter__reset:hover { background: #f8fafc; } .hd-filter__apply { border: 0; color: #fff; background: #2E8B57; background: var(--brand-primary-base, #2E8B57); } /* Shared toolbar: search grows, controls sit beside it on ONE row (never wrapping to stacked rows). */ .hd-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; } .hd-toolbar__search { flex: 1 1 240px; min-width: 180px; position: relative; } .hd-toolbar__search input, .hd-toolbar__search .pos-input { width: 100%; height: 38px; } /* A leading search glyph inside the field, if the markup includes an icon. */ .hd-toolbar__search > i, .hd-toolbar__search > .isax { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 15px; pointer-events: none; z-index: 1; } .hd-toolbar__search > i + input, .hd-toolbar__search > i + .pos-input, .hd-toolbar__search > .isax + input, .hd-toolbar__search > .isax + .pos-input { padding-left: 34px; } /* Inline filters: for pages with only one or two filters, the fields sit OPENLY in the toolbar row (no drawer). Each auto-applies on change; a minimal Reset link clears them. */ .hd-toolbar > .pos-select, .hd-toolbar > .form-select, .hd-toolbar > .adxs, .hd-toolbar > .pos-daterange, .hd-toolbar .pos-daterange > .adxd-input { flex: 0 0 auto; } .hd-reset { display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 12px; flex: 0 0 auto; border: 1px solid transparent; background: transparent; color: #64748b; font-size: 12.5px; cursor: pointer; text-decoration: none; border-radius: 9px; white-space: nowrap; } .hd-reset:hover { background: #f1f5f9; color: #334155; } .hd-apply { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; flex: 0 0 auto; border: 0; border-radius: 9px; font-size: 13px; cursor: pointer; color: #fff; background: #2E8B57; background: var(--brand-primary-base, #2E8B57); } /* The Filters trigger button: same 38px height as the selects, with an active-count badge. */ .hd-filter-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 1px solid #e2e8f0; border-radius: 9px; background: #fff; color: #334155; font-size: 13px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; } .hd-filter-btn:hover { border-color: #cbd5e1; } .hd-filter-btn__badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 18px; text-align: center; color: #fff; background: #2E8B57; background: var(--brand-primary-base, #2E8B57); }