/* Youmy ERP design system: deep navy, electric blue and turquoise. */

:root {
    --appcore-ink: #071a3d;
    --appcore-muted: #65738a;
    --appcore-line: #e3eaf3;
    --appcore-accent: #087cf0;
    --appcore-accent-strong: #0565d5;
    --appcore-teal: #10c8b5;
    --appcore-navy: #021a3e;
    --appcore-navy-soft: #082653;
    --appcore-surface: #ffffff;
    --appcore-canvas: #f4f7fb;
    --appcore-bg: #f4f7fb;
    --appcore-shadow: 0 0.65rem 2rem rgb(2 26 62 / 8%);
    --appcore-gradient: linear-gradient(135deg, var(--appcore-accent), var(--appcore-teal));
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, "Segoe UI", Tahoma, Arial, sans-serif;
    color: var(--appcore-ink);
    background: var(--appcore-canvas);
}

html[dir="rtl"] body {
    font-family: Tahoma, "Segoe UI", Arial, sans-serif;
}

code,
pre,
input[name="userName"] {
    direction: ltr;
    text-align: left;
}

/* Blazor focuses the page heading after navigation for screen readers. */
h1:focus {
    outline: none;
}

/* Off-screen for sight, present for a screen reader.
   `margin: -1px` matters: absolutely positioned boxes still contribute to their
   containing block's scrollable overflow, so this 1px span sitting at the far
   edge of a wide table was on its own enough to give the whole document a
   horizontal scrollbar on a phone. Pulling it back inside costs nothing and
   stops it being able to widen anything. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Shell -------------------------------------------------------------- */

.appcore-shell {
    display: grid;
    grid-template-columns: 16.5rem minmax(0, 1fr);
    min-height: 100vh;
}

.appcore-shell__nav {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
    background:
        radial-gradient(circle at 20% 0%, rgb(8 124 240 / 22%), transparent 32%),
        linear-gradient(180deg, var(--appcore-navy), #01142f);
    border-inline-end: 1px solid rgb(255 255 255 / 8%);
    padding: 1.5rem 1rem;
    color: #fff;
}

.appcore-shell__nav-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.appcore-shell__nav-close,
.appcore-shell__menu-toggle,
.appcore-shell__nav-backdrop {
    display: none;
}

.appcore-shell__brand {
    margin: 0 0 1.75rem;
    color: #fff;
    text-decoration: none;
}

.youmy-brand-mark {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 2.75rem;
    flex: none;
}

.youmy-brand-mark::before,
.youmy-brand-mark::after {
    position: absolute;
    top: 0.8rem;
    width: 0.72rem;
    height: 2rem;
    border-radius: 999px;
    content: "";
    transform-origin: 50% 85%;
}

.youmy-brand-mark::before {
    left: 0.55rem;
    background: linear-gradient(180deg, #168ff7, #075ad8);
    transform: rotate(-43deg);
}

.youmy-brand-mark::after {
    right: 0.55rem;
    background: linear-gradient(180deg, #1dd8c3, #069bad);
    transform: rotate(43deg);
}

.youmy-brand-mark > span {
    position: absolute;
    top: 0.05rem;
    left: 50%;
    width: 0.78rem;
    height: 0.78rem;
    border-radius: 50%;
    background: #0a7df0;
    box-shadow: 0 0 1.2rem rgb(10 125 240 / 55%);
    transform: translateX(-50%);
}

.youmy-wordmark {
    display: grid;
    line-height: 1;
}

.youmy-wordmark strong {
    color: inherit;
    font-size: 1.65rem;
    font-weight: 650;
    letter-spacing: 0.015em;
}

.youmy-wordmark small {
    margin-top: 0.28rem;
    color: var(--appcore-teal);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.45em;
    text-align: center;
}

.appcore-shell__product-label {
    margin: auto 0 0;
    padding: 1rem 0.65rem 0;
    border-top: 1px solid rgb(255 255 255 / 10%);
    color: rgb(255 255 255 / 48%);
    font-size: 0.72rem;
}

.appcore-shell__workspace {
    min-width: 0;
}

.appcore-shell__topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.5rem;
    box-sizing: border-box;
    padding: 0.75rem clamp(1rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--appcore-line);
    background: rgb(255 255 255 / 92%);
    backdrop-filter: blur(0.8rem);
}

.appcore-shell__identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.appcore-shell__identity-copy {
    display: grid;
    gap: 0.1rem;
}

.appcore-shell__eyebrow {
    color: var(--appcore-teal);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.appcore-shell__workspace-name {
    color: var(--appcore-ink);
    font-size: 1rem;
    font-weight: 700;
}

.appcore-shell__main {
    width: 100%;
    min-width: 0;
    padding: clamp(1rem, 3vw, 2.5rem);
}

/* Prose gets a reading width; data does not.

   The workspace used to cap at 96rem and centre itself, which is right for a
   paragraph and wrong for everything this product actually shows: on a 1080p
   screen it left a dead margin either side and then squeezed the tables into
   what was left. The cap now applies to running text only, so a directory can
   use the monitor and a sentence still does not run 1600px wide. */
.appcore-shell__main > p,
.appcore-shell__main > section > p {
    max-width: 60rem;
}

.appcore-shell__main > h1,
.appcore-shell__main section > h1 {
    margin-top: 0;
    color: var(--appcore-ink);
    font-size: clamp(1.7rem, 3vw, 2.15rem);
    letter-spacing: -0.035em;
}

/* Collapsing the rail on a wide screen ---------------------------------
   Separate control from the mobile drawer button, and deliberately so: one
   button whose meaning changed with the viewport could not say what it would
   do, and CSS cannot tell the component which breakpoint is active without
   JavaScript. Below 64rem this button is hidden and the drawer takes over. */

.appcore-shell__nav-collapse {
    display: none;
}

@media (min-width: 64.01rem) {
    .appcore-shell__nav-collapse {
        display: inline-grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        flex: 0 0 auto;
        padding: 0;
        border: 1px solid rgb(255 255 255 / 18%);
        border-radius: 0.5rem;
        background: rgb(255 255 255 / 8%);
        color: #fff;
        cursor: pointer;
    }

    .appcore-shell--collapsed {
        grid-template-columns: 4.5rem 1fr;
    }

    .appcore-shell--collapsed .appcore-shell__nav {
        padding-inline: 0.6rem;
        align-items: center;
    }

    /* Everything that is words rather than an icon. The rail keeps its icons so
       the menu stays usable collapsed, rather than becoming a blank strip. */
    .appcore-shell--collapsed .appcore-shell__nav .youmy-wordmark,
    .appcore-shell--collapsed .appcore-shell__nav .appcore-shell__brand span:not([aria-hidden]),
    .appcore-shell--collapsed .appcore-shell__product-label,
    .appcore-shell--collapsed .appcore-menu__group-title,
    .appcore-shell--collapsed .appcore-menu__label,
    .appcore-shell--collapsed .appcore-menu__twisty,
    .appcore-shell--collapsed .appcore-menu__list--nested {
        display: none;
    }

    .appcore-shell--collapsed .appcore-menu__link {
        justify-content: center;
        padding-inline: 0.5rem;
    }
}

@media (max-width: 64rem) {
    .appcore-shell {
        grid-template-columns: 1fr;
    }

    .appcore-shell__nav {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 110;
        width: min(19rem, calc(100vw - 3.5rem));
        height: 100dvh;
        border: 0;
        box-shadow: 1.25rem 0 3rem rgb(0 10 30 / 28%);
        transform: translateX(-105%);
        transition: transform 180ms ease;
    }

    html[dir="rtl"] .appcore-shell__nav {
        transform: translateX(105%);
    }

    .appcore-shell__nav--open,
    html[dir="rtl"] .appcore-shell__nav--open {
        transform: translateX(0);
    }

    .appcore-shell__nav-close,
    .appcore-shell__menu-toggle {
        display: inline-grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        flex: 0 0 auto;
        padding: 0;
    }

    .appcore-shell__nav-close {
        border-color: rgb(255 255 255 / 18%);
        background: rgb(255 255 255 / 8%);
        color: #fff;
        font-size: 1.5rem;
    }

    .appcore-shell__menu-toggle .appcore-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .appcore-shell__nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgb(2 12 30 / 58%);
    }

    .appcore-shell__product-label {
        display: none;
    }

    .appcore-shell__topbar {
        padding-inline: clamp(0.75rem, 3vw, 1.5rem);
    }
}

@media (max-width: 34rem) {
    /* Full width on a phone: a 19rem drawer over a 20rem screen leaves a strip of
       page that is too narrow to read and wide enough to tap by accident. */
    .appcore-shell__nav {
        width: 100vw;
        max-width: 100vw;
    }
}

@media (max-width: 34rem) {
    .appcore-shell__topbar {
        min-height: 4rem;
        gap: 0.5rem;
        padding-block: 0.55rem;
    }

    .appcore-shell__identity-copy {
        display: none;
    }

    .appcore-shell__main {
        padding: 1rem 0.75rem;
    }
}

/* Password reveal ----------------------------------------------------

   The button is positioned over the field rather than beside it, so the input
   stays an ordinary input in whatever form it lands in - the login card, a
   modal, the account page - and none of those layouts have to know it exists.

   Selectors are doubled up on purpose. `.appcore-login__card button` is a type
   selector inside a class (0,1,1) and would otherwise beat a bare
   `.appcore-password__reveal` (0,1,0), turning the reveal into a full-width
   primary button in the middle of the sign-in form. */

.appcore-password__control {
    position: relative;
    display: block;
}

.appcore-password .appcore-password__input {
    /* Room for the button, on whichever side the writing direction puts it. */
    width: 100%;
    box-sizing: border-box;
    padding-inline-end: 2.5rem;
}

/* Edge draws a reveal control of its own inside every password box. Left alone the
   reader gets two eyes side by side, and only one of them is ours: the native one
   decides for itself when to put the password back, so the field can stay legible
   after everything below has masked it. */
.appcore-password .appcore-password__input::-ms-reveal,
.appcore-password .appcore-password__input::-ms-clear {
    display: none;
}

.appcore-password .appcore-password__reveal {
    display: none;
}

/* Only once the script that makes it work has run: a button that does nothing
   is worse than no button. */
[data-appcore-enhanced] .appcore-password .appcore-password__reveal {
    position: absolute;
    inset-inline-end: 0.25rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: var(--appcore-muted);
    cursor: pointer;
}

[data-appcore-enhanced] .appcore-password .appcore-password__reveal:hover,
[data-appcore-enhanced] .appcore-password .appcore-password__reveal:focus-visible {
    background: color-mix(in srgb, var(--appcore-ink) 8%, transparent);
    color: var(--appcore-ink);
}

.appcore-password__icon {
    width: 1.05rem;
    height: 1.05rem;
}

/* One icon at a time: the eye offers the reveal, the struck-through eye offers
   to take it back. Both render, so the swap needs nothing but a class. */
.appcore-password__icon--hide,
.appcore-password--revealed .appcore-password__icon--show {
    display: none;
}

.appcore-password--revealed .appcore-password__icon--hide {
    display: block;
}

/* The product and the build, stacked in the rail's foot. Two lines because a
   product name and a version number read as one meaningless string when run
   together, and the name is the half that identifies the app. */
.appcore-shell__version-product {
    display: block;
    font-weight: 600;
    color: rgb(255 255 255 / 62%);
}

.appcore-shell__version-number {
    display: block;
    font-variant-numeric: tabular-nums;
}

/* Menu --------------------------------------------------------------- */

.appcore-menu__group-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(255 255 255 / 47%);
    margin: 1.25rem 0 0.4rem;
}

.appcore-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A row is the link plus its twisty. They are separate controls because a parent
   in this menu is itself a page: one control that both navigated and expanded
   would leave no way to do the other. */
.appcore-menu__row {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.appcore-menu__link {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.65rem;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    border-radius: 0.55rem;
    color: rgb(255 255 255 / 76%);
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.appcore-menu__icon {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
}

/* Truncated rather than wrapped: a long page name pushing the twisty out of the
   rail is how a parent becomes impossible to expand. */
.appcore-menu__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appcore-menu__twisty {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: rgb(255 255 255 / 62%);
    cursor: pointer;
}

.appcore-menu__twisty:hover,
.appcore-menu__twisty:focus-visible {
    background: rgb(255 255 255 / 10%);
    color: #fff;
}

.appcore-menu__chevron {
    width: 1rem;
    height: 1rem;
    transition: transform 160ms ease;
}

.appcore-menu__chevron--open {
    transform: rotate(90deg);
}

html[dir="rtl"] .appcore-menu__chevron {
    transform: rotate(180deg);
}

html[dir="rtl"] .appcore-menu__chevron--open {
    transform: rotate(90deg);
}

/* The rule that makes the nesting readable at a glance. Indentation alone reads
   as a rendering accident; the line says the entries belong to the one above. */
.appcore-menu__list--nested {
    margin-inline-start: 1.4rem;
    border-inline-start: 1px solid rgb(255 255 255 / 14%);
}

.appcore-menu__link:hover,
.appcore-menu__link:focus-visible {
    background: rgb(255 255 255 / 8%);
    color: #fff;
    transform: translateX(0.12rem);
}

.appcore-menu__link.active {
    background: var(--appcore-gradient);
    color: #fff;
    box-shadow: 0 0.45rem 1.2rem rgb(7 124 240 / 23%);
    font-weight: 650;
}

.appcore-menu--settings {
    margin-top: 1.25rem;
    padding-top: 0.15rem;
    border-top: 1px solid rgb(255 255 255 / 10%);
}

/* Collections -------------------------------------------------------- */

.appcore-page__grid {
    display: grid;
    gap: 1.25rem;
    /* min(20rem, 100%), not 20rem: a bare floor is kept even when the container
       is narrower than it, so on a 320px phone this 320px track pushed the whole
       page wider than the viewport and the cards sat over the border. */
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* The home page's summary tiles. Same shrinkable floor as the page grid, for the same reason. */
.appcore-welcome__greeting {
    margin: 0 0 1.25rem;
    color: var(--appcore-muted);
}

.appcore-welcome__tiles {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.appcore-welcome__tile {
    border: 1px solid var(--appcore-line);
    border-radius: 0.9rem;
    background: var(--appcore-surface);
    box-shadow: var(--appcore-shadow);
    padding: 1rem 1.25rem;
}

.appcore-welcome__tile h2 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

.appcore-welcome__tile p {
    margin: 0;
    color: var(--appcore-muted);
}

.appcore-collection,
.appcore-role-assignment,
.appcore-permission-grant {
    background: var(--appcore-surface);
    border: 1px solid var(--appcore-line);
    border-radius: 0.9rem;
    padding: 1rem 1.25rem;
    margin-block: 1rem;
    box-shadow: var(--appcore-shadow);
}

.appcore-collection__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.appcore-collection__header h2 {
    font-size: 1rem;
    margin: 0;
}

.appcore-collection__viewport {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

/* Opened action menus have to escape the scroll box, or the panel is clipped by
   the very thing that stops the table overflowing. Same escape the newer grid
   uses; without it the fix for one problem creates another.

   Wide screens only. A box that stops being a scroll container throws its scroll
   position away, and on a phone the menu is reached by scrolling the row sideways:
   opening it snapped the table back to its first column, away from the menu just
   opened. Narrow screens keep scrolling and draw the panel as a fixed bottom sheet
   instead (see the action menu below), which nothing in the table can clip. */
@media (min-width: 48.01rem) {
    .appcore-collection__viewport:has(.appcore-action-menu__panel) {
        overflow: visible;
    }
}

.appcore-collection__table {
    width: 100%;
    /* Content-sized rather than squeezed: with the viewport above, a wide table
       scrolls instead of crushing every column into unreadable slivers. */
    min-width: max-content;
    border-collapse: collapse;
    margin-top: 0.75rem;
}

.appcore-collection__table th,
.appcore-collection__table td {
    text-align: left;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--appcore-line);
    font-size: 0.9rem;
}

.appcore-collection__status {
    color: var(--appcore-muted);
    font-size: 0.9rem;
}

.appcore-collection__status--error {
    color: #a3242c;
}

/* Reusable grid view ------------------------------------------------ */

.appcore-grid {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.appcore-grid__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 0.75rem;
}

.appcore-type-definitions__search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.appcore-type-definitions__search label {
    color: var(--appcore-muted);
    font-size: 0.85rem;
}

.appcore-type-definitions__search input {
    min-width: min(20rem, 70vw);
    border: 1px solid var(--appcore-line);
    border-radius: 0.35rem;
    background: var(--appcore-surface);
    color: var(--appcore-ink);
    font: inherit;
    padding: 0.4rem 0.55rem;
}

.appcore-type-definitions__action {
    white-space: nowrap;
}

.appcore-catalog-items,
.appcore-catalog-units,
.appcore-locations {
    min-width: 0;
}

.appcore-catalog-items .appcore-grid__toolbar,
.appcore-catalog-units .appcore-grid__toolbar,
.appcore-locations .appcore-grid__toolbar,
.appcore-variant-directory .appcore-grid__toolbar,
.appcore-variant-unit-directory .appcore-grid__toolbar,
.appcore-variant-unit-barcode-directory .appcore-grid__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 1rem;
}

.appcore-filter-panel {
    min-width: 0;
    border: 1px solid var(--appcore-line);
    border-radius: 0.9rem;
    background: var(--appcore-surface);
    box-shadow: 0 0.35rem 1.25rem rgb(2 26 62 / 5%);
    overflow: hidden;
}

.appcore-filter-panel__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--appcore-ink);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.appcore-filter-panel__toggle:hover {
    background: color-mix(in srgb, var(--appcore-accent) 5%, var(--appcore-surface));
}

.appcore-filter-panel__toggle:focus-visible {
    outline: 2px solid var(--appcore-accent);
    outline-offset: -3px;
}

.appcore-filter-panel__title {
    font-size: 0.9rem;
    font-weight: 750;
}

.appcore-filter-panel__toggle-state {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex: 0 0 auto;
}

.appcore-filter-panel__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.6rem;
    min-height: 1.6rem;
    padding-inline: 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--appcore-accent) 14%, var(--appcore-surface));
    color: var(--appcore-accent-strong);
    font-size: 0.78rem;
    font-weight: 750;
}

