/* ---------------------------------------------------------------------------
   Portal component kit: the page frame (.app-page), the hero band (PageHero,
   HeroStat), listings (po-*, pol-*), editors (po-card, po-grid, EditActionBar),
   cards, badges, tables, empty states and My Account (acct-*).

   The tokens are declared once on :root and stay neutral: the accent comes from
   MudBlazor's palette, so each tenant's theme colours the kit, and a tenant
   stylesheet may override any --app-* token. MudBlazor components are not
   reachable through CSS isolation, which is why these rules live in a global
   stylesheet rather than in a .razor.css beside each component.
   --------------------------------------------------------------------------- */

:root {
    /* Accent: the tenant's primary colour */
    --app-accent: var(--mud-palette-primary);
    --app-accent-hover: color-mix(in srgb, var(--mud-palette-primary) 88%, #000);
    --app-accent-dark: color-mix(in srgb, var(--mud-palette-primary) 80%, #000);
    --app-accent-soft: color-mix(in srgb, var(--mud-palette-primary) 10%, #fff);
    --app-accent-border: color-mix(in srgb, var(--mud-palette-primary) 28%, #fff);

    /* Ink */
    --app-ink: #292929;
    --app-ink-muted: #787878;
    --app-ink-faint: #A7A7A7;

    /* Ground */
    --app-surface: #FFFFFF;
    --app-surface-alt: #F8F8F8;
    --app-surface-sunk: #F3F3F3;
    --app-line: #E4E4E4;
    --app-line-strong: #D9D9D9;

    /* State */
    --app-danger: #C62828;
    --app-danger-soft: #FCEAEA;
    --app-danger-border: #F0C0C0;
    --app-warn: #B26A00;
    --app-warn-soft: #FFF4E0;
    --app-warn-border: #F0D9A8;
    --app-good: #1B7F4B;
    --app-good-soft: #E8F6EE;
    --app-good-border: #BFE3CE;
    --app-draft: #7A3FD6;
    --app-draft-soft: #F3EBFC;
    --app-draft-border: #DCC7F4;

    /* Shape */
    --app-radius-control: 8px;
    --app-radius-card: 14px;
    --app-radius-pill: 999px;
    --app-shadow-card: 0 1px 2px rgba(17, 17, 17, .05), 0 8px 24px rgba(17, 17, 17, .05);

    /* Type: a tenant theme overrides these */
    --app-font: var(--mud-typography-default-family, "Open Sans", system-ui, sans-serif);
    --app-font-figures: var(--app-font-head, var(--app-font));
}

/* --- Page wrapper -------------------------------------------------------- */

.app-page {
    font-family: var(--app-font);
    color: var(--app-ink);
}

/* --- Type ---------------------------------------------------------------- */

.app-page .mud-typography,
.app-page .mud-input,
.app-page .mud-button-root,
.app-page .mud-table-cell,
.app-page .mud-chip-content {
    font-family: var(--app-font);
}

.app-page h1,
.app-page h2,
.app-page .mud-typography-h4,
.app-page .mud-typography-h5,
.app-page .mud-typography-h6 {
    font-family: var(--app-font-figures);
    font-weight: 700;
    color: var(--app-ink);
    letter-spacing: -.01em;
}

/* Figures - money, hours, counts - read better with tabular digits. */
.app-figure {
    font-family: var(--app-font-figures);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--app-ink);
}

.app-muted {
    color: var(--app-ink-muted);
}

/* --- Page furniture ------------------------------------------------------ */

.app-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.app-page-head .app-page-title {
    font-family: var(--app-font-figures);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.app-page-head .app-page-subtitle {
    color: var(--app-ink-muted);
    font-size: .85rem;
    margin: 2px 0 0;
}

.app-page-head-spacer {
    flex: 1 1 auto;
}

/* A heading between groups of cards on a page that has more than one group. */
.app-section-title {
    font-family: var(--app-font);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--app-ink-muted);
    margin: 20px 0 10px;
}

/* --- Cards --------------------------------------------------------------- */

.app-page .mud-paper {
    border-radius: var(--app-radius-card);
}

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

.app-card-flush {
    padding: 0;
    overflow: hidden;
}

.app-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--app-line);
    font-weight: 600;
    font-size: .9rem;
}

/* --- KPI strip ----------------------------------------------------------- */

.app-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.app-kpi {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-card);
    padding: 12px 14px;
}

/* A tile that holds a few labelled lines rather than one figure takes the room of two. */
.app-kpi-wide {
    grid-column: span 2;
    min-width: 17rem;
}

.app-kpi-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--app-ink-muted);
}

.app-kpi-value {
    font-family: var(--app-font-figures);
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 2px;
}

.app-kpi-note {
    font-size: .72rem;
    color: var(--app-ink-muted);
}

/* A KPI whose number is the point of the screen. */
.app-kpi-accent {
    background: var(--app-accent);
    border-color: var(--app-accent);
}

.app-kpi-accent .app-kpi-label,
.app-kpi-accent .app-kpi-note {
    color: rgba(255, 255, 255, .78);
}

.app-kpi-accent .app-kpi-value {
    color: #FFFFFF;
}

.app-kpi-danger .app-kpi-value { color: var(--app-danger); }
.app-kpi-warn .app-kpi-value   { color: var(--app-warn); }
.app-kpi-good .app-kpi-value   { color: var(--app-good); }

/* --- Buttons ------------------------------------------------------------- */

.app-page .mud-button-root {
    border-radius: var(--app-radius-control);
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
}

.app-page .mud-button-filled-primary {
    background-color: var(--app-accent);
    color: #FFFFFF;
}

.app-page .mud-button-filled-primary:hover {
    background-color: var(--app-accent-hover);
}

.app-page .mud-button-outlined-primary,
.app-page .mud-button-text-primary {
    color: var(--app-accent);
}

.app-page .mud-button-outlined-primary {
    border-color: var(--app-accent-border);
}

.app-page .mud-icon-button {
    border-radius: var(--app-radius-control);
}

/* --- Tabs ---------------------------------------------------------------- */

.app-page .mud-tabs-toolbar {
    border-bottom: 1px solid var(--app-line);
}

.app-page .mud-tab {
    text-transform: none;
    font-weight: 600;
    font-size: .88rem;
    min-width: 0;
    padding: 0 16px;
}

.app-page .mud-tab.mud-tab-active {
    color: var(--app-accent);
}

.app-page .mud-tab-slider {
    background: var(--app-accent);
    height: 3px;
}

/* --- Chips and badges (StatusBadge) -------------------------------------- */

.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--app-radius-pill);
    padding: 1px 8px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
}

.app-badge-neutral { background: var(--app-surface-sunk); color: var(--app-ink-muted); border-color: var(--app-line-strong); }
.app-badge-brand   { background: var(--app-accent-soft); color: var(--app-accent); border-color: var(--app-accent-border); }
.app-badge-good    { background: var(--app-good-soft); color: var(--app-good); border-color: var(--app-good-border); }
.app-badge-warn    { background: var(--app-warn-soft); color: var(--app-warn); border-color: var(--app-warn-border); }
.app-badge-danger  { background: var(--app-danger-soft); color: var(--app-danger); border-color: var(--app-danger-border); }
.app-badge-draft   { background: var(--app-draft-soft); color: var(--app-draft); border-color: var(--app-draft-border); }

/* --- Tables -------------------------------------------------------------- */

.app-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .84rem;
}

.app-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--app-surface-alt);
    border-bottom: 1px solid var(--app-line-strong);
    padding: 8px 12px;
    text-align: left;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--app-ink-muted);
    white-space: nowrap;
}

.app-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--app-line);
    vertical-align: middle;
}

.app-table tbody tr:hover td {
    background: var(--app-accent-soft);
}

.app-table tfoot td {
    padding: 8px 12px;
    border-top: 2px solid var(--app-line-strong);
    font-family: var(--app-font-figures);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    background: var(--app-surface-alt);
}

.app-num {
    text-align: right;
    font-family: var(--app-font-figures);
    font-variant-numeric: tabular-nums;
}

.app-scroll-x {
    overflow-x: auto;
}

