/* v8 (2026-10-31, lane ICP-B): the clinic's and the consultant's pages to the pharmacy's v8 look, drawn by next-v8-icp-b.js.
   Every rule is scoped to a page the script marks (#view .page.v8ib-on, with v8ib-today, v8ib-list, v8ib-prof and their
   modifiers) or to its compositions (.v8ib, .v8ib-cards, .v8ib-prof). The Today compositions wear next-v8-today.css's classes and
   the profile and cards next-v8-pages.css's, so the three customer types share one look; this file adds only the frame around
   them: the earlier head kept as the title row, the blocks a composition redraws clipped offscreen, and the earlier pages' own
   figures, filters, sections and tables in the v8 panel and table forms. Dark is the default; light reads the same tokens. */

/* ---------------- the blocks a composition redraws: in the page, clipped offscreen, inert ---------------- */
#view .page.v8ib-on { position: relative; }
#view .page.v8ib-on [data-v8ib-shelf] { position: absolute !important; top: 0 !important; left: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; pointer-events: none !important; opacity: 0 !important; }

/* ---------------- the count beside a title, in the title's muted tone ("Clients 4 under a grant") ---------------- */
#view .page.v8ib-on h1[data-v8ib-n]::after { content: " " attr(data-v8ib-n); color: var(--v8-t3); font-weight: inherit; }

/* =====================================================================================================================
   TODAY: the earlier head is the title row (its greeting, Explain beside it, the day's actions to the right); the composition
   follows it in next-v8-today.css's own classes
   ===================================================================================================================== */
#view .page.v8ib-today { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: end; }
#view .page.v8ib-today > * { grid-column: 1 / -1; min-width: 0; }
#view .page.v8ib-today > header.v6-hello { grid-column: 1; margin: 0 !important; min-width: 0; }
#view .page.v8ib-today > header.v6-hello h1 { font-size: 34px !important; line-height: 1.1 !important; font-weight: 400 !important; letter-spacing: -.025em !important; }
#view .page.v8ib-today > .v6-quick { grid-column: 2; justify-self: end; display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 10px !important; margin: 0 !important; padding: 0 !important; }
#view .page.v8ib-today > .v6-quick > .btn { height: 38px !important; padding: 0 12px !important; border-radius: var(--v8-r-ctl) !important; background: var(--v8-card) !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; font: 400 13px/1 var(--v8-sans) !important; color: var(--v8-t1) !important; gap: 8px !important; }
#view .page.v8ib-today > .v6-quick > .btn:hover { background: var(--v8-raised) !important; }
#view .page.v8ib-today > .v6-quick > .btn svg { width: 16px !important; height: 16px !important; color: var(--v8-t2) !important; }
#view .page.v8ib-today > .v6-quick > .btn.primary { background: var(--v8-accent) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important; font-weight: 500 !important; }
#view .page.v8ib-today > .v6-quick > .btn.primary svg { color: #fff !important; }
#view .page.v8ib-today > .v6-quick > .btn.primary:hover { background: var(--v8x-accent-h) !important; }
#view .page.v8ib-today > .v8ib { margin: 0 0 16px; }
#view .v8ib .v8ib-hello { margin: 10px 0 0 !important; }
#view .v8ib .v8ib-pad { padding: 0 20px 16px; }
/* Needs you keeps .v6-panel (the guided tour rings it), and the earlier layer's 24px padding on that class wins every cascade
   (next-v7.css, legacy layer, !important): the rows reach the panel's edges again from inside it */
#view .v8ib .v8t-needs.v6-panel > .v8t-h { padding: 0 0 12px !important; }
#view .v8ib .v8t-needs.v6-panel .v8t-tasks { margin: 0 -24px; }
#view .v8ib .v8t-needs.v6-panel .v8t-task { padding: 14px 24px; }
#view .v8ib .v8t-needs.v6-panel .v8ib-pad { padding: 0; }
#view .v8ib .v8t-needs.v6-panel > .v8t-empty { padding: 4px 0 12px; }
#view .v8ib .v8t-needs .v8ib-pad .v8t-tri { margin-top: 4px; border-bottom: 0; }
#view .v8ib .v8t-needs .v8t-tasks { flex: 1; }
#view .v8ib .v8t-needs { display: flex; flex-direction: column; }
#view .v8ib .v8t-col > .v8t-needs { align-self: start; }
#view .v8ib .v8t-g2 > .v8t-col { align-self: stretch; }
#view .v8ib .v8t-g2 > .v8t-col > .v8t-coming { flex: 1; }
#view .v8ib .v8t-g2 > .v8t-col { display: flex; flex-direction: column; gap: 16px; }
#view .v8ib .v8t-w { text-align: right; }
#view .v8ib .v8t-li .v8t-w { display: block; margin-top: 2px; text-align: left; }
#view .v8ib .v8ib-foot { margin-top: 12px; }
#view .v8ib .v8ib-note { margin: 12px 0 0 !important; font-size: 12px; line-height: 1.5; color: var(--v8-t3); }
#view .v8ib .v8t-li > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
#view .v8ib .v8t-li small { overflow-wrap: anywhere; }
#view .v8ib .v8t-lw { text-align: right; }
/* what stays below the composition: the Boxes and Clients tables, the pharmacies' questions, in the panel form */
#view .page.v8ib-today > section.v7-sec:not([data-v8ib-shelf]) { margin-top: 16px !important; }
#view .page.v8ib-today > section.card.qe-desk { margin-top: 16px !important; }