.appcore-filter-panel__chevron {
    width: 0.55rem;
    height: 0.55rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg) translate(-0.1rem, -0.1rem);
    transition: transform 160ms ease;
}

.appcore-filter-panel--expanded .appcore-filter-panel__chevron {
    transform: rotate(225deg) translate(-0.1rem, -0.1rem);
}

.appcore-filter-panel__content {
    padding: 1rem;
    border-top: 1px solid var(--appcore-line);
}

.appcore-catalog-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    align-items: start;
    gap: 0.85rem;
    min-width: 0;
}

.appcore-catalog-filter__dates {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    min-width: 0;
}

.appcore-catalog-filter__actions,
.appcore-catalog-units__filter-actions,
.appcore-catalog-items__filter-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-block-start: 0.75rem;
    border-top: 1px solid var(--appcore-line);
}

.appcore-catalog-filter__actions button {
    min-height: 2.5rem;
}

.appcore-catalog__create {
    min-width: max-content;
}

.appcore-catalog__primary-action {
    min-height: 2.5rem;
    white-space: nowrap;
}

.appcore-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.appcore-status--active {
    background: color-mix(in srgb, #0f9f78 14%, var(--appcore-surface));
    color: #087457;
}

.appcore-status--warning {
    background: color-mix(in srgb, #e6a700 17%, var(--appcore-surface));
    color: #8a6200;
}

.appcore-status--danger {
    background: color-mix(in srgb, #c0392b 12%, var(--appcore-surface));
    color: #a3242c;
}

.appcore-status--inactive {
    background: color-mix(in srgb, var(--appcore-muted) 14%, var(--appcore-surface));
    color: var(--appcore-muted);
}

/* Platform administration ------------------------------------------ */

.appcore-platform-clients {
    min-width: 0;
    margin-block-start: 1rem;
}

.appcore-platform-clients .appcore-grid__toolbar {
    justify-content: flex-end;
}

.appcore-platform-clients .appcore-grid__table th,
.appcore-platform-clients .appcore-grid__table td {
    min-width: 10rem;
}

.appcore-platform-clients .appcore-grid__table th:first-child,
.appcore-platform-clients .appcore-grid__table td:first-child {
    min-width: 12rem;
}

.appcore-platform-client-form__wide,
.appcore-platform-client-form__note {
    grid-column: 1 / -1;
}

.appcore-platform-client-form__note {
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--appcore-accent) 5%, var(--appcore-surface));
    color: var(--appcore-muted);
    font-size: 0.85rem;
    line-height: 1.55;
}

@media (max-width: 48rem) {
    .appcore-platform-clients .appcore-grid__toolbar,
    .appcore-platform-clients .appcore-catalog__create,
    .appcore-platform-clients .appcore-catalog__create > .appcore-gate,
    .appcore-platform-clients .appcore-catalog__create > .appcore-gate > button {
        width: 100%;
    }

    .appcore-platform-client-form__wide,
    .appcore-platform-client-form__note {
        grid-column: auto;
    }
}

.appcore-catalog-units__conversion-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--appcore-accent) 35%, var(--appcore-line));
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--appcore-accent) 7%, var(--appcore-surface));
    color: var(--appcore-ink);
    font-size: 1.05rem;
}

@media (max-width: 48rem) {
    .appcore-catalog-items .appcore-grid__toolbar,
    .appcore-catalog-units .appcore-grid__toolbar,
    .appcore-locations .appcore-grid__toolbar,
    .appcore-variant-directory .appcore-grid__toolbar,
    .appcore-variant-unit-directory .appcore-grid__toolbar,
    .appcore-variant-unit-barcode-directory .appcore-grid__toolbar {
        grid-template-columns: 1fr;
    }

    .appcore-catalog__create {
        grid-row: 1;
        min-width: 0;
    }

    .appcore-catalog__primary-action,
    .appcore-catalog__create > .appcore-gate,
    .appcore-catalog__create > .appcore-gate > button {
        width: 100%;
    }

    .appcore-filter-panel {
        grid-row: 2;
    }

    .appcore-filter-panel__content {
        padding: 0.85rem;
    }

    .appcore-catalog-filter {
        grid-template-columns: 1fr;
    }

    .appcore-catalog-filter__dates {
        grid-template-columns: 1fr;
    }

    .appcore-catalog-filter__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .appcore-catalog-filter__actions button:only-child {
        grid-column: 1 / -1;
    }
}