/* Notes in a listing: one line, the whole note on the title attribute. */
.app-notes {
    display: block;
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-style: normal;
}

/* --- Empty states -------------------------------------------------------- */

.app-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--app-ink-muted);
}

.app-empty-title {
    font-family: var(--app-font-figures);
    font-weight: 700;
    color: var(--app-ink);
    margin-bottom: 4px;
}

/* --- Hero (PageHero) ----------------------------------------------------- */

.po-page {
    padding-bottom: 8px;
}

.po-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 2px 0 6px;
}

.po-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 8px;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border: 1px solid var(--app-accent-border);
}

.po-hero-text {
    min-width: 0;
    flex: 1 1 320px;
}

.po-hero-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.po-hero-title {
    font-family: var(--app-font-figures);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--app-ink);
}

.po-hero-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 2px;
    font-size: .78rem;
    color: var(--app-ink-muted);
}

.po-hero-sub > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.po-hero-sub .mud-icon-root {
    font-size: 1rem;
}

.po-hero-cta.mud-button-root {
    align-self: center;
    white-space: nowrap;
}

.po-pulse {
    animation: po-pulse 2s ease-in-out infinite;
}

@keyframes po-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-warn) 25%, transparent); }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-warn) 0%, transparent); }
}

/* --- Hero figures (HeroStat) --------------------------------------------- */

.po-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.po-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 104px;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--app-line);
    background: var(--app-surface);
}

.po-stat-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--app-ink-muted);
    white-space: nowrap;
}

.po-stat-value {
    font-family: var(--app-font-figures);
    font-variant-numeric: tabular-nums;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--app-ink);
}

.po-stat-value small {
    font-size: .72rem;
    font-weight: 600;
    color: var(--app-ink-faint);
    margin-left: 1px;
}

.po-stat-note {
    font-size: .66rem;
    color: var(--app-ink-muted);
    white-space: nowrap;
}

.po-stat.is-warn .po-stat-value { color: var(--app-warn); }
.po-stat.is-accent .po-stat-value { color: var(--app-accent); }
.po-stat.is-good .po-stat-value { color: var(--app-good); }
.po-stat.is-danger .po-stat-value { color: var(--app-danger); }

/* A figure that filters the listing under it. */
.po-stat.is-button {
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.po-stat.is-button:hover {
    border-color: var(--app-accent-border);
    background: var(--app-accent-soft);
}

.po-stat.is-button.is-selected {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 12%, transparent);
    background: var(--app-accent-soft);
}

.po-stat.is-button.is-warn .po-stat-value { color: var(--app-warn); }
.po-stat.is-button.is-good .po-stat-value { color: var(--app-good); }
.po-stat.is-button.is-danger .po-stat-value { color: var(--app-danger); }

/* A figure that opens something: tinted and outlined in the accent so it stands out. */
.po-stat.po-stat-action {
    border-color: var(--app-accent-border);
    background: var(--app-accent-soft);
}

.po-stat.po-stat-action .po-stat-label,
.po-stat.po-stat-action .po-stat-value {
    color: var(--app-accent);
}

.po-stat.po-stat-action .po-stat-value {
    display: flex;
    align-items: center;
    gap: 6px;
}

.po-stat.po-stat-action:hover {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 12%, transparent);
}

/* --- Tabs and cards ------------------------------------------------------ */

/*
    MudBlazor clips rounded tabs with overflow: hidden, which makes the tabs their own scroll container: the
    save bar (.po-actionbar, sticky to the bottom) then sticks to the tabs rather than to the page or the
    dialog scrolling them. Clip draws the same rounded edge without being a scroll container.
*/
.mud-tabs.mud-tabs-rounded {
    overflow: clip;
}

.po-tabs .mud-tabs-tabbar,
.po-tabs .mud-tabs-toolbar {
    background: transparent;
}

.po-tabs .mud-tabs-toolbar,
.po-tabs .mud-tab {
    min-height: 40px;
    height: 40px;
}

.po-panel {
    padding: 10px 0 0;
}

.po-panel-flush {
    padding-top: 10px;
}

.po-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.po-card-wide {
    grid-column: 1 / -1;
}

.po-card-span2 {
    grid-column: span 2;
}

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

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

    .po-card-span2 {
        grid-column: auto;
    }
}

.po-card.app-card {
    padding: 12px 16px 14px;
    border-radius: 8px;
    box-shadow: none;
}

.po-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    min-height: 32px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--app-ink);
}

.po-card-head .mud-icon-root {
    color: var(--app-ink-muted);
}

.po-card-head-note {
    margin-left: auto;
    font-size: .76rem;
    font-weight: 500;
    color: var(--app-ink-muted);
}

.po-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Top, not stretch: a field with helper text beside one without would drag the other's icon down. */
    align-items: start;
    gap: 16px;
}

@media (max-width: 700px) {
    .po-two {
        grid-template-columns: minmax(0, 1fr);
    }
}

.po-field-label {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--app-ink-muted);
    margin-bottom: 4px;
}

.po-helper {
    font-size: .75rem;
    color: var(--app-ink-muted);
    margin-top: 6px;
}

/* The form on an editor: fields in a two-column grid. */
.po-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 14px;
}

.po-fields > .is-wide {
    grid-column: 1 / -1;
}

@media (max-width: 700px) {
    .po-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.po-fields .mud-input-control {
    margin-top: 6px;
}

.po-readonly {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
}

.po-readonly-value {
    font-family: var(--app-font-figures);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: .95rem;
}

/* Label and value pairs down a card. */
.po-kv {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.po-kv td {
    padding: 5px 0;
    border-bottom: 1px solid var(--app-line);
}

.po-kv tr:last-child td {
    border-bottom: 0;
}

.po-kv td:first-child {
    color: var(--app-ink-muted);
}

.po-kv td:last-child {
    text-align: right;
    font-family: var(--app-font-figures);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.po-kv tr.is-total td {
    border-top: 1px solid var(--app-line-strong);
    font-weight: 700;
    color: var(--app-ink);
}

.po-page .mud-alert-message {
    font-size: .84rem;
}

/* Validation reads like a helper line under its field, not a headline. */
.po-page .validation-message,
.po-page .po-card .text-danger {
    display: block;
    margin-top: 2px;
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--app-danger);
}

/* --- Segmented controls, chips, choice cards ----------------------------- */

.po-seg {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border-radius: 6px;
    background: var(--app-surface-sunk);
    border: 1px solid var(--app-line);
}

.po-seg-fill {
    display: flex;
}

.po-seg-fill .po-seg-item {
    flex: 1 1 0;
    justify-content: center;
}

.po-seg-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    color: var(--app-ink-muted);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.po-seg-item:hover:not(:disabled) {
    color: var(--app-ink);
}

.po-seg-item.is-active {
    background: var(--app-surface);
    color: var(--app-accent);
    box-shadow: 0 1px 3px rgba(17, 17, 17, .12);
}

.po-seg-sm .po-seg-item {
    padding: 4px 10px;
    font-size: .76rem;
}

.po-seg-item.is-active.is-good {
    color: var(--app-good);
}

.po-seg-item:disabled {
    cursor: default;
    opacity: .7;
}

.seg-count {
    margin-left: 2px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--app-surface-sunk);
    font-family: var(--app-font-figures);
    font-variant-numeric: tabular-nums;
    font-size: .68rem;
    font-weight: 700;
    color: var(--app-ink-muted);
}

.po-seg-item.is-active .seg-count {
    background: var(--app-accent-soft);
    color: var(--app-accent);
}

.po-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.po-chip {
    border: 1px solid var(--app-line-strong);
    background: var(--app-surface);
    color: var(--app-ink);
    font: inherit;
    font-size: .8rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.po-chip:hover:not(:disabled) {
    border-color: var(--app-accent-border);
    background: var(--app-accent-soft);
}

.po-chip.is-active,
.po-chip.is-active:hover:not(:disabled) {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-weight: 600;
}

.po-chip:disabled {
    cursor: default;
    opacity: .6;
}

.po-chip-sm {
    font-size: .74rem;
    padding: 3px 10px;
}

.po-chip-input {
    max-width: 92px;
}

.po-chip-input .mud-input-outlined-border {
    border-radius: 4px;
}

.po-chip-input .mud-input-slot {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: .8rem;
}

.po-choice-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.po-choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    text-align: left;
    font: inherit;
    padding: 9px 36px 9px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--app-line-strong);
    background: var(--app-surface);
    color: var(--app-ink);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.po-choice > .mud-icon-root:first-child {
    color: var(--app-ink-muted);
    margin-top: 2px;
}

.po-choice:hover:not(:disabled) {
    border-color: var(--app-accent-border);
}

.po-choice.is-active {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 8%, transparent);
}