/* =====================================================================================================================
   THE LIST AND RECORD PAGES: figures in one panel, filters as the segmented control, sections as panels, tables edge to edge
   ===================================================================================================================== */
/* figures: one panel, cells divided by a hairline, the label in body grey, the figure at 28 */
#view .page.v8ib-on > :is(.v7-band, .v7d-band, .v89-strip) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 0 !important; padding: 0 !important; margin: 0 0 16px !important; border: 0 !important; border-radius: var(--v8-r-panel) !important; background: var(--v8-card) !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; overflow: hidden; }
#view .page.v8ib-on > :is(.v7-band, .v7d-band, .v89-strip) > * { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; min-width: 0 !important; padding: 18px 22px 20px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; text-align: left !important; }
#view .page.v8ib-on > :is(.v7-band, .v7d-band, .v89-strip) > * + * { box-shadow: -1px 0 0 0 var(--v8-hair) !important; }
#view .page.v8ib-on > :is(.v7-band, .v7d-band, .v89-strip) > a:hover { background: color-mix(in srgb, var(--v8-raised) 50%, var(--v8-card)) !important; }
#view .page.v8ib-on > :is(.v7-band, .v7d-band) > * > span, #view .page.v8ib-on > .v89-strip > * > .lab { order: -1; font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; color: var(--v8-t2) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#view .page.v8ib-on > :is(.v7-band, .v7d-band) > * > b, #view .page.v8ib-on > .v89-strip > * > .num { display: block !important; margin-top: 6px !important; font-size: 28px !important; line-height: 34px !important; font-weight: 500 !important; letter-spacing: -.02em !important; color: var(--v8-t1) !important; }
#view .page.v8ib-on > :is(.v7-band, .v7d-band) > * > b[data-tone="critical"], #view .page.v8ib-on > :is(.v7-band, .v7d-band) > * > b.v7-neg { color: var(--v8-neg) !important; }
#view .page.v8ib-on > .v89-strip > * > .ctx { margin-top: 6px; font: 400 12px/18px var(--v8-mono) !important; color: var(--v8-t3) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* filters: the board's segmented control (a ringed track, the chosen one raised) */
#view .page.v8ib-on .v7-chips:not(.v8ib *) { display: inline-flex !important; flex-wrap: wrap; width: fit-content; max-width: 100%; gap: 2px !important; padding: 3px !important; margin: 0 0 16px !important; border: 0 !important; border-radius: var(--v8-r-ctl) !important; background: var(--v8-card) !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; }
#view .page.v8ib-on .v7-chips:not(.v8ib *) > button { height: 30px !important; padding: 0 12px !important; border: 0 !important; border-radius: 7px !important; background: none !important; box-shadow: none !important; font: 400 13px/1 var(--v8-sans) !important; color: var(--v8-t2) !important; }
#view .page.v8ib-on .v7-chips:not(.v8ib *) > button:hover { color: var(--v8-t1) !important; }
#view .page.v8ib-on .v7-chips:not(.v8ib *) > button[aria-pressed="true"] { background: var(--v8-raised) !important; color: var(--v8-t1) !important; box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair) !important; }
#view .page.v8ib-on .v7-chips:not(.v8ib *) > button :is(.n, em, small, .v7d-n) { font: 400 12px/1 var(--v8-mono) !important; color: var(--v8-t3) !important; margin-left: 4px; }
#view .page.v8ib-on section.v7-sec .v7-chips:not(.v8ib *) { margin: 0 0 14px !important; }