.appcore-type-definitions__row-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

/* Reusable row action dropdown ------------------------------------- */

.appcore-action-menu {
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
    white-space: nowrap;
}

.appcore-action-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 2.5rem;
}

.appcore-action-menu__trigger .appcore-icon {
    color: var(--appcore-muted);
}

.appcore-action-menu__chevron {
    color: var(--appcore-muted);
    font-size: 0.75rem;
}

.appcore-action-menu__dismiss {
    position: fixed;
    inset: 0;
    z-index: 40;
    width: 100vw;
    height: 100vh;
    cursor: default;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.appcore-action-menu__dismiss:hover {
    border: 0;
    background: transparent;
}

.appcore-action-menu__panel {
    position: absolute;
    z-index: 41;
    inset-block-start: calc(100% + 0.35rem);
    inset-inline-end: 0;
    display: grid;
    min-width: 14rem;
    overflow: hidden;
    border: 1px solid var(--appcore-line);
    border-radius: 0.7rem;
    background: var(--appcore-surface);
    box-shadow: 0 1rem 2.5rem rgb(15 23 42 / 18%);
    padding: 0.35rem;
}

.appcore-action-menu__panel > .appcore-gate {
    display: block;
}

/* On a phone the table's viewport keeps scrolling while a row menu is open, so an
   absolutely positioned panel would be clipped by it. A fixed panel resolves
   against the screen rather than the scroll box, so the menu becomes a bottom
   sheet: full width, above the fixed dismiss layer (z-index 40) that closes it,
   and clear of the home indicator. inset-inline covers both sides, so it is the
   same in either direction; the safe-area padding is physical because the notch
   and rounded corners are, whichever way the text runs. */
@media (max-width: 48rem) {
    .appcore-action-menu__panel {
        position: fixed;
        inset-block-start: auto;
        inset-block-end: 0;
        inset-inline: 0;
        min-width: 0;
        max-height: 70vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-width: 1px 0 0;
        border-radius: 0.9rem 0.9rem 0 0;
        box-shadow: 0 -0.75rem 2rem rgb(15 23 42 / 22%);
        padding: 0.5rem;
        padding-left: calc(0.5rem + env(safe-area-inset-left, 0px));
        padding-right: calc(0.5rem + env(safe-area-inset-right, 0px));
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    }

    .appcore-action-menu__item {
        min-height: 2.75rem;
    }
}

.appcore-action-menu__item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.65rem;
    justify-content: flex-start;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--appcore-ink);
    padding: 0.55rem 0.65rem;
    text-align: start;
}

.appcore-action-menu__item:hover,
.appcore-action-menu__item:focus-visible {
    border: 0;
    background: color-mix(in srgb, var(--appcore-accent) 8%, var(--appcore-surface));
    color: var(--appcore-accent);
}

.appcore-action-menu__item--danger {
    color: #a3242c;
}

.appcore-action-menu__item--danger:hover,
.appcore-action-menu__item--danger:focus-visible {
    background: color-mix(in srgb, #c0392b 8%, var(--appcore-surface));
    color: #a3242c;
}

.appcore-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

/* The grid normally scrolls horizontally. While a row menu is open its panel must
   be allowed to extend outside the viewport instead of being clipped - on wide
   screens only, for the reason given at the collection viewport: on a phone this
   threw away the row's scroll position the moment its menu opened. */
@media (min-width: 48.01rem) {
    .appcore-grid__viewport:has(.appcore-action-menu__panel) {
        overflow: visible;
    }
}

.appcore-type-definitions__danger {
    border-color: #c0392b;
    color: #a3242c;
}

.appcore-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: 1rem;
    background: rgb(15 23 42 / 55%);
}

.appcore-modal {
    width: min(42rem, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    border: 1px solid var(--appcore-line);
    border-radius: 1rem;
    background: var(--appcore-surface);
    box-shadow: 0 1.5rem 4rem rgb(15 23 42 / 28%);
}

.appcore-modal--confirmation {
    width: min(32rem, 100%);
}

.appcore-modal--wide {
    width: min(64rem, 100%);
}

.appcore-modal-backdrop--nested {
    z-index: 1010;
}

.appcore-type-capabilities__heading {
    display: grid;
    gap: 0.15rem;
}

.appcore-type-capabilities__heading span {
    color: var(--appcore-muted);
    font-size: 0.82rem;
}

.appcore-type-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
}

.appcore-type-details > div {
    min-width: 0;
}

.appcore-type-details dt {
    margin-bottom: 0.25rem;
    color: var(--appcore-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.appcore-type-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.appcore-type-details__wide {
    grid-column: 1 / -1;
}

.appcore-type-details pre {
    max-height: 14rem;
    overflow: auto;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.35rem;
    background: var(--appcore-bg);
    white-space: pre-wrap;
}

.appcore-type-details ul {
    margin: 0;
    padding-inline-start: 1.25rem;
}

@media (max-width: 40rem) {
    .appcore-type-details {
        grid-template-columns: 1fr;
    }
}

.appcore-modal__header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--appcore-line);
    background: var(--appcore-surface);
}

.appcore-modal__header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.appcore-modal__subtitle {
    margin: 0.25rem 0 0;
    color: var(--appcore-muted);
    font-size: 0.82rem;
}

.appcore-modal__subtitle code {
    margin-inline-start: 0.35rem;
}

.appcore-modal__close {
    border: 0;
    background: transparent;
    color: var(--appcore-muted);
    font-size: 1.5rem;
    line-height: 1;
}

.appcore-modal__form {
    display: grid;
    gap: 0.9rem;
    padding: 1.25rem;
}

.appcore-modal__actions {
    justify-content: flex-end;
}

.appcore-locations .appcore-modal--wide,
.appcore-modal--location-editor {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 38rem !important;
    max-height: calc(100vh - 2rem) !important;
    overflow: hidden !important;
}

.appcore-location-editor {
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
    height: 100%;
    padding-top: 0;
    overflow: hidden;
}

.appcore-location-editor__body {
    display: grid;
    align-content: start;
    gap: 0.9rem;
    min-height: 0;
    overflow-y: auto;
    padding-inline: 0.15rem;
}

.appcore-location-tabs {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    margin: 0 -1.25rem;
    padding: 0.75rem 1.25rem 0;
    border-bottom: 1px solid var(--appcore-line);
    background: var(--appcore-surface);
}

.appcore-location-tabs__tab {
    flex: 0 0 auto;
    padding: 0.65rem 0.85rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--appcore-muted);
    font-weight: 600;
}

.appcore-location-tabs__tab:hover,
.appcore-location-tabs__tab:focus-visible {
    color: var(--appcore-text);
}

.appcore-location-tabs__tab.active {
    border-bottom-color: var(--appcore-accent);
    color: var(--appcore-accent);
}

.appcore-location-tabpanel {
    display: grid;
    align-content: start;
    gap: 0.9rem;
    padding-top: 0.25rem;
}

.appcore-button--danger {
    border-color: color-mix(in srgb, #a3242c 45%, var(--appcore-line));
    color: #a3242c;
}

.appcore-button--danger:hover:not(:disabled) {
    border-color: #a3242c;
    background: color-mix(in srgb, #a3242c 7%, var(--appcore-surface));
}

.appcore-attribute-values__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--appcore-accent) 4%, var(--appcore-surface));
}

.appcore-attribute-values__summary > div {
    display: grid;
    gap: 0.15rem;
}

.appcore-attribute-values__summary span:not(.appcore-status),
.appcore-attribute-values__empty {
    color: var(--appcore-muted);
    font-size: 0.85rem;
}

.appcore-attribute-values__empty {
    margin: 0;
    padding: 1.5rem;
    border: 1px dashed var(--appcore-line);
    border-radius: 0.75rem;
    text-align: center;
}

.appcore-attribute-values__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.appcore-attribute-value {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.8rem;
    background: var(--appcore-surface);
}

.appcore-attribute-value__heading,
.appcore-attribute-value__state,
.appcore-attribute-value__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.appcore-attribute-value__heading > div:first-child {
    display: grid;
    gap: 0.15rem;
}

.appcore-attribute-value__heading code,
.appcore-attribute-value__state {
    color: var(--appcore-muted);
    font-size: 0.78rem;
}

.appcore-attribute-value__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.3rem;
}

.appcore-attribute-value__badge {
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--appcore-muted) 11%, var(--appcore-surface));
    color: var(--appcore-muted);
    font-size: 0.7rem;
    font-weight: 650;
}

.appcore-attribute-value__badge--required {
    background: color-mix(in srgb, #e6a700 14%, var(--appcore-surface));
    color: #8a6200;
}

.appcore-attribute-value__unsaved {
    color: #8a6200;
    font-weight: 650;
}

.appcore-attribute-value__actions {
    justify-content: flex-end;
    margin-block-start: auto;
    padding-block-start: 0.75rem;
    border-top: 1px solid var(--appcore-line);
}

@media (max-width: 48rem) {
    .appcore-attribute-values__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 40rem) {
    .appcore-attribute-values__summary {
        align-items: flex-start;
    }

    .appcore-attribute-value__actions,
    .appcore-attribute-value__actions > .appcore-gate,
    .appcore-attribute-value__actions button {
        width: 100%;
    }
}

.appcore-grid__viewport {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--appcore-line);
    border-radius: 0.9rem;
    background: var(--appcore-surface);
    box-shadow: var(--appcore-shadow);
}

.appcore-grid__table {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
}

.appcore-grid__table caption:not(.visually-hidden) {
    padding: 0.75rem;
    color: var(--appcore-ink);
    font-weight: 600;
    text-align: start;
}

.appcore-grid__table th,
.appcore-grid__table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--appcore-line);
    font-size: 0.9rem;
    text-align: start;
    vertical-align: middle;
}

.appcore-grid__table th {
    background: #f7faff;
    color: var(--appcore-muted);
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.015em;
    white-space: nowrap;
}

.appcore-grid__table tbody tr:last-child > td {
    border-bottom: 0;
}

.appcore-grid--dense .appcore-grid__table th,
.appcore-grid--dense .appcore-grid__table td {
    padding: 0.4rem 0.55rem;
}

.appcore-grid--striped .appcore-grid__table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--appcore-canvas) 60%, transparent);
}

.appcore-grid--selectable .appcore-grid__table tbody tr:not(:has(.appcore-grid__state)) {
    cursor: pointer;
}

.appcore-grid--selectable .appcore-grid__table tbody tr:not(:has(.appcore-grid__state)):hover,
.appcore-grid--selectable .appcore-grid__table tbody tr:not(:has(.appcore-grid__state)):focus-visible {
    background: color-mix(in srgb, var(--appcore-accent) 7%, var(--appcore-surface));
    outline: none;
}

.appcore-grid__row--selected {
    background: color-mix(in srgb, var(--appcore-accent) 12%, var(--appcore-surface)) !important;
    box-shadow: inset 0.2rem 0 var(--appcore-accent);
}

.appcore-grid__sort {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
}

.appcore-grid__sort:hover {
    color: var(--appcore-accent);
}

.appcore-grid__state {
    min-width: min(30rem, 80vw);
    padding: 1.25rem !important;
    color: var(--appcore-muted);
    text-align: center !important;
}

.appcore-grid__state--error {
    color: #a3242c;
}

