/* ===== ca_manage_acute_drugs_modal_html (HTML form, scoped) =====
The Manage Acute Drugs pop-up. One declaration on .pa-drugs-body (marked
below) stands in for an inline style=, which a template may not carry.
Loaded eagerly from anvil.yaml native_deps.head_html.
SCOPE IS #pa-drugs-overlay, NOT the form root. pxShowOverlay PORTALS
#pa-drugs-overlay into #px-modal-portal on every open, so a rule scoped on
.pa-drugs-wrapper would stop matching the moment the pop-up opened. Same
call the analytics acutes-items modal makes and the same answer.
:where() adds zero specificity, so :where(#pa-drugs-overlay) .pa-drugs-body
weighs exactly what the bare .pa-drugs-body it replaces did.
The two #pa-drugs-overlay .px-modal rules already name the overlay and are
left byte-identical: re-scoping them would be a second copy of the same
ancestor. At (1,1,0) they beat the dependency's own .px-modal (0,1,0) on
specificity rather than on document order, which is what makes them safe in
a head link that loads BEFORE the dependency injects its theme at startup.
DOUBLED CLASSES, and why. As a head link these rules load before the
dependency's runtime-injected theme, so they lose every tie on document
order. Three selectors tied and are doubled so they win on specificity
instead, with no markup change - the table always carries px-table
(_render_drugs_table) and the forms button always carries px-btn:
.pa-drugs-table ties theme.css .px-table -> .pa-drugs-table.px-table
.pa-drugs-table th/td ties theme.css .px-table th/td -> .pa-drugs-table.px-table th/td
.pa-drugs-forms-btn ties the dependency .px-btn -> .pa-drugs-forms-btn.px-btn
The th:nth-child / td:nth-child rules already carry a pseudo-class and so
already outweigh .px-table th; they are left alone. .pa-drugs-search
.px-input and .pa-drugs-slide-footer .px-btn are two-class selectors and
already outweigh the one-class shared rules they meet.
NO DESIGNER GATE, and nothing to gate on. The only rule that hides this
form's content is the DEPENDENCY's .px-modal-overlay { opacity: 0 },
injected by Python at runtime; the designer runs no Python, so this canvas
is drag-only today and stays drag-only. There is no live class here.
No url(), no @font-face, no @keyframes, no html rule and no :root block in
this form: nothing to rewrite. .themed-scrollbar stays the dependency's and
is not declared here. */
/* fullscreen dialog sizing */
#pa-drugs-overlay .px-modal {
width: 93vw;
max-height: 90vh;
}
/* body - holds table + slide panel. */
:where(#pa-drugs-overlay) .pa-drugs-body {
flex: 1;
min-height: 0;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0;
}
/* ===== Drug Search Bar ===== */
:where(#pa-drugs-overlay) .pa-drugs-search {
display: flex;
gap: 8px;
padding: 16px 24px;
border-bottom: 1px solid var(--px-border);
align-items: center;
flex-shrink: 0;
}
:where(#pa-drugs-overlay) .pa-drugs-search .px-input { max-width: 300px; }
/* ===== Drug Table ===== */
:where(#pa-drugs-overlay) .pa-drugs-table-wrap {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
:where(#pa-drugs-overlay) .pa-drugs-table.px-table {
font-size: 13px;
width: 100%;
table-layout: auto;
}
:where(#pa-drugs-overlay) .pa-drugs-table.px-table th {
position: sticky;
top: 0;
z-index: 1;
background: var(--px-bg-card);
font-size: 11px;
}
:where(#pa-drugs-overlay) .pa-drugs-table th:nth-child(1),
:where(#pa-drugs-overlay) .pa-drugs-table td:nth-child(1),
:where(#pa-drugs-overlay) .pa-drugs-table th:nth-child(3),
:where(#pa-drugs-overlay) .pa-drugs-table td:nth-child(3),
:where(#pa-drugs-overlay) .pa-drugs-table th:nth-child(4),
:where(#pa-drugs-overlay) .pa-drugs-table td:nth-child(4) { white-space: nowrap; }
:where(#pa-drugs-overlay) .pa-drugs-table th:nth-child(2),
:where(#pa-drugs-overlay) .pa-drugs-table td:nth-child(2) { width: 100%; max-width: 0; }
:where(#pa-drugs-overlay) .pa-drugs-table.px-table td {
vertical-align: middle;
}
:where(#pa-drugs-overlay) .pa-drugs-forms-btn.px-btn {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
/* ===== Slide Panel ===== */
:where(#pa-drugs-overlay) .pa-drugs-slide-panel {
position: absolute;
top: 0; right: 0; bottom: 0;
width: 340px;
background: var(--px-bg-card);
border-left: 1px solid var(--px-border);
box-shadow: -4px 0 20px rgba(0,0,0,0.15);
transform: translateX(100%);
transition: transform 0.25s ease;
display: flex;
flex-direction: column;
z-index: 2;
}
:where(#pa-drugs-overlay) .pa-drugs-slide-panel.pa-active { transform: translateX(0); }
:where(#pa-drugs-overlay) .pa-drugs-slide-header {
padding: 16px 20px;
border-bottom: 1px solid var(--px-border);
display: flex;
align-items: center;
justify-content: space-between;
}
:where(#pa-drugs-overlay) .pa-drugs-slide-title {
font-weight: 700;
font-size: 15px;
}
:where(#pa-drugs-overlay) .pa-drugs-slide-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
}
:where(#pa-drugs-overlay) .pa-drugs-slide-footer {
padding: 12px 20px;
border-top: 1px solid var(--px-border);
display: flex;
gap: 8px;
}
:where(#pa-drugs-overlay) .pa-drugs-form-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid var(--px-border);
}
:where(#pa-drugs-overlay) .pa-drugs-form-row:last-child { border-bottom: none; }
:where(#pa-drugs-overlay) .pa-drugs-form-name { flex: 1; font-size: 13px; font-weight: 600; }
/* ===== Responsive ===== */
@media (max-width: 600px) {
#pa-drugs-overlay .px-modal { width: 100vw; border-radius: 0; max-height: 100vh; }
:where(#pa-drugs-overlay) .pa-drugs-search {
flex-direction: column;
align-items: stretch;
}
:where(#pa-drugs-overlay) .pa-drugs-search .px-input { max-width: 100%; }
:where(#pa-drugs-overlay) .pa-drugs-table.px-table th,
:where(#pa-drugs-overlay) .pa-drugs-table.px-table td { padding: 8px; font-size: 12px; }
:where(#pa-drugs-overlay) .pa-drugs-slide-panel { width: 100%; }
:where(#pa-drugs-overlay) .pa-drugs-slide-footer .px-btn {
flex: 1;
justify-content: center;
min-height: 44px;
}
}