/* sections: a panel (the card tone, a hairline ring, radius 16), the section head as the panel title with its meta beside it */
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec):not([data-v8ib-shelf]) { display: block; padding: 18px 22px 18px !important; margin: 0 0 16px !important; border: 0 !important; border-radius: var(--v8-r-panel) !important; background: var(--v8-card) !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; min-width: 0; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) > .v7-sec-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px !important; padding: 0 !important; min-height: 22px; border: 0 !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) > .v7-sec-h h2 { font-size: 15px !important; line-height: 22px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--v8-t1) !important; margin: 0 !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) > .v7-sec-h > :is(span, small, em):not(.v5-st):not([data-tone]):not([class*="chip"]) { font: 400 12px/1 var(--v8-mono) !important; color: var(--v8-t3) !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) > .v7-sec-h > .v5-st { font-size: 13px !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) > .v7-sec-h a { font-size: 13px !important; color: var(--v8-accent) !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) > :is(.v7-note, .v7d-quiet, p.v7d-sub) { margin: 12px 0 0 !important; font-size: 12px !important; line-height: 18px !important; color: var(--v8-t3) !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) > .v6-empty { margin: 0 !important; padding: 2px 0 0 !important; font-size: 14px !important; color: var(--v8-t3) !important; }
/* a section with nothing above its table (the list pages' own): the table starts at the panel's top edge */
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec):not(:has(> .v7-sec-h)):has(> :is(table, .tablewrap):first-child) { padding-top: 0 !important; }
/* tables: edge to edge in their panel, the first and last cells 22 in, heads in meta grey, rows 44 */
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) > table, #view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) > .tablewrap { width: calc(100% + 44px) !important; max-width: none !important; margin: 0 -22px !important; border: 0 !important; box-shadow: none !important; background: none !important; border-radius: 0 !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) > .tablewrap > table { width: 100% !important; margin: 0 !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) table :is(th, td):first-child { padding-left: 22px !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) table :is(th, td):last-child { padding-right: 22px !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) table th { font: 400 12px/18px var(--v8-mono) !important; color: var(--v8-t3) !important; border-bottom: 1px solid var(--v8-hair) !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) > .v7-sec-h + :is(table, .tablewrap) th, #view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) > .v7-chips + :is(table, .tablewrap) th { border-top: 1px solid var(--v8-hair) !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) table tbody tr:last-child td { border-bottom: 0 !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) table tbody tr:is([data-go], [tabindex], [data-r91box]):hover td { background: color-mix(in srgb, var(--v8-raised) 55%, var(--v8-card)) !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) table tbody tr[aria-selected="true"] td { background: color-mix(in srgb, var(--v8-accent) 9%, var(--v8-card)) !important; }
/* a section that only closes the table (a note under it) keeps the panel's bottom edge */
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec):has(> :is(table, .tablewrap):last-child) { padding-bottom: 0 !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec):has(> :is(table, .tablewrap):last-child) > :is(table, .tablewrap):last-child { margin-bottom: 0 !important; }
#view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) > :is(table, .tablewrap) + :is(.v7-note, .v7d-quiet, .pq-form-a) { padding-top: 12px; border-top: 1px solid var(--v8-hair-2); }

/* a section inside a wrapper (On hand's bound units, Receive's reasons): the same panel */
#view .page.v8ib-on > :is(.r92j-boundwrap, .v7d-whyhost) { margin: 0 0 16px !important; }
#view .page.v8ib-on > :is(.r92j-boundwrap, .v7d-whyhost) > section.v7-sec { margin: 0 !important; }

/* key and value lines in a section (Quality unit, Billing, the consultant record) */
#view .page.v8ib-on section.v7-sec .v7m-said { border: 0 !important; }
#view .page.v8ib-on section.v7-sec .v7m-said > .v7m-row { display: grid !important; grid-template-columns: minmax(120px, 32%) minmax(0, 1fr); gap: 12px; padding: 10px 0 !important; border-top: 1px solid var(--v8-hair-2) !important; border-bottom: 0 !important; font-size: 14px !important; line-height: 1.5 !important; }
#view .page.v8ib-on section.v7-sec .v7m-said > .v7m-row:first-child { border-top: 0 !important; padding-top: 2px !important; }
#view .page.v8ib-on section.v7-sec .v7m-said > .v7m-row > span:first-child { font: 400 12px/1.7 var(--v8-mono) !important; color: var(--v8-t3) !important; }
#view .page.v8ib-on section.v7-sec .v7m-said > .v7m-row > b { font-weight: 400 !important; color: var(--v8-t1) !important; text-align: left !important; }
#view .page.v8ib-on section.v7-sec .pq-form-a { margin-top: 14px !important; }

/* a record's two raised panels (a client, a response file, a memo; a box, a pharmacy) */
#view .page.v8ib-on > :is(.v7m-grid, .v7d-panels) { gap: 16px !important; margin: 0 0 16px !important; }
#view .page.v8ib-on > :is(.v7m-grid, .v7d-panels) > :is(.v7m-panel, .v7d-raised, form, aside) { border: 0 !important; border-radius: var(--v8-r-panel) !important; background: var(--v8-card) !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; }
#view .page.v8ib-on > .v7m-grid > .v7m-side .v7m-row, #view .page.v8ib-on > .v7m-grid > .v7m-main .v7m-row { border-color: var(--v8-hair-2) !important; }
#view .page.v8ib-on > .v7m-grid .v7m-row > span { color: var(--v8-t3) !important; }
#view .page.v8ib-on > .v7m-grid .v7m-foot { border-top: 1px solid var(--v8-hair-2) !important; }
#view .page.v8ib-on .pq-head .v7-pct, #view .page.v8ib-on > .v89-head .v7-pct { height: 22px !important; padding: 0 7px !important; border: 0 !important; border-radius: 6px !important; background: none !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; font: 400 12px/22px var(--v8-sans) !important; color: var(--v8-t2) !important; align-self: center; }
#view .page.v8ib-on .pq-ctx { font-size: 14px !important; color: var(--v8-t3) !important; }