.appcore-grid__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    color: var(--appcore-muted);
    font-size: 0.82rem;
}

.appcore-grid__page-size,
.appcore-grid__pager-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.appcore-grid__page-size select {
    border: 1px solid var(--appcore-line);
    border-radius: 0.35rem;
    background: var(--appcore-surface);
    color: var(--appcore-ink);
    font: inherit;
    padding: 0.3rem 0.45rem;
}

.appcore-grid__pager-actions button {
    min-width: 2rem;
    padding-inline: 0.45rem;
}

@media (max-width: 40rem) {
    .appcore-modal-backdrop {
        align-items: end;
        padding: 0;
    }

    .appcore-modal,
    .appcore-modal--confirmation,
    .appcore-modal--wide {
        width: 100%;
        max-height: 94dvh;
        border-width: 1px 0 0;
        border-radius: 1rem 1rem 0 0;
    }

    .appcore-modal__header,
    .appcore-modal__form {
        padding-inline: 1rem;
    }

    .appcore-modal__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .appcore-modal__actions button {
        width: 100%;
    }

    .appcore-grid__viewport {
        border-radius: 0.75rem;
    }

    .appcore-grid__pager {
        align-items: stretch;
        flex-direction: column;
    }

    .appcore-grid__pager-actions {
        justify-content: space-between;
    }
}

.appcore-permission-grant__warning {
    color: var(--appcore-muted);
    font-size: 0.85rem;
}

/* Gates -------------------------------------------------------------- */

/* A disabled gate keeps the affordance visible but inert, so the caller can see
   that the action exists and infer that they lack permission for it. */
.appcore-gate--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.appcore-gate--disabled > * {
    pointer-events: none;
}

button {
    font: inherit;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.5rem;
    background: var(--appcore-surface);
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

button:hover {
    border-color: var(--appcore-accent);
    color: var(--appcore-accent);
}

button:active:not(:disabled) {
    transform: translateY(1px);
}

button:focus-visible,
a:focus-visible {
    outline: 0.18rem solid color-mix(in srgb, var(--appcore-teal) 45%, transparent);
    outline-offset: 0.12rem;
}

.appcore-type-definitions__action,
.appcore-editor__actions button[type="submit"] {
    border-color: transparent;
    background: var(--appcore-gradient);
    color: #fff;
    box-shadow: 0 0.4rem 1rem rgb(7 124 240 / 18%);
}

.appcore-type-definitions__action:hover,
.appcore-editor__actions button[type="submit"]:hover {
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0.55rem 1.25rem rgb(7 124 240 / 28%);
}

/* Reusable form fields ---------------------------------------------- */

.appcore-field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.appcore-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.appcore-form-grid--checks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

@media (max-width: 42rem) {
    .appcore-form-grid,
    .appcore-form-grid--checks {
        grid-template-columns: 1fr;
    }
}

.appcore-field__label,
.appcore-multirow__label {
    color: var(--appcore-ink);
    font-size: 0.875rem;
    font-weight: 600;
}

.appcore-field__required {
    color: #a3242c;
    margin-inline-start: 0.15rem;
}

.appcore-field__control input:not([type="checkbox"]):not([type="radio"]),
.appcore-field__control select,
.appcore-field__control textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 2.5rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.55rem;
    background: var(--appcore-surface);
    color: var(--appcore-ink);
    font: inherit;
    padding: 0.5rem 0.65rem;
}

.appcore-field__control {
    min-width: 0;
    max-width: 100%;
}

.appcore-field__control input[type="datetime-local"] {
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
}

.appcore-field__control textarea {
    min-height: 6rem;
    resize: vertical;
}

.appcore-field__control input:focus-visible,
.appcore-field__control select:focus-visible,
.appcore-field__control textarea:focus-visible {
    border-color: var(--appcore-accent);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--appcore-accent) 18%, transparent);
    outline: none;
}

.appcore-field__control .modified.invalid {
    border-color: #a3242c;
}

.appcore-field__control :disabled,
.appcore-field__control [readonly] {
    background: #f3f4f6;
    color: var(--appcore-muted);
    cursor: not-allowed;
}

.appcore-field__help,
.appcore-field__state {
    color: var(--appcore-muted);
    font-size: 0.8rem;
}

.appcore-field__validation {
    color: #a3242c;
    font-size: 0.8rem;
}

.appcore-field__validation:empty {
    display: none;
}

.appcore-field__input-group {
    display: flex;
    align-items: stretch;
}

.appcore-field__input-group > input {
    flex: 1 1 auto;
    min-width: 0;
}

.appcore-field__input-group > :first-child:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.appcore-field__input-group > :last-child:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.appcore-field__affix {
    display: grid;
    place-items: center;
    border: 1px solid var(--appcore-line);
    background: #f7f8fa;
    color: var(--appcore-muted);
    padding-inline: 0.65rem;
    white-space: nowrap;
}

.appcore-choice-list {
    display: grid;
    gap: 0.5rem;
}

.appcore-choice-list--radio {
    /* Same floor problem as .appcore-page__grid, one screen further in. */
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}

.appcore-choice {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--appcore-ink);
    cursor: pointer;
}

.appcore-choice input {
    accent-color: var(--appcore-accent);
}

.appcore-choice--single {
    font-weight: 600;
}

.appcore-json-editor {
    display: grid;
    gap: 0.5rem;
}

.appcore-json-editor textarea {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    tab-size: 2;
}

.appcore-json-editor__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.appcore-multirow {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
}

.appcore-multirow__header,
.appcore-multirow__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
}

.appcore-multirow__header {
    color: var(--appcore-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.appcore-multirow__rows {
    display: grid;
    gap: 0.6rem;
}

.appcore-multirow__row {
    border: 1px solid var(--appcore-line);
    border-radius: 0.5rem;
    background: var(--appcore-surface);
    padding: 0.75rem;
}

.appcore-multirow__content {
    min-width: 0;
}

.appcore-multirow__row-actions,
.appcore-multirow__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.appcore-multirow__remove {
    color: #a3242c;
}

.appcore-multirow__add {
    justify-self: start;
}

.appcore-multirow__empty {
    border: 1px dashed var(--appcore-line);
    border-radius: 0.5rem;
    color: var(--appcore-muted);
    padding: 1rem;
    text-align: center;
}

@media (max-width: 40rem) {
    .appcore-multirow__row {
        grid-template-columns: 1fr;
    }
}

/* Inline editor ------------------------------------------------------ */

.appcore-editor {
    background: var(--appcore-surface);
    border: 1px solid var(--appcore-line);
    border-radius: 0.6rem;
    padding: 1rem 1.25rem;
    margin-block: 1rem;
    display: grid;
    gap: 0.75rem;
    max-width: 26rem;
}

.appcore-editor h3 {
    margin: 0;
    font-size: 1rem;
}

.appcore-editor label {
    display: grid;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--appcore-muted);
}

.appcore-editor input[type="text"],
.appcore-editor input[type="password"],
.appcore-editor input:not([type]) {
    font: inherit;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.35rem;
    color: var(--appcore-ink);
}

.appcore-editor__check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--appcore-ink);
}

.appcore-editor__actions {
    display: flex;
    gap: 0.5rem;
}

.appcore-collection__row-actions {
    display: flex;
    gap: 0.4rem;
}

/* ---------------------------------------------------------------------------
   People
   --------------------------------------------------------------------------- */

/* Fields flow into as many columns as fit. The editor's own 26rem limit is right
   for a dialog and wrong here: a name, its translations button and a date would be
   squeezed into a strip down one side of an otherwise empty page. */
.appcore-person__form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

.appcore-person__form > h3,
.appcore-person__actions {
    grid-column: 1 / -1;
    margin: 0;
}

.appcore-person__add {
    margin-block-start: 1.25rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--appcore-line);
}

.appcore-person__field,
.appcore-person__translation {
    display: grid;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--appcore-muted);
}

.appcore-person__translation {
    margin-block-end: 0.75rem;
}

.appcore-person__field input,
.appcore-person__field select,
.appcore-person__field textarea,
.appcore-person__translation input {
    font: inherit;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.35rem;
    color: var(--appcore-ink);
    background: var(--appcore-surface);
    min-width: 0;
}

.appcore-person__hint {
    color: var(--appcore-muted);
    margin-block: 0 0.75rem;
}

/* The translations button sits flush against its input, like an affix, so it reads
   as belonging to that one field rather than to the form. */
.appcore-resource-button {
    display: grid;
    place-items: center;
    padding-inline: 0.6rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.35rem;
    background: #f7f8fa;
    color: var(--appcore-muted);
    cursor: pointer;
}

.appcore-resource-button:hover,
.appcore-resource-button:focus-visible {
    border-color: var(--appcore-accent);
    color: var(--appcore-accent);
}

/* Tinted when another language already has a value, so a translated name is visible
   from the form without opening every dialog to find out. */
.appcore-resource-button--translated {
    color: var(--appcore-accent);
}

.appcore-resource-button .appcore-icon {
    width: 1.1rem;
    height: 1.1rem;
}

/* ---------------------------------------------------------------------------
   Reservations
   --------------------------------------------------------------------------- */

.appcore-calendar {
    /* Fixed pixels, not rem: a click arrives as a pixel offset and SchedulingDisplay.StepPixels turns
       it back into a time. The two numbers must agree or clicks land on the wrong slot. */
    --appcore-calendar-step: 32px;
    --appcore-calendar-head: 3rem;
    --appcore-calendar-group: 1.9rem;
    display: grid;
    gap: 0.75rem;
}

.appcore-calendar__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.appcore-calendar__nav,
.appcore-calendar__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.appcore-calendar__title {
    margin: 0;
    font-size: 1.1rem;
}

.appcore-calendar__modes {
    display: inline-flex;
    border: 1px solid var(--appcore-line);
    border-radius: 0.4rem;
    overflow: hidden;
}

.appcore-calendar__modes button {
    border: 0;
    border-radius: 0;
    background: var(--appcore-surface);
}

.appcore-calendar__modes button.active {
    background: var(--appcore-accent);
    color: #fff;
}

.appcore-calendar__select {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--appcore-muted);
}

.appcore-calendar__new {
    border-color: transparent;
    background: var(--appcore-gradient);
    color: #fff;
}

.appcore-calendar__viewport {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--appcore-line);
    border-radius: 0.6rem;
    background: var(--appcore-surface);
}

.appcore-calendar__board {
    display: flex;
    min-width: max-content;
}

.appcore-calendar__times {
    position: sticky;
    inset-inline-start: 0;
    z-index: 3;
    flex: 0 0 4rem;
    background: var(--appcore-surface);
    border-inline-end: 1px solid var(--appcore-line);
}

.appcore-calendar__head {
    height: var(--appcore-calendar-head);
}

.appcore-calendar__board--grouped .appcore-calendar__head {
    height: calc(var(--appcore-calendar-head) + var(--appcore-calendar-group));
}

.appcore-calendar__time {
    height: var(--appcore-calendar-step);
    padding-inline: 0.4rem;
    font-size: 0.72rem;
    color: var(--appcore-muted);
    transform: translateY(-0.5em);
}

.appcore-calendar__group {
    display: flex;
    flex-direction: column;
    border-inline-end: 2px solid var(--appcore-line);
}

