/* pmr_table_html — the care-home summary table's own rules.
*
* The form root is .pmr-table-section, so that rule stays BARE: the root is its
* subject and a :where(.pmr-table-section) wrapper in front of it would never
* match. Every other rule is scoped :where(.pmr-table-section), which adds no
* specificity.
*
* SEVEN RULES ARE DOUBLED with the shared class they sit beside, because a head
* link loses every specificity TIE with theme/assets/theme.css. Six of the seven
* tie with theme.css. The seventh, the media-block even-row rule, ties with this
* file's OWN non-media twin and is doubled with it, or the media query would
* stop overriding it and every even mobile card would flip from --px-bg-card to
* --px-bg-elevated.
*
* Rules deliberately LEFT bare, so nobody "fixes" them into a change:
* .pmr-table-num and the two date-colour classes are (0,1,0) against theme.css's
* .px-table td at (0,1,1), so on mobile their text-align comes from the theme;
* .pmr-table td:last-child and its ::before lose to theme.css's :has() rules,
* which declare the same values; and the media block's
* .pmr-table thead / .pmr-table / .pmr-table tbody declare the same display
* values as their shared twins.
*
* The only hiding rule here is .pmr-table-row { opacity: 0 }, and those rows
* exist only when pmr_table.mjs builds them, so the canvas hides nothing.
*/
/* ========================================
TABLE SECTION
======================================== */
.pmr-table-section {
width: 100%;
}
:where(.pmr-table-section) .pmr-table-title {
font-family: var(--px-font);
font-size: 1.25rem;
font-weight: 700;
color: var(--px-text-primary);
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 0 20px 0;
padding: 0;
}
:where(.pmr-table-section) .pmr-table-title::before {
content: '';
width: 4px;
height: 24px;
background: var(--accent);
border-radius: 2px;
}
/* ========================================
TABLE WRAPPER
======================================== */
:where(.pmr-table-section) .pmr-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
:where(.pmr-table-section) #pmr-table-container {
border-radius: var(--px-radius);
overflow: hidden;
box-shadow: var(--px-shadow-md);
}
/* ========================================
TABLE - EXTENDS px-table WITH SORTING
auto-g02 (RF-AD-005): the three sort-affordance rules that were
repeated here verbatim are deleted. The table element carries
`px-table` alongside `pmr-table`, so the shared theme rules match
it with the same declarations at the same specificity - the
repeats changed nothing on screen and were a second place to edit.
Only the two DIRECTION rules below stay: they are keyed on this
form's own `pmr-sort-asc`/`pmr-sort-desc` classes and have no
shared twin (the dead `.px-sort-asc`/`.px-sort-desc` pair in
theme.css, which had no consumer anywhere, went with them).
======================================== */
:where(.pmr-table-section) .pmr-table.pmr-sort-asc th[data-sort-active]::after {
content: '\25B2';
}
:where(.pmr-table-section) .pmr-table.pmr-sort-desc th[data-sort-active]::after {
content: '\25BC';
}
/* Doubled with .px-table: a single class ties with theme.css's .px-table
tbody tr transition and loses on document order, and the hover lift stops
animating. */
:where(.pmr-table-section) .pmr-table.px-table tbody tr {
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
background 0.15s ease;
}
/* Doubled with .px-table: ties with theme.css's .px-table tbody tr:hover
background. Unfixed, an even row changes colour on hover where today it does
not. */
:where(.pmr-table-section) .pmr-table.px-table tbody tr:nth-child(even) {
background: var(--px-bg-elevated);
}
:where(.pmr-table-section) .pmr-table tbody tr:hover {
transform: translateY(-1px);
box-shadow: var(--px-shadow);
z-index: 1;
position: relative;
}
:where(.pmr-table-section) .pmr-table-num {
text-align: center;
font-family: var(--px-mono);
font-size: 13px;
font-weight: 700;
color: var(--px-text-secondary);
}
/* ========================================
DATE COLOUR CLASSES
======================================== */
:where(.pmr-table-section) .pmr-date-overdue { color: var(--pmr-error, #dc2626); font-weight: 600; }
:where(.pmr-table-section) .pmr-date-today { color: var(--pmr-warning, #d97706); font-weight: 600; }
/* DEACTIVATED HOME BADGE: the shared .px-badge.is-deactivated
(theme.css), also rendered by the Current Cycle home picker. This
screen FLAGS deactivated homes and never filters them - their
pending prescriptions still have to be PMR'd. */
/* Doubled with .px-table: ties with theme.css's .px-table th { text-align:
left }. Unfixed, every header goes left. */
:where(.pmr-table-section) .pmr-table.px-table th {
text-align: center;
}
/* Doubled with .px-checkbox-wrap: ties with theme.css's
.px-checkbox-wrap { font-size: 13px }. */
:where(.pmr-table-section) .px-checkbox-wrap.pmr-exclude-specials-wrap {
margin-left: auto;
font-size: 12px;
font-weight: 400;
}
/* ========================================
STAGGERED ROW REVEAL
======================================== */
@keyframes pmrRowReveal {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
:where(.pmr-table-section) .pmr-table-row {
opacity: 0;
animation: pmrRowReveal 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* ========================================
RESPONSIVE - CARD LAYOUT ON MOBILE
======================================== */
@media (max-width: 768px) {
:where(.pmr-table-section) .pmr-table-title {
font-size: 1.1rem;
}
:where(.pmr-table-section) .pmr-table thead {
display: none;
}
:where(.pmr-table-section) .pmr-table,
:where(.pmr-table-section) .pmr-table tbody {
display: block;
}
:where(.pmr-table-section) .pmr-table tbody tr {
display: block;
background: var(--px-bg-card);
border: 1px solid var(--px-border);
border-radius: var(--px-radius-sm);
padding: 14px 16px;
margin-bottom: 10px;
box-shadow: var(--px-shadow);
}
/* Doubled with .px-table for the SAME reason as its non-media twin above,
and in the same commit: this copy exists only to override that twin's
--px-bg-elevated with --px-bg-card, it wins today because both are (0,2,2)
and it comes later, and a media query adds no specificity. Doubling one
without the other flips every even mobile card to --px-bg-elevated. */
:where(.pmr-table-section) .pmr-table.px-table tbody tr:nth-child(even) {
background: var(--px-bg-card);
}
:where(.pmr-table-section) .pmr-table tbody tr:hover {
transform: none;
box-shadow: var(--px-shadow-md);
}
/* Doubled with .px-table: ties with theme.css's .px-table td, which is
grouped under display: block; width: 100% at (0,1,1) and carries
padding: 4px 0; border: none; text-align: left. Unfixed, the mobile card
rows stop being flex rows. */
:where(.pmr-table-section) .pmr-table.px-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
font-size: 13px;
border-bottom: none;
}
/* Doubled with .px-table: ties with theme.css's .px-table td::before
font-size and display: block. */
:where(.pmr-table-section) .pmr-table.px-table td::before {
content: attr(data-label);
font-family: var(--px-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--px-text-muted);
flex-shrink: 0;
margin-right: 12px;
}
:where(.pmr-table-section) .pmr-table td:last-child {
justify-content: flex-end;
padding-top: 10px;
margin-top: 4px;
border-top: 1px solid var(--px-border-subtle);
}
:where(.pmr-table-section) .pmr-table td:last-child::before {
display: none;
}
:where(.pmr-table-section) .pmr-table-num {
text-align: right;
}
:where(.pmr-table-section) #pmr-table-container {
box-shadow: none;
border-radius: 0;
}
}