/* Pack 16 IV Therapy components: chair board, product dots, small lists,
   meters, hour heatmap. Tokens only. Breakpoints 1279, 1023, 767 (R5). */

:root {
  /* product dot colours for the IV product mix, derived from tokens */
  --p16-k0: var(--m-iv);
  --p16-k1: var(--info);
  --p16-k2: var(--ok);
  --p16-k3: var(--primary);
  --p16-k4: var(--m-neuropathy-ink);
  --p16-k5: var(--warn);
}

.p16-period { margin: calc(-1 * var(--s2)) 0 var(--s4); align-items: center; }
.p16-period .filter { height: 34px; }
.p16-asof { font-size: 12.5px; color: var(--muted); margin-left: auto; }
@media (max-width: 767px) { .p16-period .filter { height: 40px; } .p16-asof { display: none; } }

.p16-note { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: flex-start; line-height: 1.45; }
.p16-note .icon { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; }

/* key-value rows that each open their records */
.p16-kvlist { display: grid; }
.p16-kvrow { display: flex; justify-content: space-between; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; align-items: baseline; }
.p16-kvrow:last-child { border-bottom: 0; }
a.p16-kvrow:hover { background: var(--surface-2); }
a.p16-kvrow:hover .v { color: var(--primary-ink); }
.p16-kvrow .v { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; text-align: right; }
.p16-kvrow .v small { font-weight: 500; color: var(--muted); }
@media (max-width: 1023px) { .p16-kvrow { min-height: var(--tap); align-items: center; } }

/* product name with colour dot */
.p16-prod { display: inline-flex; gap: 8px; align-items: flex-start; min-width: 0; }
.p16-prod i { width: 9px; height: 9px; border-radius: 3px; background: var(--k); margin-top: 5px; flex-shrink: 0; }
.p16-prod strong { font-weight: 600; color: var(--text); display: block; }
.p16-prod small { display: block; font-size: 12px; color: var(--muted); }

/* patient link inside tables */
.p16-who { min-width: 0; }
.p16-who strong { color: var(--text); }
a.p16-who:hover strong { color: var(--primary-ink); text-decoration: underline; }

/* meters */
.p16-meter { display: block; height: 8px; border-radius: 4px; background: var(--surface-sunk); overflow: hidden; min-width: 60px; }
.p16-meter i { display: block; height: 100%; border-radius: 4px; background: var(--m-iv); }

/* two-lens tile (R4 S04) */
.p16-lens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.p16-lens > a, .p16-lens > div { border: 1px solid var(--border); border-radius: var(--r-card); padding: 12px 14px; display: grid; gap: 4px; background: var(--surface); min-width: 0; }
.p16-lens > a:hover { border-color: var(--primary-tint-2); box-shadow: 0 0 0 3px var(--primary-tint); }
.p16-lens b { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -0.4px; }
.p16-lens span { font-size: 12.5px; color: var(--muted); }
.p16-lens .other { background: var(--surface-2); }
@media (max-width: 767px) { .p16-lens { grid-template-columns: minmax(0, 1fr); } }

