/* Workspace design tokens and shell containment.
   ------------------------------------------------------------------
   The single source for the pharmacy workspace's palette, type scale,
   spacing, radii, shadows and motion, plus the sizing rules that keep the
   page inside the viewport. Global rather than scoped because the dashboard,
   the transactions panel, the shell and every drawer must agree; three
   hand-maintained copies drift.

   Colour rules that matter clinically (section 11.3 of the design spec):
   red is reserved for errors, destructive actions and immediate safety
   states; green for positive or verified state; orange for cost, warning and
   attention; brown for caution or methodology. Status is never carried by
   colour alone -- every badge pairs its colour with a text label. */

:root {
    /* Core palette */
    --wk-navy-950: #07182c;
    --wk-navy-900: #0b2f52;
    --wk-navy-800: #123b64;
    --wk-blue-700: #1d5fc4;
    --wk-blue-600: #2563eb;
    --wk-blue-100: #eaf2ff;
    --wk-teal-700: #137a49;
    --wk-teal-600: #168552;
    --wk-teal-100: #eaf8f0;
    --wk-green-700: #137a49;
    --wk-green-600: #168552;
    --wk-green-100: #eaf8f0;
    --wk-orange-700: #9a5a08;
    --wk-orange-600: #d97706;
    --wk-orange-100: #fff5e6;
    --wk-brown-700: #704523;
    --wk-brown-600: #8a5a32;
    --wk-brown-100: #f7efe8;
    --wk-red-700: #a33b46;
    --wk-red-600: #c43d4d;
    --wk-red-100: #fdeef0;
    --wk-purple-600: #c7875a;
    --wk-purple-100: #f3eeff;

    /* Neutrals */
    --wk-ink: #142238;
    --wk-muted: #64748b;
    --wk-subtle: #7a8ba0;
    --wk-line-strong: #cbd7e4;
    --wk-line: #dce5ef;
    --wk-line-soft: #e9eef4;
    --wk-surface: #ffffff;
    --wk-surface-subtle: #f8fafc;
    --wk-canvas: #f4f7fb;

    /* Spacing scale */
    --wk-1: 4px;
    --wk-2: 8px;
    --wk-3: 12px;
    --wk-4: 16px;
    --wk-5: 20px;
    --wk-6: 24px;
    --wk-8: 32px;
    --wk-10: 40px;
    --wk-12: 48px;
    --wk-16: 64px;

    /* Radii */
    --wk-r-card: 16px;
    --wk-r-sheet: 20px;
    --wk-r-toolbar: 12px;
    --wk-r-action: 12px;
    --wk-r-control: 10px;
    --wk-r-icon: 10px;
    --wk-r-pill: 999px;

    /* Shadows */
    --wk-shadow-card: 0 8px 24px rgba(15, 23, 42, .06);
    --wk-shadow-raised: 0 14px 36px rgba(15, 23, 42, .10);
    --wk-shadow-drawer: -12px 0 36px rgba(7, 24, 44, .20);
    --wk-shadow-bottom-nav: 0 -8px 24px rgba(15, 23, 42, .06);

    /* Motion */
    --wk-motion-colour: 120ms ease-out;
    --wk-motion-move: 150ms ease-out;
    --wk-motion-drawer: 180ms cubic-bezier(.2, .8, .2, 1);
    --wk-motion-expand: 180ms ease-out;

    /* Layout */
    --wk-content-max: 1600px;
    --wk-transactions-max: 1120px;
    --wk-aside-width: 320px;
    --wk-bottom-nav-height: 64px;

    --wk-font: var(--app-font, Inter), ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------------------
   Containment (section 6).

   The dashboard used to impose a ~1,700px intrinsic minimum, so every phone
   scrolled the whole document sideways. The fix is at the source -- shrinkable
   ancestors and grid children -- never `overflow-x: hidden` on html/body,
   which would hide clipped content instead of fixing it.
   --------------------------------------------------------------------------- */

.platform-workspace,
.workspace-content,
.wd-page,
.tx-page,
.workspace-grid,
.transactions-column {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Flex and grid children collapse to their content's intrinsic width unless
   told otherwise; a long drug name or patient address is enough to widen the
   whole page without this. */
.wd-page *,
.tx-page * {
    min-width: 0;
}

.wd-page img,
.wd-page svg,
.tx-page img,
.tx-page svg {
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Controls (section 12). One height per control class, 44px targets, and a
   single focus ring so keyboard users see the same affordance everywhere.
   --------------------------------------------------------------------------- */

/* Interactive elements only. Blazor moves focus to the page heading on
   navigation, and a focus ring drawn around an <h1> reads as a rendering
   fault rather than a keyboard affordance. */
.wk-focusable:focus-visible,
.wd-page :is(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible,
.tx-page :is(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible,
.wk-shell :is(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--wk-blue-600);
    outline-offset: 2px;
    border-radius: var(--wk-r-control);
}

.wk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wk-2);
    height: 44px;
    padding: 0 var(--wk-4);
    border-radius: var(--wk-r-control);
    border: 1px solid transparent;
    font: 650 14px/20px var(--wk-font);
    cursor: pointer;
    transition: background var(--wk-motion-colour),
        border-color var(--wk-motion-colour), color var(--wk-motion-colour);
}

.wk-btn:disabled {
    /* Readable rather than ghosted: a disabled control still has to say what
       it would do. */
    opacity: .55;
    cursor: not-allowed;
}

.wk-btn-primary {
    background: var(--wk-blue-600);
    color: #fff;
}

.wk-btn-primary:hover:not(:disabled) { background: var(--wk-blue-700); }

.wk-btn-secondary {
    background: var(--wk-surface);
    color: var(--wk-navy-900);
    border-color: var(--wk-line-strong);
}

.wk-btn-secondary:hover:not(:disabled) { background: var(--wk-surface-subtle); }

.wk-input,
.wk-select {
    width: 100%;
    height: 44px;
    padding: 0 var(--wk-3);
    border: 1px solid var(--wk-line-strong);
    border-radius: var(--wk-r-control);
    background: var(--wk-surface);
    color: var(--wk-ink);
    font: 400 15px/20px var(--wk-font);
}

.wk-input:focus,
.wk-select:focus {
    outline: 2px solid var(--wk-blue-600);
    outline-offset: 2px;
    border-color: var(--wk-blue-600);
}

.wk-label {
    display: block;
    margin-bottom: 6px;
    font: 650 12px/16px var(--wk-font);
    color: var(--wk-navy-900);
}

.wk-iconbtn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--wk-line);
    border-radius: var(--wk-r-control);
    background: var(--wk-surface);
    color: var(--wk-navy-900);
    cursor: pointer;
    transition: background var(--wk-motion-colour),
        border-color var(--wk-motion-colour);
}

