/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Split auth stage — form sheet left, photograph right. The reference
   register: a quiet page whose one display serif line does the welcoming,
   a soft-shadowed card holding the credentials, and the product's world
   shown rather than described in a rounded full-height panel. */
.apo-auth[b-yst4dy491l] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--apo-canvas);
    position: relative;
    isolation: isolate;
}

/* ============================================================
   AMBIENT FIELD
   Porcelain, not product-grid: warm light falling across a matte
   surface, under the form half only — the photograph brings its
   own light.
   ============================================================ */
.apo-auth__field[b-yst4dy491l] {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 65% at 22% -15%,
            color-mix(in srgb, var(--apo-accent) 16%, transparent), transparent 60%),
        linear-gradient(160deg,
            color-mix(in srgb, var(--apo-paper) 78%, transparent) 0%,
            transparent 48%);
}

/* Grain — what keeps large flat areas from reading as untouched #FFF. */
.apo-auth__field[b-yst4dy491l]::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="dark"] .apo-auth__field[b-yst4dy491l]::after {
    opacity: 0.05;
}

/* --- left half: a masthead over one centred column ------------------
   Two rows, not three: the footnote is gone, so nothing sits under the
   column to balance the masthead above it. The stage carries a bottom
   pad the height of that masthead instead, which puts the column on the
   VIEWPORT's centre line rather than on the centre of the space left
   over below the brand. */
.apo-auth__content[b-yst4dy491l] {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    min-width: 0;
}

.apo-auth__bar[b-yst4dy491l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 44px 0;
}

.apo-auth__brand-mark[b-yst4dy491l] {
    display: block;
    flex: 0 0 auto;
}

/* --- centred stage ------------------------------------------------- */
.apo-auth__stage[b-yst4dy491l] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px 76px;
    min-width: 0;
}

/* The column is the HEAD's measure, not the card's — in the reference the
   display line runs wider than the sheet below it, and that overhang is
   what makes the welcome read as the page's title rather than as the
   card's caption. The card keeps its own narrower max-width and centres
   inside this. */
.apo-auth__column[b-yst4dy491l] {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- right half: the photograph ------------------------------------ */
/* Framed, not full-bleed: the margin of canvas around the panel is what
   makes it read as a placed photograph rather than a background. It used
   to run the full height of the window, which made it a tall ribbon next
   to a small card; it is a PORTRAIT PLATE now — a fixed 4:5 rectangle
   floated on the canvas with air on every side, so the photograph and the
   credential card read as two placed objects of comparable weight. */
.apo-auth__visual[b-yst4dy491l] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 40px 32px 16px;
    min-width: 0;
}

/* IN COLOUR. The photograph is the clinic's own room — brass chandelier, cream
   cabinetry, the emblem lit on the monitor — and it is the first thing anyone
   sees. It was desaturated for a while to match the monochrome chrome, which
   got the relationship backwards: the interface is the quiet part, and this is
   the one frame in the product that is allowed to be the place itself.

   The chrome around it stays monochrome, and that contrast is the point — a
   black-and-white sign-in sheet beside a full-colour photograph of the room
   reads as a tool opening onto a practice, not as a brochure. */
.apo-auth__visual img[b-yst4dy491l] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    /* Width-driven until the window gets short, then the cap on width is
       what preserves the 4:5 — a max-height would leave the box wide and
       squash the ratio. 0.8 IS the ratio, written where it can be read. */
    max-width: calc((100vh - 136px) * 0.8);
    object-fit: cover;
    /* The chair and its branded screen sit right of the crop's centre. */
    object-position: 62% 50%;
    border-radius: var(--apo-radius-plate);
}

/* On the dark build the frame is a bright rectangle against a near-black page,
   so it is brought down a stop — the photograph should sit IN the screen, not
   glare out of it. Brightness only; the colour is untouched. */
[data-theme="dark"] .apo-auth__visual img[b-yst4dy491l] {
    filter: brightness(0.82);
}

/* The photograph steps aside before it could crush the form. */
@media (max-width: 1023px) {
    .apo-auth[b-yst4dy491l] {
        grid-template-columns: minmax(0, 1fr);
    }

    .apo-auth__visual[b-yst4dy491l] {
        display: none;
    }
}

@media (max-width: 600px) {
    .apo-auth__bar[b-yst4dy491l] {
        padding: 16px 20px 0;
    }

    .apo-auth__stage[b-yst4dy491l] {
        align-items: flex-start;
        padding: 20px 20px 28px;
    }
}

@media (max-height: 720px) {
    .apo-auth__stage[b-yst4dy491l] {
        align-items: flex-start;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.apo-app-shell[b-fs9rxp0x54] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--apo-nav-bg);
    transition: grid-template-columns var(--apo-duration-base) var(--apo-ease);
    position: relative;
}

.apo-app-shell__drawer[b-fs9rxp0x54] {
    grid-column: 1;
    background: var(--apo-nav-bg);
    color: var(--apo-nav-fg);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 2;
}

/* The workspace is the BRIGHTEST plane in the product and the sidebar the
   quietest; the two are separated by a single hairline. That ordering is the
   whole hierarchy — in a clinical tool the record being worked on should be
   the lightest thing on the screen, and the navigation should recede once you
   have used it. It holds in both themes: on the dark build the sidebar is a
   step darker than the canvas rather than a step lighter. */
.apo-app-shell__column[b-fs9rxp0x54] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--apo-canvas);
    border-left: 1px solid var(--apo-nav-border);
}

.apo-app-shell__main[b-fs9rxp0x54] {
    flex: 1;
    background: var(--apo-canvas);
    min-width: 0;
}

.apo-app-shell__backdrop[b-fs9rxp0x54] {
    display: none;
}

/* Desktop collapse: the sidebar folds to a 56px icon rail (Ctrl/Cmd+\ or the
   top bar's panel glyph). The grid-template-columns transition above animates
   the fold. Dual selector: data-collapsed is the Blazor-rendered state,
   html[data-nav-collapsed] is nav.js's pre-boot localStorage mirror that
   keeps a hard reload from flashing the full sidebar — see nav.js. */
@media (min-width: 1024px) {
    html[data-nav-collapsed="true"] .apo-app-shell[b-fs9rxp0x54],
    .apo-app-shell[data-collapsed="true"][b-fs9rxp0x54] {
        grid-template-columns: 56px minmax(0, 1fr);
    }
}

/* The inset "floating sheet" made sense when the sidebar was a tinted panel.
   On an all-white ground it just drew a box around the workspace, so the
   separation is now a single hairline and the content runs full bleed. */

/* ============================================================
   RESPONSIVE: below 1024px the sidebar becomes an off-canvas
   overlay with a scrim behind it. The main content fills the
   full viewport width; the top-bar hamburger opens the drawer.
   ============================================================ */
@media (max-width: 1023px) {
    .apo-app-shell[b-fs9rxp0x54] {
        grid-template-columns: 1fr;
    }

    .apo-app-shell__drawer[b-fs9rxp0x54] {
        position: fixed;
        top: 0;
        left: 0;
        width: min(280px, calc(100vw - 48px)) !important;
        height: 100vh;
        z-index: 1200;
        transform: translateX(-100%);
        border-right: 1px solid var(--apo-nav-border);
        box-shadow: var(--apo-shadow-lg);
        transition: transform var(--apo-duration-base) var(--apo-ease);
    }

    .apo-app-shell[data-mobile-drawer-open="true"] .apo-app-shell__drawer[b-fs9rxp0x54] {
        transform: translateX(0);
    }

    .apo-app-shell__column[b-fs9rxp0x54] {
        grid-column: 1;
        border-left: none;
    }

    .apo-app-shell__backdrop[b-fs9rxp0x54] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(8, 9, 11, 0.45);
        z-index: 1100;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--apo-duration-base) var(--apo-ease);
    }

    .apo-app-shell[data-mobile-drawer-open="true"] .apo-app-shell__backdrop[b-fs9rxp0x54] {
        opacity: 1;
        pointer-events: auto;
    }

    body:has(.apo-app-shell[data-mobile-drawer-open="true"])[b-fs9rxp0x54] {
        overflow: hidden;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* The sidebar carries no horizontal padding of its own — the masthead and
   section labels set a 16px inset, and the nav rows reach the same axis via
   8px margin + 8px padding, which is what gives the selected row its inset
   rounded shape without the icon column drifting off the shared axis. */
.apo-nav[b-70lglxsusl] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 0;
    background: var(--apo-nav-bg);
}

/* --- workspace row -------------------------------------------------
   48px to match the top bar, so the sidebar header and the workspace header
   sit on one continuous horizontal line. The 16px inset is the sidebar's
   single vertical axis: emblem, section labels and nav icons all start here.

   No border-bottom any more. On the old dark slab the rule was what separated
   the masthead from the list; on a paper panel it is a second horizontal line
   two pixels from the top bar's own, and two parallel hairlines that close to
   each other read as a rendering artefact rather than as structure. The
   masthead is separated by the air below it instead. */
.apo-nav__brand[b-70lglxsusl] {
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    height: 48px;
    background: var(--apo-nav-bg-elev);
    position: relative;
    z-index: 1;
}

.apo-nav__brand-mark[b-70lglxsusl] {
    flex-shrink: 0;
}

.apo-nav__brand-text[b-70lglxsusl] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The wordmark is artwork, so it is sized rather than styled. Height is what
   matters — the crop carries its own internal spacing between the serif and
   the signature beneath it, and letting CSS restate that would fight it.

   Both cuts ship and the theme reveals one, because the sidebar is a PAPER
   panel in light mode now: the dark cut is drawn in near-white and would have
   rendered as an empty gap there.

   In full colour, like every other instance of the mark — see the note on
   .apo-brand-logo in app.css for why the monochrome system stops at the
   chrome. */
.apo-nav__brand-wordmark[b-70lglxsusl] {
    height: 26px;
    width: auto;
    display: block;
}

/* Blazor stamps its scope attribute on the LAST compound of a selector, and
   that compound is this file's own <img> — so an ancestor selector like
   [data-theme] works here without ::deep. */
.apo-nav__brand-wordmark--dark[b-70lglxsusl] { display: none; }
[data-theme="dark"] .apo-nav__brand-wordmark--light[b-70lglxsusl] { display: none; }
[data-theme="dark"] .apo-nav__brand-wordmark--dark[b-70lglxsusl] { display: block; }


/* --- navigation ----------------------------------------------------
   .apo-nav__list rules live in wwwroot/css/app.css: the class sits on
   <MudNavMenu>, a child component root, which Blazor's scoped CSS cannot
   reach. Putting them here silently did nothing and broke the scroll
   region — see the note in app.css before moving them back. */

/* Section labels are quiet caps with air above them and nothing else. Padding
   is top-heavy: the space belongs to the group above, so each label reads as
   attached to the items beneath it.

   The hairline that used to run from each label out to the sidebar edge is
   gone. It was an editorial device borrowed from the sign-in masthead, and on
   a dark slab it worked; on a paper panel eight of them stack into a ruled
   ledger, and the sidebar is meant to be the quietest surface in the product,
   not the most drawn one. Whitespace groups these perfectly well — which is
   what the reference product relies on too.

   9px caps at 3.4:1 was unreadable twice over — too small AND too dim. Now
   Caption1 at 4.9:1, with the tracking eased off slightly because wide
   tracking on low-contrast small caps is what made these dissolve in the
   first place. Caption2 is the smaller step, but 10px tracked caps is where
   this failed before; a section label is navigation, not an annotation.

   A <button> since 2026-08: the header is the group's collapse toggle. The
   resets below erase the UA button chrome so the register — caps, tracking,
   spacing — survives the tag change byte for byte. */
.apo-nav__group-label[b-70lglxsusl] {
    width: 100%;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    padding: 18px 16px 6px;
    color: var(--apo-nav-fg-muted);
    font-family: var(--apo-font-body);
    font-size: var(--apo-text-caption1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    transition: color var(--apo-duration-fast) var(--apo-ease);
}

.apo-nav__group-label:hover[b-70lglxsusl] {
    color: var(--apo-nav-fg);
}

.apo-nav__group-label:focus-visible[b-70lglxsusl] {
    outline: 2px solid var(--apo-nav-marker);
    outline-offset: -2px;
    border-radius: var(--apo-radius-sm);
}

/* Was the hairline; now a plain spacer. It stays in the markup rather than
   being deleted because it is what pushes the collapse chevron out to the
   sidebar's edge — remove the element and the chevron collapses back against
   the label, which is a worse hit target and a busier header. */
.apo-nav__group-rule[b-70lglxsusl] {
    flex: 1;
    height: 1px;
    background: transparent;
}

/* The chevron is hover-revealed while the group is open — at rest the header
   reads exactly as the static label it used to be. A collapsed group keeps
   its chevron visible and rotated: that persistent glyph IS the signal that
   rows are folded away underneath. */
.apo-nav__group-chevron[b-70lglxsusl] {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    color: var(--apo-nav-fg-muted);
    opacity: 0;
    transform: rotate(0deg);
    transition: opacity var(--apo-duration-fast) var(--apo-ease),
                transform var(--apo-duration-fast) var(--apo-ease);
}

.apo-nav__group-label:hover .apo-nav__group-chevron[b-70lglxsusl],
.apo-nav__group-label:focus-visible .apo-nav__group-chevron[b-70lglxsusl] {
    opacity: 1;
}

.apo-nav__group-label[aria-expanded="false"] .apo-nav__group-chevron[b-70lglxsusl] {
    opacity: 1;
    transform: rotate(-90deg);
}

/* Blazor toggles the `hidden` attribute; stated explicitly so no display
   rule can ever resurrect a folded group by accident. */
.apo-nav__group-items[hidden][b-70lglxsusl] {
    display: none;
}

/* Drawn search in the masthead — mobile only, where the top bar gives its
   field up to the drawer. The auto margin lives here so the search + close
   pair sits flush right as one cluster. */
.apo-nav__search[b-70lglxsusl] {
    display: none;
    margin-left: auto;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--apo-radius-sm);
    background: transparent;
    color: var(--apo-nav-fg);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background var(--apo-duration-fast) var(--apo-ease),
                color var(--apo-duration-fast) var(--apo-ease);
}

.apo-nav__search:hover[b-70lglxsusl] {
    background: var(--apo-nav-hover-bg);
    color: var(--apo-nav-fg-strong);
}

.apo-nav__search svg[b-70lglxsusl] {
    width: 20px;
    height: 20px;
}

.apo-nav__mobile-close[b-70lglxsusl] {
    display: none;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--apo-radius-sm);
    background: transparent;
    color: var(--apo-nav-fg);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.apo-nav__mobile-close:hover[b-70lglxsusl] {
    background: var(--apo-nav-hover-bg);
}

/* The drawer's account row. Desktop never shows it — the top bar owns the
   account there — so it costs nothing outside the overlay. */
.apo-nav__account[b-70lglxsusl] {
    display: none;
    border-top: 1px solid var(--apo-nav-border);
    background: var(--apo-nav-bg-elev);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
}

/* AccountMenu defaults target the top bar; inside the drawer the copy takes
   the sidebar's own ramp so it belongs to the panel it is sitting in. */