.appcore-calendar__group-name {
    height: var(--appcore-calendar-group);
    display: flex;
    align-items: center;
    padding-inline: 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: #f7f8fa;
    border-block-end: 1px solid var(--appcore-line);
}

.appcore-calendar__columns {
    display: flex;
}

.appcore-calendar__column {
    width: 11rem;
    border-inline-end: 1px solid var(--appcore-line);
}

/* A resource that stopped taking bookings is drawn for the ones it still has, and plainly not open for more. */
.appcore-calendar__column--inactive .appcore-calendar__lane {
    cursor: default;
    background-color: rgb(120 130 150 / 8%);
}

.appcore-calendar__column--inactive .appcore-calendar__column-head {
    color: var(--appcore-muted);
}

/* Only there to disable every field at once while a hold waits to be confirmed; it draws nothing of its own. */
.appcore-booking-editor__fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.appcore-calendar__column-head {
    height: var(--appcore-calendar-head);
    display: grid;
    align-content: center;
    padding-inline: 0.5rem;
    border-block-start: 3px solid transparent;
    border-block-end: 1px solid var(--appcore-line);
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.appcore-calendar__column-head small {
    font-weight: 400;
    color: var(--appcore-muted);
}

.appcore-calendar__column-head--today {
    border-block-start-color: var(--appcore-accent);
}

.appcore-calendar__lane {
    position: relative;
    cursor: copy;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--appcore-calendar-step) - 1px),
        var(--appcore-line) calc(var(--appcore-calendar-step) - 1px),
        var(--appcore-line) var(--appcore-calendar-step));
}

/* Shading and blocked periods never take the click: it belongs to the lane, which knows the time. */
.appcore-calendar__closed,
.appcore-calendar__blocked,
.appcore-calendar__now {
    position: absolute;
    inset-inline: 0;
    pointer-events: none;
}

.appcore-calendar__closed {
    background: repeating-linear-gradient(135deg, rgb(120 130 150 / 10%) 0 6px, rgb(120 130 150 / 18%) 6px 12px);
}

.appcore-calendar__blocked {
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    color: var(--appcore-muted);
    background: rgb(120 130 150 / 22%);
}

.appcore-calendar__now {
    height: 2px;
    background: #e5484d;
    z-index: 2;
}

.appcore-calendar__booking {
    position: absolute;
    inset-inline: 3px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-height: 1.4rem;
    padding: 0.2rem 0.35rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-inline-start-width: 4px;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: start;
    cursor: pointer;
}

.appcore-calendar__booking strong,
.appcore-calendar__booking span {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.appcore-calendar__booking-time,
.appcore-calendar__booking-status {
    font-size: 0.7rem;
    opacity: 0.85;
}

.appcore-calendar__booking--confirmed { background: #e6f4ea; border-color: #2e7d32; color: #1b4d1f; }
.appcore-calendar__booking--held { background: #fff6e0; border-color: #c77700; color: #6b4000; border-style: dashed; }
.appcore-calendar__booking--completed { background: #eceff3; border-color: #607080; color: #34404c; }
.appcore-calendar__booking--no-show { background: #fdecec; border-color: #c62828; color: #7a1b1b; }
.appcore-calendar__booking--blocked { opacity: 0.7; }

.appcore-booking-status {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: #eceff3;
}

.appcore-booking-status--confirmed { background: #e6f4ea; color: #1b4d1f; }
.appcore-booking-status--held { background: #fff6e0; color: #6b4000; }
.appcore-booking-status--cancelled,
.appcore-booking-status--no-show { background: #fdecec; color: #7a1b1b; }

.appcore-booking-editor__slots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-block: 0.75rem;
}

.appcore-booking-editor__slots-label {
    font-size: 0.85rem;
    color: var(--appcore-muted);
    margin-inline-end: 0.25rem;
}

.appcore-booking-editor__slot {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--appcore-line);
    border-radius: 999px;
    background: var(--appcore-surface);
    font-size: 0.8rem;
    cursor: pointer;
}

.appcore-booking-editor__slot--selected {
    border-color: var(--appcore-accent);
    background: var(--appcore-accent);
    color: #fff;
}

.appcore-booking-editor__people {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block: 0.5rem;
}

.appcore-booking-editor__wide {
    grid-column: 1 / -1;
}

.appcore-booking-details__resources,
.appcore-booking-details__history {
    margin: 0;
    padding-inline-start: 1.1rem;
    display: grid;
    gap: 0.3rem;
}

.appcore-booking-details__resources li,
.appcore-booking-details__history li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
}

.appcore-booking-details__resources small,
.appcore-booking-details__history small,
.appcore-booking-details__history time {
    color: var(--appcore-muted);
}

/* A wide table scrolls inside its own box, so a narrow screen scrolls the table and not the page. */
.appcore-table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.appcore-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.appcore-check input[type="checkbox"] {
    width: auto;
}

.appcore-resource-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-inline-end: 0.4rem;
    border-radius: 0.2rem;
    vertical-align: middle;
}

.appcore-availability-week {
    display: grid;
    gap: 0.5rem;
}

.appcore-availability-week__day {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 0.5rem;
    align-items: start;
}

.appcore-availability-week__blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.appcore-availability-week__block {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.4rem;
}

.appcore-availability-week__block input {
    font: inherit;
    border: 1px solid var(--appcore-line);
    border-radius: 0.3rem;
    padding: 0.15rem 0.3rem;
}

/* ---------------------------------------------------------------------------
   Point of sale
   --------------------------------------------------------------------------- */

.appcore-pos {
    display: grid;
    gap: 0.75rem;
}

.appcore-pos__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.appcore-pos__bar h1 {
    margin: 0;
    margin-inline-end: auto;
}

.appcore-pos__shift {
    font-size: 0.85rem;
    color: var(--appcore-muted);
}

.appcore-pos__open {
    display: grid;
    gap: 0.75rem;
    max-width: 30rem;
}

/* The cart beside the catalog on a counter screen, under it on a tablet held upright. */
.appcore-pos__layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 900px) {
    .appcore-pos__layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.appcore-pos__search {
    display: flex;
    gap: 0.5rem;
}

.appcore-pos__search input:first-child {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.05rem;
    padding: 0.6rem 0.75rem;
}

.appcore-pos__quantity {
    width: 6rem;
}

.appcore-pos__results {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
    gap: 0.5rem;
}

.appcore-pos__results button {
    width: 100%;
    min-height: 4.5rem;
    display: grid;
    align-content: start;
    gap: 0.2rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.5rem;
    background: var(--appcore-surface);
    text-align: start;
    cursor: pointer;
}

.appcore-pos__results small {
    color: var(--appcore-muted);
}

.appcore-pos__cart {
    position: sticky;
    top: 0.5rem;
    display: grid;
    gap: 0.6rem;
    padding: 0.85rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.6rem;
    background: var(--appcore-surface);
}

.appcore-pos__cart h2 {
    margin: 0;
    font-size: 1.05rem;
}

.appcore-pos__lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    max-height: 45vh;
    overflow-y: auto;
}

.appcore-pos__lines li {
    display: grid;
    gap: 0.2rem;
    padding-block-end: 0.5rem;
    border-block-end: 1px solid var(--appcore-line);
}

.appcore-pos__line-main {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.appcore-pos__line-meta {
    font-size: 0.8rem;
    color: var(--appcore-muted);
}

.appcore-pos__line-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.appcore-pos__line-actions button {
    padding: 0.15rem 0.5rem;
    font-size: 0.8rem;
}

.appcore-pos__totals {
    margin: 0;
    display: grid;
    gap: 0.25rem;
}

.appcore-pos__totals div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.appcore-pos__totals dt,
.appcore-pos__totals dd {
    margin: 0;
}

.appcore-pos__total {
    font-size: 1.25rem;
    font-weight: 700;
}

.appcore-pos__pay {
    border-color: transparent;
    background: var(--appcore-gradient);
    color: #fff;
    font-size: 1.05rem;
    padding: 0.6rem 1.2rem;
}

.appcore-pos__methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 0.75rem;
}

.appcore-pos__methods button {
    min-width: 7rem;
    padding: 0.6rem 0.9rem;
}

.appcore-pos__short {
    color: #c62828;
}

.appcore-collection__row--selected {
    background: rgb(8 124 240 / 6%);
}

.appcore-receipt {
    display: grid;
    gap: 0.35rem;
    max-width: 26rem;
    margin-inline: auto;
    padding: 0.75rem;
    border: 1px dashed var(--appcore-line);
    border-radius: 0.4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
}

.appcore-receipt__row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.appcore-receipt__muted {
    color: var(--appcore-muted);
    font-size: 0.78rem;
}

.appcore-receipt hr {
    width: 100%;
    margin: 0.25rem 0;
    border: 0;
    border-block-start: 1px dashed var(--appcore-line);
}

/* Printing a receipt prints the receipt: the shell, the dialog frame and its buttons stay on screen. */
@media print {
    body * {
        visibility: hidden;
    }

    .appcore-receipt,
    .appcore-receipt * {
        visibility: visible;
    }

    .appcore-receipt {
        position: absolute;
        inset-inline-start: 0;
        top: 0;
        border: 0;
    }
}

/* ---------------------------------------------------------------------------
   Sign-in
   --------------------------------------------------------------------------- */

.appcore-login {
    display: grid;
    place-items: center;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 1rem;
    /* The product's own palette, not the platform's default one.

       These three colours were literals, so every product's sign-in page - the
       first screen anybody sees, and for most users the only one they see before
       deciding which application they are looking at - carried the same teal and
       blue whatever the theme said. Same defect as a theme overriding three of
       sixteen tokens, one screen earlier. */
    background:
        radial-gradient(circle at 10% 15%, color-mix(in srgb, var(--appcore-teal) 22%, transparent), transparent 26%),
        radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--appcore-accent) 26%, transparent), transparent 34%),
        linear-gradient(135deg, var(--appcore-navy), var(--appcore-navy-soft));
}

.appcore-login__card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: min(24rem, 100%);
    padding: 2rem;
    border: 1px solid var(--appcore-line);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1.5rem 4rem rgb(0 10 30 / 35%);
}

.appcore-login__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
    color: var(--appcore-navy);
}

.appcore-login__card h1 {
    margin: 0;
    font-size: 1.4rem;
}

.appcore-login__hint {
    margin: 0;
    color: var(--appcore-muted);
    font-size: 0.9rem;
}

.appcore-login__error {
    margin: 0;
    padding: 0.55rem 0.7rem;
    border-radius: 0.35rem;
    background: #fdecea;
    color: #8a1c12;
    font-size: 0.9rem;
}

.appcore-login__card label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--appcore-muted);
}

.appcore-login__card input {
    font: inherit;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.35rem;
    color: var(--appcore-ink);
}

.appcore-login__card button {
    font: inherit;
    margin-top: 0.4rem;
    padding: 0.55rem 0.8rem;
    border: 0;
    border-radius: 0.35rem;
    background: var(--appcore-gradient);
    color: #fff;
    cursor: pointer;
}

/* The permissions half of the role dialog: separated from the fields above so
   the dialog reads as two decisions rather than one long form. */
.appcore-role-permissions {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--appcore-line);
}

.appcore-role-permissions h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--appcore-ink);
}