.wk-iconbtn:hover { background: var(--wk-surface-subtle); }

.wk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 var(--wk-3);
    border: 1px solid var(--wk-line-strong);
    border-radius: var(--wk-r-pill);
    background: var(--wk-surface);
    color: var(--wk-navy-900);
    font: 650 13px/18px var(--wk-font);
    cursor: pointer;
}

.wk-chip[aria-pressed="true"] {
    background: var(--wk-blue-100);
    border-color: var(--wk-blue-600);
    color: var(--wk-blue-700);
}

/* Numbers that are read in columns -- money, quantities, DINs, times. */
.wk-nums { font-variant-numeric: tabular-nums; }

@media (max-width: 767px) {
    .wk-btn,
    .wk-input,
    .wk-select { height: 48px; }

    .wk-input,
    .wk-select { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .wk-shell *,
    .wd-page *,
    .tx-page * {
        transition-duration: 60ms !important;
        animation-duration: 60ms !important;
        transition-property: opacity, background-color, border-color, color !important;
    }
}

/* ---------------------------------------------------------------------------
   Dashboard: owner bar, welcome, quick actions, grid, cards (sections 5, 7, 8, 10).
   --------------------------------------------------------------------------- */

.wd-page {
    font-family: var(--wk-font);
    color: var(--wk-ink);
    display: flex;
    flex-direction: column;
    gap: var(--wk-5);
    padding-bottom: var(--wk-8);
}

.wk-eyebrow {
    margin: 0;
    font: 750 11px/15px var(--wk-font);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wk-muted);
}

/* Owner context bar -- compact by design; it is a state indicator, not a
   feature. Its exit stays reachable and 44px-targetable at 320px. */
.wk-ownerbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wk-2);
    min-height: 40px;
    padding: var(--wk-2) var(--wk-3);
    border-radius: var(--wk-r-control);
    background: var(--wk-navy-800);
    color: #fff;
    font: 700 13px/18px var(--wk-font);
}

.wk-ownerbar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-ownerbar form { margin: 0; flex-shrink: 0; }

.wk-ownerbar-exit {
    min-height: 32px;
    min-width: 44px;
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: var(--wk-r-control);
    background: transparent;
    color: #fff;
    font: 700 12px/16px var(--wk-font);
    cursor: pointer;
}

.wk-ownerbar-exit:hover { background: rgba(255, 255, 255, .12); }
.wk-ownerbar-compact { display: none; }

@media (max-width: 599px) {
    .wk-ownerbar-full { display: none; }
    .wk-ownerbar-compact { display: inline; }
}

/* Welcome -- a line of orientation, not a hero. A verified pharmacy does not
   need a large card telling it that it is verified. */
.wk-welcome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wk-4);
    max-height: 88px;
    padding: var(--wk-3) 0;
}