.apo-nav__account[b-70lglxsusl]  .apo-account__name {
    color: var(--apo-nav-fg-strong);
}

.apo-nav__account[b-70lglxsusl]  .apo-account__role {
    color: var(--apo-nav-fg-muted);
}

.apo-nav__account[b-70lglxsusl]  .apo-account__avatar {
    background: var(--apo-brand-gold);
    color: var(--apo-brand-gold-fg);
}

.apo-nav__account[b-70lglxsusl]  .apo-account:hover {
    background: var(--apo-nav-hover-bg);
}

/* ============================================================
   COLLAPSED ICON RAIL (desktop only). Two selectors per rule:
   .apo-app-shell[data-collapsed] is the canonical Blazor-rendered state;
   html[data-nav-collapsed] is nav.js's pre-boot mirror of localStorage, which
   covers the frames before the circuit's first interop round-trip so a hard
   reload never flashes the full sidebar. The two are kept in sync by
   apolonijaNav.setSidebarCollapsed.
   ============================================================ */
@media (min-width: 1024px) {
    /* The wordmark goes with the labels; the badge emblem centres in the
       56px rail and carries the identity alone. */
    html[data-nav-collapsed="true"] .apo-nav__brand[b-70lglxsusl],
    .apo-app-shell[data-collapsed="true"] .apo-nav__brand[b-70lglxsusl] {
        padding: 0;
        gap: 0;
        justify-content: center;
    }

    html[data-nav-collapsed="true"] .apo-nav__brand-text[b-70lglxsusl],
    .apo-app-shell[data-collapsed="true"] .apo-nav__brand-text[b-70lglxsusl] {
        display: none;
    }

    /* No room for caps + hairline at 56px — the groups' rhythm survives as
       the icon list's own spacing. */
    html[data-nav-collapsed="true"] .apo-nav__group-label[b-70lglxsusl],
    .apo-app-shell[data-collapsed="true"] .apo-nav__group-label[b-70lglxsusl] {
        display: none;
    }

    /* The rail shows EVERY icon, including a folded group's: with the headers
       hidden there is no way to unfold, so hiding rows too would strand them. */
    html[data-nav-collapsed="true"] .apo-nav__group-items[hidden][b-70lglxsusl],
    .apo-app-shell[data-collapsed="true"] .apo-nav__group-items[hidden][b-70lglxsusl] {
        display: block;
    }
}

/* On mobile the drawer is a full off-canvas overlay; the top-bar toggle opens
   it and this close button dismisses it. */
@media (max-width: 1023px) {
    .apo-nav__search[b-70lglxsusl],
    .apo-nav__mobile-close[b-70lglxsusl] {
        display: inline-flex;
    }

    .apo-nav__account[b-70lglxsusl] {
        display: block;
    }
}
/* /Components/Layout/SystemLayout.razor.rz.scp.css */
/* Full-viewport system stage — the same three-row page as the auth sheet
   (masthead, stage, footnote) with the photograph column removed and the
   column centred on both axes. One card in an otherwise empty room. */
.apo-system[b-pshmgq1z40] {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--apo-canvas);
    position: relative;
    isolation: isolate;
}

/* The ambient field, symmetric now: with no photograph to balance against,
   the light falls from straight above the card rather than from the corner. */
.apo-system__field[b-pshmgq1z40] {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 110% 62% at 50% -18%,
            color-mix(in srgb, var(--apo-accent) 13%, transparent), transparent 62%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--apo-paper) 72%, transparent) 0%,
            transparent 52%);
}

/* Grain — what keeps large flat areas from reading as untouched #FFF. */
.apo-system__field[b-pshmgq1z40]::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="dark"] .apo-system__field[b-pshmgq1z40]::after {
    opacity: 0.05;
}

.apo-system__bar[b-pshmgq1z40] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 34px 0;
}

.apo-system__brand-mark[b-pshmgq1z40] {
    display: block;
    flex: 0 0 auto;
}

.apo-system__stage[b-pshmgq1z40] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px 32px;
    min-width: 0;
}

.apo-system__column[b-pshmgq1z40] {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
}

.apo-system__footnote[b-pshmgq1z40] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 24px calc(24px + env(safe-area-inset-bottom));
    color: var(--apo-ink-400);
    font-size: var(--apo-text-caption1);
    line-height: 1.5;
    text-align: center;
}

.apo-system__status-dot[b-pshmgq1z40] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--apo-success);
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .apo-system__bar[b-pshmgq1z40] {
        padding: 16px 20px 0;
    }

    .apo-system__stage[b-pshmgq1z40] {
        padding: 20px 20px 28px;
    }
}

/* On a short viewport the centred card would crowd the masthead; let the
   column start high instead, the same concession the auth stage makes. */
@media (max-height: 620px) {
    .apo-system__stage[b-pshmgq1z40] {
        align-items: flex-start;
    }
}
/* /Components/Layout/TopBar.razor.rz.scp.css */
.apo-topbar[b-08rv932nkf] {
    position: sticky;
    top: 0;
    z-index: 50;
    /* 82% let scrolling table rows read through as a grey smear at the top of
       the page — the same defect the page header had, one level up. The frost
       is kept deliberately (it is a real depth cue when content moves beneath),
       but at 94% the blur softens what passes under instead of showing it. */
    background: color-mix(in srgb, var(--apo-canvas) 94%, transparent);
    border-bottom: 1px solid var(--apo-border);
    /* Matches the sidebar's 48px brand row so the two headers share one line.
       48px, down from 52px, tracking the control height down from 36 to 32: the
       bar is sized by what it holds, and 8px of air above and below a 32px
       trigger is the same proportion 52px gave a 36px one. */
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    backdrop-filter: saturate(140%) blur(12px);
    box-shadow: none;
}

/* Mirrors .apo-page-container exactly — max-width AND gutters. Matching only
   the padding would hold at narrow widths and drift apart past 1440px, where
   the container starts centring itself and the bar would not. */
.apo-topbar__inner[b-08rv932nkf] {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

/* Icon buttons carry ~8px of their own padding, so the trailing control's glyph
   would sit inset from the content's right edge. Pull the cluster out by that
   much to align optically rather than geometrically. */
.apo-topbar__right[b-08rv932nkf] {
    margin-right: -8px;
}

.apo-topbar__left[b-08rv932nkf],
.apo-topbar__right[b-08rv932nkf] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.apo-topbar__left[b-08rv932nkf] {
    flex: 1 1 auto;
    overflow: hidden;
}

/* Brand strip — appears in the top bar ONLY on mobile where the sidebar
   is off-canvas and the user needs a visible product identity. */
.apo-topbar__brand[b-08rv932nkf] {
    display: none;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    margin-left: 2px;
    min-width: 0;
}

.apo-topbar__brand-mark[b-08rv932nkf] {
    flex-shrink: 0;
}

/* --- command-palette trigger --------------------------------------- */
/* Same height as every other control in the product. This sat at 28px with a
   12px label while the inputs it opens are 32px — the bar read as a different
   product from the pages under it. */
.apo-topbar__search-trigger[b-08rv932nkf] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: var(--apo-control-h);
    width: clamp(180px, 20vw, 240px);
    padding: 0 6px 0 12px;
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-control);
    background: var(--apo-paper);
    color: var(--apo-ink-500);
    cursor: pointer;
    margin-right: 4px;
    transition: border-color var(--apo-duration-fast) var(--apo-ease),
                background var(--apo-duration-fast) var(--apo-ease);
}

.apo-topbar__search-trigger:hover[b-08rv932nkf] {
    border-color: var(--apo-border-strong);
    background: var(--apo-surface-hover);
}

.apo-topbar__search-trigger[b-08rv932nkf]  .mud-icon-root {
    font-size: var(--apo-icon-sm) !important;
    color: var(--apo-ink-400);
}

.apo-topbar__search-label[b-08rv932nkf] {
    flex: 1;
    text-align: left;
    font-size: var(--apo-text-body);
    letter-spacing: -0.008em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apo-topbar__search-kbd[b-08rv932nkf] {
    flex: 0 0 auto;
    background: var(--apo-surface-sunk);
}

/* The bar's icon actions at the same 32px as the search trigger and every
   other control — Size.Small MudIconButtons render 22x22, which both looked
   lighter than the rest of the app and made poor click targets. */
/* ::deep, not a bare selector: the class lands on MudIconButton's own
   <button>, which belongs to the child component's render tree and so never
   carries this file's scope attribute. A bare .apo-topbar__theme rule
   compiles to .apo-topbar__theme[b-x] and matches nothing — which is
   also why the mobile display:none below needed the same treatment. */
.apo-topbar__inner[b-08rv932nkf]  .apo-topbar__theme {
    width: var(--apo-control-h);
    height: var(--apo-control-h);
    border-radius: var(--apo-radius-control);
}

/* The burger is TopBar's own element, so no ::deep. Sized for a thumb, not a
   cursor: 44px box (Apple's minimum) with a 22px drawn glyph. Visibility
   still lives in app.css with the other topbar toggles. */
.apo-topbar__menu-btn[b-08rv932nkf] {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--apo-ink-800);
    /* The control corner, not a disc. The bar used to hold three different
       roundings — a 6px theme toggle, a 999px burger and a 10px search
       trigger — across 52px of chrome, which is the kind of thing nobody
       names and everybody feels. */
    border-radius: var(--apo-radius-control);
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
    transition: background var(--apo-duration-fast) var(--apo-ease);
}

/* On desktop the same glyph collapses the sidebar to the icon rail; it sits
   beside 32px controls there, so it drops to their register — the 44px thumb
   box is a mobile affordance, not a cursor one. */
@media (min-width: 1024px) {
    .apo-topbar__menu-btn[b-08rv932nkf] {
        width: var(--apo-control-h);
        height: var(--apo-control-h);
    }

    .apo-topbar__menu-btn svg[b-08rv932nkf] {
        width: 20px;
        height: 20px;
    }
}

.apo-topbar__menu-btn:hover[b-08rv932nkf] {
    background: var(--apo-surface-hover);
}

.apo-topbar__menu-btn svg[b-08rv932nkf] {
    width: 22px;
    height: 22px;
}

/* The signed-in identity, top right at every width — where every workspace
   product puts it, and where it was already living on mobile. It used to sit
   in the sidebar footer on desktop, which meant the one element people look
   for in the top-right corner was the one element not there. */
.apo-topbar__account[b-08rv932nkf] {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
}

/* ============================================================
   RESPONSIVE: on mobile the sidebar is off-canvas, so the top
   bar carries the brand and the account avatar. Breadcrumbs and
   search collapse away.
   ============================================================ */
/* Every gutter below mirrors .apo-page-container's at the same breakpoint. If
   one moves, the other has to move with it or the breadcrumb drifts off the
   content's edge again. */
@media (max-width: 1440px) {
    .apo-topbar__inner[b-08rv932nkf] {
        padding: 0 28px;
    }
}

@media (max-width: 1200px) {
    .apo-topbar__inner[b-08rv932nkf] {
        padding: 0 22px;
    }
}

@media (max-width: 1023px) {
    .apo-topbar__inner[b-08rv932nkf] {
        gap: 8px;
        position: relative;
    }

    /* Dead centre of the bar, not centred in the leftover space: the toggle
       and the avatar flank it symmetrically, which is what makes the mark
       read as a masthead rather than a list item. */
    .apo-topbar__brand[b-08rv932nkf] {
        display: inline-flex;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    /* One 40px control line across the bar on mobile — the search square, the
       icon actions and the account all share it, so nothing reads as an odd
       one out beside the 44px burger. */
    /* Collapsed to an icon, so the field chrome goes too: bordered it read as
       an input squeezed to a square, while the actions beside it are bare
       glyphs. Hover keeps the soft fill. */
    .apo-topbar__search-trigger[b-08rv932nkf] {
        justify-content: center;
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
        margin-right: 0;
        border: none;
        background: transparent;
    }

    .apo-topbar__inner[b-08rv932nkf]  .apo-topbar__theme {
        width: 40px;
        height: 40px;
    }

    .apo-topbar__search-label[b-08rv932nkf],
    .apo-topbar__search-kbd[b-08rv932nkf] {
        display: none;
    }

    .apo-topbar__left[b-08rv932nkf]  .mud-breadcrumbs,
    .apo-topbar__left[b-08rv932nkf]  .apo-breadcrumbs {
        display: none;
    }
}

@media (max-width: 768px) {
    .apo-topbar__inner[b-08rv932nkf] {
        padding: 0 16px;
    }
}

@media (max-width: 720px) {
    .apo-topbar__inner[b-08rv932nkf] {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .apo-topbar__inner[b-08rv932nkf]  .apo-topbar__theme {
        display: none;
    }
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */
/* Sign-in form styles live in wwwroot/css/app.css.

   They are shared by Login, ForgotPassword and ResetPassword, and Blazor's
   scoped CSS only ever matches the component it belongs to — keeping them
   here would leave the other two pages unstyled. This file is intentionally
   empty. */
/* /Components/Pages/Appointments/AppointmentDetailDialog.razor.rz.scp.css */
/* The head of the appointment detail — the documented .apo-dialog-summary
   object (the record being acted on), EXTENDED here rather than forked: the
   global class brings the recessed panel, the title and the meta lines; this
   file only lays the summary out as a row so the status dot sits beside the
   patient's name. The same modifier ManagedUserDialog carries as
   .apo-user-head, repeated here because [b-*] scoping keeps that rule on its
   own page. No margin below: the head is the first child of an
   .apo-dialog-stack, whose gap owns the rhythm. */
.apo-appointment-head[b-qylqd4nig3] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.apo-appointment-head__who[b-qylqd4nig3] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}
/* /Components/Pages/Billing/TreatmentConsentDialog.razor.rz.scp.css */
/* The head of the consent detail — the documented .apo-dialog-summary object
   (the record being acted on), EXTENDED here rather than forked: the global
   class brings the recessed panel, the title and the meta lines; this file
   only lays the summary out as a row so the status dot sits beside the
   procedure name instead of under it. No avatar mark — the record is a
   consent document, not a person — and no bottom margin: the head sits
   inside .apo-dialog-stack, whose gap owns the rhythm. */
.apo-consent-head[b-ebnkqe8n5h] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.apo-consent-head__who[b-ebnkqe8n5h] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}
/* /Components/Pages/Content/ArticleDraftPreviewDialog.razor.rz.scp.css */
.apo-draft-preview__toolbar[b-cmjp9rwjyh] {
    display: flex;
    justify-content: center;
    gap: var(--apo-space-2);
    margin-bottom: var(--apo-space-3);
}

.apo-draft-preview[b-cmjp9rwjyh] {
    display: flex;
    min-height: min(68vh, 780px);
    justify-content: center;
    overflow: auto;
    padding: var(--apo-space-4);
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-xl);
    background: var(--apo-surface-sunk);
}

.apo-draft-preview iframe[b-cmjp9rwjyh] {
    display: block;
    width: 100%;
    min-height: min(64vh, 740px);
    border: 0;
    border-radius: var(--apo-radius-xl);
    background: #fff;
    box-shadow: var(--apo-shadow-lg);
    transition: max-width 180ms ease;
}

.apo-draft-preview.is-phone iframe[b-cmjp9rwjyh] {
    max-width: 430px;
}