/* the head stands clear of the first panel under it */
#view .page.v8ib-on > :is(.v89-head, .phead) + :is(.v7-band, .v7d-band, .v7m-grid, form, section, .v7-chips, .v7d-panels, [data-v8ib]) { margin-top: 20px !important; }
/* the packages form, Receive's reasons and a recall's steps: panels */
#view .page.v8ib-on > form.pq-pkgs { padding: 6px 22px 18px !important; margin: 0 0 16px !important; border: 0 !important; border-radius: var(--v8-r-panel) !important; background: var(--v8-card) !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; }
#view .page.v8ib-on > form.pq-pkgs > .pq-pkg { border: 0 !important; border-bottom: 1px solid var(--v8-hair-2) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; padding: 16px 0 !important; margin: 0 !important; }
#view .page.v8ib-on > form.pq-pkgs > .pq-form-a { margin-top: 16px !important; }
/* the page's closing line, quietly */
#view .page.v8ib-on > :is(p.v7-note, p.v7d-quiet, p.v89pf-foot) { margin-top: 4px !important; font-size: 12px !important; line-height: 18px !important; color: var(--v8-t3) !important; }
/* a pharmacy's note that it has not published its file: the profile's quiet callout */
#view .page.v8ib-prof > .v89-note { display: flex !important; gap: 12px; align-items: flex-start; padding: 14px 18px !important; margin: 0 0 16px !important; border: 0 !important; border-radius: var(--v8-r-panel) !important; background: var(--v8-card) !important; box-shadow: 0 0 0 1px var(--v8-hair) !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--v8-t2) !important; }

/* =====================================================================================================================
   THE PROFILE AND THE CARDS: next-v8-pages.css's supplier profile and supplier cards; the frame around them here
   ===================================================================================================================== */
#view .page.v8ib-on > .v8ib-cards { margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
#view .page.v8ib-on > .v8ib-cards .v8s-cards { margin-top: 0; }
#view .page.v8ib-on > .v8ib-cards > .v8ib { margin-bottom: 16px; }
/* the figures carried from the earlier strip, in the receive board's figures panel */
#view .v8ib-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 16px; border-radius: var(--v8-r-panel); background: var(--v8-card); box-shadow: 0 0 0 1px var(--v8-hair); overflow: hidden; }
#view .v8ib-figs > * { display: flex; flex-direction: column; min-width: 0; padding: 18px 22px 20px; color: inherit; text-decoration: none; }
#view .v8ib-figs > * + * { box-shadow: -1px 0 0 0 var(--v8-hair); }
#view .v8ib-figs > a:hover { background: color-mix(in srgb, var(--v8-raised) 50%, var(--v8-card)); }
#view .v8ib-figs span { font-size: 14px; line-height: 20px; color: var(--v8-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .v8ib-figs b { display: block; margin-top: 6px; font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -.02em; color: var(--v8-t1); }
#view .v8ib-figs small { margin-top: 4px; font: 400 12px/18px var(--v8-mono); color: var(--v8-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .page.v8ib-pharms > .v8ib-cards .v8s-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#view .page.v8ib-on > .v8ib-prof { margin: 0 0 16px !important; overflow: visible !important; padding: 1px !important; margin-left: -1px !important; margin-right: -1px !important; }
#view .page.v8ib-client > .v8ib-prof { margin: 6px 0 16px !important; }
#view .page.v8ib-client > .v8ib-prof .v8f-sub { margin: 0 0 16px; }
#view .page.v8ib-client > .v8ib-prof .v8f-pat { margin: 0; }
#view .v8ib-prof .v8f-pat.v8ib-pat-neg { box-shadow: 0 0 0 1px color-mix(in srgb, var(--v8-neg) 40%, transparent); }
#view .v8ib-prof .v8f-pat.v8ib-pat-quiet { box-shadow: 0 0 0 1px var(--v8-hair); }
#view .v8ib-prof .v8f-pat.v8ib-pat-quiet p { margin: 0; }
#view .v8ib-prof .v8f-pat.v8ib-pat-quiet b { display: inline; font-size: 14px; font-weight: 500; }
#view .page.v8ib-pharm > .v8ib-prof { margin-top: 4px !important; }
#view .v8ib-prof .v8f-lots td small { white-space: normal; }
#view .v8ib-prof .v8f-lots td.m a { white-space: nowrap; }
#view .v8ib-prof .v8f-lots td.m a:hover { text-decoration: underline; text-underline-offset: 3px; }
#view .page.v8ib-pharm > .v8ib-prof .v8f-sub { margin-top: 2px; }

/* the client's page: the short panels side by side */
@media (min-width: 1000px) {
  #view .page.v8ib-client { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  #view .page.v8ib-client > * { grid-column: 1 / -1; min-width: 0; }
  #view .page.v8ib-client > section.v7-sec:is([aria-label="Quality unit"], [aria-label="Suppliers"], [aria-label="Licenses"], [aria-label="Binder runs"]) { grid-column: auto; align-self: stretch; }
}

/* =====================================================================================================================
   TABLETS AND PHONES
   ===================================================================================================================== */