.wk-welcome-copy { min-width: 0; }
.wk-welcome h1 {
    margin: 2px 0 0;
    font: 750 28px/34px var(--wk-font);
    letter-spacing: -.02em;
    color: var(--wk-navy-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wk-welcome-sub {
    margin: 2px 0 0;
    font: 400 14px/20px var(--wk-font);
    color: var(--wk-muted);
}

@media (max-width: 767px) {
    .wk-welcome { max-height: 92px; padding: 10px 0; }
    .wk-welcome h1 { font: 750 22px/27px var(--wk-font); white-space: normal; }
    .wk-welcome-sub { font-size: 13px; line-height: 19px; }
}

/* ---------------------------------------------------------------------------
   Module colour -- the platform's five: navy, blue, green, orange and,
   occasionally, brown. Ten tiles in one blue read as a wall, so each module
   carries a hue and no two in the same category share one. Red is
   deliberately absent: it is reserved for errors and safety states, and a
   permanently red tile teaches people to ignore red.
   --------------------------------------------------------------------------- */

.wk-tone-navy   { --tone-bg: #e8eef6; --tone-fg: #0b2f52; --tone-line: #c2d2e5; }
.wk-tone-blue   { --tone-bg: #eaf2ff; --tone-fg: #1d5fc4; --tone-line: #bcd5f7; }
.wk-tone-green  { --tone-bg: #eaf8f0; --tone-fg: #137a49; --tone-line: #b6e5cc; }
.wk-tone-orange { --tone-bg: #fff5e6; --tone-fg: #9a5a08; --tone-line: #f3ddb4; }
.wk-tone-brown  { --tone-bg: #f7efe8; --tone-fg: #704523; --tone-line: #e5d2c1; }

/* ---------------------------------------------------------------------------
   Quick actions. No horizontal scrolling anywhere: All tools takes its own
   full-width row, and the four task actions sit two-by-two on a phone and in
   one row on desktop.
   --------------------------------------------------------------------------- */

.wk-quick { display: flex; flex-direction: column; gap: var(--wk-3); }

.wk-alltools {
    display: flex;
    align-items: center;
    gap: var(--wk-3);
    width: 100%;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--wk-r-action);
    background: linear-gradient(135deg, var(--wk-navy-900), var(--wk-navy-800));
    color: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--wk-shadow-card);
    transition: transform var(--wk-motion-move), box-shadow var(--wk-motion-move);
}

.wk-alltools:hover { transform: translateY(-1px); box-shadow: var(--wk-shadow-raised); }

.wk-alltools-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .14);
    color: #6fe0a6;
}

.wk-alltools-copy { flex: 1 1 auto; min-width: 0; }
.wk-alltools-copy strong { display: block; font: 700 15px/20px var(--wk-font); }
.wk-alltools-copy span { display: block; font: 400 12.5px/17px var(--wk-font); color: #b9cbdd; }
.wk-alltools-chevron { flex-shrink: 0; color: #6fe0a6; display: grid; place-items: center; }

.wk-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--wk-3);
}

@media (max-width: 767px) {
    .wk-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.wk-quick-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--wk-line);
    border-radius: var(--wk-r-action);
    background: var(--wk-surface);
    color: var(--wk-navy-900);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--wk-motion-colour),
        background var(--wk-motion-colour), transform var(--wk-motion-move);
}

.wk-quick-card:hover {
    border-color: var(--tone-line, var(--wk-line-strong));
    background: var(--tone-bg, var(--wk-surface-subtle));
    transform: translateY(-1px);
}

.wk-quick-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--wk-r-icon);
    background: var(--tone-bg, var(--wk-blue-100));
    color: var(--tone-fg, var(--wk-blue-700));
}

.wk-quick-icon .wk-icon { width: 19px; height: 19px; }

.wk-quick-copy { min-width: 0; }
.wk-quick-copy strong {
    display: block;
    font: 700 14px/18px var(--wk-font);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wk-quick-copy span {
    display: block;
    font: 400 12px/16px var(--wk-font);
    color: var(--wk-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A truncated title ("Check inve...") is worse than no hint, so the label
   gets two lines and the hint is the thing that goes when space is tight. */
@media (max-width: 479px) {
    .wk-quick-copy strong { white-space: normal; }
    .wk-quick-copy span { display: none; }
    .wk-quick-card { align-items: center; min-height: 60px; padding: 10px; }
    .wk-quick-icon { width: 32px; height: 32px; }
    .wk-quick-icon .wk-icon { width: 17px; height: 17px; }
}

/* Dashboard grid */
.wk-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wk-5);
    align-items: start;
}

.wk-grid-main { min-width: 0; }

.wk-card {
    padding: var(--wk-4);
    border: 1px solid var(--wk-line);
    border-radius: var(--wk-r-card);
    background: var(--wk-surface);
    box-shadow: var(--wk-shadow-card);
}

/* State pills always carry their own words; colour alone never states a
   status. */
.wk-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--wk-r-pill);
    font: 700 12px/16px var(--wk-font);
}
.wk-state-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.wk-state-online { background: var(--wk-green-100); color: var(--wk-green-700); }
.wk-state-stale { background: var(--wk-orange-100); color: var(--wk-orange-700); }
.wk-state-offline { background: var(--wk-red-100); color: var(--wk-red-700); }
.wk-state-unknown { background: #f1f5f9; color: var(--wk-muted); }

/* ---------------------------------------------------------------------------
   All tools drawer.
   --------------------------------------------------------------------------- */

.wk-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(7, 24, 44, .62);
    backdrop-filter: blur(2px);
}

.wk-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1401;
    display: flex;
    flex-direction: column;
    width: min(100%, 540px);
    background: var(--wk-canvas);
    box-shadow: var(--wk-shadow-drawer);
    overflow: hidden;
}

@media (max-width: 767px) { .wk-drawer { width: 100%; } }
@media (min-width: 480px) and (max-width: 767px) { .wk-drawer { width: min(100%, 480px); } }
@media (min-width: 768px) and (max-width: 1279px) { .wk-drawer { width: 480px; } }

.wk-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wk-3);
    padding: 20px 22px;
    background: linear-gradient(135deg, var(--wk-navy-900), var(--wk-navy-950));
    color: #fff;
}

.wk-drawer-title { display: flex; align-items: center; gap: 13px; min-width: 0; }

.wk-drawer-mark {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .13);
    color: #6fe0a6;
}

.wk-drawer-head h2 { margin: 0; font: 750 19px/25px var(--wk-font); color: #fff; }
.wk-drawer-head p { margin: 2px 0 0; font: 400 12.5px/17px var(--wk-font); color: #b9cbdd; }

.wk-drawer-close {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--wk-r-control);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    transition: background var(--wk-motion-colour);
}

.wk-drawer-close:hover { background: rgba(255, 255, 255, .18); }

.wk-drawer-searchbar {
    padding: 14px 22px;
    background: var(--wk-surface);
    border-bottom: 1px solid var(--wk-line);
}

.wk-drawer-search { position: relative; }

.wk-drawer-input {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--wk-line-strong);
    border-radius: var(--wk-r-control);
    background: var(--wk-surface-subtle);
    color: var(--wk-ink);
    font: 400 15px/20px var(--wk-font);
}