.apo-draft-preview.is-desktop iframe[b-cmjp9rwjyh] {
    max-width: 1120px;
}

@media (max-width: 600px) {
    .apo-draft-preview[b-cmjp9rwjyh] {
        min-height: 62vh;
        padding: var(--apo-space-2);
    }

    .apo-draft-preview iframe[b-cmjp9rwjyh] {
        min-height: 60vh;
    }
}
/* /Components/Pages/Content/ArticleEditor.razor.rz.scp.css */
/* Editorial page chrome, on the token contract. The panels used to live in
   ArticleDialog.razor.css with rem sizes below the ramp's 11px floor and the
   off-brand gold #d2b276 — everything here resolves to --apo-* tokens so the
   next ramp retune reaches this screen too. */

.apo-editorial-state[b-aeuw4678pq] {
    display: flex;
    align-items: center;
    gap: var(--apo-space-2);
    padding: var(--apo-space-2) var(--apo-space-3);
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-full);
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption1);
}

.apo-editorial-dot[b-aeuw4678pq] { width: 8px; height: 8px; border-radius: 50%; background: var(--apo-ink-400); }
.apo-editorial-dot.is-live[b-aeuw4678pq] { background: var(--apo-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--apo-success) 12%, transparent); }
.apo-editorial-dot.is-draft[b-aeuw4678pq] { background: var(--apo-warning); }
.apo-editorial-dot.is-archived[b-aeuw4678pq] { background: var(--apo-ink-400); }
.apo-editorial-dot.is-review[b-aeuw4678pq] { background: var(--apo-warning); box-shadow: 0 0 0 4px color-mix(in srgb, var(--apo-warning) 12%, transparent); }
.apo-editorial-dot.is-approved[b-aeuw4678pq] { background: var(--apo-success); }

/* The manuscript sheet keeps its frame; the sidebar's frame moved to the
   shared .apo-editorial-rail in app.css (two components render its sections,
   and a scoped class on a child component's root matches nothing — the trap
   that shipped the workflow panel frameless). */
.apo-editorial-panel[b-aeuw4678pq] {
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-lg);
    background: var(--apo-paper);
    overflow: hidden;
}

.apo-editorial-panel--main[b-aeuw4678pq] { padding: var(--apo-space-5); }

/* .apo-editorial-title rules live in mudblazor-overrides.css: the class sits
   on MudTextField — a child component's root — which this file's scope
   attribute can never reach. The same reason .apo-page-search lives there. */

/* Commit bar: sticks to the viewport bottom while the long form scrolls, the
   same frosted treatment as the top bar. */
.apo-editor-savebar[b-aeuw4678pq] {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    gap: var(--apo-space-3);
    margin-top: var(--apo-space-6);
    padding: var(--apo-space-3) 0;
    border-top: 1px solid var(--apo-border);
    background: color-mix(in srgb, var(--apo-canvas) 94%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

@media (max-width: 700px) {
    .apo-editorial-panel--main[b-aeuw4678pq] { padding: var(--apo-space-4); }
    .apo-editor-savebar[b-aeuw4678pq] { flex-direction: column-reverse; }
    .apo-editor-savebar[b-aeuw4678pq]  .mud-button { width: 100%; }
}
/* /Components/Pages/Content/ContentCategoryManagerDialog.razor.rz.scp.css */
/* Category manager, on the token contract (was rem sizes + --mud-palette-*). */

.apo-category-manager__intro[b-5ggy4lpe09] { display: flex; justify-content: space-between; gap: var(--apo-space-6); align-items: flex-start; margin-bottom: var(--apo-space-6); }
.apo-category-manager__list[b-5ggy4lpe09] { display: flex; flex-direction: column; gap: var(--apo-space-2); max-height: 510px; overflow: auto; padding-right: var(--apo-space-1); }

.apo-category-row[b-5ggy4lpe09] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--apo-space-3);
    padding: var(--apo-space-3) 14px;
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-xl);
    background: var(--apo-paper);
    color: var(--apo-ink-900);
    text-align: left;
    cursor: pointer;
    transition: background var(--apo-duration-fast) var(--apo-ease), border-color var(--apo-duration-fast) var(--apo-ease);
}

.apo-category-row:hover[b-5ggy4lpe09],
.apo-category-row.is-selected[b-5ggy4lpe09] {
    border-color: color-mix(in srgb, var(--apo-brand-gold) 55%, transparent);
    background: color-mix(in srgb, var(--apo-brand-gold) 7%, var(--apo-paper));
}

.apo-category-row:disabled[b-5ggy4lpe09] {
    cursor: default;
    opacity: .7;
}

.apo-category-row__swatch[b-5ggy4lpe09] { width: 10px; height: 38px; border-radius: var(--apo-radius-full); flex: none; }
.apo-category-row__copy[b-5ggy4lpe09] { display: flex; flex-direction: column; min-width: 0; }
.apo-category-row__copy strong[b-5ggy4lpe09] { font-size: var(--apo-text-body); }
.apo-category-row__copy small[b-5ggy4lpe09] { color: var(--apo-ink-500); font-size: var(--apo-text-caption2); }

.apo-category-row__inactive[b-5ggy4lpe09] {
    margin-left: auto;
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption2);
    text-transform: uppercase;
    letter-spacing: var(--apo-tracking-widest);
}

.apo-category-manager__form[b-5ggy4lpe09] {
    padding: var(--apo-space-6);
    border: 1px solid color-mix(in srgb, var(--apo-brand-gold) 18%, var(--apo-border));
    border-radius: var(--apo-radius-xl);
    background: color-mix(in srgb, var(--apo-paper) 96%, var(--apo-brand-gold) 4%);
}

.apo-category-manager__colour[b-5ggy4lpe09] { display: grid; grid-template-columns: 46px 1fr; gap: var(--apo-space-2); align-items: center; }

.apo-category-manager__source-link[b-5ggy4lpe09] {
    display: inline-flex;
    align-items: center;
    gap: var(--apo-space-1);
    max-width: 100%;
    margin: calc(var(--apo-space-2) * -1) 0 var(--apo-space-2);
    color: var(--apo-brand-gold);
    font-size: var(--apo-text-caption2);
    overflow-wrap: anywhere;
}

.apo-category-manager__source-link[b-5ggy4lpe09]  .mud-icon-root {
    flex: none;
}

.apo-category-manager__probe[b-5ggy4lpe09] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--apo-space-2);
    margin-bottom: var(--apo-space-3);
}

.apo-category-manager__probe[b-5ggy4lpe09]  .mud-alert {
    width: 100%;
}

.apo-category-manager__colour input[type=color][b-5ggy4lpe09] {
    width: 44px;
    height: 44px;
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-xl);
    padding: var(--apo-space-1);
    background: transparent;
}

@media (max-width: 700px) {
    .apo-category-manager__intro[b-5ggy4lpe09] { flex-direction: column; }
    .apo-category-manager__list[b-5ggy4lpe09] { max-height: 260px; }
}
/* /Components/Pages/Content/ContentConcurrencyDialog.razor.rz.scp.css */
.apo-conflict-copy[b-6o2jtr1pij] {
    height: 100%;
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-xl);
    background: var(--apo-surface);
}
/* /Components/Pages/Content/ContentSourceBadge.razor.rz.scp.css */
.apo-content-source[b-nfvhkucxz4] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.apo-content-source :deep(.mud-link)[b-nfvhkucxz4] {
    align-items: center;
    display: inline-flex;
    gap: .2rem;
}
/* /Components/Pages/Content/ContentSynchronization.razor.rz.scp.css */
/* The sync overview: one facts strip up top, the work tables in the main
   column, the settings on the shared editorial rail. Frames and section
   grammar come from app.css (.apo-editorial-rail, .apo-switch-row); this
   file lays out the strip, the two-column body and the rows inside the
   rail's sections. */

.apo-sync-pulse[b-obwznhlcic] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px 24px;
    padding: 14px 18px;
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-lg);
    background: var(--apo-paper);
}

.apo-sync-pulse__fact[b-obwznhlcic] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.apo-sync-pulse__label[b-obwznhlcic] {
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption2);
    line-height: 1.3;
}

.apo-sync-pulse__value[b-obwznhlcic] {
    color: var(--apo-ink-900);
    font-size: var(--apo-text-caption1);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apo-sync-pulse__value--bad[b-obwznhlcic] {
    color: var(--apo-error);
}

.apo-sync-pulse__value--mono[b-obwznhlcic] {
    font-family: var(--apo-font-mono);
    font-weight: 500;
}

/* The 320px track exists only while the rail does: the aside renders only
   with a loaded configuration, and a dead gutter beside the tables in the
   backend-down state (or during the first load) is width the tables own. */
.apo-sync-layout[b-obwznhlcic] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}

.apo-sync-layout:has(> .apo-sync-rail)[b-obwznhlcic] {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.apo-sync-layout__main[b-obwznhlcic] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* Capped and scrollable: this rail stacks enough sections to outgrow a
   ~800px-tall viewport, and a pinned rail taller than the screen would keep
   its bottom rows unreachable for the whole page scroll. */
.apo-sync-rail[b-obwznhlcic] {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
}

/* Beside the rail the main column can drop under the filter row's natural
   width; the card head's accessory is unshrinkable by default, so let it
   shrink here and let the filters wrap instead of clipping against the
   card's overflow. ::deep — the card head is CardHead's own markup. */
.apo-sync-layout__main[b-obwznhlcic]  .apo-card-head__actions {
    flex: 1 1 auto;
    min-width: 0;
}

.apo-sync-filters[b-obwznhlcic] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.apo-sync-mapping-actions[b-obwznhlcic] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.apo-sync-rail__pair[b-obwznhlcic] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* margin-bottom only: a scoped margin:0 would out-specify the rail's
   > * + * rhythm and glue the caption to its section label. */
.apo-sync-rail__hint[b-obwznhlcic] {
    margin-bottom: 0;
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption2);
    line-height: 1.5;
}

/* ::deep because the button is MudButton's own root — a scoped class on a
   child component's root matches nothing. */
.apo-sync-rail__commit[b-obwznhlcic]  .mud-button {
    width: 100%;
}

.apo-sync-rail__meta[b-obwznhlcic] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
}

.apo-sync-rail__meta > div[b-obwznhlcic] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.apo-sync-rail__meta dt[b-obwznhlcic] {
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption2);
}

/* The build hash is sixty characters of provenance nobody reads twice: it
   keeps one line and an ellipsis, with the full value on the title. */
.apo-sync-rail__meta dd[b-obwznhlcic] {
    margin: 0;
    color: var(--apo-ink-800);
    font-family: var(--apo-font-mono);
    font-size: var(--apo-text-caption1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1100px) {
    .apo-sync-layout[b-obwznhlcic] {
        grid-template-columns: 1fr;
    }

    .apo-sync-rail[b-obwznhlcic] {
        position: static;
    }
}
/* /Components/Pages/Content/ContentSyncItemDetailDialog.razor.rz.scp.css */
/* The head of the sync-item dialog — the documented .apo-dialog-summary
   object (the record being acted on), EXTENDED here rather than forked:
   the global class brings the recessed panel, the title and the meta line;
   this file only lays the summary out as a row — source key and target key
   on the left, the change and status dots on the right — and spaces it from
   the tables beneath. No avatar: the record is a sync item, not a person. */
.content-sync-item-head[b-o6ldospf1b] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.content-sync-item-head__who[b-o6ldospf1b] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.content-sync-diff-value[b-o6ldospf1b] {
    margin: 0;
    max-width: 32rem;
    max-height: 18rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: inherit;
    font: inherit;
    font-size: .78rem;
}
/* /Components/Pages/Content/ContentSyncRunDetail.razor.rz.scp.css */
.content-sync-run-stats[b-bg6phg3l7f] {
    display: grid;
    grid-template-columns: repeat(6, minmax(6.5rem, 1fr));
    gap: .75rem;
}

.content-sync-run-stats > div[b-bg6phg3l7f] {
    padding: .8rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: .75rem;
    background: var(--mud-palette-background-gray);
}

.content-sync-run-stats span[b-bg6phg3l7f],
.content-sync-run-stats strong[b-bg6phg3l7f] {
    display: block;
}

.content-sync-run-stats span[b-bg6phg3l7f] {
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

.content-sync-run-stats strong[b-bg6phg3l7f] {
    margin-top: .2rem;
    font-size: 1.25rem;
}

@media (max-width: 960px) {
    .content-sync-run-stats[b-bg6phg3l7f] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .content-sync-run-stats[b-bg6phg3l7f] { grid-template-columns: repeat(2, 1fr); }
}
/* /Components/Pages/Content/ContentWorkflowPanel.razor.rz.scp.css */
.apo-workflow-panel__heading[b-25ulbm7b77] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--apo-space-3);
    margin-bottom: var(--apo-space-4);
}

.apo-workflow-panel__meta[b-25ulbm7b77] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--apo-space-3);
    margin: 0 0 var(--apo-space-4);
}

.apo-workflow-panel__meta div[b-25ulbm7b77] {
    padding: var(--apo-space-3);
    border-radius: var(--apo-radius-lg);
    background: var(--apo-surface-sunk);
}

.apo-workflow-panel__meta dt[b-25ulbm7b77] {
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption1);
}

.apo-workflow-panel__meta dd[b-25ulbm7b77] {
    margin: var(--apo-space-1) 0 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.apo-workflow-panel__schedule[b-25ulbm7b77] {
    display: flex;
    align-items: center;
    gap: var(--apo-space-2);
    margin-bottom: var(--apo-space-2);
    color: var(--apo-text-secondary);
    font-size: .875rem;
}

.apo-workflow-panel__actions[b-25ulbm7b77] {
    display: grid;
    gap: var(--apo-space-2);
    margin-top: var(--apo-space-4);
}
/* /Components/Pages/Content/Media.razor.rz.scp.css */
.apo-media-library[b-jy41rsgaod] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--apo-space-4);
}

.apo-media-card[b-jy41rsgaod] {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-xl);
    background: var(--apo-paper);
    box-shadow: var(--apo-shadow-sm);
}

.apo-media-card__preview[b-jy41rsgaod] {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--apo-surface-sunk);
    cursor: zoom-in;
}

.apo-media-card__preview:focus-visible[b-jy41rsgaod] {
    outline: 3px solid var(--apo-brand-gold);
    outline-offset: -3px;
}

.apo-media-card__preview img[b-jy41rsgaod] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 160ms ease;
}

.apo-media-card__preview:hover img[b-jy41rsgaod] {
    transform: scale(1.025);
}

.apo-media-card__preview > span[b-jy41rsgaod] {
    position: absolute;
    right: var(--apo-space-2);
    bottom: var(--apo-space-2);
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: rgba(20, 18, 17, .72);
    color: #fff;
}

.apo-media-card__body[b-jy41rsgaod] {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--apo-space-1);
    padding: var(--apo-space-3) var(--apo-space-4);
}