@media (max-width: 1180px) {
  #view .page.v8ib-today > header.v6-hello, #view .page.v8ib-today > .v6-quick { grid-column: 1 / -1; }
  #view .page.v8ib-today > .v6-quick { justify-self: start; justify-content: flex-start; margin-top: 16px !important; }
}
@media (max-width: 699px) {
  #view .page.v8ib-today { display: block !important; }
  #view .page.v8ib-today > .v6-quick { justify-self: stretch; margin-top: 16px !important; }
  #view .page.v8ib-today > header.v6-hello h1 { font-size: 28px !important; }
  #view .page.v8ib-today > .v6-quick { gap: 8px !important; }
  #view .page.v8ib-today > .v6-quick > .btn { height: 44px !important; font-size: 13px !important; padding: 0 12px !important; }
  #view .v8ib .v8ib-pad { padding: 0 16px 14px; }
  #view .v8ib .v8t-tri > * + * { padding-left: 10px; }
  #view .v8ib .v8t-tri span { white-space: normal; }
  #view .v8ib .v8t-li { grid-template-columns: 16px minmax(0, 1fr); }
  #view .v8ib .v8t-li > .v8t-lw { grid-column: 2; text-align: left; }
  #view .v8ib .v8t-li, #view .v8ib .v8t-task, #view .v8ib .v8t-cal, #view .v8ib .v8t-tri > a, #view .v8ib .v8t-stat, #view .v8ib .v8t-link { min-height: 44px; }
  #view .v8ib .v8t-obs { display: block; padding: 12px 0; margin-top: 0; line-height: 20px; }
  #view .v8ib .v8t-chart > a.v8t-l { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; }
  #view .v8ib-prof .v8f-lots td.m a { display: inline-flex; align-items: center; min-height: 44px; }
  #view .v8ib .v8t-link { display: inline-flex; align-items: center; }
  #view .page.v8ib-on > :is(.v7-band, .v7d-band, .v89-strip) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #view .page.v8ib-on > :is(.v7-band, .v7d-band, .v89-strip) > * { padding: 14px 16px 16px !important; box-shadow: none !important; }
  #view .page.v8ib-on > :is(.v7-band, .v7d-band, .v89-strip) > :nth-child(2n) { box-shadow: -1px 0 0 0 var(--v8-hair) !important; }
  #view .page.v8ib-on > :is(.v7-band, .v7d-band, .v89-strip) > :nth-child(n+3) { border-top: 1px solid var(--v8-hair) !important; }
  #view .page.v8ib-on > :is(.v7-band, .v7d-band, .v89-strip) > * > span { white-space: normal; }
  #view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec):not([data-v8ib-shelf]) { padding: 16px 16px 16px !important; }
  #view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) > table, #view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) > .tablewrap { width: calc(100% + 32px) !important; margin: 0 -16px !important; }
  #view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) table :is(th, td):first-child { padding-left: 16px !important; }
  #view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) table :is(th, td):last-child { padding-right: 16px !important; }
  #view .page.v8ib-on section.v7-sec .v7m-said > .v7m-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  #view .page.v8ib-on .v7-chips:not(.v8ib *) > button { height: 44px !important; }
  #view .page.v8ib-pharms > .v8ib-cards .v8s-cards { grid-template-columns: minmax(0, 1fr); }
  #view .v8ib-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view .v8ib-figs > * { padding: 14px 16px 16px; box-shadow: none; }
  #view .v8ib-figs > :nth-child(2n) { box-shadow: -1px 0 0 0 var(--v8-hair); }
  #view .v8ib-figs > :nth-child(n+3) { border-top: 1px solid var(--v8-hair); }
  #view .v8ib-figs span { white-space: normal; }
  #view .page.v8ib-on > form.pq-pkgs { padding: 4px 16px 16px !important; }
}

/* =====================================================================================================================
   ROUND 2: every sub-page at Today's depth. The parts below are this lane's own (.v8ib-*), drawn in Today's and the supplier
   profile's classes where those fit, so the clinic's and the consultant's pages read as the pharmacy's do
   ===================================================================================================================== */
#view .page.v8ib-r2 > .v8ib + .v8ib, #view .page.v8ib-r2 > .v8ib-r2figs { margin-bottom: 16px; }
#view .page.v8ib-r2 > .v8ib .v8t-stats { margin-top: 0; }
#view .page.v8ib-r2 > .v8ib > .v8t-g2:first-child, #view .page.v8ib-r2 > .v8ib > .v8t-g3:first-child { margin-top: 0; }
#view .page.v8ib-r2 > .v8ib { margin-bottom: 16px; }
#view .v8ib .v8t-g2 + .v8t-g2 { margin-top: 16px; }
#view .v8ib > :is(.v8t-g2, .v8t-g3, .v8t-panel) + :is(.v8t-panel, .v8t-g2, .v8t-g3) { margin-top: 16px; }
#view .v8ib .v8ib-g2r { align-items: start; }
#view .v8ib .v8ib-vis { min-width: 0; }