.wk-drawer-input:focus {
    outline: 2px solid var(--wk-blue-600);
    outline-offset: 2px;
    background: var(--wk-surface);
}

.wk-drawer-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--wk-muted);
    pointer-events: none;
}

.wk-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 22px 28px; }

.wk-drawer-section { margin-top: 22px; }

.wk-drawer-category {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font: 750 11px/15px var(--wk-font);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wk-muted);
}

.wk-drawer-category span {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--wk-r-pill);
    background: var(--wk-line-soft);
    color: var(--wk-muted);
    font: 750 10.5px/1 var(--wk-font);
    letter-spacing: 0;
}

.wk-tool-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.wk-tool {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 68px;
    padding: 12px 14px;
    border: 1px solid var(--wk-line);
    border-radius: var(--wk-r-action);
    background: var(--wk-surface);
    color: var(--wk-navy-900);
    text-decoration: none;
    transition: border-color var(--wk-motion-colour),
        box-shadow var(--wk-motion-move), transform var(--wk-motion-move);
}

.wk-tool:hover {
    border-color: var(--tone-line, var(--wk-line-strong));
    box-shadow: var(--wk-shadow-card);
    transform: translateY(-1px);
}

.wk-tool-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--tone-bg, var(--wk-surface-subtle));
    color: var(--tone-fg, var(--wk-navy-900));
}

.wk-tool-icon .wk-icon { width: 20px; height: 20px; }
.wk-tool-copy { flex: 1 1 auto; min-width: 0; }
.wk-tool-copy strong { display: block; font: 700 14px/19px var(--wk-font); }
.wk-tool-copy span {
    display: block;
    margin-top: 2px;
    font: 400 12px/16px var(--wk-font);
    color: var(--wk-muted);
}

.wk-tool-go { flex-shrink: 0; color: var(--wk-subtle); display: grid; place-items: center; }
.wk-tool-go .wk-icon { width: 16px; height: 16px; }
.wk-tool:hover .wk-tool-go { color: var(--tone-fg, var(--wk-navy-900)); }

.wk-drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 48px;
    text-align: center;
    color: var(--wk-muted);
}

.wk-drawer-empty-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--wk-line-soft);
    color: var(--wk-muted);
}

.wk-drawer-empty strong { font: 700 15px/21px var(--wk-font); color: var(--wk-navy-900); }
.wk-drawer-empty span { font: 400 13px/19px var(--wk-font); }

.wk-icon { width: 20px; height: 20px; display: block; }

/* ---------------------------------------------------------------------------
   Transactions (section 9): metrics, toolbar, mobile filter sheet, rows.
   These override the panel's own scoped stylesheet where the two disagree,
   which is why they are written against the same class names.
   --------------------------------------------------------------------------- */

.tx-header-embedded { padding-bottom: var(--wk-2); }
.tx-header-embedded h2 {
    margin: 2px 0 0;
    font: 700 20px/26px var(--wk-font);
    color: var(--wk-navy-900);
}

/* Four metrics, colour carried by a top indicator only. */
.tx-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wk-3);
    margin-top: var(--wk-4);
}

.tx-metric {
    position: relative;
    min-height: 72px;
    padding: 13px 16px;
    border: 1px solid var(--wk-line);
    border-radius: var(--wk-r-card);
    background: var(--wk-surface);
    overflow: hidden;
}

.tx-metric::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--wk-line-strong);
}

.tx-metric-blue::before { background: var(--wk-blue-600); }
.tx-metric-navy::before { background: var(--wk-navy-900); }
.tx-metric-green::before { background: var(--wk-green-600); }
.tx-metric-teal::before { background: var(--wk-teal-600); }

.tx-metric-label {
    font: 700 11px/15px var(--wk-font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wk-muted);
}

.tx-metric-value {
    margin-top: 2px;
    font: 750 21px/27px var(--wk-font);
    color: var(--wk-ink);
}

@media (max-width: 1023px) {
    .tx-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    /* All four primary metrics stay on a phone, two by two. Gross profit is
       one of the numbers a pharmacy opens this page for; hiding it to save a
       row was the wrong trade. Only the cost breakdown -- best cost, sold
       cost, third-party allocation -- sits behind "View financial details". */
    .tx-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tx-metric { min-height: 64px; padding: 10px 12px; }
    .tx-metric-value { font-size: 19px; line-height: 25px; }
    .tx-metric-label { font-size: 10px; }
}

.tx-details-toggle { margin-top: 10px; }

.tx-disclosure {
    min-height: 44px;
    padding: 0 var(--wk-3);
    border: 0;
    background: none;
    color: var(--wk-blue-700);
    font: 650 13px/18px var(--wk-font);
    cursor: pointer;
}

.tx-financial-details {
    margin-top: var(--wk-2);
    padding: 14px;
    border: 1px solid var(--wk-line);
    border-radius: var(--wk-r-control);
    background: var(--wk-surface-subtle);
}

.tx-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--wk-3);
}

.tx-financial-details .tx-detail-item strong {
    display: block;
    font: 700 15px/20px var(--wk-font);
    color: var(--wk-ink);
}

.tx-financial-details .tx-detail-item span {
    font: 400 11px/15px var(--wk-font);
    color: var(--wk-muted);
}

.tx-methodology {
    margin: var(--wk-3) 0 0;
    font: 400 12px/17px var(--wk-font);
    color: var(--wk-muted);
}

/* Toolbar */
.tx-toolbar {
    margin-top: var(--wk-4);
    padding: 12px;
    border: 1px solid var(--wk-line);
    border-radius: var(--wk-r-toolbar);
    background: var(--wk-surface-subtle);
}