.apo-media-card__body strong[b-jy41rsgaod],
.apo-media-card__body span[b-jy41rsgaod],
.apo-media-card__body code[b-jy41rsgaod] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apo-media-card__body span[b-jy41rsgaod],
.apo-media-card__body small[b-jy41rsgaod],
.apo-media-card__body code[b-jy41rsgaod] {
    color: var(--mud-palette-text-secondary);
    font-size: var(--apo-text-caption2);
}

.apo-media-card__body .is-empty[b-jy41rsgaod] {
    font-style: italic;
}

.apo-media-card__actions[b-jy41rsgaod] {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--apo-space-2) var(--apo-space-2);
    border-top: 1px solid var(--apo-border-subtle);
}
/* /Components/Pages/Content/MediaPager.razor.rz.scp.css */
.apo-media-pager[b-vhplacjghe] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--apo-space-3);
    margin-top: var(--apo-space-5);
}

.apo-media-pager > span[b-vhplacjghe] {
    color: var(--mud-palette-text-secondary);
    font-size: var(--apo-text-caption1);
    text-align: center;
}

@media (max-width: 520px) {
    .apo-media-pager[b-vhplacjghe] {
        align-items: stretch;
        flex-direction: column;
    }

    .apo-media-pager > span[b-vhplacjghe] {
        order: -1;
    }
}
/* /Components/Pages/Content/MediaPickerDialog.razor.rz.scp.css */
.apo-media-picker[b-gzqkue06c0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--apo-space-3);
    max-height: min(62vh, 680px);
    overflow-y: auto;
    padding: 2px;
}

.apo-media-picker__item[b-gzqkue06c0] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--apo-space-2);
    padding: var(--apo-space-2);
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-xl);
    background: var(--apo-paper);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.apo-media-picker__item:hover[b-gzqkue06c0],
.apo-media-picker__item:focus-visible[b-gzqkue06c0],
.apo-media-picker__item.is-selected[b-gzqkue06c0] {
    border-color: var(--apo-brand-gold);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--apo-brand-gold) 18%, transparent);
    outline: 0;
}

.apo-media-picker__item img[b-gzqkue06c0] {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--apo-radius-lg);
    background: var(--apo-surface-sunk);
    object-fit: cover;
}

.apo-media-picker__copy[b-gzqkue06c0] {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
}

.apo-media-picker__copy strong[b-gzqkue06c0],
.apo-media-picker__copy span[b-gzqkue06c0],
.apo-media-picker__copy small[b-gzqkue06c0] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apo-media-picker__copy span[b-gzqkue06c0],
.apo-media-picker__copy small[b-gzqkue06c0] {
    color: var(--mud-palette-text-secondary);
    font-size: var(--apo-text-caption2);
}
/* /Components/Pages/Content/MediaPreviewDialog.razor.rz.scp.css */
.apo-media-preview[b-u36dwt4240] {
    display: flex;
    margin: 0;
    flex-direction: column;
    gap: var(--apo-space-3);
}

.apo-media-preview img[b-u36dwt4240] {
    width: 100%;
    max-height: 65vh;
    border-radius: var(--apo-radius-xl);
    background: var(--apo-surface-sunk);
    object-fit: contain;
}

.apo-media-preview figcaption[b-u36dwt4240] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--apo-space-1);
}

.apo-media-preview figcaption span[b-u36dwt4240],
.apo-media-preview figcaption small[b-u36dwt4240],
.apo-media-preview figcaption code[b-u36dwt4240] {
    color: var(--mud-palette-text-secondary);
}

.apo-media-preview figcaption code[b-u36dwt4240] {
    overflow-wrap: anywhere;
}
/* /Components/Pages/Content/MobileContentPreviewDialog.razor.rz.scp.css */
/* A caption belonging to the dialog's title, not a callout: it states what
   the pane is, once, and then gets out of the way. */
.apo-exact-preview__note[b-07njwc8ln6] {
    margin: -2px 0 var(--apo-space-3);
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption1);
    line-height: var(--apo-leading-caption1);
}

/* The stage takes every pixel the dialog has left, and the device inside it
   takes every pixel of the stage. That is the fix for the scrolling: the pane
   used to ask for min(72vh, 820px) inside a body that could only give it ~550,
   so the dialog itself became a second scroller — a wheel over the phone moved
   the whole dialog instead of the app, and the bottom of the device was cut
   off by the footer. Nothing outside the app scrolls now. */
.apo-exact-preview[b-07njwc8ln6] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    /* A floor rather than 0: if the dialog ever fails to become a flex column
       — a MudBlazor upgrade that stops honouring Class on .mud-dialog would do
       it — the pane must degrade to a short phone in a scrolling dialog, not
       to a device collapsed to nothing. */
    min-height: 360px;
    justify-content: center;
    padding: var(--apo-space-3);
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-xl);
    background: var(--apo-surface-sunk);
}

/* DeviceFrame renders outside this component's scope. */
.apo-exact-preview[b-07njwc8ln6]  .apo-device-frame {
    flex: 0 1 auto;
}

.apo-exact-preview iframe[b-07njwc8ln6] {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.apo-exact-preview__loading[b-07njwc8ln6] {
    position: absolute;
    z-index: 6;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--apo-space-3);
    background: color-mix(in srgb, var(--apo-surface-sunk) 92%, transparent);
}

/* The escape hatch renders a plain sanitized HTML document rather than the
   app, so it gets a page-shaped frame instead of a phone. */
.apo-exact-preview--fallback iframe[b-07njwc8ln6] {
    width: min(900px, 100%);
    border-radius: var(--apo-radius-xl);
    background: #fff;
}

@media (max-width: 600px) {
    .apo-exact-preview[b-07njwc8ln6] {
        padding: var(--apo-space-2);
    }
}
/* /Components/Pages/Content/News.razor.rz.scp.css */
/* The newsroom's own chrome: one rail above the table, and the two-line
   identity cell inside it.

   Everything else this page used to draw for itself — a gradient masthead,
   four metric boxes, a bespoke frame, a toolbar, a row of category chips — is
   gone, either to a shared component or into the rail below. */

/* ============================================================
   THE RAIL

   Sits on the card's own paper, NOT on a recessed band: the band is what a
   table header wears and the header is eighteen pixels below this. Two grey
   strips stacked read as one 80px block of chrome with a hairline through it.
   A single rule under the rail separates the two instead.
   ============================================================ */
.apo-news-rail[b-gnl24jre9n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--apo-space-4);
    padding: 10px var(--apo-space-4);
    border-bottom: 1px solid var(--apo-border);
}

.apo-news-scopes[b-gnl24jre9n] {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    overflow: auto;
}

/* A scope is TEXT that can be pressed, not a chip. Four bordered pills above a
   bordered table inside a bordered card is the third frame in forty pixels,
   and a row of them reads as a segmented control offering four VIEWS of the
   data rather than four subsets of it. The active one takes a ground; the rest
   take nothing until the pointer arrives. */
.apo-news-scope[b-gnl24jre9n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 5px 10px;
    border: 0;
    border-radius: var(--apo-radius-sm);
    background: transparent;
    color: var(--apo-ink-500);
    font: inherit;
    font-size: var(--apo-text-caption1);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--apo-duration-fast) var(--apo-ease);
}

/* One property on hover, per the doctrine. */
.apo-news-scope:hover[b-gnl24jre9n] {
    background: var(--apo-surface-hover);
}

.apo-news-scope.is-active[b-gnl24jre9n] {
    background: var(--apo-surface-sunk);
    color: var(--apo-ink-900);
}

.apo-news-scope:focus-visible[b-gnl24jre9n] {
    outline: 2px solid var(--apo-accent);
    outline-offset: 2px;
}

/* The count rides one stop behind its label, on tabular figures so the rail
   does not jitter as the numbers change. Deliberately not a badge: a filled
   disc behind a single digit is the tell this whole pass exists to remove, and
   at this size it would be larger than the word it belongs to. */
.apo-news-count[b-gnl24jre9n] {
    color: var(--apo-ink-400);
    font-size: var(--apo-text-caption2);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.apo-news-scope.is-active .apo-news-count[b-gnl24jre9n] {
    color: var(--apo-ink-500);
}

/* On the Kategorije button the same count says how many the manager holds —
   the one reading on this page that was never about the list. */
.mud-button .apo-news-count[b-gnl24jre9n] {
    margin-left: 6px;
}

/* ============================================================
   THE CATEGORY PICK
   ============================================================ */
.apo-news-pick[b-gnl24jre9n] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 5px 10px 5px 9px;
    border: 1px solid transparent;
    border-radius: var(--apo-radius-sm);
    background: transparent;
    color: var(--apo-ink-600);
    font: inherit;
    font-size: var(--apo-text-caption1);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--apo-duration-fast) var(--apo-ease);
}

.apo-news-pick:hover[b-gnl24jre9n] {
    background: var(--apo-surface-hover);
}

/* A chosen category is the one thing on this rail that is not the default, so
   it earns an edge: the rail has to say at a glance that the list is being
   narrowed by something other than the scope. */
.apo-news-pick.is-active[b-gnl24jre9n] {
    border-color: var(--apo-border);
    color: var(--apo-ink-900);
}

.apo-news-pick:focus-visible[b-gnl24jre9n] {
    outline: 2px solid var(--apo-accent);
    outline-offset: 2px;
}

/* The category's own colour, which is DATA — the only colour this page draws
   that is not ink, success, warning or error. */
.apo-news-pick__dot[b-gnl24jre9n] {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
}

/* "All" has no colour of its own, so it takes a ring rather than a fill and
   the column of dots down the menu keeps its rhythm. */
.apo-news-pick__dot--all[b-gnl24jre9n] {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--apo-ink-300);
}

/* The menu renders into the popover provider, outside this component's DOM —
   but the dots are written in this file, so they carry its scope attribute and
   the rule reaches them wherever they land. */
.apo-news-pop .apo-news-pick__dot[b-gnl24jre9n] {
    margin-right: 8px;
}

/* Drawn, not set as a glyph: a 4px triangle needs no icon font, and an icon
   would be one more object in a rail whose whole argument is that it holds
   three. */
.apo-news-pick__caret[b-gnl24jre9n] {
    width: 0;
    height: 0;
    margin-left: 2px;
    border-inline: 3.5px solid transparent;
    border-top: 4px solid var(--apo-ink-400);
}

/* ============================================================
   THE ROW
   ============================================================ */

/* The row's identity: the headline, and under it the three facts that used to
   be columns of their own. flex-start so a short headline's hit target — and
   its focus ring — stop at the end of the words. */
.apo-news-title-cell[b-gnl24jre9n] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    /* No max-width of its own: the grid caps every cell at 320px and a second
       ceiling here would just be a number to keep in step with that one. */
    min-width: 240px;
}

/* Full ink at 550 while everything after it sits a stop back: the first column
   is the row's identity, and six equally weighted cells give the eye nowhere
   to land. */
.apo-news-title-cell[b-gnl24jre9n]  .apo-row-open {
    color: var(--apo-ink-900);
    font-weight: 550;
    line-height: 1.35;
}

.apo-news-title-cell small[b-gnl24jre9n] {
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption2);
    line-height: 1.4;
}

/* Quieter than the words it separates — at full ink three middots read as
   punctuation you are meant to parse. */
.apo-news-sep[b-gnl24jre9n] {
    padding: 0 5px;
    color: var(--apo-ink-300);
}

/* TWO LINES, AND THE ONE PLACE THIS PRODUCT ALLOWS IT.

   Grid cells are nowrap + ellipsis everywhere, deliberately: a wrapping cell
   silently doubles row height and breaks a grid's density. It costs nothing
   HERE, because this grid's rows are already two lines tall — the identity
   cell stacks a headline over its metadata line, ~34px, and two clamped lines
   of summary come to the same. The second line is free, and it is the
   difference between reading what a piece says and reading the first half of
   its first sentence.

   Written as an exception to a named rule rather than as a looser rule for
   everyone: no other grid has earned the height. */
.apo-news-list[b-gnl24jre9n]  .mud-table-body .apo-news-summary-cell {
    max-width: 480px;
    white-space: normal;
}

.apo-news-summary[b-gnl24jre9n] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption1);
    line-height: 1.45;
}

@media (max-width: 900px) {
    .apo-news-rail[b-gnl24jre9n] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--apo-space-2);
    }

    .apo-news-title-cell[b-gnl24jre9n] {
        min-width: 180px;
    }
}
/* /Components/Pages/Dashboard/Dashboard.razor.rz.scp.css */
/* .apo-dash-head / __kpis / __grid / __chart wrap plain elements in
   Dashboard.razor, so they DO get the Blazor scope attribute. Everything that
   lives inside a <MudPaper> (e.g. .apo-dash-card, .apo-dash-appointments,
   .apo-dash-activity) is defined in wwwroot/css/app.css so the styles actually
   apply — scoped CSS cannot reach child-component roots. */

.apo-dash-head[b-lsxk395w7c] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 0 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--apo-border);
}

.apo-dash-head__copy[b-lsxk395w7c] {
    min-width: 0;
}

.apo-dash-head__greeting[b-lsxk395w7c] {
    margin: 0;
    font-family: var(--apo-font-display);
    font-size: var(--apo-text-subtitle1);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.026em;
    color: var(--apo-ink-900);
}

.apo-dash-head__meta[b-lsxk395w7c] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption1);
    margin: 5px 0 0;
    letter-spacing: 0;
}

.apo-dash-head__dot[b-lsxk395w7c] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--apo-success);
    flex: 0 0 auto;
}

.apo-dash-head__sep[b-lsxk395w7c] {
    color: var(--apo-ink-300);
}

.apo-dash-head__actions[b-lsxk395w7c] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* The one number worth reading before anything else, rendered as a bordered
   chip rather than a card so it reads as part of the header row. */
.apo-dash-head__today[b-lsxk395w7c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 9px;
    background: var(--apo-paper);
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-md);
}

.apo-dash-head__today[b-lsxk395w7c]  .mud-icon-root {
    font-size: var(--apo-icon-sm) !important;
    color: var(--apo-ink-400);
}

.apo-dash-head__today-copy[b-lsxk395w7c] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.apo-dash-head__today-label[b-lsxk395w7c] {
    color: var(--apo-ink-700);
    font-size: var(--apo-text-caption1);
    font-weight: 500;
    white-space: nowrap;
}

.apo-dash-head__today-meta[b-lsxk395w7c] {
    color: var(--apo-ink-400);
    font-size: var(--apo-text-caption1);
    white-space: nowrap;
}

.apo-dash-head__today-value[b-lsxk395w7c] {
    font-size: var(--apo-text-body);
    color: var(--apo-ink-900);
    font-weight: 600;
    padding-left: 8px;
    margin-left: 2px;
    border-left: 1px solid var(--apo-border);
    line-height: 1;
}

/* The KPI row is .apo-metric-strip in app.css now — one frame with hairline
   dividers rather than four bordered boxes. It has to live there rather than
   here because it styles <StatCard>'s own root, which scoped CSS cannot
   reach. */

.apo-dash-grid[b-lsxk395w7c] {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
    gap: 10px;
    margin-bottom: 10px;
    align-items: start;
}

/* Left column of .apo-dash-grid: chart card stacked over the schedule card,
   matching the grid's own 10px rhythm. */
.apo-dash-col[b-lsxk395w7c] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.apo-dash-chart[b-lsxk395w7c] {
    margin-bottom: 0;
}