.appcore-shell__version {
    margin: auto 0 0;
    padding-top: 0.75rem;
    color: rgb(255 255 255 / 38%);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

/* Tree ------------------------------------------------------------------
   Uses the same tokens as the rest of the shell, so it inherits the theme and
   both text directions without a second definition. Indentation is inline-start
   padding rather than a left margin, which is what makes it mirror in Arabic. */

.appcore-tree {
    max-height: min(26rem, 60vh);
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.6rem;
    background: var(--appcore-canvas);
}

.appcore-tree__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Only nested lists indent; the root sits flush. */
.appcore-tree__list .appcore-tree__list {
    padding-inline-start: 1.15rem;
    border-inline-start: 1px solid var(--appcore-line);
    margin-inline-start: 0.55rem;
}

.appcore-tree__row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.3rem;
    border-radius: 0.4rem;
}

.appcore-tree__row:hover {
    background: var(--appcore-surface);
}

.appcore-tree__twist {
    font: inherit;
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--appcore-muted);
    line-height: 1;
    cursor: pointer;
}

/* The glyph is a triangle, and a triangle pointing right points away from its own
   children on an Arabic page - the tree indents the other way. Same rotation the
   menu chevron already carries; the open glyph points down in both directions and
   is left alone. This repairs the role and permission screens too. */
html[dir="rtl"] .appcore-tree__twist {
    transform: rotate(180deg);
}

/* Kept in the layout so labels stay aligned down a level instead of stepping
   in and out depending on whether a row happens to have children. */
.appcore-tree__twist--leaf {
    visibility: hidden;
    cursor: default;
}

.appcore-tree__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    min-width: 0;
}

.appcore-tree__label input {
    width: auto;
    margin: 0;
    flex: 0 0 auto;
}

.appcore-tree__text {
    font-size: 0.85rem;
    color: var(--appcore-ink);
}

/* A row that exists to hold others rather than to be chosen. */
.appcore-tree__text--group {
    color: var(--appcore-muted);
    font-weight: 650;
}

.appcore-tree__detail {
    font-size: 0.72rem;
    color: var(--appcore-muted);
    white-space: nowrap;
}

@media (max-width: 34rem) {
    /* The code is the first thing to go: it is the least useful half on a phone
       and the part that forces the row to scroll sideways. */
    .appcore-tree__detail {
        display: none;
    }
}

/* Profile menu ---------------------------------------------------------
   The signed-in person in the header of both frontends. Collapsed to a name
   and an avatar; everything else is inside the panel, because the header had
   been accumulating one control per feature until it ran out of room on a
   laptop. */

.appcore-profile {
    position: relative;
}

.appcore-profile__trigger {
    font: inherit;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--appcore-ink);
    cursor: pointer;
}

.appcore-profile__trigger:hover,
.appcore-profile__trigger:focus-visible,
.appcore-profile--open .appcore-profile__trigger {
    border-color: var(--appcore-line);
    background: var(--appcore-canvas);
}

.appcore-profile__identity {
    display: grid;
    /* Start, not left: the name sits against the reading edge in both directions. */
    text-align: start;
    line-height: 1.2;
}

.appcore-profile__name {
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--appcore-ink);
}

.appcore-profile__tenant,
.appcore-profile__login {
    font-size: 0.72rem;
    color: var(--appcore-muted);
}

.appcore-profile__chevron {
    font-size: 0.7rem;
    color: var(--appcore-muted);
}

.appcore-profile__avatar,
.appcore-account__avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    background: var(--appcore-gradient);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
}

.appcore-profile__avatar--large,
.appcore-account__avatar {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1rem;
}

/* Covers the page so a click anywhere dismisses the panel, with no script and
   no document-level listener to leave behind. */
.appcore-profile__dismiss {
    position: fixed;
    inset: 0;
    z-index: 30;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.appcore-profile__panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    /* Anchored to the inline end, so it opens inwards from the header's edge in
       both directions rather than off the side of the page in Arabic. */
    inset-inline-end: 0;
    z-index: 31;
    display: grid;
    gap: 0.85rem;
    min-width: 17rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.85rem;
    background: var(--appcore-surface);
    box-shadow: 0 1.4rem 2.6rem rgb(2 26 62 / 16%);
}

.appcore-profile__header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--appcore-line);
}

.appcore-profile__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--appcore-muted);
}

.appcore-profile__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.appcore-profile__chip {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--appcore-canvas);
    border: 1px solid var(--appcore-line);
    font-size: 0.72rem;
    color: var(--appcore-ink);
}

.appcore-profile__actions {
    display: grid;
    gap: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--appcore-line);
}

.appcore-profile__action {
    font: inherit;
    display: block;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--appcore-ink);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.appcore-profile__action:hover,
.appcore-profile__action:focus-visible {
    background: var(--appcore-canvas);
}

.appcore-profile__action--signout {
    color: var(--appcore-muted);
}

@media (max-width: 30rem) {
    /* The avatar alone below this width. The name is in the panel, one tap away,
       and keeping it here pushed the chevron off the screen. */
    .appcore-profile__identity,
    .appcore-profile__chevron {
        display: none;
    }
}

/* Settings -------------------------------------------------------------- */

.appcore-settings {
    width: 100%;
}

.appcore-settings__description {
    max-width: 48rem;
    margin: 0;
    color: var(--appcore-muted);
    line-height: 1.55;
}

.appcore-settings__content {
    display: grid;
    gap: 1.25rem;
}

.appcore-service-settings__body {
    padding: 1.25rem;
}

.appcore-service-settings__body p {
    margin: 0;
    color: var(--appcore-muted);
}

.appcore-tenant-service-settings {
    min-width: 0;
}

.appcore-tenant-service-settings__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--appcore-line);
}

.appcore-tenant-service-settings__header h2,
.appcore-service-quota__header h3 {
    margin: 0;
}

.appcore-tenant-service-settings__header p {
    margin: 0.25rem 0 0;
    color: var(--appcore-muted);
    font-size: 0.85rem;
}

.appcore-tenant-service-settings__facts {
    padding: 1.25rem;
}

.appcore-tenant-service-settings__quota-count {
    flex: 0 0 auto;
    color: var(--appcore-muted);
    font-size: 0.8rem;
}

.appcore-tenant-service-settings__empty {
    margin: 0;
    padding: 1.25rem;
    color: var(--appcore-muted);
}

.appcore-tenant-service-settings__quotas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1rem;
    padding: 1.25rem;
}

.appcore-service-quota {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.8rem;
    background: var(--appcore-surface);
}

.appcore-service-quota__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.appcore-service-quota__header h3 {
    overflow-wrap: anywhere;
    font-size: 1rem;
}

.appcore-service-quota__header span,
.appcore-service-quota__header strong {
    color: var(--appcore-muted);
    font-size: 0.75rem;
}

.appcore-service-quota__header strong {
    flex: 0 0 auto;
}

.appcore-service-quota__progress {
    height: 0.5rem;
    margin: 0.9rem 0 1rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--appcore-line);
}

.appcore-service-quota__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--appcore-accent), var(--appcore-accent-strong));
}

.appcore-service-quota__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    margin: 0;
}

.appcore-service-quota__facts div {
    min-width: 0;
}

.appcore-service-quota__facts dt {
    color: var(--appcore-muted);
    font-size: 0.72rem;
}

.appcore-service-quota__facts dd {
    margin: 0.15rem 0 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.appcore-location-quota__summary {
    flex: 0 0 auto;
    color: var(--appcore-accent-strong);
    font-size: 0.9rem;
}

.appcore-location-quota__body {
    padding: 1.25rem;
}

.appcore-location-quota__body .appcore-service-quota__progress {
    margin-top: 0;
}

.appcore-location-quota__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
}

.appcore-location-quota__facts div {
    min-width: 0;
    padding: 0.8rem;
    border-radius: 0.65rem;
    background: var(--appcore-canvas);
}

.appcore-location-quota__facts dt {
    color: var(--appcore-muted);
    font-size: 0.75rem;
}

.appcore-location-quota__facts dd {
    margin: 0.25rem 0 0;
    overflow-wrap: anywhere;
    font-size: 1.05rem;
    font-weight: 700;
}

.appcore-organization {
    min-width: 0;
}

.appcore-organization__section-header,
.appcore-organization-service__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.appcore-organization__section-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--appcore-line);
}

.appcore-organization__section-header h2,
.appcore-organization-service__header h3 {
    margin: 0;
}

.appcore-organization__section-header p {
    margin: 0.25rem 0 0;
    color: var(--appcore-muted);
    font-size: 0.85rem;
}

.appcore-organization__facts {
    padding: 1.25rem;
}

.appcore-organization__count {
    flex: 0 0 auto;
    color: var(--appcore-muted);
    font-size: 0.8rem;
}

.appcore-organization__services {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
}

.appcore-organization__empty {
    margin: 0;
    padding: 1.25rem;
    color: var(--appcore-muted);
}

.appcore-organization-service {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--appcore-line);
    border-radius: 0.75rem;
    background: var(--appcore-surface);
}

.appcore-organization-service__header {
    padding: 0.9rem 1rem;
    background: var(--appcore-canvas);
    border-bottom: 1px solid var(--appcore-line);
}

.appcore-organization-service__header h3 {
    font-size: 1rem;
}

.appcore-organization-service__header code {
    display: block;
    margin-top: 0.2rem;
    color: var(--appcore-muted);
    font-size: 0.72rem;
}

.appcore-organization-service__unlimited {
    margin: 0;
    padding: 1rem;
    color: var(--appcore-muted);
}

.appcore-organization-service__viewport {
    max-width: 100%;
    overflow-x: auto;
}

.appcore-organization-service__quotas {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
}

.appcore-organization-service__quotas th,
.appcore-organization-service__quotas td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--appcore-line);
    text-align: start;
    vertical-align: middle;
}