.tx-toolbar-desktop {
    display: grid;
    grid-template-columns:
        minmax(0, 160px) minmax(0, 160px) minmax(0, 180px)
        minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: end;
}

.tx-toolbar-mobile { display: none; }

.tx-field { min-width: 0; }
.tx-field-search { min-width: 0; }

.tx-search-box { position: relative; }
.tx-search-box .wk-input { padding-left: 38px; }
.tx-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--wk-muted);
    pointer-events: none;
}

.tx-controlled-chip { white-space: nowrap; }
.tx-apply { min-width: 96px; }

.tx-toolbar-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.tx-daynav {
    display: inline-flex;
    border: 1px solid var(--wk-line-strong);
    border-radius: var(--wk-r-control);
    overflow: hidden;
    background: var(--wk-surface);
}

.tx-daynav button {
    min-width: 44px;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-right: 1px solid var(--wk-line);
    background: transparent;
    color: var(--wk-navy-900);
    font: 650 13px/18px var(--wk-font);
    cursor: pointer;
}

.tx-daynav button:last-child { border-right: 0; }
.tx-daynav button:hover:not(:disabled) { background: var(--wk-surface-subtle); }
.tx-daynav button:disabled { color: var(--wk-subtle); cursor: not-allowed; }
.tx-daynav button.is-selected { background: var(--wk-blue-100); color: var(--wk-blue-700); }

@media (max-width: 1023px) {
    .tx-toolbar-desktop { display: none; }
    .tx-toolbar-mobile { display: flex; flex-direction: column; gap: 10px; }
    .tx-mobile-actions { display: flex; gap: 10px; }
    .tx-mobile-actions .wk-btn { flex: 1 1 0; }
    .tx-hide-sm { display: none; }
}

/* Mobile filter sheet */
.tx-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1401;
    display: flex;
    flex-direction: column;
    max-height: min(82vh, 720px);
    padding: var(--wk-3) var(--wk-4) 0;
    border-radius: var(--wk-r-sheet) var(--wk-r-sheet) 0 0;
    background: var(--wk-surface);
    box-shadow: 0 -18px 42px rgba(7, 24, 44, .28);
}

.tx-sheet-handle {
    width: 36px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: var(--wk-r-pill);
    background: var(--wk-line-strong);
}

.tx-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
}

.tx-sheet-head h3 { margin: 0; font: 700 17px/23px var(--wk-font); color: var(--wk-navy-900); }

.tx-sheet-body {
    display: flex;
    flex-direction: column;
    gap: var(--wk-4);
    overflow-y: auto;
    padding-bottom: var(--wk-4);
}

.tx-sheet-foot {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    min-height: 72px;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--wk-line);
    background: var(--wk-surface);
}

.tx-sheet-apply { flex: 1 1 auto; min-width: 160px; }

/* Collapsed rows carry only what a pharmacist scans for: what the drug was,
   who it was for, what happened and what it cost. Prescriber, user, costs,
   directions and full timestamps are one interaction away in the expanded
   detail, where there is room to read them properly. */
.tx-cell-total { text-align: right; }
.tx-cell-total .tx-money { font: 750 15px/20px var(--wk-font); color: var(--wk-ink); }

@media (max-width: 767px) {
    /* Mobile rows stack into three lines with a fixed expand target, rather
       than squeezing five desktop columns into 340px. */
    .tx-row {
        grid-template-columns: minmax(0, 1fr) auto 44px;
        row-gap: 6px;
        column-gap: 8px;
        padding: 14px;
        align-items: start;
    }

    .tx-cell-total { text-align: left; }
    .tx-cell-label { font-size: 10px; }
    .tx-row .tx-primary-text { font-size: 14px; line-height: 19px; }
}

/* Status badges pair colour with a word, every time. */
.tx-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--wk-r-pill);
    font: 700 11px/14px var(--wk-font);
}

/* Blazor focuses the page heading after navigation so screen readers announce
   the new page. That is a programmatic focus, not a keyboard one, and drawing
   a ring around the title makes the page look broken. */
.wd-page h1[tabindex="-1"]:focus,
.wd-page h1[tabindex="-1"]:focus-visible,
.tx-page h1[tabindex="-1"]:focus,
.tx-page h1[tabindex="-1"]:focus-visible {
    outline: none;
}

@media (max-width: 767px) {
    /* The date button and the filter sheet already cover moving the range on
       a phone; the five-button nav is desktop precision that costs a whole
       row here. */
    .tx-daynav { display: none; }

    .tx-toolbar-bottom { margin-top: 8px; }
    .tx-summary-line { font-size: 12px; gap: 8px; }
}

/* Section header keeps its action beside the title on a phone rather than
   spending a whole row on one button. The panel's own stylesheet lays this
   out as a wrapping flex row, so the override has to work in those terms. */