.apo-dash-chart__plot[b-lsxk395w7c] {
    padding: 12px 10px 4px;
}

@media (max-width: 1200px) {
    .apo-dash-grid[b-lsxk395w7c] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .apo-dash-head[b-lsxk395w7c] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .apo-dash-head__actions[b-lsxk395w7c] {
        flex-wrap: wrap;
    }

    .apo-dash-head__today[b-lsxk395w7c] {
        flex: 1 1 auto;
    }

    .apo-dash-head__today-value[b-lsxk395w7c] {
        margin-left: auto;
    }
}

@media (max-width: 560px) {
    .apo-dash-head__today-meta[b-lsxk395w7c] {
        display: none;
    }

    .apo-dash-head__actions[b-lsxk395w7c] {
        display: grid;
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Identity/ManagedUserDialog.razor.rz.scp.css */
/* The head of the user editor — the documented .apo-dialog-summary object
   (the record being acted on), EXTENDED here rather than forked: the global
   class brings the recessed panel, the title and the meta line; this file
   only lays the summary out as a row, sizes the person's mark, and spaces it
   from the form. Colour on the mark comes from the global avatar classes so
   the per-person tint actually lands — a scoped background would out-specify
   the tint classes and grey every head. */
.apo-user-head[b-zkqkrxm8dv] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

/* 38px — between the grid's 28 and the profile page's 44: in the grid the
   mark aids scanning, on the profile it IS the subject; here it names the
   record without out-shouting the form beneath. Geometry only: background
   and ink stay with .apo-identity__avatar and its tint modifiers. */
.apo-user-head__avatar[b-zkqkrxm8dv] {
    width: 38px;
    height: 38px;
    font-size: var(--apo-text-caption1);
}

.apo-user-head__who[b-zkqkrxm8dv] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.apo-user-head__sep[b-zkqkrxm8dv] {
    padding: 0 5px;
    color: var(--apo-ink-300);
}
/* /Components/Pages/Identity/Profile.razor.rz.scp.css */
/* MY PROFILE — a settings sheet.

   One frame, sections divided by hairlines, each section's name on a fixed
   left rail. The rail is the same device DialogSection uses inside modals and
   for the same reason: a column of names gives the eye somewhere to scan down,
   so finding "Pristup" in a long sheet is a glance rather than a read.

   Deliberately NOT three cards in a row. A person's own record is read top to
   bottom in one pass; laid out as tiles it becomes a hunt across the page, and
   an entity drawn as a grid of boxes is how every generated admin panel draws
   one. */

/* ============================================================
   THE PERSON
   ============================================================ */
.apo-profile__identity[b-n3a7jecr41] {
    display: flex;
    align-items: center;
    gap: var(--apo-space-4);
    padding: var(--apo-space-5) var(--apo-space-5);
    border-bottom: 1px solid var(--apo-border);
}

/* 44px rather than the grid's 28: in a table the avatar is an aid to scanning
   a column of people, here it is the one person the page is about. Geometry
   only — the ground and the ink come from the global .apo-identity__avatar
   and its tint modifiers, because a scoped background out-specifies the tint
   classes and would grey every mark on this page. */
.apo-profile__avatar[b-n3a7jecr41] {
    width: 44px;
    height: 44px;
    flex: none;
    font-size: var(--apo-text-subtitle2);
    letter-spacing: 0.02em;
}

.apo-profile__who[b-n3a7jecr41] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.apo-profile__who h2[b-n3a7jecr41] {
    margin: 0;
    font-size: var(--apo-text-title3);
    font-weight: 600;
    letter-spacing: var(--apo-tracking-title);
    line-height: 1.25;
    color: var(--apo-ink-900);
}

.apo-profile__who p[b-n3a7jecr41] {
    margin: 0;
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption1);
    line-height: 1.4;
}

.apo-profile__standing[b-n3a7jecr41] {
    display: flex;
    align-items: center;
    gap: var(--apo-space-3);
    flex: none;
}

/* ============================================================
   THE SECTIONS
   ============================================================ */
.apo-profile__section[b-n3a7jecr41] {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: var(--apo-space-5);
    padding: var(--apo-space-5);
    border-bottom: 1px solid var(--apo-border);
}

.apo-profile__section:last-child[b-n3a7jecr41] {
    border-bottom: 0;
}

/* The rail. Sentence case at the caption weight — this names a group of facts,
   it is not a heading competing with the person's name above it. */
.apo-profile__section h3[b-n3a7jecr41] {
    margin: 0;
    color: var(--apo-ink-700);
    font-family: var(--apo-font-body);
    font-size: var(--apo-text-caption1);
    font-weight: 600;
    letter-spacing: var(--apo-tracking-caption);
    line-height: 1.4;
}

/* Label over value, stacked, because half these values are chips or lists and
   a two-column label/value grid inside a two-column section grid is one nesting
   too many to keep aligned. */
.apo-profile__facts[b-n3a7jecr41] {
    display: flex;
    flex-direction: column;
    gap: var(--apo-space-4);
    margin: 0;
    min-width: 0;
}

.apo-profile__facts > div[b-n3a7jecr41] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.apo-profile__facts dt[b-n3a7jecr41] {
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption2);
    line-height: var(--apo-leading-caption1);
}

.apo-profile__facts dd[b-n3a7jecr41] {
    margin: 0;
    color: var(--apo-ink-900);
    font-size: var(--apo-text-body);
    line-height: var(--apo-leading-body);
    overflow-wrap: anywhere;
}

.apo-profile__mono[b-n3a7jecr41] {
    font-family: var(--apo-font-mono);
    font-size: var(--apo-text-caption1);
}

.apo-profile__body[b-n3a7jecr41] {
    min-width: 0;
}

/* ============================================================
   THE PERMISSION LIST
   ============================================================ */

/* A text control, not a button: it reveals a list on the same page, which is
   the same register as a link and a smaller one than anything with an edge. */
.apo-profile__disclose[b-n3a7jecr41] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--apo-accent);
    font: inherit;
    font-size: var(--apo-text-caption1);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--apo-radius-sm);
}

.apo-profile__disclose:hover[b-n3a7jecr41] {
    text-decoration: underline;
}

.apo-profile__disclose:focus-visible[b-n3a7jecr41] {
    outline: 2px solid var(--apo-accent);
    outline-offset: 3px;
}

/* Two columns of monospace at caption size: permission strings are compared
   letter by letter, and forty of them down one column is a scroll. */
.apo-profile__permissions[b-n3a7jecr41] {
    columns: 2;
    column-gap: var(--apo-space-5);
    margin: var(--apo-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.apo-profile__permissions li[b-n3a7jecr41] {
    color: var(--apo-ink-600);
    font-family: var(--apo-font-mono);
    font-size: var(--apo-text-caption2);
    line-height: 1.7;
    break-inside: avoid;
}

/* ============================================================
   THE SESSIONS
   ============================================================ */
.apo-profile__sessions[b-n3a7jecr41] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.apo-profile__sessions li[b-n3a7jecr41] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 0;
    border-bottom: 1px solid var(--apo-border);
}

.apo-profile__sessions li:first-child[b-n3a7jecr41] {
    padding-top: 0;
}

.apo-profile__sessions li:last-child[b-n3a7jecr41] {
    border-bottom: 0;
}

.apo-profile__session-name[b-n3a7jecr41] {
    color: var(--apo-ink-900);
    font-size: var(--apo-text-body);
    font-weight: 500;
    line-height: 1.35;
}

.apo-profile__session-meta[b-n3a7jecr41] {
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption2);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

/* Why a command is missing, said once, where the command would have been. */
.apo-profile__note[b-n3a7jecr41] {
    margin: var(--apo-space-3) 0 0;
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption2);
    line-height: 1.5;
    max-width: 62ch;
}

@media (max-width: 760px) {
    .apo-profile__section[b-n3a7jecr41] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--apo-space-3);
    }

    .apo-profile__identity[b-n3a7jecr41] {
        flex-wrap: wrap;
    }

    .apo-profile__permissions[b-n3a7jecr41] {
        columns: 1;
    }
}
/* /Components/Pages/Identity/Users.razor.rz.scp.css */
/* .apo-data-card is applied to a <MudPaper> in every list page, so scoped CSS
   doesn't reach it. All .apo-data-card rules live in wwwroot/css/app.css —
   as do .apo-status-cell/.apo-amount-cell, which are CellClass hooks shared
   by several list pages and were dead outside this one while scoped here. */
.apo-page-search[b-ulht6w1gro] {
    min-width: 260px;
}
/* /Components/Pages/Loyalty/LoyaltyMemberDialog.razor.rz.scp.css */
/* The head of the member editor — the documented .apo-dialog-summary object
   (the record being acted on), EXTENDED here rather than forked: the global
   class brings the recessed panel, the title and the meta line; this file
   only lays the summary out as a row, sizes the person's mark, and spaces it
   from the sections. Colour on the mark comes from the global avatar classes
   so the per-person tint actually lands — a scoped background would
   out-specify the tint classes and grey every head. */
.apo-member-head[b-kfqs1u3otu] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

/* 38px — the same step the user editor picked between the grid's 28 and the
   profile page's 44: the mark names the record without out-shouting the
   sections beneath. Geometry only: background and ink stay with
   .apo-identity__avatar and its tint modifiers. */
.apo-member-head__avatar[b-kfqs1u3otu] {
    width: 38px;
    height: 38px;
    font-size: var(--apo-text-caption1);
}

.apo-member-head__who[b-kfqs1u3otu] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}
/* /Components/Pages/Messaging/NotificationCampaignDialog.razor.rz.scp.css */
/* The head of the campaign editor — the documented .apo-dialog-summary
   object (the record being acted on), EXTENDED here rather than forked: the
   global class brings the recessed panel, the title and the meta line; this
   file only lays the summary out as a row and spaces it from the form. No
   mark — a campaign is not a person, so there is no avatar to size. */
.apo-campaign-head[b-m8ewll35gl] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.apo-campaign-head__who[b-m8ewll35gl] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.apo-campaign-head__sep[b-m8ewll35gl] {
    padding: 0 5px;
    color: var(--apo-ink-300);
}

/* The one native input in the product — MudBlazor has no datetime-local, so
   this control is hand-drawn. It was hand-rolled off-system too: 42px tall
   against the app-wide 32px control height, a 4px radius against the 8px
   control radius, mud-palette vars and a raw rem size. Everything here comes
   from the same tokens as the MudBlazor fields around it, so the native
   input sits on the same line as its neighbours. */
.apo-datetime-label[b-m8ewll35gl] {
    display: block;
    font-size: var(--apo-text-caption1);
    color: var(--apo-ink-600);
    margin: 4px 0;
}

.apo-datetime-input[b-m8ewll35gl] {
    width: 100%;
    height: var(--apo-control-h);
    padding: 0 12px;
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-control);
    background: transparent;
    color: inherit;
    font-size: var(--apo-text-body);
}
/* /Components/Pages/MobileApp/MobileAppEmulator.razor.rz.scp.css */
/* The emulator workspace on the product's own chrome. The frame, hairlines
   and section labels of both side panels come from the shared
   .apo-editorial-rail vocabulary in app.css — this file only lays out the
   page grid, the stage, and the rows inside the sections. Everything resolves
   to --apo-* ink tokens; the legacy gold names are gone. */

.apo-mobile-emulator[b-ikf3mu31p8] {
    min-height: calc(100vh - 152px);
}

.apo-mobile-emulator__lede[b-ikf3mu31p8] {
    max-width: 680px;
    margin: 0 0 24px;
    color: var(--apo-ink-500);
    line-height: 1.6;
}

.apo-mobile-emulator__workspace[b-ikf3mu31p8] {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
    align-items: start;
    gap: clamp(24px, 3.5vw, 54px);
}

.apo-mobile-emulator__rail[b-ikf3mu31p8] {
    position: sticky;
    top: 92px;
    margin-top: 28px;
}

.apo-mobile-emulator__device[b-ikf3mu31p8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.apo-mobile-emulator__device strong[b-ikf3mu31p8] {
    color: var(--apo-ink-900);
    font-size: var(--apo-text-body);
    font-weight: 600;
}

.apo-mobile-emulator__device span[b-ikf3mu31p8] {
    color: var(--apo-ink-500);
    font-family: var(--apo-font-mono);
    font-size: var(--apo-text-caption1);
}

.apo-mobile-emulator__actions[b-ikf3mu31p8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* justify-content is load-bearing: MudBlazor's stylesheet resets every bare
   <button> to inline-flex WITH justify-content:center, which is what used to
   float these rows into the middle of their card. The negative bleed lets the
   hover surface run past the text column, the way a sidebar row highlights,
   while the labels stay on the section's left edge. */
.apo-mobile-emulator__actions button[b-ikf3mu31p8] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: calc(100% + 16px);
    margin-left: -8px;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--apo-radius-control);
    background: transparent;
    color: var(--apo-ink-800);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--apo-duration-fast) var(--apo-ease);
}

.apo-mobile-emulator__actions button:hover[b-ikf3mu31p8] {
    background: var(--apo-ink-50);
}

.apo-mobile-emulator__actions button > span:last-child[b-ikf3mu31p8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.apo-mobile-emulator__actions strong[b-ikf3mu31p8] {
    font-size: var(--apo-text-caption1);
    font-weight: 500;
    line-height: 1.3;
}

.apo-mobile-emulator__actions small[b-ikf3mu31p8] {
    margin-top: 1px;
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption2);
    line-height: 1.3;
}

/* A bare 16px glyph. The old 30px bordered well around each icon was pure
   packaging — a second frame inside an already-framed card. */
.apo-mobile-emulator__action-icon[b-ikf3mu31p8] {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--apo-ink-500);
}

.apo-mobile-emulator__action-icon svg[b-ikf3mu31p8] {
    width: 16px;
    height: 16px;
}

.apo-mobile-emulator__tip[b-ikf3mu31p8] {
    margin: 0;
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption1);
    line-height: 1.55;
}

.apo-mobile-emulator__stage[b-ikf3mu31p8] {
    position: relative;
    display: flex;
    justify-content: center;
    min-width: 0;
    padding: 2px 0 46px;
}

/* A soft wash behind the shoulders of the device and a floor shadow under
   it — the staging a product page gives hardware. Both mix from ink-900, so
   in the dark theme the wash flips to a light glow instead of vanishing. */
.apo-mobile-emulator__stage[b-ikf3mu31p8]::before {
    content: "";
    position: absolute;
    top: 6%;
    left: 50%;
    width: min(560px, 90%);
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--apo-ink-900) 8%, transparent) 0%,
        transparent 62%);
    pointer-events: none;
}

.apo-mobile-emulator__stage[b-ikf3mu31p8]::after {
    content: "";
    position: absolute;
    bottom: 22px;
    left: 50%;
    width: min(300px, 62%);
    height: 26px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse,
        color-mix(in srgb, var(--apo-ink-900) 16%, transparent) 0%,
        transparent 68%);
    pointer-events: none;
}

.apo-mobile-emulator__features[b-ikf3mu31p8] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.apo-mobile-emulator__features li[b-ikf3mu31p8] {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--apo-ink-50);
    color: var(--apo-ink-700);
    font-size: var(--apo-text-caption1);
    line-height: 1.4;
}