.appcore-organization-service__quotas th {
    color: var(--appcore-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.appcore-organization-service__quotas tbody tr:last-child td {
    border-bottom: 0;
}

.appcore-organization-service__quotas small {
    display: block;
    margin-top: 0.15rem;
    color: var(--appcore-muted);
    white-space: nowrap;
}

@media (max-width: 42rem) {
    .appcore-tenant-service-settings__header,
    .appcore-organization__section-header,
    .appcore-organization-service__header {
        align-items: stretch;
        flex-direction: column;
    }

    .appcore-tenant-service-settings__facts,
    .appcore-organization__facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .appcore-location-quota__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 26rem) {
    .appcore-location-quota__facts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The account page ------------------------------------------------------ */

.appcore-account {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.appcore-account__body {
    padding: 1.25rem;
}

.appcore-account__identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
}

.appcore-account__name {
    margin: 0;
    font-size: 1.2rem;
}

.appcore-account__login,
.appcore-account__empty {
    margin: 0;
    color: var(--appcore-muted);
    font-size: 0.85rem;
}

.appcore-account__facts {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.appcore-account__facts > div {
    display: grid;
    /* The label column may shrink; the value column may not be pushed out of the
       card by a long login name or a role chip that will not wrap. */
    grid-template-columns: minmax(min(7rem, 35%), 12rem) minmax(0, 1fr);
    gap: 0.5rem 1rem;
    align-items: baseline;
}

.appcore-account__facts dt {
    color: var(--appcore-muted);
    font-size: 0.8rem;
}

.appcore-account__facts dd {
    margin: 0;
    color: var(--appcore-ink);
}

.appcore-account__form {
    display: grid;
    gap: 0.85rem;
    max-width: 24rem;
}

.appcore-account__form label {
    display: grid;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--appcore-muted);
}

.appcore-account__security {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.appcore-account__security-title {
    margin: 0;
    color: var(--appcore-ink);
    font-weight: 700;
}

.appcore-account__security-help {
    margin: 0.2rem 0 0;
    color: var(--appcore-muted);
    font-size: 0.82rem;
}

.appcore-account__password-action {
    flex: 0 0 auto;
}

.appcore-account__password-form {
    width: 100%;
    max-width: none;
}

.appcore-account__password-form input[type="password"] {
    width: 100%;
    min-height: 2.5rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.55rem;
    background: var(--appcore-surface);
    color: var(--appcore-ink);
    font: inherit;
    padding: 0.5rem 0.65rem;
}

.appcore-account__password-form input[type="password"]:focus-visible {
    border-color: var(--appcore-accent);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--appcore-accent) 18%, transparent);
    outline: none;
}

@media (max-width: 34rem) {
    .appcore-account__facts > div {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .appcore-account__password-action {
        width: 100%;
    }
}

.appcore-culture-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.18rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.55rem;
    background: var(--appcore-canvas);
}

.appcore-culture-switcher a {
    padding: 0.3rem 0.5rem;
    border-radius: 0.38rem;
    color: var(--appcore-muted);
    font-size: 0.73rem;
    font-weight: 650;
    text-decoration: none;
}

.appcore-culture-switcher a.active {
    background: var(--appcore-surface);
    color: var(--appcore-accent-strong);
    box-shadow: 0 0.15rem 0.45rem rgb(2 26 62 / 10%);
}

.appcore-login__remember {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--appcore-muted);
    cursor: pointer;
}

.appcore-login__remember input {
    width: auto;
    margin: 0;
}

.appcore-login__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -0.25rem;
}

html[dir="rtl"] .appcore-menu__link:hover,
html[dir="rtl"] .appcore-menu__link:focus-visible {
    transform: translateX(-0.12rem);
}

html[dir="rtl"] .appcore-grid__row--selected {
    box-shadow: inset -0.2rem 0 var(--appcore-accent);
}

/* ---------------------------------------------------------------------------
   Branding hooks.

   A product supplies a logo and a palette; it must not have to restyle the
   shell. Everything below sizes and positions those two things, so a profile
   stylesheet only ever redefines the custom properties at the top of this file.
   --------------------------------------------------------------------------- */

.appcore-shell__brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.appcore-shell__logo {
    /* Fixed box so a tall or wide logo cannot resize the navigation column. */
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    flex: none;
}

.appcore-shell__tenant {
    margin: 0.125rem 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--appcore-muted);
}

.appcore-login__logo {
    display: block;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    margin: 0 auto 0.75rem;
}

/* Routed catalog workspaces ------------------------------------------ */

.appcore-workspace {
    display: grid;
    min-width: 0;
    gap: 1.25rem;
}

.appcore-workspace__breadcrumbs {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.5rem;
    color: var(--appcore-muted);
    font-size: 0.82rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

.appcore-workspace__breadcrumbs a {
    color: var(--appcore-accent-strong);
    text-decoration: none;
}

.appcore-workspace__breadcrumbs a:hover,
.appcore-workspace__breadcrumbs a:focus-visible {
    text-decoration: underline;
}

.appcore-workspace__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
    gap: 1rem;
}

.appcore-workspace__header h1 {
    margin: 0.1rem 0 0.55rem;
}

.appcore-workspace__eyebrow {
    margin: 0;
    color: var(--appcore-teal);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.appcore-workspace__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.appcore-workspace__meta code {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.4rem;
    background: var(--appcore-surface);
}

.appcore-workspace__back {
    flex: 0 0 auto;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.5rem;
    background: var(--appcore-surface);
    color: var(--appcore-ink);
    font-size: 0.85rem;
    text-decoration: none;
    box-shadow: 0 0.2rem 0.6rem rgb(2 26 62 / 4%);
}

.appcore-workspace__back:hover,
.appcore-workspace__back:focus-visible {
    border-color: var(--appcore-accent);
    color: var(--appcore-accent-strong);
}

.appcore-workspace__tabs {
    display: flex;
    min-width: 0;
    gap: 0.25rem;
    padding: 0.3rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.75rem;
    background: var(--appcore-surface);
    overflow-x: auto;
    box-shadow: var(--appcore-shadow);
    scrollbar-width: thin;
}

.appcore-workspace__tabs a {
    flex: 0 0 auto;
    padding: 0.65rem 0.9rem;
    border-radius: 0.55rem;
    color: var(--appcore-muted);
    font-size: 0.88rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.appcore-workspace__tabs a:hover,
.appcore-workspace__tabs a:focus-visible {
    color: var(--appcore-accent-strong);
    background: rgb(8 124 240 / 6%);
}

.appcore-workspace__tabs a.active {
    color: #fff;
    background: var(--appcore-gradient);
    box-shadow: 0 0.25rem 0.65rem rgb(8 124 240 / 20%);
}

/* Buttons in a tab strip. The anchors above already carry the look; these only
   need the resets a <button> comes with and the anchors do not. */
.appcore-tabs button {
    font: inherit;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.9rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--appcore-muted);
    font-size: 0.88rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.appcore-tabs button:hover:not(:disabled),
.appcore-tabs button:focus-visible {
    color: var(--appcore-accent-strong);
    background: rgb(8 124 240 / 6%);
}

.appcore-tabs button.active {
    color: #fff;
    background: var(--appcore-gradient);
    box-shadow: 0 0.25rem 0.65rem rgb(8 124 240 / 20%);
}

.appcore-tabs button:disabled {
    cursor: default;
    opacity: 0.6;
}

/* How many of this section's permissions are granted. Inherits the tab's colour
   so it stays legible on the active tab's gradient as well as off it. */
.appcore-tabs__badge {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgb(127 127 127 / 22%);
    font-size: 0.72rem;
    font-weight: 700;
}

.appcore-workspace__content,
.appcore-workspace-section {
    min-width: 0;
}

.appcore-workspace-section__surface {
    min-width: 0;
    border: 1px solid var(--appcore-line);
    border-radius: 0.85rem;
    background: var(--appcore-surface);
    box-shadow: var(--appcore-shadow);
}

.appcore-workspace-section__surface > h2 {
    margin: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--appcore-line);
    font-size: 1.05rem;
}

.appcore-workspace-section__surface > .appcore-type-details {
    padding: 1.25rem;
}

.appcore-workspace__state {
    display: grid;
    justify-items: start;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.85rem;
    background: var(--appcore-surface);
    box-shadow: var(--appcore-shadow);
}

.appcore-workspace__state p {
    margin: 0;
}

.appcore-workspace__state--error {
    color: #9b1c1c;
}

@media (max-width: 40rem) {
    .appcore-workspace {
        gap: 1rem;
    }

    .appcore-workspace__header {
        flex-direction: column;
    }

    .appcore-workspace__back {
        width: 100%;
        text-align: center;
    }

    .appcore-workspace__tabs a {
        flex: 1 0 auto;
        text-align: center;
    }

    .appcore-workspace-section__surface > .appcore-type-details,
    .appcore-workspace-section__surface > .appcore-modal__form {
        padding: 1rem;
    }
}

/* Clients ------------------------------------------------------------ */

.appcore-client__muted {
    color: var(--appcore-muted);
    font-size: 0.82rem;
}

.appcore-client__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.appcore-client__tenant {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--appcore-line);
    border-radius: 999px;
    font-size: 0.8rem;
}

.appcore-client__tenant .appcore-icon {
    width: 0.95rem;
    height: 0.95rem;
}

.appcore-client__details {
    display: grid;
    grid-template-columns: minmax(min(8rem, 100%), max-content) minmax(0, 1fr);
    gap: 0.4rem 1rem;
    margin: 0;
}

.appcore-client__details dt {
    color: var(--appcore-muted);
    font-size: 0.85rem;
}

.appcore-client__details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.appcore-client-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* Tinted from the tag's own colour rather than a fixed palette, so a tenant's tags stay readable on any product's theme. */
.appcore-client-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--appcore-client-tag, #64748b);
    border-radius: 999px;
    background: color-mix(in srgb, var(--appcore-client-tag, #64748b) 14%, transparent);
    color: var(--appcore-ink);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.appcore-client-tag::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-end: 0.35rem;
    border-radius: 50%;
    background: var(--appcore-client-tag, #64748b);
}

.appcore-client-picker {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.appcore-client-picker__chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.5rem;
    background: var(--appcore-surface);
}

.appcore-client-picker__chosen .appcore-icon {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--appcore-teal);
}

.appcore-client-picker__results {
    display: grid;
    gap: 0.25rem;
    max-height: 14rem;
    overflow-y: auto;
}

.appcore-client-picker__result {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.5rem;
    background: var(--appcore-surface);
    color: var(--appcore-ink);
    text-align: start;
    cursor: pointer;
}

.appcore-client-picker__result:hover,
.appcore-client-picker__result:focus-visible {
    border-color: var(--appcore-accent);
}

.appcore-client-picker__result small {
    color: var(--appcore-muted);
}

.appcore-client-kind,
.appcore-client-tag-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.6rem;
}

.appcore-client-kind legend,
.appcore-client-tag-choice legend {
    padding: 0 0.3rem;
    color: var(--appcore-muted);
    font-size: 0.85rem;
}

.appcore-client-register {
    margin-block: 0.75rem;
}

.appcore-client-register summary {
    color: var(--appcore-accent-strong);
    font-weight: 600;
    cursor: pointer;
}

.appcore-client-timeline {
    display: grid;
    gap: 0.25rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.appcore-client-timeline__item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--appcore-line);
}

.appcore-client-timeline__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--appcore-accent) 12%, transparent);
    color: var(--appcore-accent-strong);
}

.appcore-client-timeline__item--note .appcore-client-timeline__icon,
.appcore-client-timeline__item--interaction .appcore-client-timeline__icon {
    background: color-mix(in srgb, var(--appcore-teal) 14%, transparent);
    color: var(--appcore-teal);
}

.appcore-client-timeline__item--activity .appcore-client-timeline__icon {
    background: color-mix(in srgb, var(--appcore-muted) 14%, transparent);
    color: var(--appcore-muted);
}

.appcore-client-timeline__icon .appcore-icon {
    width: 1.05rem;
    height: 1.05rem;
}

.appcore-client-timeline__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-weight: 600;
}

.appcore-client-timeline__badge {
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--appcore-line);
    border-radius: 999px;
    color: var(--appcore-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.appcore-client-timeline__detail {
    margin: 0.2rem 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.appcore-link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--appcore-accent-strong);
    font: inherit;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}

.appcore-link-button:hover,
.appcore-link-button:focus-visible {
    text-decoration: underline;
}