.po-choice.is-active > .mud-icon-root:first-child {
    color: var(--app-accent);
}

.po-choice-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.po-choice-text strong {
    font-size: .84rem;
}

.po-choice-text small {
    font-size: .72rem;
    color: var(--app-ink-muted);
    line-height: 1.35;
}

.po-choice-tick.mud-icon-root {
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -10px;
    color: var(--app-accent);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
}

.po-choice.is-active .po-choice-tick.mud-icon-root {
    opacity: 1;
    transform: scale(1);
}

.po-choice:disabled {
    cursor: default;
}

.po-inline-note {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    text-align: left;
    font: inherit;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--app-surface-alt);
    border: 1px dashed var(--app-line-strong);
    font-size: .82rem;
    color: var(--app-ink);
}

.po-inline-note .mud-icon-root {
    color: var(--app-accent);
}

button.po-inline-note {
    cursor: pointer;
}

button.po-inline-note:hover {
    border-color: var(--app-accent-border);
    background: var(--app-accent-soft);
}

/* --- Empty list (ListEmpty) ---------------------------------------------- */

.po-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 28px 16px;
    border: 2px dashed var(--app-line-strong);
    border-radius: var(--app-radius-card);
    background: var(--app-surface-alt);
    color: var(--app-ink-muted);
}

.po-empty > .mud-icon-root {
    color: var(--app-accent);
    opacity: .7;
}

.po-empty-title {
    font-weight: 600;
    color: var(--app-ink);
}

.pol-empty {
    margin: 16px;
}

/* --- Sticky action bar (EditActionBar) ----------------------------------- */

.po-actionbar {
    position: sticky;
    bottom: 8px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--app-line);
    background: var(--app-surface);
}

.po-actionbar-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 8px;
    font-size: .8rem;
    color: var(--app-ink-muted);
}

.po-dot-warn.mud-icon-root { color: var(--app-warn); font-size: .7rem; }
.po-dot-good.mud-icon-root { color: var(--app-good); }

/* --- Plain tables and inline-edited tables -------------------------------- */

.po-table-wrap {
    border: 1px solid var(--app-line);
    border-radius: 6px;
    overflow: auto;
    max-height: calc(100vh - 300px);
}

.po-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .82rem;
}

.po-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--app-surface-alt);
    border-bottom: 1px solid var(--app-line-strong);
    padding: 6px 10px;
    text-align: left;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--app-ink-muted);
    white-space: nowrap;
}

.po-table tbody td {
    padding: 2px 10px;
    border-bottom: 1px solid var(--app-line);
    vertical-align: middle;
}

.po-table tbody tr:hover td {
    background: var(--app-surface-alt);
}

.po-table tfoot td {
    padding: 6px 10px;
    background: var(--app-surface-alt);
    font-weight: 600;
}

.po-table .mud-input-control {
    margin-top: 0;
}

.po-col-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.po-table th.po-col-num {
    text-align: right;
}

.po-inline-table .mud-input-control {
    margin-top: 0;
}

.po-inline-table td > .mud-input-control,
.po-inline-table td .mud-input-control {
    width: 100%;
}

.po-inline-table tbody td {
    padding-top: 3px;
    padding-bottom: 3px;
}

.po-inline-table tr.is-dirty td:first-child {
    box-shadow: inset 3px 0 0 var(--app-warn);
}

.po-inline-table tr.is-new td {
    background: var(--app-accent-soft);
}

.po-inline-table tr.is-retired td {
    color: var(--app-ink-faint);
}

/* --- Listing (pol-*) ----------------------------------------------------- */

.po-grid-list {
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-card);
    overflow: hidden;
}

.po-grid-list .mud-toolbar {
    height: auto;
    min-height: 0;
    flex-wrap: wrap;
    padding: 8px 12px;
    border-bottom: 1px solid var(--app-line);
}

.pol-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.pol-search {
    flex: 1 1 260px;
    max-width: 360px;
}

.pol-search.mud-input-control {
    margin-top: 0;
}

.pol-picker {
    flex: 0 1 220px;
    min-width: 180px;
}

.pol-picker .mud-input-control,
.pol-date.mud-input-control,
.pol-date .mud-input-control {
    margin-top: 0;
}

.pol-date {
    flex: 0 0 176px;
    max-width: 176px;
}

.pol-count {
    margin-left: auto;
    font-size: .76rem;
    color: var(--app-ink-muted);
    white-space: nowrap;
}

.po-grid-list .mud-table-head .mud-table-cell {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--app-ink-muted);
    background: var(--app-surface-alt);
    white-space: nowrap;
}

.po-grid-list .mud-table-body .mud-table-cell {
    font-size: .82rem;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Tighter cells than MudBlazor's sixteen pixels, so a wide listing fits a laptop without a sideways scroll. */
.po-grid-list .mud-table-cell {
    padding-left: 8px;
    padding-right: 12px !important;
}

.po-grid-list .mud-table-cell:first-child {
    padding-left: 12px;
}

/* A click on a row selects it; only the row's link (RowLink) opens the record. A row that opens a
   panel beside the list instead says so with the pointer. */
.po-row-opens {
    cursor: pointer;
}

.pol-number {
    font-family: var(--app-font-figures);
    font-weight: 700;
    color: var(--app-ink);
    white-space: nowrap;
}

.pol-name {
    font-weight: 600;
    color: var(--app-ink);
}

.pol-figure {
    font-weight: 600;
    white-space: nowrap;
}

.pol-two-line {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

/* A second line is cut off with its full text in the tooltip, so a listing fits beside an open menu. */
.pol-two-line > small {
    max-width: 220px;
    font-size: .74rem;
    color: var(--app-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pol-num {
    text-align: right !important;
    white-space: nowrap;
}

/* The sort and menu buttons sit before the label, so a figure's heading lines up over the figures. */
.po-grid-list th.pol-num .column-header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.pol-muted {
    color: var(--app-ink-faint);
}

/* Notes are a hint, read in full on hover. */
.pol-notes {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(--app-ink-muted);
}

.pol-flag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--app-warn);
    white-space: nowrap;
}

.pol-flag .mud-icon-root {
    font-size: .95rem;
}

/* The selection bar a listing shows once rows are ticked: what is selected, and what can be done to it. */
.pol-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding: 4px 6px 4px 12px;
    border-radius: 6px;
    background: var(--app-accent-soft);
    border: 1px solid var(--app-accent-border);
    font-size: .8rem;
}

.pol-bulk-title {
    font-weight: 600;
    color: var(--app-accent);
    margin-right: 6px;
}

/* --- A listing fits the window: the page never scrolls, the grid scrolls inside itself ---
   The page is exactly the height left under the header and the main content's own padding
   (12px top and bottom); the band and toolbar take what they need and the grid, or the card
   holding an inline table, takes the rest. */

.po-page.is-list {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--app-header-height, 57px) - 24px);
    padding-bottom: 0;
    overflow: hidden;
}

.po-page.is-list > * {
    flex: 0 0 auto;
}

.po-page.is-list > .po-grid-list,
.po-page.is-list > .po-fill {
    flex: 1 1 0;
    min-height: 0;
}

.po-page.is-list > .po-grid-list {
    display: flex;
    flex-direction: column;
}

.po-page.is-list > .po-grid-list > .mud-table-container {
    flex: 1 1 0;
    min-height: 0;
    height: auto !important;
    overflow: auto;
}

/* The toolbar and the pager keep their height; only the rows give way. */
.po-page.is-list > .po-grid-list > .mud-toolbar,
.po-page.is-list > .po-grid-list > .mud-table-pagination {
    flex: 0 0 auto;
}