.apo-mobile-emulator__features li:last-child[b-ikf3mu31p8] {
    padding-bottom: 0;
    border-bottom: 0;
}

.apo-mobile-emulator__features li span[b-ikf3mu31p8] {
    color: var(--apo-ink-400);
    font-family: var(--apo-font-mono);
    font-size: var(--apo-text-caption2);
}

/* The API status is prose here, not a cell in a column: the global
   .apo-status nowrap (right for grid columns) would clip the Croatian label
   mid-word inside the rail's overflow:hidden in the band just above the
   1280px breakpoint. Let it wrap, and pin the dot to the first line. */
.apo-mobile-emulator__rail[b-ikf3mu31p8]  .apo-status {
    align-items: flex-start;
    white-space: normal;
}

.apo-mobile-emulator__rail[b-ikf3mu31p8]  .apo-status::before {
    margin-top: 5px;
}

.apo-mobile-emulator__api-body[b-ikf3mu31p8] {
    margin: 0;
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption2);
    line-height: 1.5;
}

@media (max-width: 1280px) {
    .apo-mobile-emulator__workspace[b-ikf3mu31p8] {
        grid-template-columns: minmax(220px, 1fr) auto;
    }

    .apo-mobile-emulator__rail:last-child[b-ikf3mu31p8] {
        display: none;
    }
}

@media (max-width: 860px) {
    .apo-mobile-emulator__workspace[b-ikf3mu31p8] {
        grid-template-columns: 1fr;
    }

    .apo-mobile-emulator__stage[b-ikf3mu31p8] {
        grid-row: 1;
    }

    .apo-mobile-emulator__rail[b-ikf3mu31p8] {
        position: static;
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .apo-mobile-emulator__actions button[b-ikf3mu31p8] {
        transition: none;
    }
}
/* /Components/Pages/Patients/PatientDocumentsDialog.razor.rz.scp.css */
/* The head of the documents dialog — the documented .apo-dialog-summary
   object (the record being acted on), EXTENDED here rather than forked: the
   global class brings the recessed panel and the title; this file only lays
   the summary out as a row, sizes the patient's mark, and spaces it from the
   notice beneath. Colour on the mark comes from the global avatar classes so
   the per-person tint actually lands — a scoped background would out-specify
   the tint classes and grey every head. */
.apo-doc-head[b-myf514aucg] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

/* 38px — the middle size ManagedUserDialog settled on between the grid's 28
   and the profile page's 44: the mark names the record without out-shouting
   the content beneath. Geometry only: background and ink stay with
   .apo-identity__avatar and its tint modifiers. */
.apo-doc-head__avatar[b-myf514aucg] {
    width: 38px;
    height: 38px;
    font-size: var(--apo-text-caption1);
}

.apo-patient-document-preview__header[b-myf514aucg] {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.apo-patient-document-preview__image[b-myf514aucg] {
    /* The documented recessed surface — the file used to name a token that
       exists nowhere, which ships as transparent behind letterboxed X-rays. */
    background: var(--apo-surface-sunk);
    border-radius: var(--apo-radius-lg);
    display: block;
    max-height: 60vh;
    object-fit: contain;
    width: 100%;
}

.apo-patient-document-preview__pdf[b-myf514aucg] {
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-lg);
    height: 60vh;
    width: 100%;
}
/* /Components/Pages/Reports/Reports.razor.rz.scp.css */
/* The chart card root is a plain <section> in Reports.razor, so this scoped
   rule reaches the plot; the card chrome itself (.apo-dash-card) is global
   app.css. Mirrors .apo-dash-chart__plot on the dashboard. */
.apo-reports-chart__plot[b-7cx3bxr337] {
    padding: 12px 10px 4px;
}
/* /Components/Pages/Settings/AppSettings.razor.rz.scp.css */
/* The card follows the settings siblings (pa-6 apo-data-card, h6 head); this
   file only styles what is unique to it — the description line and the
   language cards. */
.apo-appset__desc[b-yhboep68sz] {
    margin: 6px 0 18px;
    color: var(--apo-ink-500);
    font-size: var(--apo-text-body);
    line-height: 1.55;
}

.apo-appset__langs[b-yhboep68sz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* A language is a card you pick up, not a row you tick. The chosen one wears
   the artwork's keystone in ink — selection is the brand's gesture, the
   same one the empty-state ring and the sidebar marker make. */
.apo-appset__lang[b-yhboep68sz] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 16px 16px 14px;
    border: 1px solid var(--apo-border-strong);
    border-radius: var(--apo-radius-lg);
    background: var(--apo-paper);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: border-color var(--apo-duration-fast) var(--apo-ease),
                background var(--apo-duration-fast) var(--apo-ease);
}

.apo-appset__lang:hover[b-yhboep68sz] {
    border-color: var(--apo-ink-300);
    background: var(--apo-surface-hover);
}

.apo-appset__lang:focus-visible[b-yhboep68sz] {
    outline: 2px solid var(--apo-accent);
    outline-offset: 2px;
}

.apo-appset__lang--selected[b-yhboep68sz],
.apo-appset__lang--selected:hover[b-yhboep68sz] {
    border-color: var(--apo-accent-line);
    background: var(--apo-accent-soft);
}

.apo-appset__lang-mark[b-yhboep68sz] {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 12px;
    height: 14px;
    fill: none;
    stroke: var(--apo-brand-gold);
    stroke-width: 1.4;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity var(--apo-duration-fast) var(--apo-ease);
}

.apo-appset__lang--selected .apo-appset__lang-mark[b-yhboep68sz] {
    opacity: 1;
}

.apo-appset__lang-name[b-yhboep68sz] {
    font-size: var(--apo-text-subtitle2);
    font-weight: 600;
    letter-spacing: -0.014em;
    color: var(--apo-ink-900);
}

.apo-appset__lang-code[b-yhboep68sz] {
    font-family: var(--apo-font-mono);
    font-size: var(--apo-text-caption1);
    color: var(--apo-ink-500);
    letter-spacing: 0.04em;
}

@media (max-width: 560px) {
    .apo-appset__langs[b-yhboep68sz] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Settings/EasyBusyCallbackDetailDialog.razor.rz.scp.css */
.easybusy-callback-head[b-q3fhlqdker] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.easybusy-callback-head > div[b-q3fhlqdker] {
    min-width: 0;
}

.easybusy-callback-mono[b-q3fhlqdker] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .82rem;
    overflow-wrap: anywhere;
}
/* /Components/Pages/Settings/EasyBusyCallbackResolveDialog.razor.rz.scp.css */
.easybusy-resolve-context[b-v7eeqb9d8x] {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: .875rem 1rem;
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-md);
    background: var(--apo-surface-sunk);
}

.easybusy-resolve-context > div[b-v7eeqb9d8x] {
    display: grid;
    grid-template-columns: minmax(7rem, .45fr) 1fr;
    gap: 1rem;
}

.easybusy-resolve-context dt[b-v7eeqb9d8x] {
    color: var(--apo-ink-500);
}

.easybusy-resolve-context dd[b-v7eeqb9d8x] {
    margin: 0;
    color: var(--apo-ink-900);
    overflow-wrap: anywhere;
}
/* /Components/Pages/Settings/EasyBusyCallbackRetryDialog.razor.rz.scp.css */
.easybusy-retry-context[b-6yubrz7g6e] {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: .875rem 1rem;
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-md);
    background: var(--apo-surface-sunk);
}

.easybusy-retry-context > div[b-6yubrz7g6e] {
    display: grid;
    grid-template-columns: minmax(7rem, .45fr) 1fr;
    gap: 1rem;
}

.easybusy-retry-context dt[b-6yubrz7g6e] {
    color: var(--apo-ink-500);
}

.easybusy-retry-context dd[b-6yubrz7g6e] {
    margin: 0;
    color: var(--apo-ink-900);
    overflow-wrap: anywhere;
}
/* /Components/Pages/Settings/EasyBusyOperations.razor.rz.scp.css */
.easybusy-summary[b-vxoh4mcu1u] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.easybusy-summary__item[b-vxoh4mcu1u] {
    min-height: 6rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-md);
    background: var(--apo-paper);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .5rem;
}

.easybusy-summary__item span[b-vxoh4mcu1u] {
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption1);
}

.easybusy-summary__item strong[b-vxoh4mcu1u] {
    color: var(--apo-ink-900);
    font-family: var(--apo-font-display);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.15;
}

.easybusy-summary__item--error[b-vxoh4mcu1u] {
    border-color: color-mix(in srgb, var(--apo-error) 38%, var(--apo-border));
    background: color-mix(in srgb, var(--apo-error-bg) 45%, var(--apo-paper));
}

.easybusy-summary__item--error strong[b-vxoh4mcu1u] {
    color: var(--apo-error);
}

.easybusy-summary__item--warn[b-vxoh4mcu1u] {
    border-color: color-mix(in srgb, var(--apo-warning) 38%, var(--apo-border));
    background: color-mix(in srgb, var(--apo-warning-bg) 45%, var(--apo-paper));
}

.easybusy-summary__item--wide strong[b-vxoh4mcu1u] {
    font-family: var(--apo-font-body);
    font-size: 1rem;
}

.easybusy-filters[b-vxoh4mcu1u] {
    display: grid;
    grid-template-columns: minmax(14rem, 1.4fr) repeat(3, minmax(10rem, 1fr)) repeat(2, minmax(10rem, .8fr));
    gap: .75rem;
    align-items: start;
    padding: 1rem;
    border-bottom: 1px solid var(--apo-border);
}

.easybusy-filters__actions[b-vxoh4mcu1u] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.easybusy-callback-id[b-vxoh4mcu1u] {
    max-width: 13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.easybusy-error-summary[b-vxoh4mcu1u] {
    max-width: 22rem;
    color: var(--apo-ink-600);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.easybusy-pager[b-vxoh4mcu1u] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--apo-border);
}

@media (max-width: 1280px) {
    .easybusy-summary[b-vxoh4mcu1u] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .easybusy-filters[b-vxoh4mcu1u] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .easybusy-summary[b-vxoh4mcu1u],
    .easybusy-filters[b-vxoh4mcu1u] {
        grid-template-columns: 1fr;
    }

    .easybusy-filters__actions[b-vxoh4mcu1u] {
        grid-column: auto;
        justify-content: stretch;
        flex-direction: column;
    }

    .easybusy-pager[b-vxoh4mcu1u] {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* /Components/Shared/AccountMenu.razor.rz.scp.css */
.apo-account[b-54so16djq8] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 6px;
    /* No transparent border: it added a pixel to the content box and pushed the
       avatar off the sidebar's 16px axis. Hover only changes the fill. */
    border-radius: var(--apo-radius-md);
    cursor: pointer;
    text-align: left;
    transition: background var(--apo-duration-fast) var(--apo-ease);
}

.apo-account:hover[b-54so16djq8] {
    background: var(--apo-nav-hover-bg);
}

.apo-account--compact[b-54so16djq8] {
    width: auto;
    padding: 3px;
    justify-content: center;
}

/* A circle with initials, the convention every workspace product has settled
   on for the person in the top corner. 30px inside the compact 3px padding
   lands the whole control on the header's 36px line. */
.apo-account__avatar[b-54so16djq8] {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--apo-fill);
    color: var(--apo-fill-fg);
    font-family: var(--apo-font-body);
    font-size: var(--apo-text-caption1);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
}

.apo-account__copy[b-54so16djq8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.25;
}

.apo-account__name[b-54so16djq8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Default targets the light top bar; NavMenu overrides it for the dark
       sidebar, where this component is also rendered. */
    color: var(--apo-ink-900);
    font-size: var(--apo-text-caption1);
    font-weight: 550;
    letter-spacing: -0.011em;
}

.apo-account__role[b-54so16djq8] {
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption1);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apo-account__chevron[b-54so16djq8] {
    color: var(--apo-nav-fg-muted) !important;
    font-size: var(--apo-icon-sm) !important;
    flex: 0 0 auto;
}

/* Popover styles live in app.css (.apo-account-pop): the menu mounts at the
   document root through MudBlazor's popover provider, so its chrome cannot be
   reached from a scoped file. */
/* /Components/Shared/EasyBusyLimitationNotice.razor.rz.scp.css */
/* A one-line disclosure, not a banner. No accent stripe down the left edge —
   the tinted left border is the most recognisable template-dashboard tell
   there is, and it said "component" where this should say "note in the
   margin". The card is a hairline box on a recessed ground; what marks it as
   a category is the letterspaced label, the same editorial device the panel
   eyebrows already use. */
.apo-limitation[b-jx3hp6zm9l] {
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-md);
    background: var(--apo-surface-sunk);
    margin-bottom: 16px;
}

.apo-limitation--dense[b-jx3hp6zm9l] {
    margin-bottom: 10px;
}

.apo-limitation__summary[b-jx3hp6zm9l] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-radius: var(--apo-radius-md);
}

/* Safari still paints the default triangle without this. */
.apo-limitation__summary[b-jx3hp6zm9l]::-webkit-details-marker {
    display: none;
}

.apo-limitation__summary:hover[b-jx3hp6zm9l] {
    background: var(--apo-surface-hover);
}

.apo-limitation__summary:focus-visible[b-jx3hp6zm9l] {
    outline: 2px solid var(--apo-accent);
    outline-offset: -2px;
}

.apo-limitation__icon[b-jx3hp6zm9l]  .mud-icon-root,
.apo-limitation__icon[b-jx3hp6zm9l] {
    color: var(--apo-accent) !important;
    flex: 0 0 auto;
}

.apo-limitation__title[b-jx3hp6zm9l] {
    flex: 1;
    min-width: 0;
    font-size: var(--apo-text-caption1);
    color: var(--apo-ink-700);
    line-height: var(--apo-leading-caption1);
}

/* The "EasyBusy ograničenje" prefix is a category, so it is set as an eyebrow —
   small caps, wide tracking — and the specific constraint carries the line. */
.apo-limitation__label[b-jx3hp6zm9l] {
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption2);
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 8px;
}

.apo-limitation__chevron[b-jx3hp6zm9l] {
    flex: 0 0 auto;
    color: var(--apo-ink-400) !important;
    transition: transform var(--apo-duration-fast) var(--apo-ease);
}

.apo-limitation[open] .apo-limitation__chevron[b-jx3hp6zm9l] {
    transform: rotate(180deg);
}

.apo-limitation__body[b-jx3hp6zm9l] {
    padding: 0 12px 11px 42px;
}

.apo-limitation__text[b-jx3hp6zm9l],
.apo-limitation__action[b-jx3hp6zm9l] {
    margin: 0;
    font-size: var(--apo-text-caption1);
    line-height: var(--apo-leading-body);
    color: var(--apo-ink-600);
}

.apo-limitation__action[b-jx3hp6zm9l] {
    margin-top: 6px;
}

.apo-limitation__action strong[b-jx3hp6zm9l] {
    color: var(--apo-ink-800);
    font-weight: 600;
}