/* a status: a stroked icon and the word, in its colour, with its note under it */
#view .v8ib-st { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.35; color: var(--v8-t1); min-width: 0; }
#view .v8ib-st > svg { margin-top: 1px; width: 16px; height: 16px; }
#view .v8ib-st > span { min-width: 0; }
#view .v8ib-st.neg > span { color: var(--v8-neg); } #view .v8ib-st.warn > span { color: var(--v8-warn); } #view .v8ib-st.pos > span { color: var(--v8-pos); } #view .v8ib-st.s3 > span { color: var(--v8-s3); } #view .v8ib-st.mute > span { color: var(--v8-t2); }
#view .v8ib-st small { display: block; margin-top: 3px; font: 400 12px/1.35 var(--v8-mono); color: var(--v8-t3); }
#view .v8ib-st .v8ti.s3 { color: var(--v8-s3); }
/* who: a coloured avatar, the name, its line */
#view .v8ib-who { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: var(--v8-t1); }
#view .v8ib-who > span { min-width: 0; }
#view .v8ib-who b { display: block; font-weight: 500; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
#view .v8ib-who small { display: block; margin-top: 2px; font: 400 12px/1.35 var(--v8-mono); color: var(--v8-t3); }
#view a.v8ib-who:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v8-hair); }
#view .v8ib-av { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--c); color: #0b0d12; font: 600 12px/1 var(--v8-sans); font-style: normal; }
#view .v8ib-av.sm { width: 16px; height: 16px; border-radius: 5px; font-size: 0; }
#view .v8ib-dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--c); margin-right: 8px; vertical-align: 1px; }
#view .v8ib-two { display: block; min-width: 0; }
#view .v8ib-two b { display: block; font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--v8-t1); overflow-wrap: anywhere; }
#view .v8ib-two small { display: block; margin-top: 3px; font: 400 12px/1.35 var(--v8-mono); color: var(--v8-t3); overflow-wrap: anywhere; }
#view .v8ib-mono { font: 400 13px/1.4 var(--v8-mono); color: var(--v8-t1); }
#view .v8ib-dt { display: block; font-size: 14px; color: var(--v8-t1); white-space: nowrap; }
#view .v8ib-dt small { display: block; margin-top: 3px; font: 400 12px/1.35 var(--v8-mono); color: var(--v8-t3); }
#view .v8ib-dt.warn { color: var(--v8-warn); } #view .v8ib-dt.neg { color: var(--v8-neg); }
#view .v8ib-nx { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 9px; background: var(--v8-raised); box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair); font: 400 12px/1 var(--v8-sans); color: var(--v8-t1) !important; white-space: nowrap; }
#view button.v8ib-nx { border: 0; cursor: pointer; }
#view :is(a, button).v8ib-nx:hover { background: color-mix(in srgb, var(--v8-raised) 70%, var(--v8-t1) 6%); }
#view span.v8ib-nx { background: none; box-shadow: none; color: var(--v8-t2) !important; padding: 0; }
#view .v8ib-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
#view .v8ib-acts .btn { height: 32px !important; padding: 0 12px !important; font-size: 12px !important; border-radius: 9px !important; }
#view .v8ib-cells { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; }
#view .v8ib-cells i { width: 6px; height: 14px; border-radius: 3px; background: var(--v8-raised); box-shadow: inset 0 0 0 1px var(--v8-hair); }
#view .v8ib-cells i.pos { background: var(--v8-pos); box-shadow: none; } #view .v8ib-cells i.neg { background: var(--v8-neg); box-shadow: none; } #view .v8ib-cells i.warn { background: var(--v8-warn); box-shadow: none; }
#view .v8ib-quote { margin: 12px 0 0 !important; padding: 12px 14px; border-radius: 10px; background: var(--v8-raised); box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair); font-size: 14px; line-height: 1.55; color: var(--v8-t1); }
/* a real empty state */
#view .v8ib-empty { display: grid; justify-items: start; gap: 6px; padding: 22px 4px 8px; }
#view .v8ib-empty > svg { width: 20px; height: 20px; }
#view .v8ib-empty b { font-size: 15px; font-weight: 500; color: var(--v8-t1); }
#view .v8ib-empty p { margin: 0 !important; max-width: 62ch; font-size: 14px; line-height: 1.55; color: var(--v8-t2); }
#view .v8ib-empty .v8ib-acts { margin-top: 8px; justify-content: flex-start; }
#view .v8ib-emptyp .v8t-tri { margin-top: 18px; }