.po-fill {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.po-fill > .po-table-wrap {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
}

/* --- Table rows in the main content -------------------------------------- */

/* The selected row: the one last clicked, marked on the cells so stripes and hover do not hide it. */
#main-content .mud-table-body .mud-table-row.is-selected > td,
#main-content .app-table tbody tr.is-selected > td {
    background-color: var(--app-accent-soft) !important;
}

#main-content .mud-table-body .mud-table-row.is-selected > td:first-child,
#main-content .app-table tbody tr.is-selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--app-accent);
}

/* What opens another page in a table row (RowLink): link-coloured and underlined, never the whole row. */
#main-content .row-link,
#main-content .row-link .pol-number,
#main-content .row-link .pol-name {
    color: var(--app-accent);
}

#main-content .row-link {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--app-accent) 35%, transparent);
    text-underline-offset: 3px;
}

#main-content .row-link:hover,
#main-content .row-link:focus-visible {
    text-decoration-color: currentColor;
}

/* A link-styled button for an action in a row that stays on the page. */
#main-content button.row-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
}

/* KPI tiles laid out on a MudGrid line up: every tile in a row is as tall as the tallest. */
#main-content .mud-grid-item > .mud-paper {
    height: 100%;
}

/* --- Left rail ----------------------------------------------------------- */

/* The page moves for the menu at once rather than sliding with it: a slide re-lays out the whole page on
   every frame, and on a big page that is what made the menu hang. */
.mud-layout > .mud-main-content {
    transition: none !important;
}

/* The collapsed rail hides the names (MudBlazor: display none), which also took the links' names from screen
   readers. Hidden from sight only, they keep them. The rail's hover peek shows them again (below). */
.mud-drawer--closed.mud-drawer-mini > .mud-drawer-content > .mud-navmenu .mud-nav-link .mud-icon-root:first-child + .mud-nav-link-text {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The page's canvas reaches the bottom of the window: on a short page (Help search, Access Denied) it stopped under
   the content and left a white band below. --app-header-height is measured by observeHeaderHeight. */
#main-content {
    min-height: calc(100vh - var(--app-header-height, 64px));
}

/* Opened by the pointer, the menu floats over the page and the page stays where it is. */
.mud-layout.menu-peek > .mud-main-content {
    margin-left: var(--mud-drawer-width-mini-left) !important;
}

.mud-layout.menu-peek > .mud-drawer.left-menu-drawer {
    box-shadow: 12px 0 32px -16px rgba(22, 24, 38, .45) !important;
}

/* The pointer opens the menu in the browser, after a moment's rest on it, without waiting for the server.
   The labels are there at once, clipped by the narrow rail until it widens. */
.mud-drawer.mud-drawer-mini.mud-drawer-pos-left.mud-drawer--closed.left-menu-drawer:hover {
    width: var(--mud-drawer-width-left);
    transition-delay: .25s;
    box-shadow: 12px 0 32px -16px rgba(22, 24, 38, .45) !important;
}

.mud-drawer--closed.mud-drawer-mini.left-menu-drawer:hover > .mud-drawer-content > .mud-navmenu .mud-nav-link .mud-icon-root:first-child + .mud-nav-link-text {
    display: block;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: nowrap;
}

/* is-menu-alias: the page a shared view is read under reads as the open page. */
.left-menu-drawer .is-menu-alias .mud-nav-link:not(.mud-nav-link-disabled) {
    background-color: var(--mud-nav-item-active-color, color-mix(in srgb, var(--app-accent) 22%, transparent));
    color: var(--mud-nav-item-active-text-color, var(--app-accent));
    font-weight: 600;
}

.left-menu-drawer .is-menu-alias .mud-nav-link .mud-nav-link-text,
.left-menu-drawer .is-menu-alias .mud-nav-link .mud-nav-link-icon {
    color: var(--mud-nav-item-active-text-color, var(--app-accent));
    opacity: 1;
}

/* --- Record dialogs (RecordDialog) ----------------------------------------
   The title bar, close button and height are in dialogs.css; here is how the
   save bar (EditActionBar) sits in the dialog. */

/*
    Where the window is too short for a fixed frame, the save bar is sticky to the dialog's scrolling content,
    flush on the dialog's bottom edge with a shadow over the form scrolling beneath it.
*/
.mud-dialog.record-dialog .mud-dialog-content {
    padding-bottom: 0;
}

.mud-dialog.record-dialog .po-actionbar {
    bottom: 0;
    margin-left: -4px;
    margin-right: -4px;
    margin-bottom: 0;
    border-radius: 6px 6px 0 0;
    border-bottom: 0;
    box-shadow: 0 -6px 14px -8px rgba(20, 20, 43, .22);
}