@media (max-width: 768px) {
    .apo-limitation__body[b-jx3hp6zm9l] {
        padding-left: 12px;
    }
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
/* EmptyState root is a <MudPaper>, so scoped CSS won't reach it.
   All .apo-empty-state rules live in wwwroot/css/app.css. */
/* /Components/Shared/GlobalSearchDialog.razor.rz.scp.css */
.apo-global-search[b-eu85vhr4e5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 360px;
}

.apo-global-search__input-wrap[b-eu85vhr4e5] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--apo-border-strong);
    border-radius: var(--apo-radius-lg);
    background: var(--apo-surface-sunk);
    color: var(--apo-ink-400);
    transition: border-color var(--apo-duration-fast) var(--apo-ease),
                box-shadow var(--apo-duration-fast) var(--apo-ease);
}

.apo-global-search__input-wrap:focus-within[b-eu85vhr4e5] {
    border-color: var(--apo-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--apo-accent) 14%, transparent);
}

.apo-global-search__input[b-eu85vhr4e5] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--apo-ink-900);
    font: inherit;
    font-size: var(--apo-text-body);
}

.apo-global-search__input[b-eu85vhr4e5]::placeholder {
    color: var(--apo-ink-400);
}

.apo-global-search__input[b-eu85vhr4e5]::-webkit-search-cancel-button {
    display: none;
}

.apo-global-search__clear[b-eu85vhr4e5] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--apo-radius-md);
    background: transparent;
    color: var(--apo-ink-400);
    cursor: pointer;
}

.apo-global-search__clear:hover[b-eu85vhr4e5] {
    background: var(--apo-surface-hover);
    color: var(--apo-ink-700);
}

.apo-global-search__summary[b-eu85vhr4e5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 24px;
    color: var(--apo-ink-400);
    font-size: var(--apo-text-caption1);
}

.apo-global-search__keyboard-help[b-eu85vhr4e5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.apo-global-search__keyboard-help .apo-kbd[b-eu85vhr4e5] {
    margin-left: 5px;
}

/* Tier headers inside the flat result list — the group label the items under
   it share (Nedavno, Akcije, the nav groups, Pacijenti). */
.apo-global-search__group[b-eu85vhr4e5] {
    padding: 8px 10px 2px;
    color: var(--apo-ink-400);
    font-size: var(--apo-text-caption2);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The debounced patient lookup announces itself under its group header rather
   than blocking the synchronous tiers above it. */
.apo-global-search__loading[b-eu85vhr4e5] {
    padding: 6px 10px;
    color: var(--apo-ink-400);
    font-size: var(--apo-text-caption1);
}

.apo-global-search__results[b-eu85vhr4e5] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    max-height: min(56vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px;
}

.apo-global-search__result[b-eu85vhr4e5] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: var(--apo-radius-md);
    background: transparent;
    color: var(--apo-ink-700);
    text-align: left;
    cursor: pointer;
}

.apo-global-search__result:hover[b-eu85vhr4e5],
.apo-global-search__result--selected[b-eu85vhr4e5] {
    border-color: var(--apo-border);
    background: var(--apo-surface-hover);
}

.apo-global-search__result--selected[b-eu85vhr4e5] {
    border-color: color-mix(in srgb, var(--apo-accent) 34%, var(--apo-border));
}

.apo-global-search__result-icon[b-eu85vhr4e5] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--apo-radius-md);
    background: var(--apo-paper);
    color: var(--apo-accent);
    box-shadow: inset 0 0 0 1px var(--apo-border);
}

.apo-global-search__result-copy[b-eu85vhr4e5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.apo-global-search__result-copy strong[b-eu85vhr4e5] {
    overflow: hidden;
    color: var(--apo-ink-900);
    font-size: var(--apo-text-body);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apo-global-search__result-copy span[b-eu85vhr4e5] {
    overflow: hidden;
    color: var(--apo-ink-400);
    font-size: var(--apo-text-caption1);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apo-global-search__result code[b-eu85vhr4e5] {
    max-width: 180px;
    overflow: hidden;
    color: var(--apo-ink-400);
    font-size: var(--apo-text-caption2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apo-global-search__result-arrow[b-eu85vhr4e5] {
    color: var(--apo-ink-300);
}

.apo-global-search__empty[b-eu85vhr4e5] {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 260px;
    color: var(--apo-ink-400);
    text-align: center;
}

.apo-global-search__empty strong[b-eu85vhr4e5] {
    color: var(--apo-ink-700);
    font-size: var(--apo-text-body);
}

.apo-global-search__empty span[b-eu85vhr4e5] {
    max-width: 340px;
    font-size: var(--apo-text-caption1);
}

@media (max-width: 640px) {
    .apo-global-search__keyboard-help[b-eu85vhr4e5],
    .apo-global-search__result code[b-eu85vhr4e5] {
        display: none;
    }

    .apo-global-search__result[b-eu85vhr4e5] {
        grid-template-columns: 34px minmax(0, 1fr) 18px;
    }
}
/* /Components/Shared/GridSkeleton.razor.rz.scp.css */
/* Mirrors the 44px body-row geometry from mudblazor-overrides.css
   (.mud-data-grid .mud-table-body .mud-table-cell: height 44px, 14px inline
   padding, hairline below, last row hands its edge to the card) so skeleton
   rows occupy exactly the space the real rows will.

   Scoped CSS is safe here because every styled element is rendered by this
   component itself — the [b-*] trap documented in app.css only bites classes
   handed to MudBlazor-rendered elements via CellClass. The MudSkeleton bars
   are styled through their Width/Height parameters, not from this file. */
.apo-grid-skeleton[b-xeay8slraz] {
    width: 100%;
}

.apo-grid-skeleton__row[b-xeay8slraz] {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 44px;
    padding: 0 14px;
    border-bottom: 1px solid var(--apo-border);
}

.apo-grid-skeleton__row:last-child[b-xeay8slraz] {
    border-bottom: none;
}
/* /Components/Shared/ImagePicker.razor.rz.scp.css */
/* THE PHOTOGRAPH IS THE OBJECT. The old layout put a 176px thumbnail beside a
   COLUMN of three buttons — the image squeezed into a corner of its own
   picker, the commands stacked like a menu. The well spans the picker now
   (capped so a wide dialog does not blow it up to a poster) and the commands
   sit in one quiet row beneath it, the way every modern media field is drawn.
   The 16:9 crop stays fixed for the old reason: letting the preview size
   itself makes the surface jump with every differently-proportioned file. */

.apo-image-picker__row[b-48u4r4298v] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.apo-image-picker__preview[b-48u4r4298v] {
    width: 100%;
    max-width: 340px;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-lg);
    background: var(--apo-surface-sunk);
}

.apo-image-picker__preview img[b-48u4r4298v] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* One row of commands under the well; the hint takes the full line below so
   the row never wraps mid-button. */
.apo-image-picker__actions[b-48u4r4298v] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    min-width: 0;
}

/* MudFileUpload's root carries .mud-input-control, whose stock flex:1 1 auto
   would make the upload wrapper swallow the row and shove its neighbours to
   the far edge; and width:100% is worse — it becomes the flex base size and
   breaks the row after the first button. It holds exactly its content. */
.apo-image-picker__actions[b-48u4r4298v]  .mud-input-control {
    flex: 0 0 auto;
    width: auto;
}

/* ::deep, not a child selector: the hint is MudText's own <p> and the
   progress bar MudProgressLinear's own root — neither carries this file's
   scope attribute, so a scoped child selector matches nothing. */
.apo-image-picker__actions[b-48u4r4298v]  .mud-typography,
.apo-image-picker__actions[b-48u4r4298v]  .mud-progress-linear {
    flex-basis: 100%;
}

/* A bundled asset has no URL this app can fetch — say so rather than showing a
   broken-image icon, which reads as a fault when the value is perfectly valid. */
.apo-image-picker__asset[b-48u4r4298v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 8px;
    color: var(--mud-palette-text-secondary);
}
/* /Components/Shared/ModuleStubPage.razor.rz.scp.css */
/* Hairline-dashed panel: the dashed edge is the one place in the system that
   uses a non-solid border, and it reads as "placeholder" without needing a
   banner or a warning colour. */
.apo-stub[b-no9vq81jlr] {
    border: 1px dashed var(--apo-border-strong);
    border-radius: var(--apo-radius-lg);
    background: var(--apo-surface-sunk);
    padding: 26px 22px;
}

.apo-stub__inner[b-no9vq81jlr] {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    max-width: 620px;
    margin: 0 auto;
}

.apo-stub__icon[b-no9vq81jlr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: var(--apo-radius-md);
    border: 1px solid var(--apo-border);
    background: var(--apo-paper);
    color: var(--apo-ink-500);
}

.apo-stub__icon[b-no9vq81jlr]  .mud-icon-root {
    font-size: var(--apo-icon-sm) !important;
}

.apo-stub__copy[b-no9vq81jlr] {
    min-width: 0;
}

.apo-stub__headline[b-no9vq81jlr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.apo-stub__title[b-no9vq81jlr] {
    font-family: var(--apo-font-display);
    font-size: var(--apo-text-body);
    font-weight: 600;
    letter-spacing: -0.016em;
    line-height: 1.35;
    color: var(--apo-ink-900);
    margin: 0;
}

.apo-stub__status[b-no9vq81jlr] {
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--apo-accent-soft);
    border: 1px solid var(--apo-accent-line);
    color: var(--apo-gold-700);
    font-size: var(--apo-text-caption1);
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
}

.apo-stub__body[b-no9vq81jlr] {
    color: var(--apo-ink-500);
    font-size: var(--apo-text-body);
    line-height: 1.55;
    margin: 5px 0 0;
}

@media (max-width: 600px) {
    .apo-stub[b-no9vq81jlr] {
        padding: 20px 16px;
    }

    .apo-stub__inner[b-no9vq81jlr] {
        gap: 11px;
    }
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
/* THE VIEW HEADER. Title row, toolbar row, hairline — one block.

   It used to be three things floating in a column: a title, then 14px of
   nothing, then a toolbar, then 18px of nothing, then the table. Nothing tied
   them together, so a page read as a stack of unrelated widgets, and the
   title in particular sat marooned above a wide empty band with a lone button
   at the far end of it. That "everything centred in its own whitespace" look
   is most of what makes an interface read as assembled rather than designed.

   Three changes make it one object: the rows are 10px apart instead of 14,
   the block is capped by a hairline that runs the full content width, and the
   gap to whatever follows is the same 16px the block's own padding uses. The
   hairline is the load-bearing part — it turns the header from a floating
   group into the page's masthead, and it is the same device the dashboard
   header already used, so the two agree.

   Still not sticky: a title plus a toolbar pinned under the 48px top bar
   would hold ~110px of every viewport, and this product's forms are dialogs
   with their own pinned footers. */
.apo-page-header[b-r9vs7cfvfm] {
    display: flex;
    /* ONE ROW. The title claims what it needs on the left, every control
       clusters on the right, and the row wraps to two only when the controls
       genuinely cannot fit beside the title.

       As two fixed rows this header spent a full line on a 20px title and
       nothing else, then a second line with a search field pinned left and a
       button pinned right and 700px of empty canvas between them. Both lines
       were mostly void, and a screen that opens with 90px of decorated
       whitespace is the single most reliable sign that a layout was assembled
       from parts rather than composed. */
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 0 0 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--apo-border);
}

.apo-page-header__titles[b-r9vs7cfvfm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 0 1 auto;
}

.apo-page-header__titles > .apo-eyebrow[b-r9vs7cfvfm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--apo-ink-500);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--apo-text-caption1);
    font-weight: 500;
}

/* Display register. With one font family across the ramp, the display
   tracking is what separates this from a large paragraph.

   20px, down from 22. The title is not competing for attention any more — the
   hairline under the block already says "this is the head of the page", so
   the type can stop shouting it. It also puts the title one clean step above
   the 16px section heads inside the page instead of two, which is what a
   scale is for. */
.apo-page-header__titles h1[b-r9vs7cfvfm] {
    margin: 0;
    font-family: var(--apo-font-display);
    font-size: var(--apo-text-title2);
    line-height: var(--apo-leading-title2);
    font-weight: 600;
    letter-spacing: var(--apo-tracking-tighter);
    color: var(--apo-ink-900);
}

/* The control cluster. flex:1 lets it take the whole line on a page whose
   toolbar is genuinely wide (search + status select + refresh), and shrink to
   its contents on a page with one button — either way it stays hard against
   the right edge, on the same optical line as the title. */
.apo-page-header__actions[b-r9vs7cfvfm] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}

.apo-page-header__crumbs[b-r9vs7cfvfm] {
    padding: 2px 0 0 !important;
    font-size: var(--apo-text-caption1);
    color: var(--apo-ink-500);
}

@media (max-width: 900px) {
    .apo-page-header[b-r9vs7cfvfm] {
        gap: 10px;
        padding-bottom: 12px;
        margin-bottom: 14px;
    }
}

@media (max-width: 600px) {
    .apo-page-header__titles h1[b-r9vs7cfvfm] {
        font-size: var(--apo-text-title3);
        line-height: var(--apo-leading-title3);
    }

    /* Controls stack full-width. Container-level grid, because the children
       are MudBlazor component roots that scoped child selectors can't reach. */
    .apo-page-header__actions[b-r9vs7cfvfm] {
        display: grid;
        grid-template-columns: 1fr;
        flex-basis: 100%;
    }
}
/* /Components/Shared/RepeatableImageList.razor.rz.scp.css */
.apo-repeatable-images[b-izoyczq6us],
.apo-repeatable-images__rows[b-izoyczq6us] {
    display: flex;
    flex-direction: column;
    gap: var(--apo-space-3);
}

.apo-repeatable-images__heading[b-izoyczq6us],
.apo-repeatable-images__row[b-izoyczq6us],
.apo-repeatable-images__commands[b-izoyczq6us] {
    display: flex;
    align-items: center;
}

.apo-repeatable-images__heading[b-izoyczq6us] {
    justify-content: space-between;
    gap: var(--apo-space-3);
}

.apo-repeatable-images__row[b-izoyczq6us] {
    gap: var(--apo-space-2);
    padding: var(--apo-space-3);
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-xl);
}

.apo-repeatable-images__row[b-izoyczq6us]  .apo-image-picker {
    flex: 1 1 auto;
    min-width: 0;
}

.apo-repeatable-images__commands[b-izoyczq6us] {
    flex: 0 0 auto;
    flex-direction: column;
}

.apo-repeatable-images__empty[b-izoyczq6us] {
    padding: var(--apo-space-3);
    border: 1px dashed var(--apo-border);
    border-radius: var(--apo-radius-lg);
}

@media (max-width: 700px) {
    .apo-repeatable-images__row[b-izoyczq6us] {
        align-items: stretch;
        flex-direction: column;
    }

    .apo-repeatable-images__commands[b-izoyczq6us] {
        align-self: flex-end;
        flex-direction: row;
    }
}
/* /Components/Shared/RepeatableTextList.razor.rz.scp.css */
.apo-repeatable[b-ucnnmmk56s] {
    display: flex;
    flex-direction: column;
    gap: var(--apo-space-3);
}

.apo-repeatable__heading[b-ucnnmmk56s],
.apo-repeatable__row[b-ucnnmmk56s],
.apo-repeatable__commands[b-ucnnmmk56s] {
    display: flex;
    align-items: center;
}