@media (max-width: 767px) {
    .tx-header-embedded {
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
    }

    .tx-header-embedded > div:first-child { min-width: 0; }
    .tx-header-embedded .tx-header-actions { flex-shrink: 0; }
    .tx-header-embedded .tx-subtitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Targets that carry a real action get a real target, including the two that
   were sized by their text: the owner-context exit and the section's own
   "view all". */
.wk-ownerbar-exit { min-height: 44px; }
.tx-header-actions .tx-action-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Body text on a phone. Scoped to the workspace rather than set globally:
   the marketing pages and the account screens have their own type scale and
   are not what this spec measured. */
@media (max-width: 767px) {
    .wd-page,
    .tx-page {
        font-size: 15px;
        line-height: 22px;
    }
}

/* ---------------------------------------------------------------------------
   Client list. A list, not a grid of cards: these are records to scan down a
   column, and cards make ten pharmacies look like ten products. Rows share
   one bordered surface with hairline dividers, and collapse to two lines on a
   phone rather than repeating a label for every field.
   --------------------------------------------------------------------------- */

.oc-list {
    border: 1px solid var(--wk-line);
    border-radius: var(--wk-r-card);
    background: var(--wk-surface);
    overflow: hidden;
    box-shadow: var(--wk-shadow-card);
}

.oc-row {
    display: grid;
    grid-template-columns:
        44px minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) 20px;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--wk-line-soft);
    color: var(--wk-ink);
    text-decoration: none;
    transition: background var(--wk-motion-colour);
}

.oc-row:last-child { border-bottom: 0; }
.oc-row:hover { background: #fafcff; }
.oc-row.is-inactive { background: #fcfdfe; }
.oc-row.is-inactive:hover { background: #f7f9fc; }

.oc-row-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--wk-navy-900), var(--wk-navy-800));
    color: #fff;
    font: 800 14px/1 var(--wk-font);
}

.oc-row.is-inactive .oc-row-mark {
    background: var(--wk-line-soft);
    color: var(--wk-muted);
}

.oc-row-identity { min-width: 0; }

.oc-row-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.oc-row-name strong {
    font: 700 14.5px/20px var(--wk-font);
    color: var(--wk-navy-900);
    letter-spacing: -.01em;
}