/*
    Otherwise the dialog is a fixed frame: the hero, the tabs and the save bar stay put and only the form
    between them scrolls, so the bar never floats over the cards. Every box from the dialog down to the bar
    becomes a column that shrinks to the dialog's height; beside that path nothing shrinks, except the one
    region next to the bar - the form's grid, an editor's table, a tab strip's panels - which scrolls.
    Inactive tab panels keep their inline display: none.
*/
@media (min-height: 560px) {
    .mud-dialog.record-dialog :has(.po-actionbar) > * {
        flex-shrink: 0;
    }

    .mud-dialog.record-dialog :has(.po-actionbar) {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .mud-dialog.record-dialog .mud-dialog-content:has(.po-actionbar) {
        overflow: hidden;
    }

    .mud-dialog.record-dialog :has(> .po-actionbar) > :is(.po-grid, .po-table-wrap) {
        flex-shrink: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .mud-dialog.record-dialog :has(> .po-actionbar) > .mud-tabs {
        flex-shrink: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .mud-dialog.record-dialog .mud-tabs > .mud-tabs-panels {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* A footer under the form, in line with the cards: nothing scrolls beneath it any more. */
    .mud-dialog.record-dialog .po-actionbar {
        position: static;
        margin: 10px 0 0;
        padding: 8px 0 0;
        border: 0;
        border-top: 1px solid var(--app-line);
        border-radius: 0;
        box-shadow: none;
    }
}

/* --- Validation (SmEditForm) ----------------------------------------------
   A tab holding a problem reads red with a dot, so the user sees where to look
   without opening each tab. A field (or the picker wrapping it) whose
   <ValidationMessage> follows it is drawn in its error state, exactly like a
   field bound with For, so every field with a problem looks the same. */

.mud-tab[data-sm-invalid] {
    color: var(--mud-palette-error) !important;
}

.mud-tab[data-sm-invalid] .mud-icon-root {
    color: var(--mud-palette-error);
}

/* ::after is the tab's ripple, so the dot is drawn by ::before and ordered after the label. */
.mud-tab[data-sm-invalid]::before {
    content: "";
    order: 1;
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--mud-palette-error);
}

:is(.mud-input-control, .mud-select, .mud-picker, .mud-autocomplete, .sm-mud-autocomplete):has(+ .text-danger) .mud-input-label,
:is(.mud-input-control, .mud-select, .mud-picker, .mud-autocomplete, .sm-mud-autocomplete):has(+ .text-danger) .mud-input-adornment .mud-icon-root {
    /* MudBlazor colours a filled label with a longer selector; the error state must win over it. */
    color: var(--mud-palette-error) !important;
}

:is(.mud-input-control, .mud-select, .mud-picker, .mud-autocomplete, .sm-mud-autocomplete):has(+ .text-danger) .mud-input-underline::before {
    border-bottom-color: var(--mud-palette-error);
}

:is(.mud-input-control, .mud-select, .mud-picker, .mud-autocomplete, .sm-mud-autocomplete):has(+ .text-danger) .mud-input-outlined-border {
    border-color: var(--mud-palette-error) !important;
}

/* The message under a field: small, red, close to the field it belongs to. */
.sm-edit-form .text-danger:not(:empty),
.sm-edit-form .validation-message {
    font-size: 0.75rem;
    line-height: 1.3;
    margin-top: 2px;
    color: var(--mud-palette-error);
}

/* --- My Account (Account/Shared/ManageLayout) ------------------------------
   Sections on the left, the open one on the right, both flat white tiles. The
   section pages bring their own heading (h3, h4 or a MudText h2/h4) and their
   own card; here they all read the same and the inner card goes flat. */

.acct-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.acct-nav {
    padding: 8px;
}

.acct-nav .mud-nav-link {
    border-radius: 6px;
    white-space: nowrap;
}

.acct-main {
    padding: 20px 24px;
    max-width: 880px;
}

.acct-main > h3,
.acct-main > h4,
.acct-main > .mud-typography-h2,
.acct-main > .mud-typography-h4,
.acct-main > div > h3,
.acct-main > div > h4 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-family: var(--app-font-figures) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--app-ink) !important;
}

.acct-main hr {
    display: none;
}

.acct-main .mud-card {
    background: transparent;
    border: 0;
    box-shadow: none !important;
}

.acct-main .mud-card-content,
.acct-main .mud-card-actions {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 900px) {
    .acct-layout {
        grid-template-columns: 1fr;
    }
}

/* --- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .po-pulse {
        animation: none;
    }

    .po-stat.is-button,
    .po-seg-item,
    .po-chip,
    .po-choice,
    .po-choice-tick.mud-icon-root,
    .mud-drawer.mud-drawer-mini.mud-drawer-pos-left.mud-drawer--closed.left-menu-drawer:hover {
        transition: none;
    }
}

/* =====================================================================================================================
   Responsive: tablets and phones.
   The shell, the page heroes, the record cards, the listings and the dialogs reflow for narrow screens, so every
   screen is usable from a phone without sideways scrolling. Below 768px the left menu leaves the page and opens over
   it from the header's menu button; the page takes the full width.
   ===================================================================================================================== */

/* ---- tablets (768 - 1199px) */
@media (max-width: 1199.98px) {
    .po-hero {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .po-hero > .po-stats {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
    }

    .po-hero > :last-child:not(.po-stats):not(.po-hero-text) {
        margin-left: auto;
    }
}

/* ---- phones and small tablets (below 768px) */
@media (max-width: 767.98px) {
    /* header: a compact logo, the icons always in view */
    .top-header {
        padding-right: 4px;
    }

    .top-header .navbar-brand img,
    .top-header img {
        max-height: 30px !important;
        max-width: 46vw !important;
        width: auto;
    }

    .top-header .top-row {
        display: none !important;
    }

    .top-header .mud-button-root:not(.mud-icon-button) .mud-button-label {
        font-size: 0 !important;
        gap: 0;
    }

    .top-header .mud-button-root:not(.mud-icon-button) .mud-button-icon-start {
        margin: 0 !important;
    }

    /* the menu: gone from the page while closed, over it while open */
    .mud-drawer.left-menu-drawer.mud-drawer--closed {
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-shadow: none !important;
    }

    .mud-drawer.left-menu-drawer.mud-drawer--open {
        width: min(86vw, 320px) !important;
        z-index: 1310 !important;
        box-shadow: 16px 0 40px -12px rgba(15, 18, 21, .55) !important;
    }

    .mud-layout > .mud-main-content,
    .mud-layout.menu-peek > .mud-main-content {
        margin-left: 0 !important;
    }

    #main-content {
        padding: 10px 12px 72px !important;
    }

    /* page hero: icon and title on one line, the actions under them, as large touch targets */
    .po-hero {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px 12px;
        padding: 4px 0 8px;
    }

    .po-hero-icon {
        width: 36px !important;
        height: 36px !important;
        flex: none;
    }

    /* the rest of the icon's line: with a basis of 0 an action button beside it took the row and left the name and
       e-mail some 20px, a letter a line */
    .po-hero-text {
        flex: 1 1 calc(100% - 48px);
        min-width: 0;
    }

    .po-hero-title {
        font-size: 1.2rem !important;
        overflow-wrap: anywhere;
    }

    .po-hero-sub {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .po-hero-sub > span {
        overflow-wrap: anywhere;
        min-width: 0;
    }

    .po-hero > .mud-button-root,
    .po-hero > .mud-tooltip-root,
    .po-hero > a.mud-button-root {
        flex: 1 1 auto;
    }

    .po-hero .mud-button-root {
        min-height: 40px;
    }

    .po-hero .po-hero-cta {
        width: 100%;
    }

    .po-stats {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .po-stat {
        flex: 0 0 auto;
    }

    /* record cards: one column, the save bar always in reach */
    .po-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .po-card-wide {
        grid-column: auto;
    }

    .po-actionbar {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 10px;
    }

    .po-actionbar .po-actionbar-state {
        order: -1;
        flex-basis: 100%;
        justify-content: flex-start;
        margin: 0;
    }

    .po-actionbar > .mud-button-root:last-child {
        margin-left: auto;
    }

    /* listings: the filters stack, the rows read as cards */
    .pol-filters {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .pol-filters > .pol-search,
    .pol-filters > .pol-picker,
    .pol-filters .mud-input-control {
        flex: 1 1 100%;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .pol-count {
        margin-left: auto;
    }

    .mud-table-toolbar {
        height: auto !important;
        flex-wrap: wrap;
        padding: 10px 12px !important;
    }

    .mud-xs-table .mud-table-root,
    .po-grid-list .mud-table-root {
        min-width: 0 !important;
    }

    .mud-xs-table .mud-table-body .mud-table-row {
        border-bottom: 1px solid var(--app-line, #E5E7EB);
        padding: 6px 0;
    }

    .mud-xs-table .mud-table-body .mud-table-cell {
        white-space: normal !important;
        overflow-wrap: anywhere;
        min-width: 0;
        max-width: 100%;
        text-align: right;
        gap: 12px;
        padding: 6px 12px !important;
    }

    .mud-xs-table .mud-table-body .mud-table-cell::before {
        flex: none;
        text-align: left;
        color: var(--app-ink-muted, #5F6672);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .mud-table-pagination-toolbar {
        flex-wrap: wrap;
        height: auto !important;
        justify-content: center;
        row-gap: 4px;
    }

    .mud-table-pagination-toolbar .mud-table-pagination-spacer {
        display: none;
    }

    /* tabs scroll sideways instead of squeezing their labels */
    .mud-tabs-tabbar .mud-tab {
        min-width: auto !important;
        padding: 0 12px !important;
    }

    /* dialogs: nearly the whole screen, with room to breathe */
    .mud-dialog {
        margin: 12px !important;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
    }

    .mud-dialog .mud-dialog-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* My Account: the sections above the open one */
    .acct-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .acct-nav {
        overflow-x: auto;
    }

    /* fields never push the page wider than the screen */
    .mud-input-control,
    .mud-select,
    .mud-autocomplete {
        min-width: 0 !important;
        max-width: 100%;
    }

    .mud-grid {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .mud-chip-container,
    .mud-chipset {
        flex-wrap: wrap;
    }
}

/* ---- small phones (below 400px) */
@media (max-width: 399.98px) {
    #main-content {
        padding: 8px 8px 72px !important;
    }

    .po-hero-sub {
        font-size: .78rem;
    }
}

/* ---- phones: a listing scrolls with the page instead of inside a window-high box */
@media (max-width: 767.98px) {
    .po-page.is-list {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .po-page.is-list > .po-grid-list,
    .po-page.is-list > .po-fill,
    .po-page.is-list > .po-grid-list > .mud-table-container {
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* the floating chat button sits clear of the pager and the save bar */
    .chat-fab-button,
    .mud-fab.chat-fab-button {
        bottom: 76px !important;
        right: 12px !important;
    }
}

/* ---- tablets and phones: Roles & Permissions - the list above the role, the matrix scrolling inside its card */
@media (max-width: 1023.98px) {
    .roles-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px;
    }

    .roles-list-pane,
    .roles-detail-pane,
    .role-detail-card,
    .role-perm-section,
    .permissions-header,
    .permissions-actions,
    .perm-root {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }

    .role-detail-card {
        padding: 12px !important;
    }

    .permissions-header,
    .perm-toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .perm-toolbar > .perm-search {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .perm-toolbar-actions {
        margin-left: auto;
    }

    .perm-layout > .mud-grid-item {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    .pm-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---- phones: a header that always fits, a one-line save bar */
@media (max-width: 767.98px) {
    .top-header {
        overflow: hidden;
    }

    .top-header > .mud-paper:first-child {
        padding-left: 8px !important;
        flex: 0 1 auto;
        min-width: 0;
    }

    .top-header .navbar-brand img,
    .top-header img {
        max-height: 26px !important;
        max-width: 34vw !important;
    }

    /* the icons never shrink - squeezed, the last ones went off the screen; the logo gives way instead */
    .top-header > .mud-paper:last-child {
        flex: none;
        display: flex;
        align-items: center;
        gap: 0;
    }

    .top-header > .mud-paper:first-child a,
    .top-header > .mud-paper:first-child img {
        display: block;
        max-width: 100% !important;
        height: auto !important;
    }

    .top-header .mud-icon-button {
        padding: 6px !important;
    }

    .top-header .mud-icon-button .mud-icon-root {
        font-size: 1.25rem !important;
    }

    /* the save bar: back and delete as icons, the save with its label - one line */
    .po-actionbar {
        flex-wrap: nowrap !important;
        align-items: center;
    }

    .po-actionbar .po-actionbar-state {
        display: none !important;
    }

    .po-actionbar > .mud-button-root:not([type="submit"]) .mud-button-label {
        font-size: 0 !important;
    }

    .po-actionbar > .mud-button-root:not([type="submit"]) .mud-button-icon-start {
        margin: 0 !important;
    }

    .po-actionbar > .mud-button-root:not([type="submit"]) {
        min-width: 44px !important;
        padding: 6px 10px !important;
    }

    .po-actionbar > .mud-button-root[type="submit"] {
        margin-left: auto !important;
        flex: 0 1 auto;
        white-space: nowrap;
    }

    .chat-fab-button,
    .mud-fab.chat-fab-button {
        bottom: 88px !important;
    }
}

/* ---- phones: a server-rendered page (the Account pages) cannot toggle its menu, so it shows none */
@media (max-width: 767.98px) {
    .mud-layout.ssr-layout > .mud-drawer.left-menu-drawer {
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-shadow: none !important;
    }
}

/* =====================================================================================================================
   My Account - a settings page: the profile header, the grouped sections, one look for every section's form.
   ===================================================================================================================== */

.acct-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 4px 0 14px;
    padding: 18px 20px;
    border: 1px solid var(--app-line, #E5E7EB);
    border-radius: var(--app-radius-card, 14px);
    background:
        radial-gradient(420px 160px at 100% 0%, color-mix(in srgb, var(--mud-palette-primary) 10%, transparent), transparent 70%),
        #fff;
}

.acct-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-family: var(--app-font-head, var(--app-font));
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 80%, #fff), var(--mud-palette-primary));
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--mud-palette-primary) 80%, transparent);
}

.acct-hero-text {
    min-width: 0;
}

.acct-hero-name {
    margin: 0 0 4px;
    font-family: var(--app-font-head, var(--app-font));
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--app-ink, #15191E);
    overflow-wrap: anywhere;
}

.acct-hero-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-size: 13px;
    color: var(--app-ink-muted, #5F6672);
}

.acct-hero-sub > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.acct-layout {
    grid-template-columns: 280px minmax(0, 1fr) !important;
}

/* Below 1280px, with the menu open beside it, the form had some 250px: names were cut off ("Develo") and the user
   name broke mid-word. The sections go above it there. */
@media (max-width: 1279.98px) {
    .acct-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

.acct-nav {
    padding: 10px !important;
    position: sticky;
    top: calc(var(--app-header-height, 57px) + 12px);
}

.acct-nav-group {
    margin: 10px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--app-ink-muted, #5F6672);
}

.acct-nav-group:first-child {
    margin-top: 4px;
}

.acct-nav-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--app-ink, #15191E) !important;
    text-decoration: none !important;
    transition: background-color .15s, color .15s;
}

.acct-nav-link .mud-icon-root {
    flex: none;
    margin-top: 1px;
    font-size: 20px;
    color: var(--app-ink-muted, #5F6672);
}

.acct-nav-link > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.acct-nav-link b {
    font-size: 14px;
    font-weight: 600;
}

.acct-nav-link small {
    font-size: 12px;
    line-height: 1.35;
    color: var(--app-ink-muted, #5F6672);
}

.acct-nav-link:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, #fff);
}

.acct-nav-link.active {
    background: color-mix(in srgb, var(--mud-palette-primary) 11%, #fff);
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.acct-nav-link.active b,
.acct-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary);
}

.acct-main {
    padding: 22px 26px 24px !important;
    max-width: none !important;
}

/* every section opens the same way: its name and a line on what it is for */
.acct-section-head {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--app-line, #E5E7EB);
}

.acct-section-head h2 {
    margin: 0 0 4px;
    font-family: var(--app-font-head, var(--app-font));
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--app-ink, #15191E);
}

.acct-section-head p {
    margin: 0;
    font-size: 13.5px;
    color: var(--app-ink-muted, #5F6672);
}

/* the section pages that still open with a MudText heading read like acct-section-head */
.acct-main > .mud-typography-h4:first-child,
.acct-main > .mud-typography-h4 {
    margin: 0 0 18px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--app-line, #E5E7EB);
    font-size: 1.15rem !important;
    font-weight: 700 !important;
}

/* their forms: as wide as a form should be, never squeezed into a third of the tile */
.acct-main .mud-grid > .mud-grid-item {
    flex-basis: 100% !important;
    max-width: 640px !important;
    padding-left: 0 !important;
}

.acct-main .mud-grid {
    margin: 0 !important;
    width: 100% !important;
}

/* a value that is shown, not edited */
.acct-readonly,
.acct-main .mud-input-filled.mud-disabled,
.acct-main .mud-field .mud-input-filled {
    border-radius: 10px;
}

.acct-readonly {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 640px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px dashed var(--app-line, #E5E7EB);
    background: #FAFBFB;
    color: var(--app-ink-muted, #5F6672);
}

.acct-readonly > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.acct-readonly-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.acct-readonly-value {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--app-ink, #15191E);
    overflow-wrap: anywhere;
}

.acct-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    max-width: 640px;
}

.acct-field-wide {
    grid-column: 1 / -1;
}

.acct-actions {
    display: flex;
    justify-content: flex-end;
    max-width: 640px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--app-line, #E5E7EB);
}

/* the full-width buttons of the section forms sit at the end of the form, as on every other screen */
.acct-main .mud-card-actions {
    justify-content: flex-end;
    border-top: 1px solid var(--app-line, #E5E7EB);
    padding-top: 14px !important;
}

.acct-main .mud-card-actions .mud-button-root.mud-width-full {
    width: auto !important;
    min-width: 160px;
}

@media (max-width: 1023.98px) {
    .acct-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .acct-nav {
        position: static;
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .acct-nav-group {
        display: none;
    }

    .acct-nav-link {
        flex: none;
        align-items: center;
        padding: 8px 12px;
    }

    .acct-nav-link small {
        display: none;
    }

    .acct-nav-link.active {
        box-shadow: inset 0 -3px 0 var(--mud-palette-primary);
    }
}

@media (max-width: 599.98px) {
    .acct-hero {
        padding: 14px;
        gap: 12px;
    }

    .acct-avatar {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .acct-main {
        padding: 16px !important;
    }

    .acct-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .acct-actions .mud-button-root,
    .acct-main .mud-card-actions .mud-button-root.mud-width-full {
        width: 100% !important;
    }
}

/* ---- phones: whatever a page draws too wide scrolls inside its own box, never the whole screen sideways */
@media (max-width: 767.98px) {
    #main-content {
        overflow-x: clip;
    }
}

/* =====================================================================================================================
   The boot frame (App.razor, #app-boot): the portal's outline in the tenant's colours, shown from the first byte
   until the interactive layout is drawn, so a load or a refresh never shows a blank white page.
   ===================================================================================================================== */
#app-boot {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    background: #fff;
    pointer-events: none;
}

body:has(.mud-layout) #app-boot {
    display: none;
}

.app-boot-header {
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--app-header-height, 57px);
    padding: 0 16px;
    border-bottom: 1px solid var(--spacing-between-menu-and-header-color, #E5E7EB);
    background: var(--header-color, #fff);
}

/* The tenant's own logo where the layout's header puts it (MainLayout: pl-3); the tenant theme sizes it for both. */
.app-boot-brand {
    display: flex;
    margin: 1px auto 0 -4px;
}

.app-boot-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.app-boot-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.app-boot-rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* The menu's width as the page will draw it, open or as the mini rail (App.razor, from the sm-drawer cookie):
       a fixed narrow rail made the whole page jump when the layout replaced it. */
    width: var(--app-boot-rail-width, var(--mud-drawer-width-mini-left, 56px));
    flex-shrink: 0;
    padding: 16px 12px;
    background: var(--sidebar-color, #1E2329);
}

.app-boot-rail > span {
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .10);
}

.app-boot-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
}

.app-boot-dot,
.app-boot-crumb,
.app-boot-title,
.app-boot-line,
.app-boot-card {
    background: linear-gradient(90deg, #EEF0F3 0%, #F7F8FA 40%, #EEF0F3 80%);
    background-size: 200% 100%;
    animation: app-boot-shimmer 1.2s linear infinite;
}

.app-boot-crumb { width: 120px; height: 12px; border-radius: 6px; }
.app-boot-title { width: 260px; height: 26px; border-radius: 8px; }
.app-boot-line { width: min(520px, 70%); height: 12px; border-radius: 6px; }
.app-boot-card { flex: 1; max-height: 420px; margin-top: 6px; border-radius: 14px; }

/* a thin bar in the accent along the top while the page connects */
.app-boot-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 40%;
    background: var(--mud-palette-primary, #1F8A5B);
    animation: app-boot-bar 1.1s ease-in-out infinite;
}

@keyframes app-boot-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@keyframes app-boot-bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(260%); }
}

/* Below MudDrawer's breakpoint (md) the menu closes itself to the mini rail, whatever was saved. */
@media (max-width: 959.98px) {
    .app-boot-rail { width: var(--mud-drawer-width-mini-left, 56px); }
}

@media (max-width: 767.98px) {
    .app-boot-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .app-boot-dot, .app-boot-crumb, .app-boot-title, .app-boot-line, .app-boot-card, .app-boot-bar {
        animation: none;
    }
}

/* ---- the left menu's foot: the signed-in account and the way out (NavMenu, .nav-user) */
.nav-user {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 10px 8px;
    padding: 8px 6px 8px 8px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.nav-user-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px;
    border-radius: 10px;
    color: var(--mud-nav-item-text-color) !important;
    text-decoration: none !important;
    transition: background-color .15s;
}

.nav-user-card:hover {
    background: var(--mud-nav-item-hover-color);
}

.nav-user-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: color-mix(in srgb, var(--mud-palette-primary) 70%, #000);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.nav-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.nav-user-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mud-nav-item-hover-text-color, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-user-hint {
    font-size: 11px;
    opacity: .75;
}

.nav-user-logout {
    flex: none;
    margin: 0;
}

.nav-user-logout button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--mud-nav-item-text-color);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.nav-user-logout button:hover {
    background: var(--mud-nav-item-hover-color);
    color: var(--mud-nav-item-hover-text-color, #fff);
}

/* collapsed to the rail, only the sign-out button stays */
.left-menu-drawer.closed .nav-user {
    margin: 10px 0 8px;
    padding: 8px 0;
    justify-content: center;
}

.left-menu-drawer.closed .nav-user-card {
    display: none;
}

/* folder rows: their children hang below them on a guide line; a folder's chevron is quieter than its name */
.left-menu-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-expand-icon {
    opacity: .55;
    font-size: 18px;
}

/* an empty folder's chevron never turns (was a <style> in every NavGroupMenuItem) */
.mud-nav-group.empty-folder .mud-nav-link-expand-icon {
    transform: rotate(0deg) !important;
}

/* a quiet note at the end of a card's heading: something of the card still loading */
.po-card-head-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--app-ink-muted, #64748B);
}

/* =====================================================================================================================
   Organization page: compact - the logo beside the organization, every colour on one line next to a live preview.
   ===================================================================================================================== */

/* one colour: its name, a swatch that opens the picker, the value as text (Shared/Page/ColorField) */
.color-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 10px;
    padding: 5px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--app-line, #E2E8F0) 70%, transparent);
}

.color-field:last-child {
    border-bottom: 0;
}

.color-field > .text-danger {
    grid-column: 1 / -1;
}

.color-field-label {
    font-size: 13px;
    color: var(--app-ink, #0F172A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.color-field-input {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.color-field-swatch {
    position: relative;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18);
    background-image: linear-gradient(45deg, #E2E8F0 25%, transparent 25%, transparent 75%, #E2E8F0 75%),
                      linear-gradient(45deg, #E2E8F0 25%, transparent 25%, transparent 75%, #E2E8F0 75%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    cursor: pointer;
    overflow: hidden;
}

.color-field-swatch input[type="color"] {
    position: absolute;
    inset: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    opacity: 0;
    cursor: pointer;
}

.color-field-text {
    width: 96px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--app-line, #E2E8F0);
    border-radius: 6px;
    background: #fff;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px;
    color: var(--app-ink, #0F172A);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.color-field-text:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

.color-field-unit {
    font-size: 12px;
    color: var(--app-ink-muted, #64748B);
}

.color-field.is-disabled {
    opacity: .6;
}

/* the logo and the icon: small frames, the actions under them */
.org-images {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 12px;
}

.org-image-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    padding: 8px;
    border: 1px dashed var(--app-line, #E2E8F0);
    border-radius: 10px;
    background: repeating-conic-gradient(#F8FAFC 0% 25%, #fff 0% 50%) 50% / 14px 14px;
    color: var(--app-ink-muted, #64748B);
    font-size: 12px;
}

.org-image-frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.org-image-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 4px;
}

/* branding: the preview on the left, four groups of colours on the right */
.org-brand-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.org-brand-actions .mud-switch {
    margin: 0;
}

.org-branding {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.org-colors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 20px;
}

.org-color-title {
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--app-ink-muted, #64748B);
}

/* the portal in miniature, painted in the colours on the form */
.org-preview {
    position: sticky;
    top: calc(var(--app-header-height, 57px) + 12px);
    overflow: hidden;
    border: 1px solid var(--app-line, #E2E8F0);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px -22px rgba(15, 23, 42, .5);
    font-size: 11px;
}

.org-preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 10px;
    border-bottom: 2px solid transparent;
}

.org-preview-burger {
    width: 12px;
    height: 8px;
    border-radius: 2px;
}

.org-preview-logo {
    width: 56px;
    height: 10px;
    margin-right: auto;
    border-radius: 3px;
    background: #CBD5E1;
}

.org-preview-link {
    width: 26px;
    height: 6px;
    border-radius: 3px;
}

.org-preview-body {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    height: 168px;
}

.org-preview-rail {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 6px;
}

.org-preview-item {
    padding: 5px 7px;
    border-radius: 6px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-preview-page {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
    background: #F8FAFC;
}

.org-preview-title {
    width: 60%;
    height: 10px;
    border-radius: 3px;
    background: #94A3B8;
}

.org-preview-line {
    width: 85%;
    height: 6px;
    border-radius: 3px;
    background: #E2E8F0;
}

.org-preview-line.short {
    width: 55%;
}

.org-preview-button {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
}

.org-preview-chat {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: auto;
}

.org-preview-avatar {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.org-preview-bubble {
    padding: 4px 7px;
    border-radius: 7px;
    line-height: 1.35;
}

.org-preview-bubble b {
    display: block;
    font-size: 10px;
}

@media (max-width: 1499.98px) {
    .org-colors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023.98px) {
    .org-branding {
        grid-template-columns: minmax(0, 1fr);
    }

    .org-preview {
        position: static;
        max-width: 360px;
    }
}

@media (max-width: 599.98px) {
    .org-colors {
        grid-template-columns: minmax(0, 1fr);
    }

    .org-brand-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* ---- organization page: the organization and its logo side by side, branding across, integrations below */
.po-grid.org-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
}

.po-grid.org-grid > .po-card-span2 {
    grid-column: 1;
}

.po-grid.org-grid > .po-card-wide {
    grid-column: 1 / -1;
}

@media (max-width: 1023.98px) {
    .po-grid.org-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .po-grid.org-grid > .po-card-span2 {
        grid-column: auto;
    }
}

/* ---- tablets: the logo at its own proportions and a little smaller, so the top menu links and the icons keep their room */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .top-header > .mud-paper:first-child img {
        max-width: 22vw !important;
        height: auto !important;
    }
}

/* In My Account the editor has the account card's width, not a page's: the logo column beside it squeezed the
   organization's name and website to a few characters. One column there. */
.acct-main .po-grid.org-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

.acct-main .po-grid.org-grid > .po-card-span2 {
    grid-column: auto;
}

/* ---- header: top menu links stay on one line; a long top menu scrolls sideways instead of growing the header */
.top-header .top-row {
    flex-wrap: nowrap !important;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.top-header .top-row::-webkit-scrollbar {
    display: none;
}

.top-header .top-row a,
.top-header .top-row .btn-link {
    white-space: nowrap !important;
    flex: none;
}

.top-header > .mud-paper:last-child {
    min-width: 0;
}

/* Power BI alone (Entra ID sync switched off) takes the whole row */
.po-grid.org-grid > :nth-child(4):last-child {
    grid-column: 1 / -1;
}

/* =====================================================================================================================
   Report pages (ViewPowerBiReport): one quiet toolbar over the report, the report on a framed card.
   ===================================================================================================================== */
.report-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 2px 0 6px;
}

.report-toolbar-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, #fff);
}

.report-toolbar-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--app-font-head, var(--app-font));
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--app-ink, #0F172A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.report-toolbar-actions {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* the fullscreen button reads as a toolbar icon here, not a filled tile */
.report-toolbar-actions .mud-icon-button,
.report-toolbar-actions .mud-icon-button.mud-button-filled {
    width: 34px;
    height: 34px;
    padding: 6px !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--app-ink-muted, #64748B) !important;
    border: 1px solid var(--app-line, #E2E8F0);
    box-shadow: none !important;
}

.report-toolbar-actions .mud-icon-button:hover {
    color: var(--mud-palette-primary) !important;
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, #fff);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, #fff) !important;
    transform: none !important;
}

/* a thin progress line under the toolbar that takes no room when idle */
.report-toolbar-progress {
    height: 3px;
    margin-bottom: 8px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--app-line, #E2E8F0);
}

.report-toolbar-progress .mud-progress-linear {
    height: 3px;
}

/* the report on a white, framed card */
.pbi-chat-report {
    border: 1px solid var(--app-line, #E2E8F0);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -20px rgba(15, 23, 42, .22);
}

/* a page with its own docked chat needs no floating chat button over it */
body:has(.pbi-chat-layout) .chat-fab-button {
    display: none !important;
}

/* a fullscreen button anywhere else keeps to the end of its row, without pushing every other tooltip aside */
.fullscreen-button-root {
    margin-left: auto;
}

@media (max-width: 599.98px) {
    .report-toolbar-actions .mud-button-root:not(.mud-icon-button) .mud-button-label {
        font-size: 0 !important;
    }
}

/* the floating chat button stays under dialogs, and clear of the save bar on record pages */
.chat-fab-button,
.mud-fab.chat-fab-button {
    z-index: 1250 !important;
}

body:has(.po-actionbar) .chat-fab-button {
    bottom: 84px !important;
}

/* room under the page for the floating chat button: scrolled to the end, the last buttons of a form (Create user)
   and a grid's pager come clear of it instead of staying under it */
body:has(.chat-fab-button) .mud-main-content {
    padding-bottom: 96px !important;
}

/* ---------------------------------------------------------------------------------------------------------
   Form kit, second tier: chip summaries, choice cards, pick tables, notices.
   --------------------------------------------------------------------------------------------------------- */

/*
    MudBlazor draws the label of an empty field, and every helper line, in the palette's secondary text colour,
    so an untouched field could look selected. Grey like a filled one; focus and errors keep their own colours,
    which are more specific.
*/
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol,
.mud-input-control > .mud-input-control-helper-container .mud-input-helper-text {
    color: var(--app-ink-muted);
}

/* PickedChips: a count line, then the chips in rows, folded after the first dozen. */
.pc-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 8px;
    font-size: .74rem;
}

.pc-count {
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--app-ink-muted);
}

.pc-link,
.pc-more {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--app-accent);
    cursor: pointer;
}

.pc-link:hover,
.pc-more:hover {
    text-decoration: underline;
}

.pc-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.pc-chips.is-expanded {
    max-height: 168px;
    overflow-y: auto;
    padding-right: 2px;
}

.pc-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 220px;
    padding: 0 2px 0 8px;
    border: 1px solid var(--app-accent-border);
    border-radius: 11px;
    background: var(--app-surface);
    color: var(--app-accent);
    font-size: .76rem;
    font-weight: 600;
    line-height: 22px;
}

.pc-chip.is-fixed {
    padding-right: 8px;
}

.pc-chip > .mud-icon-root {
    flex: 0 0 auto;
    font-size: .85rem;
}

.pc-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.pc-chip-remove .mud-icon-root {
    font-size: .8rem;
}

.pc-chip-remove:hover,
.pc-chip-remove:focus-visible {
    background: var(--app-accent-soft);
}

.pc-more {
    padding: 0 6px;
    font-size: .74rem;
    font-weight: 600;
    line-height: 22px;
}

.pc-empty {
    margin-top: 6px;
    font-size: .8rem;
    color: var(--app-ink-faint);
}

/* A pick table: one row per choice with a plain checkbox or radio, the row tinted when picked. */
.po-pick-table tbody td {
    padding: 4px 10px;
    white-space: nowrap;
}

.po-pick-table tbody tr.is-selected td {
    background: var(--app-accent-soft);
}

.po-pick-table tbody tr.is-selected td:first-child {
    box-shadow: inset 3px 0 0 var(--app-accent);
}

.po-pick {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    cursor: pointer;
}

.po-pick input,
.po-choice input {
    margin: 0;
    accent-color: var(--app-accent);
    cursor: pointer;
}

.po-pick input:disabled,
.po-choice input:disabled {
    cursor: default;
}

.po-pick-name {
    font-weight: 600;
    color: var(--app-ink);
}

.po-tag {
    padding: 0 6px;
    border-radius: 4px;
    font-size: .68rem;
    font-weight: 600;
    line-height: 18px;
    background: var(--app-surface-sunk);
    color: var(--app-ink-muted);
}

/* Choice cards: one line per choice, what it covers, and what picking it means on the right. */
.po-choices {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.po-choice {
    display: grid;
    grid-template-columns: auto 9rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: .84rem;
    cursor: pointer;
}

/* Without a description: name, then what picking it means. */
.po-choice.is-compact {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.po-choice:hover {
    background: var(--app-surface-sunk);
}

.po-choice.is-disabled {
    cursor: default;
    opacity: .55;
}

.po-choice.is-disabled:hover {
    background: transparent;
}

.po-choice.is-active {
    background: var(--app-accent-soft);
    border-color: var(--app-accent-border);
}

.po-choice-name {
    font-weight: 600;
    color: var(--app-ink);
}

.po-choice-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--app-ink-muted);
    font-size: .78rem;
}

.po-choice-value {
    font-size: .74rem;
    font-weight: 600;
    color: var(--app-ink-muted);
}

.po-choice.is-active .po-choice-value {
    color: var(--app-accent);
}

@media (max-width: 599.98px) {
    .po-choice {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .po-choice-desc {
        display: none;
    }
}

/* Notices inside a card: a fixed fact, or a warning about what saving will do. */
.po-fixed,
.po-warn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: .84rem;
}

.po-fixed {
    background: var(--app-surface-sunk);
    color: var(--app-ink);
    font-weight: 600;
}

.po-fixed .mud-icon-root {
    color: var(--app-ink-muted);
}

.po-warn {
    margin-top: 8px;
    background: var(--app-warn-soft);
    color: var(--app-ink);
}

.po-warn .mud-icon-root {
    color: var(--app-warn);
}

/* The last change of a record, at the foot of its first card. */
.po-origin {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed var(--app-line);
    font-size: .76rem;
    color: var(--app-ink-muted);
}