/* chair board */
.p16-board { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--s3); }
.p16-chair { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); padding: 12px; display: grid; gap: 8px; align-content: start; min-height: 150px; min-width: 0; }
.p16-chair h3 { font-size: 13.5px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.p16-chair.busy { border-color: color-mix(in srgb, var(--m-iv) 45%, var(--border)); box-shadow: inset 3px 0 0 var(--m-iv); }
.p16-chair.free { background: var(--surface-2); }
.p16-chair .free-t { color: var(--muted); font-size: 12.5px; }
.p16-chair .elapsed { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
@media (max-width: 1279px) { .p16-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .p16-board { grid-template-columns: minmax(0, 1fr); } .p16-chair { min-height: 0; } }

.p16-queue { display: grid; }
.p16-qi { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.p16-qi:last-child { border-bottom: 0; }
.p16-qi .when { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.p16-qi .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 767px) { .p16-qi { grid-template-columns: 60px minmax(0, 1fr); } .p16-qi .acts { grid-column: 1 / -1; justify-content: flex-start; } }

/* hour heatmap (chair use) */
.p16-heat { display: grid; grid-template-columns: 44px repeat(11, minmax(0, 1fr)); gap: 3px; font-size: 11px; color: var(--muted); }
.p16-heat .c { height: 26px; border-radius: 5px; background: color-mix(in srgb, var(--m-iv) calc(var(--v) * 100%), var(--surface-sunk)); display: grid; place-items: center; color: var(--text); font-variant-numeric: tabular-nums; }
.p16-heat .c.hi { color: #fff; }
.p16-heat .c.na { background: var(--surface-2); color: var(--muted-2); }
.p16-heat .h { text-align: center; }
.p16-heat .d { display: flex; align-items: center; }
.p16-heat-wrap { overflow-x: auto; }
@media (max-width: 767px) { .p16-heat { min-width: 520px; } }

/* definitions inside dialogs */
.p16-def { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; gap: 8px 14px; font-size: 13.5px; margin: 0; }
.p16-def dt { color: var(--muted); }
.p16-def dd { margin: 0; color: var(--text); }
@media (max-width: 767px) { .p16-def { grid-template-columns: minmax(0, 1fr); gap: 2px; } .p16-def dd { margin-bottom: 8px; } }

/* settings rows */
.p16-setrow { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line); }
.p16-setrow:last-child { border-bottom: 0; }
.p16-setrow strong { font-size: 14px; color: var(--text); display: block; }
.p16-setrow p { margin-top: 2px; max-width: 72ch; }
.p16-setrow .ctrl { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
@media (max-width: 767px) { .p16-setrow { flex-wrap: wrap; } .p16-setrow .ctrl { width: 100%; justify-content: flex-start; } }

/* rule cards */
.p16-rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.p16-rule:last-child { border-bottom: 0; }
.p16-rule .facts { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.p16-rule .facts b { color: var(--text); font-weight: 600; }
@media (max-width: 767px) { .p16-rule { grid-template-columns: minmax(0, 1fr); } }

/* session detail header facts */
.p16-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.p16-facts > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.p16-facts .l { font-size: 11.5px; color: var(--muted); }
.p16-facts .v { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .p16-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* sticky action bar on phone forms */
@media (max-width: 767px) {
  .p16-sticky { position: sticky; bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); padding: 10px 0; display: flex; gap: 8px; z-index: 5; }
  .p16-sticky .btn { flex: 1; }
}

/* product mix rows */
.p16-mix { display: grid; gap: 2px; }
.p16-mixrow { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr) 40px 38px; gap: 10px; align-items: center; padding: 6px 4px; border-radius: 6px; font-size: 13px; }
.p16-mixrow:hover { background: var(--surface-2); }
.p16-mixrow .v { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.p16-mixrow .s { color: var(--muted); text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .p16-mixrow { min-height: var(--tap); } }
@media (max-width: 767px) { .p16-mixrow { grid-template-columns: minmax(0, 1fr) 40px 38px; } .p16-mixrow .p16-meter { grid-column: 1 / -1; order: 3; } }

/* segmented views scroll sideways inside their own strip (R5 V02 declared scroll area) */
.p16-segs { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.p16-segs::-webkit-scrollbar { display: none; }
.p16-segs .seg { flex-wrap: nowrap; }
@media (max-width: 1023px) { .p16-segs .seg a { min-height: 38px; display: inline-flex; align-items: center; } }

/* 16-03 grouped by patient: one line block per return item, aligned across columns */
.p16-fi { min-height: 2.7em; }
.p16-fi + .p16-fi { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.p16-fi.nowrap, .tbl .nowrap { white-space: nowrap; }
@media (max-width: 399px) { .p16-kvrow { flex-wrap: wrap; } .p16-kvrow .v { white-space: normal; } }