.appcore-client-note-form {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.appcore-client-note-form textarea,
.appcore-client-note textarea {
    width: 100%;
}

.appcore-client-notes {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.appcore-client-note {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.6rem;
    background: var(--appcore-surface);
}

.appcore-client-note--pinned {
    border-inline-start: 4px solid var(--appcore-teal);
}

.appcore-client-note__body {
    margin: 0 0 0.4rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.appcore-client-note__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

@media (max-width: 40rem) {
    .appcore-client__actions {
        justify-content: stretch;
    }

    .appcore-client__details {
        grid-template-columns: 1fr;
    }
}

/*
 * Portal branding: the settings beside a sketch of the portal's header in the chosen colours.
 *
 * The preview reads its colours from custom properties set on the element itself, defaulting to the product's own, so an
 * empty field previews exactly what an empty field means - the product unchanged.
 */
.appcore-branding {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(min(16rem, 100%), 2fr);
    gap: 1.5rem;
    align-items: start;
}

.appcore-branding h3 {
    margin: 0 0 0.6rem;
    font-size: 1rem;
}

.appcore-branding__color {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.appcore-branding__color input[type="color"] {
    inline-size: 2.75rem;
    block-size: 2.25rem;
    padding: 0.15rem;
    border: 1px solid var(--appcore-line);
    border-radius: 0.4rem;
    background: var(--appcore-surface);
    cursor: pointer;
}

.appcore-branding__color input:not([type="color"]) {
    inline-size: 7.5rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.appcore-branding__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.appcore-branding__conflict {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #f3d38a;
    border-inline-start: 4px solid #b45309;
    border-radius: 0.5rem;
    background: #fffbeb;
}

.appcore-branding__conflict p {
    margin: 0;
}

.appcore-branding__logo {
    display: grid;
    gap: 0.6rem;
    justify-items: start;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--appcore-line);
}

.appcore-branding__logo-image {
    max-inline-size: 12rem;
    max-block-size: 5rem;
    padding: 0.5rem;
    border: 1px dashed var(--appcore-line);
    border-radius: 0.5rem;
    background: var(--appcore-canvas);
    object-fit: contain;
}

.appcore-branding-preview {
    --appcore-branding-primary: var(--appcore-navy);
    --appcore-branding-on-primary: #ffffff;
    --appcore-branding-accent: var(--appcore-accent);
    --appcore-branding-on-accent: #ffffff;
    overflow: hidden;
    border: 1px solid var(--appcore-line);
    border-radius: 0.75rem;
    background: var(--appcore-surface);
}

.appcore-branding-preview__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-block-size: 3.25rem;
    padding: 0.6rem 0.9rem;
    background: var(--appcore-branding-primary);
    color: var(--appcore-branding-on-primary);
    overflow-wrap: anywhere;
}

.appcore-branding-preview__logo {
    max-inline-size: 8rem;
    max-block-size: 2.25rem;
    object-fit: contain;
}

.appcore-branding-preview__body {
    display: grid;
    gap: 0.6rem;
    justify-items: start;
    padding: 1rem 0.9rem;
}

.appcore-branding-preview__welcome {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.appcore-branding-preview__button {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border-radius: 0.45rem;
    background: var(--appcore-branding-accent);
    color: var(--appcore-branding-on-accent);
    font-weight: 600;
}

.appcore-branding-preview__support {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    color: var(--appcore-muted);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

@media (max-width: 56rem) {
    .appcore-branding {
        grid-template-columns: 1fr;
    }
}

/* Modules: suites as sections and one row per module, with the switches at the end so they line up down the page and
   wrap under the text on a narrow screen. Switch targets are 44px tall, the smallest a thumb reliably hits. */
.appcore-modules { display: grid; gap: 1rem; }
.appcore-modules__suite { border: 1px solid var(--appcore-line); border-radius: 0.75rem; background: var(--appcore-surface); padding: 0.75rem 1rem; }
.appcore-modules__suite-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.appcore-modules__suite-header h3 { margin: 0; font-size: 1.05rem; color: var(--appcore-ink); }
.appcore-modules__list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; }
.appcore-modules__module { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.6rem 0; border-top: 1px solid var(--appcore-line); }
.appcore-modules__module-text { display: grid; gap: 0.25rem; min-width: 0; flex: 1 1 18rem; }
.appcore-modules__description, .appcore-modules__source { color: var(--appcore-muted); font-size: 0.875rem; }
.appcore-modules__chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.appcore-modules__chip { font-size: 0.8rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--appcore-canvas); color: var(--appcore-ink); }
.appcore-modules__chip--muted { color: var(--appcore-muted); }
.appcore-modules__chip--warning { background: #fff4ce; color: #6b4e00; }
.appcore-modules__module--blocked strong { color: var(--appcore-muted); }
.appcore-modules__module-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.appcore-modules__switch { min-width: 5.5rem; min-height: 2.75rem; padding: 0 0.9rem; border-radius: 999px; border: 1px solid var(--appcore-line); background: var(--appcore-surface); color: var(--appcore-ink); cursor: pointer; }
.appcore-modules__switch[aria-checked="true"] { background: var(--appcore-accent); border-color: var(--appcore-accent); color: #ffffff; }
.appcore-modules__switch[aria-checked="mixed"] { border: 2px dashed var(--appcore-accent); color: var(--appcore-accent-strong); }
.appcore-modules__switch:focus-visible { outline: 3px solid var(--appcore-accent-strong); outline-offset: 2px; }
.appcore-modules__switch:disabled { opacity: 0.6; cursor: progress; }
.appcore-modules__state { font-weight: 600; color: var(--appcore-ink); }
.appcore-modules__history ul { list-style: none; padding: 0; display: grid; gap: 0.35rem; font-size: 0.9rem; }
.appcore-modules__history li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; }
.appcore-modules__impact { margin-top: 0; }

/* Module settings: one row per setting under its suite and module, existing tokens only, targets at least 44px as on the Modules page. */
.appcore-module-settings { display: grid; gap: 1rem; }
.appcore-module-settings__suite { border: 1px solid var(--appcore-line); border-radius: 0.75rem; background: var(--appcore-surface); padding: 0.75rem 1rem; }
.appcore-module-settings__suite h2 { margin: 0; font-size: 1.1rem; color: var(--appcore-ink); }
.appcore-module-settings__module { margin: 0.75rem 0 0; font-size: 0.95rem; color: var(--appcore-muted); }
.appcore-module-settings__list { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; }
.appcore-module-settings__setting { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.6rem 0; border-top: 1px solid var(--appcore-line); }
.appcore-module-settings__text { display: grid; gap: 0.25rem; min-width: 0; flex: 1 1 18rem; }
.appcore-module-settings__description, .appcore-module-settings__rule { color: var(--appcore-muted); font-size: 0.875rem; }
.appcore-module-settings__value { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; flex: 1 1 16rem; }
.appcore-module-settings__source { font-size: 0.8rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--appcore-canvas); color: var(--appcore-ink); }
.appcore-module-settings__state, .appcore-module-settings__current { font-weight: 600; color: var(--appcore-ink); }
.appcore-module-settings__editor { flex: 1 1 10rem; min-width: 0; }
.appcore-module-settings__editor input, .appcore-module-settings__editor select, .appcore-module-settings__action { min-height: 2.75rem; }
.appcore-module-settings__action:focus-visible { outline: 3px solid var(--appcore-accent-strong); outline-offset: 2px; }
.appcore-module-settings__setting > [role="alert"] { flex-basis: 100%; margin: 0; }

/* Trees: a search box above, and single-choice rows a thumb can hit - 44px, the smallest target reliably pressed. */
.appcore-tree__search { display: block; margin-bottom: 0.5rem; }
.appcore-tree__search input { width: 100%; min-height: 2.75rem; }
.appcore-tree__choice { min-height: 2.75rem; padding: 0 0.6rem; border: 0; border-radius: 0.5rem; background: transparent; color: var(--appcore-ink); text-align: start; cursor: pointer; }
.appcore-tree__choice[aria-pressed="true"] { background: var(--appcore-accent); color: #ffffff; }
.appcore-tree__choice:disabled { color: var(--appcore-muted); cursor: default; }
.appcore-tree__choice:focus-visible { outline: 3px solid var(--appcore-accent-strong); outline-offset: 2px; }
/* The row is the treeitem in single mode and carries the roving tab stop, so it is what takes focus.
   A tab stop with no ring is a tree the keyboard moves around invisibly; multiple-mode rows are not
   focusable, so this never fires on the role and permission screens. */
.appcore-tree__row:focus-visible { outline: 3px solid var(--appcore-accent-strong); outline-offset: 2px; }

/* Category editor: the tree beside the chosen category's details, stacked on a narrow screen. */
.appcore-category-editor { display: grid; gap: 1rem; }
.appcore-category-editor__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.appcore-category-editor__layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.appcore-category-editor__details { border: 1px solid var(--appcore-line); border-radius: 0.75rem; background: var(--appcore-surface); padding: 0.75rem 1rem; display: grid; gap: 0.75rem; align-content: start; }
.appcore-category-editor__form { display: grid; gap: 0.75rem; }
.appcore-category-editor__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.appcore-category-editor__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.appcore-category-editor__action, .appcore-category-editor__details input, .appcore-category-editor__toggle { min-height: 2.75rem; }
.appcore-category-editor__toggle { display: inline-flex; align-items: center; gap: 0.5rem; }
.appcore-category-editor__swatch { display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; border: 1px solid var(--appcore-line); }
.appcore-category-picker { display: grid; gap: 0.35rem; }
/* The same values as .appcore-field__label, so a category reads as a field of the form
   rather than a stray line of text above two buttons. It had no rule at all. */
.appcore-category-picker__label { color: var(--appcore-ink); font-size: 0.875rem; font-weight: 600; }
.appcore-category-picker__current { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.appcore-category-picker__current button { min-height: 2.75rem; }
.appcore-category-picker__panel { border: 1px solid var(--appcore-line); border-radius: 0.5rem; padding: 0.5rem; max-height: 22rem; overflow: auto; }
@media (max-width: 48rem) { .appcore-category-editor__layout { grid-template-columns: minmax(0, 1fr); } }

/* Type registry: a type's place and name, and the code systems list, with 44px targets throughout. */
.appcore-type-hierarchy { display: grid; gap: 0.75rem; margin-top: 1rem; }
.appcore-type-hierarchy__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.appcore-type-hierarchy__label { color: var(--appcore-muted); }
.appcore-type-hierarchy__actions, .appcore-code-systems__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* A checkbox keeps its own size: stretched to 44px it is a tall empty box, and its label is the target. */
.appcore-type-hierarchy__action, .appcore-code-systems__action, .appcore-code-systems__toggle, .appcore-code-systems__form input:not([type="checkbox"]) { min-height: 2.75rem; }
.appcore-code-systems { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.appcore-code-systems__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.appcore-code-systems__header h2 { margin: 0; font-size: 1.1rem; }
.appcore-code-systems__list { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--appcore-line); border-radius: 0.75rem; background: var(--appcore-surface); }
.appcore-code-systems__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.6rem 1rem; border-top: 1px solid var(--appcore-line); }
.appcore-code-systems__item:first-child { border-top: 0; }
.appcore-code-systems__text { display: grid; gap: 0.25rem; min-width: 0; flex: 1 1 18rem; }
.appcore-code-systems__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; color: var(--appcore-muted); font-size: 0.875rem; }
.appcore-code-systems__notice { color: var(--appcore-muted); overflow-wrap: anywhere; }
.appcore-code-systems__form { display: grid; gap: 0.75rem; }
.appcore-code-systems__form small:not(.appcore-field__validation) { color: var(--appcore-muted); }
.appcore-code-systems__toggle { display: inline-flex; align-items: center; gap: 0.5rem; }