/* the rows: a panel whose table runs edge to edge, rows 56 tall, grouped where the data groups */
#view .v8ib-dock { padding: 0 0 4px; }
#view .v8ib-dock > .v8ib-ph { padding: 18px 22px 14px; flex-wrap: wrap; row-gap: 10px; }
#view .v8ib-dock > .v8ib-ph .v8t-hr { margin-left: auto; }
#view .v8ib-dock > .v8ib-ph .v7-chips { margin: 0 !important; }
#view .v8ib-dock > .v8ib-note { padding: 0 22px 14px; }
#view .v8ib-dock > .v8ib-empty { padding: 4px 22px 18px; }
#view .v8ib-rtw { width: 100%; overflow-x: auto; }
#view .v8ib-rt { width: 100%; border-collapse: collapse; table-layout: fixed; }
#view .v8ib-rt th { height: 36px; padding: 0 12px; text-align: left; font: 400 12px/1 var(--v8-mono); color: var(--v8-t3); border-top: 1px solid var(--v8-hair); border-bottom: 1px solid var(--v8-hair); background: none; white-space: nowrap; }
#view .v8ib-rt td { padding: 12px; height: 60px; vertical-align: middle; border-bottom: 1px solid var(--v8-hair-2); font-size: 14px; color: var(--v8-t2); min-width: 0; overflow-wrap: anywhere; }
#view .v8ib-rt :is(th, td):first-child { padding-left: 22px; }
#view .v8ib-rt :is(th, td):last-child { padding-right: 22px; }
/* the legacy layer zeroes every table's outer cells with !important (next-v7.css); the cell's own content keeps the 22 instead */
#view .v8ib-rt th > span { display: inline-block; }
#view .v8ib-rt :is(th, td):first-child > :is(span, .v8ib-c) { margin-left: 22px; }
#view .v8ib-rt :is(th, td):last-child > :is(span, .v8ib-c) { margin-right: 22px; }
#view .v8ib-rt .v8ib-c { min-width: 0; }
#view .v8ib-rt :is(th, td).r { text-align: right; }
#view .v8ib-rt tbody tr:last-child td { border-bottom: 0; }
#view .v8ib-rt tbody tr:not(.v8ib-rtg) { transition: background-color .15s var(--v8-ease); }
#view .v8ib-rt tbody tr:not(.v8ib-rtg):hover td { background: color-mix(in srgb, var(--v8-raised) 45%, transparent); }
#view .v8ib-rt tbody tr[data-r91box] { cursor: pointer; }
#view .v8ib-rt tbody tr[aria-selected="true"] td { background: color-mix(in srgb, var(--v8-accent) 9%, var(--v8-card)); }
#view .v8ib-rt tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 2px 0 0 var(--v8-accent); }
#view .v8ib-rtg td { height: 34px; padding-top: 0; padding-bottom: 0; background: color-mix(in srgb, var(--v8-deep) 55%, var(--v8-card)); border-bottom: 1px solid var(--v8-hair-2); }
#view .v8ib-rtg span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--v8-t1); }
#view .v8ib-rtg i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
#view .v8ib-rtg em { font: normal 400 12px var(--v8-mono); color: var(--v8-t3); }

/* the timeline: each row a bar and its dated marks on one axis, today drawn through every row */
#view .v8ib-tl { margin-top: 14px; }
#view .v8ib-tlr { display: grid; grid-template-columns: minmax(140px, 230px) minmax(0, 1fr); column-gap: 16px; align-items: center; min-height: 48px; border-top: 1px solid var(--v8-hair-2); }
#view .v8ib-tla { min-height: 26px; border-top: 0; }
#view .v8ib-tln { display: flex; align-items: center; min-width: 0; padding: 8px 0; color: var(--v8-t1); }
#view .v8ib-tln > span { min-width: 0; }
#view .v8ib-tln b { display: block; font-weight: 400; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .v8ib-tln small { display: block; margin-top: 2px; font: 400 12px/1.3 var(--v8-mono); color: var(--v8-t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view a.v8ib-tln:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v8-hair); }
#view .v8ib-tlt { position: relative; height: 48px; min-width: 0; }
#view .v8ib-tla .v8ib-tlt { height: 26px; }
#view .v8ib-tla em { position: absolute; top: 6px; transform: translateX(-50%); font: normal 400 12px/1 var(--v8-mono); color: var(--v8-t3); white-space: nowrap; }
#view .v8ib-tla em.l { transform: none; } #view .v8ib-tla em.r { transform: translateX(-100%); }
#view .v8ib-tla em.now { color: var(--v8-t1); top: 6px; }
#view .v8ib-tla em.now.r { transform: translateX(-100%); }
#view .v8ib-tlnow { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--v8-t1) 35%, transparent); }
#view .v8ib-tlb { position: absolute; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: color-mix(in srgb, var(--c) 55%, transparent); }
#view .v8ib-tlb.soft { background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
#view .v8ib-tlm { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--v8-card); box-shadow: 0 0 0 2px var(--v8-t3); }
#view .v8ib-tlm.s3 { box-shadow: 0 0 0 2px var(--v8-s3); } #view .v8ib-tlm.pos { background: var(--v8-pos); box-shadow: 0 0 0 2px var(--v8-card); } #view .v8ib-tlm.neg { background: var(--v8-neg); box-shadow: 0 0 0 2px var(--v8-card); } #view .v8ib-tlm.warn { box-shadow: 0 0 0 2px var(--v8-warn); }
#view .v8ib-tlx { position: absolute; bottom: 2px; transform: translateX(-50%); font: 400 12px/1 var(--v8-mono); color: var(--v8-t3); white-space: nowrap; }
#view .v8ib-tlx.r { transform: translateX(-100%); }
#view .v8ib-tlk { margin-top: 12px; }
#view .v8ib-tlk .v8ib-tlm { position: static; display: inline-block; margin: 0; width: 9px; height: 9px; }
#view .v8ib-tlk-now { width: 1px !important; height: 12px !important; border-radius: 0 !important; background: color-mix(in srgb, var(--v8-t1) 35%, transparent) !important; }
/* a flow of counts: Today's readiness bars */
#view .v8ib-fun { margin-top: 18px; height: auto !important; min-height: 96px; }
#view .v8ib-fun span { white-space: normal !important; line-height: 1.25; font-family: var(--v8-sans) !important; overflow: visible !important; }