.apo-repeatable__heading[b-ucnnmmk56s] {
    justify-content: space-between;
    gap: var(--apo-space-3);
}

.apo-repeatable__rows[b-ucnnmmk56s] {
    display: flex;
    flex-direction: column;
    gap: var(--apo-space-2);
}

.apo-repeatable__row[b-ucnnmmk56s] {
    gap: var(--apo-space-2);
}

.apo-repeatable__row[b-ucnnmmk56s]  .mud-input-control {
    flex: 1 1 auto;
}

.apo-repeatable__commands[b-ucnnmmk56s] {
    flex: 0 0 auto;
}

.apo-repeatable__empty[b-ucnnmmk56s] {
    padding: var(--apo-space-3);
    border: 1px dashed var(--apo-border);
    border-radius: var(--apo-radius-lg);
}

@media (max-width: 600px) {
    .apo-repeatable__row[b-ucnnmmk56s] {
        align-items: flex-start;
        flex-direction: column;
    }

    .apo-repeatable__commands[b-ucnnmmk56s] {
        align-self: flex-end;
    }
}
/* /Components/Shared/RichTextEditor.razor.rz.scp.css */
/* Rich text editor chrome, on the token contract. The toolbar is 16px rounded
   icons in 28px hit targets with queryCommandState-driven active states; the
   authored content inside the surface keeps its own reading typography (it
   mirrors what the mobile app renders, not backoffice chrome). */

.apo-rich-editor[b-r24hx7b17e] {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--apo-brand-gold) 22%, var(--apo-border));
    border-radius: var(--apo-radius-xl);
    background: color-mix(in srgb, var(--apo-paper) 96%, var(--apo-brand-gold) 4%);
    box-shadow: var(--apo-shadow-sm);
}

/* Sentence case, like every other field label in the product. It was 11px
   tracked SMALL CAPS — the eyebrow register the tables and the editor's
   sidebar panels both gave up — which made the body's label the one field
   label on the page shouting its own name. */
.apo-rich-editor__label[b-r24hx7b17e] {
    padding: 12px 14px var(--apo-space-2);
    color: var(--apo-ink-700);
    font-size: var(--apo-text-caption1);
    font-weight: 500;
    letter-spacing: var(--apo-tracking-caption);
    line-height: var(--apo-leading-caption1);
}

.apo-rich-editor__toolbar[b-r24hx7b17e] {
    display: flex;
    align-items: center;
    gap: var(--apo-space-1);
    padding: var(--apo-space-2) var(--apo-space-3);
    border-bottom: 1px solid var(--apo-border);
    background: var(--apo-surface-sunk);
}

.apo-rich-editor__toolbar button[b-r24hx7b17e],
.apo-rich-editor__toolbar select[b-r24hx7b17e] {
    border: 0;
    border-radius: var(--apo-radius-md);
    background: transparent;
    color: var(--apo-ink-700);
    font: inherit;
    cursor: pointer;
}

.apo-rich-editor__toolbar button[b-r24hx7b17e] {
    height: 28px;
    min-width: 28px;
    padding: 0 var(--apo-space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--apo-duration-fast) var(--apo-ease), color var(--apo-duration-fast) var(--apo-ease);
}

.apo-rich-editor__toolbar[b-r24hx7b17e]  svg.mud-icon-root { width: 16px; height: 16px; font-size: 16px; }

.apo-rich-editor__toolbar select[b-r24hx7b17e] { height: 28px; padding: 0 26px 0 var(--apo-space-2); font-size: var(--apo-text-caption1); }

.apo-rich-editor__toolbar button:hover[b-r24hx7b17e],
.apo-rich-editor__toolbar select:hover[b-r24hx7b17e] { background: color-mix(in srgb, var(--apo-brand-gold) 12%, transparent); }

/* queryCommandState truth: the caret sits in bold text, a list, etc. */
.apo-rich-editor__toolbar button.is-active[b-r24hx7b17e] {
    background: color-mix(in srgb, var(--apo-brand-gold) 18%, transparent);
    color: var(--apo-accent);
}

.apo-rich-editor__rule[b-r24hx7b17e] { width: 1px; height: 18px; margin: 0 5px; background: var(--apo-border); }
.apo-rich-editor__spacer[b-r24hx7b17e] { flex: 1; }

/* Inline URL popover, anchored under the link button. */
.apo-rich-editor__linkwrap[b-r24hx7b17e],
.apo-rich-editor__imagewrap[b-r24hx7b17e] { position: relative; display: inline-flex; }

.apo-rich-editor__linkpop[b-r24hx7b17e] {
    position: absolute;
    top: calc(100% + var(--apo-space-1));
    left: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--apo-space-1);
    padding: var(--apo-space-1);
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-lg);
    background: var(--apo-paper);
    box-shadow: var(--apo-shadow-md);
}

.apo-rich-editor__linkpop input[b-r24hx7b17e] {
    width: 240px;
    height: 28px;
    padding: 0 var(--apo-space-2);
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-md);
    background: var(--apo-paper);
    color: var(--apo-ink-900);
    font: inherit;
    font-size: var(--apo-text-body);
}

.apo-rich-editor__linkpop input:focus[b-r24hx7b17e] { outline: none; box-shadow: var(--apo-ring); border-color: var(--apo-accent-line); }

.apo-rich-editor__linkpop .apo-rich-editor__linkapply[b-r24hx7b17e] {
    padding: 0 var(--apo-space-2);
    font-size: var(--apo-text-caption1);
    font-weight: 600;
    color: var(--apo-accent);
    white-space: nowrap;
}

.apo-rich-editor__imagepop[b-r24hx7b17e] {
    position: absolute;
    top: calc(100% + var(--apo-space-1));
    left: 0;
    z-index: 30;
    width: min(440px, calc(100vw - 48px));
    padding: var(--apo-space-3);
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-lg);
    background: var(--apo-paper);
    box-shadow: var(--apo-shadow-md);
}

.apo-rich-editor__imagefields[b-r24hx7b17e] { display: grid; gap: var(--apo-space-2); }
.apo-rich-editor__imagefields label[b-r24hx7b17e] { display: grid; gap: 4px; color: var(--apo-ink-500); font-size: var(--apo-text-caption1); }
.apo-rich-editor__imagefields input[b-r24hx7b17e] {
    width: 100%;
    height: 36px;
    padding: 0 var(--apo-space-2);
    border: 1px solid var(--apo-border);
    border-radius: var(--apo-radius-md);
    background: var(--apo-paper);
    color: var(--apo-ink-900);
    font: inherit;
}
.apo-rich-editor__imagefields input:focus[b-r24hx7b17e] { outline: none; box-shadow: var(--apo-ring); border-color: var(--apo-accent-line); }
.apo-rich-editor__imageactions[b-r24hx7b17e] { display: flex; align-items: center; gap: var(--apo-space-2); margin-top: var(--apo-space-3); }
.apo-rich-editor__imageactions .apo-rich-editor__imageapply[b-r24hx7b17e] {
    height: 32px;
    padding: 0 var(--apo-space-3);
    background: var(--apo-ink-900);
    color: var(--apo-paper);
    font-size: var(--apo-text-caption1);
    font-weight: 650;
}
.apo-rich-editor__imageactions .apo-rich-editor__imageapply:disabled[b-r24hx7b17e] { opacity: .42; cursor: not-allowed; }

.apo-rich-editor__surface[b-r24hx7b17e] {
    padding: var(--apo-space-6) 26px;
    outline: none;
    color: var(--apo-ink-900);
    font-size: 1rem;
    line-height: 1.75;
}

.apo-rich-editor__surface:empty[b-r24hx7b17e]::before { content: attr(data-placeholder); color: var(--apo-ink-400); }
.apo-rich-editor__surface:focus[b-r24hx7b17e] { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--apo-brand-gold) 40%, transparent); }
.apo-rich-editor__surface h2[b-r24hx7b17e] { margin: 1.2em 0 .45em; font-size: 1.5rem; }
.apo-rich-editor__surface h3[b-r24hx7b17e] { margin: 1em 0 .4em; font-size: 1.18rem; }
.apo-rich-editor__surface blockquote[b-r24hx7b17e] { margin: 1.2em 0; padding: var(--apo-space-2) 0 var(--apo-space-2) 18px; border-left: 2px solid var(--apo-brand-gold); color: var(--apo-ink-500); }
.apo-rich-editor__surface a[b-r24hx7b17e] { color: var(--apo-accent); }
.apo-rich-editor__surface figure[b-r24hx7b17e] { margin: 1.6rem 0; }
.apo-rich-editor__surface figure img[b-r24hx7b17e] { display: block; width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--apo-radius-lg); }
.apo-rich-editor__surface figcaption[b-r24hx7b17e] { margin-top: var(--apo-space-2); color: var(--apo-ink-500); font-size: var(--apo-text-caption1); text-align: center; }

.apo-rich-editor__source[b-r24hx7b17e] {
    display: block;
    width: 100%;
    resize: vertical;
    padding: var(--apo-space-5) 26px;
    border: 0;
    outline: 0;
    background: #111318;
    color: #e9edf3;
    font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    tab-size: 2;
}
.apo-rich-editor__source:focus[b-r24hx7b17e] { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--apo-brand-gold) 70%, transparent); }

.apo-rich-editor__meta[b-r24hx7b17e] {
    display: flex;
    justify-content: space-between;
    gap: var(--apo-space-4);
    padding: 9px 18px 11px;
    border-top: 1px solid var(--apo-border);
    color: var(--apo-ink-500);
    font-size: var(--apo-text-caption1);
}

@media (max-width: 700px) {
    .apo-rich-editor__toolbar[b-r24hx7b17e] { flex-wrap: wrap; }
    .apo-rich-editor__rule[b-r24hx7b17e] { display: none; }
    .apo-rich-editor__linkpop[b-r24hx7b17e] { left: 50%; transform: translateX(-50%); max-width: calc(100vw - var(--apo-space-7)); }
    .apo-rich-editor__imagepop[b-r24hx7b17e] { left: 50%; transform: translateX(-50%); }
    .apo-rich-editor__linkpop input[b-r24hx7b17e] { flex: 1; min-width: 0; width: 180px; }
    .apo-rich-editor__imageactions[b-r24hx7b17e] { align-items: stretch; flex-direction: column; }
    .apo-rich-editor__meta[b-r24hx7b17e] { flex-direction: column; gap: 2px; }
}

/* READ-ONLY. The toolbar is already hidden in the markup, which removed the
   only thing on screen that said the field could be typed in — and removed
   nothing that said it could not. A locked body then looked exactly like an
   empty one waiting for a first sentence.

   The recessed ground marks it as the same STATE a locked input takes, and
   the padlock on the label gives the reason at the field rather than in a
   panel elsewhere on the page. Same mask as the one in
   mudblazor-overrides.css. */
.apo-rich-editor.is-readonly .apo-rich-editor__surface[b-r24hx7b17e] {
    background: var(--apo-surface-sunk);
    cursor: default;
}

.apo-rich-editor.is-readonly .apo-rich-editor__label[b-r24hx7b17e]::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-inline-start: 5px;
    vertical-align: -1px;
    background-color: currentColor;
    opacity: 0.6;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 10V8a5 5 0 0 0-10 0v2H6a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1h-1zm-8 0V8a3 3 0 0 1 6 0v2H9z"/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 10V8a5 5 0 0 0-10 0v2H6a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1h-1zm-8 0V8a3 3 0 0 1 6 0v2H9z"/></svg>") center / contain no-repeat;
}

/* The placeholder invites writing. On a locked body there is nothing to
   invite, and "Napišite sadržaj…" over a field nobody can type in is the
   most misleading string on the page. */
.apo-rich-editor.is-readonly .apo-rich-editor__surface:empty[b-r24hx7b17e]::before {
    content: attr(data-readonly-empty);
    font-style: italic;
}
/* /Components/Shared/ShortcutsDialog.razor.rz.scp.css */
.apo-shortcuts[b-twuyw94u4t] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.apo-shortcuts__heading[b-twuyw94u4t] {
    margin: 0 0 4px;
    color: var(--apo-ink-400);
    font-size: var(--apo-text-caption2);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.apo-shortcuts__row[b-twuyw94u4t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 32px;
}

.apo-shortcuts__row + .apo-shortcuts__row[b-twuyw94u4t] {
    border-top: 1px solid var(--apo-border);
}

.apo-shortcuts__label[b-twuyw94u4t] {
    color: var(--apo-ink-700);
    font-size: var(--apo-text-body);
}

.apo-shortcuts__keys[b-twuyw94u4t] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
}

.apo-shortcuts__or[b-twuyw94u4t] {
    color: var(--apo-ink-400);
    font-size: var(--apo-text-caption1);
}
/* /Components/Shared/StatCard.razor.rz.scp.css */
/* StatCard root sits on a <MudPaper> (child component), so Blazor's scoped-CSS
   attribute selector doesn't apply to it. All .apo-stat-card rules live in
   wwwroot/css/app.css instead. This file is intentionally empty. */
/* /Components/Shared/TrendChart.razor.rz.scp.css */
.apo-trend[b-l5celf1m13] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.apo-trend__plot[b-l5celf1m13] {
    position: relative;
    /* Left gutter holds the y-axis labels; the plot itself starts after it. */
    padding-left: 52px;
    min-width: 0;
}

/* --- y axis: hairline rules with the label sitting on them ---------- */
.apo-trend__scale[b-l5celf1m13] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.apo-trend__tick[b-l5celf1m13] {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid var(--apo-border);
}

/* The lowest rule is the baseline and reads as part of the frame. */
.apo-trend__tick:first-child[b-l5celf1m13] {
    border-top-color: var(--apo-border-strong);
}

.apo-trend__tick-label[b-l5celf1m13] {
    position: absolute;
    right: calc(100% - 44px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--apo-ink-400);
    font-size: var(--apo-text-caption2);
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-align: right;
}

.apo-trend__svg[b-l5celf1m13] {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* --- x axis --------------------------------------------------------- */
.apo-trend__axis[b-l5celf1m13] {
    display: flex;
    justify-content: space-between;
    padding: 7px 0 0 52px;
    min-width: 0;
}

.apo-trend__axis-label[b-l5celf1m13] {
    color: var(--apo-ink-400);
    font-size: var(--apo-text-caption2);
    letter-spacing: 0;
    white-space: nowrap;
    flex: 1 1 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Edge labels align to the plot bounds rather than their own centre, so the
   first and last months sit under their data points. */
.apo-trend__axis-label:first-child[b-l5celf1m13] {
    text-align: left;
}

.apo-trend__axis-label:last-child[b-l5celf1m13] {
    text-align: right;
}

@media (max-width: 600px) {
    .apo-trend__plot[b-l5celf1m13],
    .apo-trend__axis[b-l5celf1m13] {
        padding-left: 40px;
    }

    .apo-trend__tick-label[b-l5celf1m13] {
        right: calc(100% - 34px);
    }

    /* Twelve month labels will not fit; show every other one. */
    .apo-trend__axis-label:nth-child(even)[b-l5celf1m13] {
        visibility: hidden;
    }
}