.oc-row-address {
    display: block;
    margin-top: 2px;
    font: 400 12.5px/18px var(--wk-font);
    color: var(--wk-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oc-row-field { min-width: 0; display: block; }

.oc-row-label {
    display: block;
    font: 700 10px/14px var(--wk-font);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--wk-subtle);
}

.oc-row-field > span:not(.oc-row-label) {
    display: block;
    margin-top: 2px;
    font: 650 13px/18px var(--wk-font);
    color: var(--wk-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oc-modulewrap { display: flex !important; flex-wrap: wrap; gap: 4px; white-space: normal !important; }

.oc-row-go { display: grid; place-items: center; color: #9fb0c6; }
.oc-row-go .wk-icon { width: 16px; height: 16px; }
.oc-row:hover .oc-row-go { color: var(--wk-navy-900); }

@media (max-width: 1023px) {
    /* Phone and tablet: identity on one line, the fields wrapping beneath it,
       so nothing truncates to nothing. */
    .oc-row {
        grid-template-columns: 44px minmax(0, 1fr) 20px;
        gap: 12px;
        padding: 14px;
    }

    .oc-row-identity { grid-column: 2; }
    .oc-row-go { grid-column: 3; }

    .oc-row-field {
        grid-column: 2 / span 2;
        display: flex !important;
        align-items: baseline;
        gap: 8px;
    }

    .oc-row-label { flex: 0 0 84px; margin-top: 1px; }
    .oc-row-field > span:not(.oc-row-label) { margin-top: 0; }
}

/* ---------------------------------------------------------------------------
   Client chrome shared by the owner dashboard and the clients page: status
   tabs, status pills, module chips and empty states. Global rather than
   scoped because both surfaces show the same records and must not drift.
   --------------------------------------------------------------------------- */

.oc-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--wk-line-strong, #cbd7e4);
    border-radius: 10px;
    background: #fff;
    color: #0b2f52;
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 120ms ease-out, border-color 120ms ease-out;
}

.oc-add:hover { background: #f4f7fb; border-color: #0b2f52; }
.oc-add .wk-icon { width: 16px; height: 16px; }

.oc-tabs {
    display: flex;
    gap: 6px;
    margin: 18px 0 16px;
    padding-bottom: 2px;
    overflow-x: auto;
}

.oc-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #dce5ef;
    border-radius: 999px;
    background: #fff;
    color: #4a5c74;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}

.oc-tab span {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #eef2f7;
    color: #4a5c74;
    font-size: .68rem;
}

.oc-tab:hover { border-color: #c2d2e5; }

.oc-tab.is-active {
    background: #0b2f52;
    border-color: #0b2f52;
    color: #fff;
}

.oc-tab.is-active span { background: rgba(255, 255, 255, .18); color: #fff; }

.oc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 12px;
}

.oc-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 16px;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    background: #fff;
    color: #142238;
    text-decoration: none;
    transition: border-color 120ms ease-out, box-shadow 150ms ease-out,
        transform 150ms ease-out;
}

.oc-card:hover {
    border-color: #c2d2e5;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
    transform: translateY(-1px);
}

.oc-card.is-inactive { background: #fbfcfe; }
.oc-card.is-inactive .oc-card-mark { background: #eef2f7; color: #64748b; }

.oc-card-mark {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(140deg, #0b2f52, #123b64);
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.oc-card-body { display: block; flex: 1 1 auto; min-width: 0; }

.oc-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.oc-card-head strong {
    font-size: .95rem;
    font-weight: 750;
    color: #0b2f52;
    letter-spacing: -.01em;
}

.oc-card-address {
    display: block;
    margin-top: 3px;
    font-size: .8rem;
    line-height: 1.45;
    color: #64748b;
}

.oc-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.oc-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    font-weight: 700;
    color: #4a5c74;
}

.oc-meta-quiet { font-weight: 400; color: #7a8ba0; font-style: italic; }

.oc-dot { width: 7px; height: 7px; border-radius: 50%; }
.oc-dot.is-green { background: #168552; }
.oc-dot.is-orange { background: #d97706; }

.oc-module {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border: 1px solid #e3e9f1;
    border-radius: 999px;
    background: #f6f8fb;
    color: #4a5c74;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}

.oc-module-more { background: #eef2f7; color: #0b2f52; }

/* Status colour always arrives with its word. */
.oc-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.oc-pill-green { background: #eaf8f0; color: #137a49; }
.oc-pill-orange { background: #fff5e6; color: #9a5a08; }
.oc-pill-muted { background: #eef2f7; color: #55657d; }

.oc-card-go {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    align-self: center;
    color: #9fb0c6;
}

.oc-card-go .wk-icon { width: 16px; height: 16px; }
.oc-card:hover .oc-card-go { color: #0b2f52; }

.oc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 38px 20px;
    border: 1px dashed #cfdbea;
    border-radius: 16px;
    text-align: center;
    color: #64748b;
}

.oc-empty-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: #eef2f7;
    color: #4a5c74;
}

.oc-empty strong { font-size: .95rem; color: #0b2f52; }
.oc-empty span { font-size: .82rem; }

@media (max-width: 599.98px) {
    .oc-card { padding: 13px; gap: 11px; }
    .oc-card-mark { width: 38px; height: 38px; border-radius: 11px; }
    .oc-add { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Mobile bottom navigation.

   Below 768px every route used to sit behind one hamburger and a thirty-row
   drawer. These four are thumb-reachable and always present; the drawer stays
   for everything else. Hidden on tablet and up, where the sidebar does this
   job already.
   --------------------------------------------------------------------------- */

.wk-bottomnav { display: none; }

@media (max-width: 767px) {
    .wk-bottomnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        height: calc(var(--wk-bottom-nav-height) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--wk-surface);
        border-top: 1px solid var(--wk-line);
        box-shadow: var(--wk-shadow-bottom-nav);
    }

    .wk-bottomnav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 48px;
        border: 0;
        background: none;
        color: var(--wk-muted);
        font: 600 11px/14px var(--wk-font);
        text-decoration: none;
        cursor: pointer;
        transition: color var(--wk-motion-colour);
    }

    .wk-bottomnav-item .wk-icon { width: 21px; height: 21px; }
    .wk-bottomnav-item.is-active { color: var(--wk-blue-600); }

    /* Content has to clear the bar, or the last row and any pagination sit
       underneath it. */
    .platform-workspace { padding-bottom: calc(var(--wk-bottom-nav-height) + env(safe-area-inset-bottom) + 12px) !important; }
    .platform-footer { margin-bottom: calc(var(--wk-bottom-nav-height) + env(safe-area-inset-bottom)); }
}

/* The drawer's close handle was a 28px sliver. */
.drawer-collapse-handle { min-width: 44px; min-height: 44px; }

/* ---------------------------------------------------------------------------
   Component-library tab bars on a phone.

   MudBlazor turns a tab strip into a horizontal scroller once the tabs exceed
   the width -- on /documents that meant 780px of tabs inside a 249px window,
   so most sections were reachable only by dragging a bar people do not know
   is draggable. Tabs wrap instead. Applied globally because this is the
   library's behaviour, not one page's mistake, and a hidden tab is a hidden
   feature wherever it happens.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .mud-tabs-tabbar-inner,
    .mud-tabs-tabbar-content {
        width: 100% !important;
        overflow: visible !important;
    }

    .mud-tabs-tabbar-wrapper {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
        /* The library sizes this strip to its content so it can slide it;
           without overriding that it never wraps, whatever the flex rules
           say. */
        width: 100% !important;
        max-width: 100% !important;
        /* The library translates this wrapper to emulate scrolling; a stale
           offset would push wrapped rows off screen. */
        transform: none !important;
    }

    .mud-tabs-scroll-button { display: none !important; }

    .mud-tab {
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 1 auto;
    }

    /* The sliding underline is positioned against the old scrolling strip and
       lands under the wrong tab once rows wrap -- so it goes, and the current
       tab is marked by being filled instead. Hiding the slider without
       replacing it would leave a tab bar with nothing showing where you are. */
    .mud-tab-slider { display: none !important; }

    .mud-tabs .mud-tab {
        border-radius: 10px;
        /* Tight enough that two tabs share a row instead of one per line;
           three rows of tabs before any content is most of a phone screen
           spent on navigation. */
        padding: 0 10px;
        min-height: 44px;
        font-size: 11.5px;
        letter-spacing: .01em;
    }

    .mud-tabs .mud-tab .mud-icon-root { font-size: 17px; }

    .mud-tabs .mud-tab.mud-tab-active {
        background: var(--wk-navy-900);
        color: #fff;
    }

    .mud-tabs .mud-tab.mud-tab-active .mud-icon-root,
    .mud-tabs .mud-tab.mud-tab-active .mud-typography {
        color: #fff;
    }
}


/* ---------------------------------------------------------------------------
   Horizontal table scrollers: make the scroll visible.

   The mobile audit found eleven routes where a data table sat in an
   `overflow-x: auto` wrapper. Touch browsers draw no resting scrollbar, so
   columns past the right edge looked like they simply did not exist. These
   are genuine data tables -- horizontal scrolling is the right answer for
   them -- but it has to be discoverable.

   Pure-CSS scroll shadows: the white "cover" layers scroll with the content
   (background-attachment: local) while the shadow layers stay fixed, so a
   shadow shows only on a side that still has content, and fades out at either
   end. No JavaScript, no layout change.
--------------------------------------------------------------------------- */
.mud-table-container,
.ad-table-wrap,
.all-users-table-wrap,
.biz-table-wrap,
.ca-table-wrap,
.fped-table-wrap,
.frg-table-wrap,
.fx-table-wrap,
.ird-table-wrap,
.irs-table-wrap,
.landing-table-wrap,
.lms-table-wrap,
.maw-table-wrap,
.news-table-scroll,
.nid-table-wrap,
.patients-table-wrap,
.plh-table-wrap,
.pr-table-scroll,
.ps-tablescroll,
.pst-table-wrap,
.report-table-wrap,
.rfd-table-wrap,
.so-table-wrap,
.sw-table-wrap,
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    background-image:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)),
        radial-gradient(farthest-side at 0 50%, rgba(11, 47, 82, .16), rgba(11, 47, 82, 0)),
        radial-gradient(farthest-side at 100% 50%, rgba(11, 47, 82, .16), rgba(11, 47, 82, 0));
    background-position: left center, right center, left center, right center;
    background-size: 34px 100%, 34px 100%, 13px 100%, 13px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
}

@media (max-width: 767px) {
    .ad-table-wrap::-webkit-scrollbar,
    .all-users-table-wrap::-webkit-scrollbar,
    .biz-table-wrap::-webkit-scrollbar,
    .ca-table-wrap::-webkit-scrollbar,
    .fped-table-wrap::-webkit-scrollbar,
    .frg-table-wrap::-webkit-scrollbar,
    .fx-table-wrap::-webkit-scrollbar,
    .ird-table-wrap::-webkit-scrollbar,
    .irs-table-wrap::-webkit-scrollbar,
    .landing-table-wrap::-webkit-scrollbar,
    .lms-table-wrap::-webkit-scrollbar,
    .maw-table-wrap::-webkit-scrollbar,
    .news-table-scroll::-webkit-scrollbar,
    .nid-table-wrap::-webkit-scrollbar,
    .patients-table-wrap::-webkit-scrollbar,
    .plh-table-wrap::-webkit-scrollbar,
    .pr-table-scroll::-webkit-scrollbar,
    .ps-tablescroll::-webkit-scrollbar,
    .pst-table-wrap::-webkit-scrollbar,
    .report-table-wrap::-webkit-scrollbar,
    .rfd-table-wrap::-webkit-scrollbar,
    .so-table-wrap::-webkit-scrollbar,
    .sw-table-wrap::-webkit-scrollbar,
    .table-wrap::-webkit-scrollbar {
        height: 6px;
        -webkit-appearance: none;
    }

    .ad-table-wrap::-webkit-scrollbar-thumb,
    .all-users-table-wrap::-webkit-scrollbar-thumb,
    .biz-table-wrap::-webkit-scrollbar-thumb,
    .ca-table-wrap::-webkit-scrollbar-thumb,
    .fped-table-wrap::-webkit-scrollbar-thumb,
    .frg-table-wrap::-webkit-scrollbar-thumb,
    .fx-table-wrap::-webkit-scrollbar-thumb,
    .ird-table-wrap::-webkit-scrollbar-thumb,
    .irs-table-wrap::-webkit-scrollbar-thumb,
    .landing-table-wrap::-webkit-scrollbar-thumb,
    .lms-table-wrap::-webkit-scrollbar-thumb,
    .maw-table-wrap::-webkit-scrollbar-thumb,
    .news-table-scroll::-webkit-scrollbar-thumb,
    .nid-table-wrap::-webkit-scrollbar-thumb,
    .patients-table-wrap::-webkit-scrollbar-thumb,
    .plh-table-wrap::-webkit-scrollbar-thumb,
    .pr-table-scroll::-webkit-scrollbar-thumb,
    .ps-tablescroll::-webkit-scrollbar-thumb,
    .pst-table-wrap::-webkit-scrollbar-thumb,
    .report-table-wrap::-webkit-scrollbar-thumb,
    .rfd-table-wrap::-webkit-scrollbar-thumb,
    .so-table-wrap::-webkit-scrollbar-thumb,
    .sw-table-wrap::-webkit-scrollbar-thumb,
    .table-wrap::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: rgba(11, 47, 82, .32);
    }
}

@media (max-width: 767px) {
    /* The client-list tabs overflowed just enough to hide "Archived". */
    .oc-tabs {
        flex-wrap: wrap;
        overflow: visible;
    }

    .oc-tab {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    /* `.report-actions` is passed to MudStack via Class=, so it lands on
       MudStack's own root element and never receives the page's scoped-CSS
       attribute -- a rule in FillwareReports.razor.css cannot reach it. The
       row is 559px wide at 390px, which pushed Reset, Print and Download CSV
       off-screen; allow it to wrap. */
    .report-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px !important;
    }

    .report-actions > * {
        flex: 0 1 auto;
    }
}

@media (max-width: 767px) {
    /* MudBlazor grid items and input controls keep the default `min-width: auto`,
       so a field with a long placeholder ("e.g. RecordPhysicalCount") refuses to
       shrink below its min-content width and drags the whole page sideways --
       measured at 1130px inside a 358px column on the Pharmacy Services audit. */
    .mud-grid > .mud-grid-item,
    .mud-input-control,
    .mud-input-control-input-container,
    .mud-input,
    .mud-picker {
        min-width: 0;
    }
}

/* `.docaudit-panel` is a grid whose only child is WorkspaceAuditPanel's own root
   div (`d-flex flex-column`). That root belongs to the child component, so it
   never receives AdministrationDocumentsAudit's scoped-CSS attribute and a rule
   in that page's .razor.css cannot reach it -- this has to live globally. With
   the default `min-width: auto` it would not shrink below its min-content width,
   measured at 1130px inside a 358px column. */
.docaudit-panel > * {
    min-width: 0;
}