/* the profile (a pharmacy, a client): the supplier profile's own head and panels, in a wrapper of this lane's */
#view .page.v8ib-on > .v8ib-pw { margin: 0 0 16px; }
#view .v8ib-pw > .v8t { margin-top: 16px; }
#view .v8ib-pw .v8pro-body { margin-top: 16px; }
#view .v8ib-pw .v8pro-state .v8ib-st { font-size: 14px; }
#view .v8ib-pw .v8pro-state .v8ib-st small { display: inline; margin: 0 0 0 8px; }
#view .v8ib-pw .v8pro-acts.v7m-acts { margin: 0 !important; padding: 0 0 2px !important; border: 0 !important; }
#view .v8ib-pw .v8pro-sp b { display: flex; align-items: center; }
#view .v8ib-pw button.v8pro-att, #view .v8ib-pw button.v8pro-ev { width: 100%; }
#view .v8ib-pw .v8pro-sup time { white-space: nowrap; }
/* a client's tabs: Overview keeps every section the page draws; each other tab keeps only its own */
#view .page.v8ib-client2 { display: block !important; }
#view .page.v8ib-client2:not(.v8ib-ct-overview) > section.v7-sec { display: none !important; }
#view .page.v8ib-ct-work > section.v7-sec:is([aria-label="Response files"], [aria-label="Requests"], [aria-label="Monitoring"], [aria-label="Binder runs"]),
#view .page.v8ib-ct-documents > section.v7-sec:is([aria-label="Prepared and adopted"], [aria-label="Quarterly report"]),
#view .page.v8ib-ct-dates > section.v7-sec:is([aria-label="Deadlines"], [aria-label="Quality events open"], [aria-label="Licenses"]),
#view .page.v8ib-ct-activity > section.v7-sec:is([aria-label="Activity"]),
#view .page.v8ib-ct-record > section.v7-sec:is([aria-label="Quality unit"], [aria-label="Suppliers"], [aria-label="Billing"], [aria-label="The 21 CFR 211.34 record"], [aria-label="Public records read"]) { display: block !important; }
@media (min-width: 1000px) {
  #view .page.v8ib-client2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  #view .page.v8ib-client2 > * { grid-column: 1 / -1; min-width: 0; }
  #view .page.v8ib-client2.v8ib-ct-overview > section.v7-sec:is([aria-label="Quality unit"], [aria-label="Suppliers"], [aria-label="Licenses"], [aria-label="Binder runs"]),
  #view .page.v8ib-client2.v8ib-ct-record > section.v7-sec:is([aria-label="Quality unit"], [aria-label="Suppliers"]) { grid-column: auto; align-self: stretch; }
}

@media (max-width: 1180px) {
  #view .v8ib-tlr { grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); }
}
@media (max-width: 699px) {
  #view .v8ib-tlr { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  #view .v8ib-tla > .v8ib-tln { display: none; }
  #view .v8ib-tln { padding: 10px 0 0; }
  #view .v8ib-tlt { height: 36px; }
  #view .v8ib-tla em:not(.l):not(.r):not(.now) { display: none; }
  #view .v8ib-dock > .v8ib-ph { padding: 16px 16px 12px; }
  #view .v8ib-dock > .v8ib-note { padding: 0 16px 12px; }
  #view .v8ib-rt, #view .v8ib-rt tbody, #view .v8ib-rt tr, #view .v8ib-rt td { display: block; width: 100% !important; }
  #view .v8ib-rt colgroup, #view .v8ib-rt thead { display: none; }
  #view .v8ib-rt tbody tr:not(.v8ib-rtg) { padding: 12px 16px; border-bottom: 1px solid var(--v8-hair-2); }
  #view .v8ib-rt td { height: auto; padding: 4px 0 !important; border: 0; text-align: left !important; }
  #view .v8ib-rt td:first-child { padding-bottom: 8px !important; }
  #view .v8ib-rtg td { padding: 0 16px !important; display: flex; align-items: center; height: 34px; }
  #view .v8ib-rt td.r { padding-top: 8px !important; }
  #view .v8ib-nx { height: 44px; padding: 0 14px; }
  #view span.v8ib-nx { height: auto; }
  #view .v8ib-acts .btn { height: 44px !important; }
  #view .v8ib-pw .v8pro-state .v8ib-st small { display: block; margin: 3px 0 0; }
}
@media (max-width: 699px) {
  /* a profile's tabs wrap onto a second line rather than run off the page */
  #view .v8ib-pw .v8pro-tabs { flex-wrap: wrap; justify-content: flex-start; row-gap: 0; }
  #view .v8ib-pw .v8pro-tab { flex: none; }
  /* an earlier section's table: its heads wrap, and a table still wider than the phone scrolls inside its own panel */
  #view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec) table th { white-space: normal !important; }
  #view .page.v8ib-on section.v7-sec:not(.v7-sec .v7-sec):not([data-v8ib-shelf]) { overflow-x: auto; }
}
@media (max-width: 699px) {
  #view .v8ib-tlx { display: none; }
  #view .v8ib-tla .v8ib-tlt:has(em.now) em.r { display: none; }
}
@media (max-width: 699px) {
  #view .v8ib .v8ib-ph .v7-chips > button { height: 44px !important; }
  #view a.v8ib-who { min-height: 44px; }
}