/* =====================================================================
   Dashboard pages built on UtcPack.Blazor.AlignUI.
   Colours come from the kit's tokens (hsl(var(--au-*))), so light and dark follow the kit.
   ===================================================================== */

/* ---------- Kit fixes ---------- */

/* AuModal places its close button with `absolute right-4 top-4`, but AuCompactButton carries
   `relative` too and .relative comes later in the kit's stylesheet, so the X fell into the flow
   under the header. Without tailwind-merge both classes stay; the absolute one is meant to win. */
.absolute.relative { position: absolute !important; }

/* AuForm and AuFormSection lay out with md:grid-cols-12 / md:col-span-*, which the kit's
   precompiled stylesheet (0.5.12) does not contain, so every form fell back to one column. */
@media (min-width: 768px) {
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:col-span-4 { grid-column: span 4 / span 4; }
    .md\:col-span-5 { grid-column: span 5 / span 5; }
    .md\:col-span-6 { grid-column: span 6 / span 6; }
    .md\:col-span-7 { grid-column: span 7 / span 7; }
    .md\:col-span-8 { grid-column: span 8 / span 8; }
    .md\:col-span-9 { grid-column: span 9 / span 9; }
    .md\:col-span-10 { grid-column: span 10 / span 10; }
    .md\:col-span-11 { grid-column: span 11 / span 11; }
    .md\:col-span-12 { grid-column: span 12 / span 12; }
}

/* ---------- Page chrome (AuAdminPage) ---------- */

.au-admin {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    padding: 16px 24px 32px;
    background: hsl(var(--au-bg-weak-50));
}

.au-admin__crumbs a,
.au-admin__crumbs span { font-size: .9375rem; }

/* ---------- Tables (AuStateTable) ---------- */

.au-admin__table-card { overflow: hidden; }

.au-admin__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid hsl(var(--au-stroke-soft-200));
}

.au-admin__filter { flex: 1 1 180px; min-width: 160px; max-width: 240px; }
.au-admin__filter--wide { flex-basis: 260px; max-width: 360px; }
.au-admin__toolbar-end { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.au-admin__table-scroll { overflow-x: auto; }

.au-admin__table-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid hsl(var(--au-stroke-soft-200));
    font-size: .9375rem;
    color: hsl(var(--au-text-sub-600));
}

.au-admin__actions { display: flex; gap: 4px; justify-content: flex-end; }

/* List pages (AuAdminPage Fill): the page is exactly the window below the top bar, the table
   card takes what the header leaves, and only its rows scroll — breadcrumb, title, filters and
   pager stay put. The rows scroll without a visible scrollbar. */
.au-admin--fill {
    height: calc(100vh - 60px); /* AuTopbar is h-[60px] (h-14 in compact mode) */
    min-height: 0;
    padding-bottom: 16px;
    overflow: hidden;
}

.au-admin--fill .au-admin__table-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* AuCard wraps its content in one div; that div carries the column layout. */
.au-admin--fill .au-admin__table-card > div { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.au-admin--fill .au-admin__toolbar,
.au-admin--fill .au-admin__table-footer { flex: 0 0 auto; }

.au-admin--fill .au-admin__table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-top: 0;
    scrollbar-width: none;
}

.au-admin--fill .au-admin__table-scroll::-webkit-scrollbar { display: none; }

/* AuTable's own overflow-x wrapper would become the sticky header's scroll container and keep
   it from sticking; the outer scroll area handles both directions instead. */
.au-admin--fill .au-admin__table-scroll > div { overflow: visible; }

.au-admin--fill .au-admin__table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* ---------- Forms ---------- */

.au-admin__form-fields { display: flex; flex-direction: column; gap: 16px; }

/* Language switch of multilingual forms (AuLanguageSwitch). */
.au-admin__lang { align-self: flex-start; }
.au-admin__lang-item { display: inline-flex; align-items: center; gap: 6px; }

/* Free text in a table cell (messages, addresses) wraps instead of stretching the row. */
.au-admin__cell-text { min-width: 200px; max-width: 360px; white-space: normal; overflow-wrap: anywhere; }

/* Side panels of section forms (SectionLanguage) and single fields dropped into old layouts. */
.au-admin__side-card {
    display: flex; flex-direction: column; gap: 12px; padding: 16px; margin-bottom: 12px;
    border: 1px solid hsl(var(--au-stroke-soft-200)); border-radius: 16px; background: hsl(var(--au-bg-white-0));
}
.au-admin__side-title { font-size: .9375rem; font-weight: 600; color: hsl(var(--au-text-strong-950)); }
.au-admin__field { padding: 8px 0; }
.au-admin__parent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9375rem; color: hsl(var(--au-text-strong-950)); }
.au-admin__parent > span { flex: 1 1 100%; }

/* Section tree (SectionTreeView). */
.au-tree { display: flex; flex-direction: column; gap: 12px; }
.au-tree__filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.au-tree__body { overflow-y: auto; scrollbar-width: thin; }
.au-tree__row {
    display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; border-radius: 8px;
    cursor: pointer; font-size: .9375rem; color: hsl(var(--au-text-strong-950));
}
.au-tree__row:hover { background: hsl(var(--au-bg-weak-50)); }
.au-tree__row--selected { background: hsl(var(--au-primary-alpha-10)); }
.au-tree__toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: hsl(var(--au-text-sub-600)); }
.au-tree__toggle:hover { background: hsl(var(--au-bg-soft-200)); }
.au-tree__toggle--empty { visibility: hidden; }
.au-tree__text { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; flex: 1; min-width: 0; }
.au-tree__id { color: hsl(var(--au-text-soft-400)); font-size: .8125rem; }
.au-tree__link { color: hsl(var(--au-text-soft-400)); font-size: .8125rem; overflow-wrap: anywhere; }
.au-tree__actions { margin-left: auto; }

/* File drop zone (Uploader). */
.au-upload { width: 100%; max-width: 320px; }
.au-upload__drop,
.au-upload__preview {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 140px; padding: 12px;
    border: 1.5px dashed hsl(var(--au-stroke-sub-300)); border-radius: 12px;
    background: hsl(var(--au-bg-weak-50)); color: hsl(var(--au-text-sub-600));
    font-size: .9375rem; text-align: center;
}
.au-upload__drop { cursor: pointer; transition: border-color .2s, background .2s; }
.au-upload__drop:hover { border-color: hsl(var(--au-primary-base)); background: hsl(var(--au-primary-alpha-10)); color: hsl(var(--au-primary-base)); }
.au-upload__hint { font-size: .8125rem; color: hsl(var(--au-text-soft-400)); }
.au-upload__preview img { max-width: 100%; max-height: 130px; object-fit: contain; }
.au-upload__file { display: inline-flex; align-items: center; gap: 6px; color: hsl(var(--au-text-strong-950)); overflow-wrap: anywhere; }
.au-upload__clear { position: absolute !important; top: 6px; right: 6px; }
.au-uploads { display: flex; flex-wrap: wrap; gap: 12px; }
.au-uploads__tile { width: 180px; min-height: 120px; }
.au-upload--compact .au-upload__drop,
.au-upload--compact .au-upload__preview { min-height: 44px; flex-direction: row; padding: 6px 40px 6px 12px; }
.au-upload--compact .au-upload__hint { display: none; }
.au-upload--compact .au-upload__preview img { max-height: 32px; }

/* Cloud page editor (CloudPage) and the repeated rows of section forms. */
.au-cloud { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.au-cloud__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.au-cloud__section { display: flex; flex-direction: column; gap: 10px; }
.au-cloud__title { font-size: 1.0625rem; font-weight: 600; color: hsl(var(--au-text-strong-950)); }
.au-cloud__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.au-cloud__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.au-cloud__row--wide { grid-template-columns: minmax(180px, 1fr) minmax(260px, 2fr); }
.au-cloud__block { display: flex; flex-direction: column; gap: 10px; }
.au-cloud__block-head { display: flex; align-items: center; gap: 8px; }
.au-cloud__grow { flex: 1; min-width: 0; }
.au-cloud__line { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: start; }
.au-cloud__line--feature { grid-template-columns: 160px 1fr 1.4fr auto; }
.au-cloud__line--catalog { grid-template-columns: 2fr 1.2fr 90px 90px 90px auto; }
.au-cloud__line--faq { grid-template-columns: 100px 1fr 1fr; }
.au-cloud__tools { display: flex; gap: 2px; padding-top: 6px; }
.au-cloud__import {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; cursor: pointer;
    border: 1px solid hsl(var(--au-stroke-soft-200)); border-radius: 8px; font-size: .875rem; font-weight: 500;
    color: hsl(var(--au-text-sub-600)); background: hsl(var(--au-bg-white-0));
}
.au-cloud__import:hover { background: hsl(var(--au-bg-weak-50)); color: hsl(var(--au-text-strong-950)); }
.au-cloud__import--busy { opacity: .6; pointer-events: none; }
.au-import-list { margin: 8px 0 0 18px; list-style: disc; font-size: .9375rem; color: hsl(var(--au-text-strong-950)); }
@media (max-width: 900px) {
    .au-cloud__line, .au-cloud__line--feature, .au-cloud__line--catalog, .au-cloud__line--faq { grid-template-columns: 1fr; }
}

/* ---------- Menu editor (/menus) ----------
   Tree on the left in a card, controls on the right. jqTree draws the rows; js/custom.js fills each
   title with the name, the link under it and small badges (external link, banner, section id). */
.au-menu { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.au-menu__side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; }
.au-menu__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid hsl(var(--au-stroke-soft-200));
}
.au-menu__head-text { display: flex; flex-direction: column; gap: 2px; }
.au-menu__selected { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: hsl(var(--au-bg-weak-50)); }
.au-menu__selected-link { font-size: .8125rem; color: hsl(var(--au-text-soft-400)); overflow-wrap: anywhere; }
@media (max-width: 1100px) {
    .au-menu { grid-template-columns: minmax(0, 1fr); }
    .au-menu__side { position: static; order: -1; }
}

.au-menu-tree { padding: 10px 12px 14px; min-height: 240px; font-size: .9375rem; }
.au-menu-tree--empty::before {
    content: attr(data-empty); display: block; padding: 48px 0; text-align: center;
    font-size: .9375rem; color: hsl(var(--au-text-sub-600));
}

/* Rows. */
.au-menu-tree ul.jqtree-tree li.jqtree_common,
.au-menu-tree ul.jqtree-tree li.jqtree-folder,
.au-menu-tree ul.jqtree-tree li.jqtree-folder.jqtree-closed { margin: 0; }
.au-menu-tree ul.jqtree-tree .jqtree-element {
    align-items: center; gap: 6px; min-height: 44px; margin: 1px 0; padding: 6px 10px;
    border-radius: 10px; transition: background-color .15s ease;
}
.au-menu-tree ul.jqtree-tree .jqtree-element:hover { background: hsl(var(--au-bg-weak-50)); }
.au-menu-tree ul.jqtree-tree li.jqtree-selected > .jqtree-element,
.au-menu-tree ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {
    background: hsl(var(--au-primary-alpha-10)) !important;
    box-shadow: inset 0 0 0 1px hsl(var(--au-primary-alpha-24));
}

/* jqTree focuses the clicked row; the selection colour already shows it. */
.au-menu-tree ul.jqtree-tree .jqtree-element:focus,
.au-menu-tree ul.jqtree-tree .jqtree-title:focus,
.au-menu-tree ul.jqtree-tree li:focus { outline: none; }

/* Nesting: each level steps in with a guide line along its children. */
.au-menu-tree ul.jqtree-tree ul.jqtree_common {
    margin-left: 21px; padding-left: 10px; border-left: 1px solid hsl(var(--au-stroke-soft-200));
}

/* Open / close chevron (jqTree's toggler link holds our SVG). */
.au-menu-tree ul.jqtree-tree .jqtree-toggler {
    display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin: 0 !important;
    border-radius: 6px; color: hsl(var(--au-text-soft-400)) !important; background: none !important;
}
.au-menu-tree ul.jqtree-tree .jqtree-toggler:hover { background: hsl(var(--au-bg-soft-200)) !important; color: hsl(var(--au-text-strong-950)) !important; }
.au-menu__chevron, .au-menu-tree__chevron { transition: transform .15s ease; }
.au-menu-tree__chevron--open { transform: rotate(90deg); }
/* Leaves have no toggler; keep their titles in line with the folders'. */
.au-menu-tree ul.jqtree-tree .jqtree-title-button-left { margin-left: 30px; }
.au-menu-tree ul.jqtree-tree .jqtree-title-button-left.jqtree-title-folder { margin-left: 0; }

/* Title: optional icon, name with the link under it, badges on the right. */
.au-menu-tree ul.jqtree-tree .jqtree-title {
    display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0;
    color: hsl(var(--au-text-strong-950)) !important;
}
.au-menu-tree__icon { width: 20px; height: 20px; flex: none; object-fit: contain; }
.au-menu-tree__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.au-menu-tree__name { font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-menu-tree__link { font-size: .8125rem; line-height: 1.3; color: hsl(var(--au-text-soft-400)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-menu-tree li.jqtree-folder > .jqtree-element .au-menu-tree__name { font-weight: 600; }
.au-menu-tree__badges { display: flex; align-items: center; gap: 4px; flex: none; }
.au-menu-tree__badge {
    padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 500; line-height: 1.25rem;
    background: hsl(var(--au-primary-alpha-10)); color: hsl(var(--au-primary-base)); white-space: nowrap;
}
.au-menu-tree__badge--accent { background: hsl(var(--au-warning-base) / .14); color: hsl(var(--au-warning-base)); }
.au-menu-tree__badge--muted { background: hsl(var(--au-bg-soft-200)); color: hsl(var(--au-text-sub-600)); }
.au-menu-tree__count {
    min-width: 22px; padding: 1px 6px; border-radius: 999px; text-align: center; font-size: .75rem; font-weight: 600;
    line-height: 1.25rem; background: hsl(var(--au-bg-weak-50)); color: hsl(var(--au-text-sub-600));
    box-shadow: inset 0 0 0 1px hsl(var(--au-stroke-soft-200));
}

/* Drag and drop: the drop line and the "inside" frame in the primary colour. */
.au-menu-tree ul.jqtree-tree li.jqtree-ghost span.jqtree-line { background-color: hsl(var(--au-primary-base)); }
.au-menu-tree ul.jqtree-tree li.jqtree-ghost span.jqtree-circle { border-color: hsl(var(--au-primary-base)); }
.au-menu-tree ul.jqtree-tree span.jqtree-border { border-color: hsl(var(--au-primary-base)); border-radius: 10px; }
.au-menu-tree ul.jqtree-tree .jqtree-moving > .jqtree-element { opacity: .55; }
span.jqtree-dragging {
    padding: 6px 12px !important; border-radius: 8px; background: hsl(var(--au-bg-white-0)) !important;
    color: hsl(var(--au-text-strong-950)) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

/* Image pickers (ImageUpload, ImageSelect). */
.au-picker-modal.au-picker-modal { max-width: min(900px, 96vw); }
.au-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-height: 60vh; overflow-y: auto; }
.au-picker__item {
    display: flex; align-items: center; justify-content: center; height: 120px; padding: 8px;
    border: 1px solid hsl(var(--au-stroke-soft-200)); border-radius: 10px; background: hsl(var(--au-bg-weak-50));
}
.au-picker__item:hover { border-color: hsl(var(--au-primary-base)); }
.au-picker__item--selected { border-color: hsl(var(--au-primary-base)); box-shadow: 0 0 0 2px hsl(var(--au-primary-alpha-24)); }
.au-picker__item img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Superior appeal dialog. */
.appeal-modal.appeal-modal { max-width: min(640px, 96vw); }
.appeal-modal__content { margin-top: 16px; }
.appeal-modal__content p {
    margin-top: 6px; white-space: pre-wrap; font-size: .9375rem; line-height: 1.5;
    color: hsl(var(--au-text-strong-950));
}

.au-admin__note {
    font-size: .9375rem;
    color: hsl(var(--au-text-sub-600));
}

/* ---------- Permissions ---------- */

.au-admin__switch-list { display: flex; flex-direction: column; }

.au-admin__switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    font-size: .9375rem;
    color: hsl(var(--au-text-strong-950));
}

.au-admin__switch-row + .au-admin__switch-row { border-top: 1px solid hsl(var(--au-stroke-soft-200)); }

/* ---------- Audit logs ---------- */

.audit-mono { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }
.audit-fields { font-size: .8125rem; color: hsl(var(--au-text-sub-600)); }
.audit-cell { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.audit-time { display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; }
.audit-time__rel { font-size: .8125rem; color: hsl(var(--au-text-soft-400)); }

/* The kit modal is 400px wide; a diff needs the room of a page. */
.audit-modal.audit-modal { max-width: min(1200px, 96vw); }

.audit-modal__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.audit-modal__meta { font-size: .78rem; color: hsl(var(--au-text-sub-600)); }
.audit-modal__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.audit-modal__count {
    margin-right: auto;
    font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: hsl(var(--au-text-sub-600));
}
.audit-modal__body { max-height: 70vh; overflow-y: auto; }

.audit-diff { display: grid; gap: 2px; font-size: .8rem; align-items: stretch; text-align: left; }
.audit-diff--split { grid-template-columns: minmax(120px, 220px) 1fr 26px 1fr; }
.audit-diff--single { grid-template-columns: minmax(120px, 220px) 1fr; }
.audit-diff__head {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: hsl(var(--au-text-soft-400)); padding: 2px 8px;
}
.audit-diff__cell {
    padding: 6px 8px; border-radius: 6px; overflow-wrap: anywhere; white-space: pre-wrap;
    max-height: 240px; overflow-y: auto; color: hsl(var(--au-text-strong-950));
    background: hsl(var(--au-bg-weak-50));
}
.audit-diff__field {
    font-family: ui-monospace, Consolas, monospace; font-weight: 600;
    display: flex; align-items: center; gap: 6px; background: transparent; white-space: normal;
}
.audit-diff__arrow { display: flex; align-items: center; justify-content: center; color: hsl(var(--au-text-soft-400)); }
/* Reformatted JSON is indented, so it needs a fixed pitch font and room to scroll. */
.audit-diff__cell--json {
    font-family: ui-monospace, Consolas, monospace; font-size: .74rem;
    line-height: 1.45; tab-size: 2; max-height: 420px;
}
.audit-diff__cell--old { background: hsl(var(--au-error-lighter)); }
.audit-diff__cell--new { background: hsl(var(--au-success-lighter)); }
.audit-diff__cell--same { opacity: .55; }
.audit-diff__cell--same.audit-diff__cell--old,
.audit-diff__cell--same.audit-diff__cell--new { background: hsl(var(--au-bg-weak-50)); }

.audit-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: hsl(var(--au-text-disabled-300)); }
.audit-dot--add { background: hsl(var(--au-success-base)); }
.audit-dot--mod { background: hsl(var(--au-information-base)); }
.audit-dot--del { background: hsl(var(--au-error-base)); }

.audit-seg { border-radius: 3px; padding: 0 2px; }
.audit-seg--del { background: hsl(var(--au-error-light)); text-decoration: line-through; }
.audit-seg--add { background: hsl(var(--au-success-light)); }

.audit-null { color: hsl(var(--au-text-disabled-300)); }
.audit-empty { padding: 12px; font-size: .82rem; color: hsl(var(--au-text-sub-600)); }

@media (max-width: 900px) {
    .audit-diff--split { grid-template-columns: 1fr; }
    .audit-diff__head, .audit-diff__arrow { display: none; }
}

/* Attribute checklist (AttributeSelect). */
.au-attr-list { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; padding: 4px 2px; scrollbar-width: thin; }

/* Image gallery picker (ImageSelectView). */
.au-imgpick { display: flex; flex-direction: column; gap: 12px; }
.au-imgpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 60vh; overflow-y: auto; }
.au-imgpick__item {
    display: flex; align-items: center; justify-content: center; height: 120px; padding: 6px;
    border: 1.5px solid hsl(var(--au-stroke-soft-200)); border-radius: 10px; background: hsl(var(--au-bg-weak-50)); cursor: pointer;
}
.au-imgpick__item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.au-imgpick__item:hover { border-color: hsl(var(--au-primary-base)); }
.au-imgpick__item--on { border-color: hsl(var(--au-primary-base)); box-shadow: 0 0 0 3px hsl(var(--au-primary-alpha-16)); }

/* Small picture in a table cell. */
.au-admin__thumb { width: 60px; height: 40px; object-fit: contain; border-radius: 6px; }

/* An <InputFile> opened through a label that looks like a small primary button. */
.au-admin__file-button {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 8px; cursor: pointer;
    background: hsl(var(--au-primary-base)); color: hsl(var(--au-static-white)); font-size: .9375rem; font-weight: 500;
}
.au-admin__file-button:hover { background: hsl(var(--au-primary-darker)); }

/* A row title that opens the row's children. */
.au-admin__link { display: inline-flex; align-items: center; gap: 6px; color: hsl(var(--au-primary-base)); font-weight: 500; }
.au-admin__link:hover { text-decoration: underline; }

/* 12-column rows for repeated items in section editors (md:span-N from the old MudGrid items). */
.au-grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; }
.au-grid12 > * { min-width: 0; }
.au-grid12__center { align-self: center; }
.au-span-1 { grid-column: span 1; } .au-span-2 { grid-column: span 2; } .au-span-3 { grid-column: span 3; }
.au-span-4 { grid-column: span 4; } .au-span-5 { grid-column: span 5; } .au-span-6 { grid-column: span 6; }
.au-span-7 { grid-column: span 7; } .au-span-8 { grid-column: span 8; } .au-span-9 { grid-column: span 9; }
.au-span-10 { grid-column: span 10; } .au-span-11 { grid-column: span 11; } .au-span-12 { grid-column: span 12; }
@media (max-width: 767px) { .au-grid12 > * { grid-column: 1 / -1; } }

/* Runner page: the "processing" badge blinks until GitLab answers. */
@keyframes au-runner-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.au-runner__blink { animation: au-runner-blink 1s infinite; }

/* Start page. */
.au-admin__home { padding: 16px; text-align: center; font-size: 1.5rem; font-weight: 600; color: hsl(var(--au-text-strong-950)); }

/* ---------- Shell (MainLayout: AuShell + AuSidebar + AuTopbar) ---------- */

.au-shell__brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; color: hsl(var(--au-primary-base)); }
.au-shell__logo { width: 26px; flex: none; }
.au-shell__logotext { width: 150px; }
.au-shell__bar { background-color: hsl(var(--au-bg-white-0)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.au-shell__lang { min-width: 10rem; }
.au-shell__flag { height: 1rem; width: auto; object-fit: contain; }
.au-shell__menu [role="menu"] { width: max-content; min-width: 10rem; max-width: 16rem; }
.au-shell__bell {
    position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px;
    color: hsl(var(--au-text-sub-600));
}
.au-shell__bell:hover { background: hsl(var(--au-bg-weak-50)); color: hsl(var(--au-text-strong-950)); }
.au-shell__bell-dot {
    position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%;
    background: hsl(var(--au-error-base)); box-shadow: 0 0 0 2px hsl(var(--au-bg-white-0));
}

/* A sub-heading inside a sidebar group (a second menu level). */
.au-nav__sub {
    display: block; padding: 10px 12px 2px; font-size: .75rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: hsl(var(--au-text-soft-400));
}

/* ---------- Type scale ----------
   The kit's text is 12-14px, which read too small in the dashboard. Every text utility moves up one
   step (about 1px); spacing stays as it is. Loaded after alignui.css, so these win. */
.text-subheading-2xs { font-size: .75rem; line-height: 1rem; }
.text-subheading-xs { font-size: .8125rem; line-height: 1.125rem; }
.text-paragraph-xs { font-size: .8125rem; line-height: 1.125rem; }
.text-label-xs { font-size: .8125rem; line-height: 1.125rem; }
.text-paragraph-sm { font-size: .9375rem; line-height: 1.375rem; }
.text-label-sm { font-size: .9375rem; line-height: 1.375rem; }
.text-paragraph-md { font-size: 1.0625rem; line-height: 1.625rem; }
.text-label-md { font-size: 1.0625rem; line-height: 1.625rem; }
.text-label-lg { font-size: 1.1875rem; }
[data-alignui] { font-size: .9375rem; }

/* ---------- Tables (AuStateTable) ----------
   The header is one full-width band under the toolbar: tinted, bordered top and bottom, small caps
   labels; rows are separated by hairlines and highlight on hover. The first and last columns line
   up with the toolbar's 20px padding. */
.au-admin__table-scroll table { border-collapse: separate; border-spacing: 0; }

.au-admin__table-scroll thead th {
    padding: 11px 12px;
    border-top: 1px solid hsl(var(--au-stroke-soft-200));
    border-bottom: 1px solid hsl(var(--au-stroke-soft-200));
    border-radius: 0 !important;
    background: hsl(var(--au-bg-weak-50));
    color: hsl(var(--au-text-sub-600));
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.au-admin__toolbar + .au-admin__table-scroll thead th { border-top: 0; }
/* HeaderClass="text-right" loses to the kit's [&_thead_th]:text-left without this. */
.au-admin__table-scroll thead th.text-right { text-align: right; }
.au-admin__table-scroll thead th.text-right > div { justify-content: flex-end; }
.au-admin__table-scroll thead th button { color: hsl(var(--au-text-soft-400)); }
.au-admin__table-scroll thead th button:hover { color: hsl(var(--au-text-strong-950)); }
.au-admin__table-scroll thead th .size-5 { width: 1rem; height: 1rem; }

.au-admin__table-scroll tbody td {
    height: 56px;
    padding: 8px 12px;
    border-radius: 0 !important;
    border-bottom: 1px solid hsl(var(--au-stroke-soft-200));
    color: hsl(var(--au-text-strong-950));
    font-size: .9375rem;
    line-height: 1.375rem;
}
.au-admin__table-scroll tbody tr:last-child td { border-bottom: 0; }
.au-admin__table-scroll tbody tr:hover td { background: hsl(var(--au-bg-weak-50)); }
/* The kit puts a spacer row between data rows; the hairline does that job now. */
.au-admin__table-scroll tbody tr[aria-hidden="true"] { display: none; }

.au-admin__table-scroll th:first-child,
.au-admin__table-scroll td:first-child { padding-left: 20px; }
.au-admin__table-scroll th:last-child,
.au-admin__table-scroll td:last-child { padding-right: 20px; }

/* ---------- Leftovers from the old markup ---------- */
.pt-3 { padding-top: .75rem; }
@media (min-width: 768px) { .md\:w-1\/2 { width: 50%; } }

/* ---------- Error page (Pages/Error.cshtml) ---------- */
.au-error { display: grid; place-items: center; min-height: 100vh; margin: 0; padding: 16px; background: hsl(var(--au-bg-weak-50)); }
.au-error__card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; max-width: 560px; padding: 28px;
    border: 1px solid hsl(var(--au-stroke-soft-200)); border-radius: 16px; background: hsl(var(--au-bg-white-0));
}
.au-error__icon {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: hsl(var(--au-error-base) / .12); color: hsl(var(--au-error-base)); font-size: 1.375rem; font-weight: 700;
}
.au-error__title { margin: 0; font-size: 1.5rem; font-weight: 600; color: hsl(var(--au-text-strong-950)); }
.au-error__text { margin: 0; font-size: .9375rem; color: hsl(var(--au-text-sub-600)); }
.au-error__details { font-size: .875rem; color: hsl(var(--au-text-sub-600)); }
.au-error__details summary { cursor: pointer; font-weight: 500; color: hsl(var(--au-text-strong-950)); }

/* ---------- Start page (Pages/Main.razor) ----------
   KPI tiles, then cards in rows. Series marks use the primary hue; text always wears text tokens;
   gridlines and axes stay recessive. */
.au-dash { display: flex; flex-direction: column; gap: 16px; }
.au-dash__loading { display: grid; place-items: center; min-height: 320px; }
.au-dash__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.au-dash__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: stretch; }
.au-dash__row > :only-child { grid-column: 1 / -1; }
@media (max-width: 1100px) { .au-dash__row { grid-template-columns: minmax(0, 1fr); } }
.au-dash__card { display: flex; flex-direction: column; min-width: 0; }
.au-dash__card > div { display: flex; flex-direction: column; flex: 1 1 auto; }
.au-dash__card-head {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid hsl(var(--au-stroke-soft-200));
}
.au-dash__card-title { display: flex; flex-direction: column; gap: 2px; }
.au-dash__card-body { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px 20px; flex: 1 1 auto; }
.au-dash__sub { margin-bottom: 8px; }

.au-dash__hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.au-dash__hero-value { font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: hsl(var(--au-text-strong-950)); font-variant-numeric: tabular-nums; }
.au-dash__hero-caption { font-size: .9375rem; color: hsl(var(--au-text-sub-600)); }

.au-dash__publish { justify-content: flex-start; }
.au-dash__publish-link { align-self: flex-start; margin-top: auto; }
.au-dash__facts { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.au-dash__facts > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid hsl(var(--au-stroke-soft-200)); }
.au-dash__facts dt { font-size: .875rem; color: hsl(var(--au-text-sub-600)); }
.au-dash__facts dd { margin: 0; font-size: .9375rem; font-weight: 500; color: hsl(var(--au-text-strong-950)); font-variant-numeric: tabular-nums; }

.au-dash__recent { margin: 0; padding: 4px 8px 8px; list-style: none; }
.au-dash__recent-link {
    color: inherit; text-decoration: none;
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
    border-bottom: 1px solid hsl(var(--au-stroke-soft-200));
}
.au-dash__recent li:last-child .au-dash__recent-link { border-bottom: 0; }
.au-dash__recent-link:hover { background: hsl(var(--au-bg-weak-50)); }
.au-dash__recent-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.au-dash__recent-title { font-weight: 500; color: hsl(var(--au-text-strong-950)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-dash__recent-path { font-size: .8125rem; color: hsl(var(--au-text-soft-400)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-dash__recent-time { flex: none; font-size: .875rem; color: hsl(var(--au-text-sub-600)); font-variant-numeric: tabular-nums; }

/* Stat tile. */
.au-stat {
    color: inherit; text-decoration: none;
    display: grid; grid-template-columns: minmax(0, 1fr) 96px; grid-template-rows: auto auto auto; column-gap: 12px;
    padding: 16px 18px; border-radius: 16px; background: hsl(var(--au-bg-white-0));
    box-shadow: inset 0 0 0 1px hsl(var(--au-stroke-soft-200)); transition: box-shadow .15s ease;
}
.au-stat:hover { box-shadow: inset 0 0 0 1px hsl(var(--au-primary-alpha-24)), 0 4px 16px rgba(14, 18, 27, .06); }
.au-stat__label { grid-column: 1 / -1; font-size: .9375rem; font-weight: 500; color: hsl(var(--au-text-sub-600)); }
.au-stat__value { margin-top: 6px; font-size: 2rem; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: hsl(var(--au-text-strong-950)); font-variant-numeric: tabular-nums; }
.au-stat__meta { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: .8125rem; color: hsl(var(--au-text-soft-400)); }
.au-stat__delta { font-weight: 600; color: hsl(var(--au-text-strong-950)); font-variant-numeric: tabular-nums; }
.au-stat .au-spark { grid-column: 2; grid-row: 2 / 4; align-self: end; }

/* Sparkline: de-emphasis bars, the current month in the accent. */
.au-spark { width: 96px; height: 32px; overflow: visible; }
.au-spark__bar { fill: hsl(var(--au-stroke-sub-300)); }
.au-spark__bar--now { fill: hsl(var(--au-primary-base)); }
.au-spark__zero { fill: hsl(var(--au-stroke-soft-200)); }
.au-spark__slot:hover .au-spark__bar { fill: hsl(var(--au-primary-base)); opacity: .75; }
.au-spark__slot:hover .au-spark__bar--now { opacity: 1; }

/* Column chart. */
.au-col { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.au-col__body { display: grid; grid-template-columns: 44px minmax(0, 1fr); height: 240px; }
.au-col__axis { position: relative; margin: 10px 0 0; }
.au-col__axis span { position: absolute; right: 8px; transform: translateY(50%); font-size: .75rem; color: hsl(var(--au-text-soft-400)); font-variant-numeric: tabular-nums; }
.au-col__plot { position: relative; margin-top: 10px; }
.au-col__grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed hsl(var(--au-stroke-soft-200)); }
.au-col__grid--base { border-top: 1px solid hsl(var(--au-stroke-sub-300)); }
.au-col__empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: .9375rem; color: hsl(var(--au-text-sub-600)); }
.au-col__slots { position: absolute; inset: 0; display: flex; }
.au-col__slot { position: relative; flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; outline: none; cursor: default; }
.au-col__slot:hover, .au-col__slot:focus-visible { background: hsl(var(--au-bg-weak-50) / .7); }
.au-col__bar { width: min(24px, 56%); border-radius: 4px 4px 0 0; background: hsl(var(--au-primary-base) / .55); transition: background-color .15s ease; }
.au-col__bar--now, .au-col__slot:hover .au-col__bar, .au-col__slot:focus-visible .au-col__bar { background: hsl(var(--au-primary-base)); }
.au-col__tip {
    position: absolute; left: 50%; transform: translate(-50%, -8px); z-index: 5; display: none; flex-direction: column; gap: 2px;
    padding: 8px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none;
    background: hsl(var(--au-bg-strong-950)); color: hsl(var(--au-text-white-0)); box-shadow: 0 8px 24px rgba(14, 18, 27, .18);
}
.au-col__slot:hover .au-col__tip, .au-col__slot:focus-visible .au-col__tip { display: flex; }
.au-col__slot:first-child .au-col__tip { left: 0; transform: translate(0, -8px); }
.au-col__slot:last-child .au-col__tip { left: auto; right: 0; transform: translate(0, -8px); }
.au-col__tip-title { font-size: .75rem; opacity: .75; }
.au-col__tip-value { display: flex; align-items: center; gap: 6px; font-size: .875rem; }
.au-col__swatch { width: 8px; height: 8px; border-radius: 2px; background: hsl(var(--au-primary-base)); }
.au-col__labels { display: grid; grid-template-columns: 44px repeat(12, minmax(0, 1fr)); }
.au-col__labels::before { content: ""; }
.au-col__labels span { text-align: center; font-size: .75rem; color: hsl(var(--au-text-soft-400)); overflow: hidden; text-overflow: clip; white-space: nowrap; }
.au-col__table summary { cursor: pointer; font-size: .8125rem; color: hsl(var(--au-text-sub-600)); }
.au-col__table table { margin-top: 8px; border-collapse: collapse; font-size: .875rem; }
.au-col__table th, .au-col__table td { padding: 4px 16px 4px 0; text-align: left; font-weight: 400; color: hsl(var(--au-text-strong-950)); border-bottom: 1px solid hsl(var(--au-stroke-soft-200)); }
.au-col__table td { text-align: right; font-variant-numeric: tabular-nums; }

/* Ranked bars. */
.au-rank { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.au-rank__row { display: grid; grid-template-columns: minmax(90px, 200px) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.au-rank__label { font-size: .875rem; color: hsl(var(--au-text-strong-950)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-rank__track { height: 12px; }
.au-rank__bar { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: hsl(var(--au-primary-base)); }
.au-rank__bar--muted { background: hsl(var(--au-stroke-sub-300)); }
.au-rank__value { min-width: 44px; text-align: right; font-size: .875rem; font-weight: 500; color: hsl(var(--au-text-sub-600)); font-variant-numeric: tabular-nums; }

/* Tall segmented bar (page states). The state colours carry a label and a count in the legend. */
.au-seg { display: flex; flex-direction: column; gap: 10px; }
.au-seg__bar { display: flex; gap: 2px; height: 28px; }
.au-seg__part {
    display: flex; align-items: center; justify-content: center; min-width: 3px; border-radius: 4px;
    font-size: .75rem; font-weight: 600; color: hsl(var(--au-static-white)); outline: none;
}
.au-seg__part:focus-visible { box-shadow: 0 0 0 2px hsl(var(--au-bg-white-0)), 0 0 0 4px hsl(var(--au-primary-base)); }
.au-seg__part--good { background: hsl(var(--au-success-base)); }
.au-seg__part--warning { background: hsl(var(--au-warning-base)); }
.au-seg__part--idle { background: hsl(var(--au-faded-base)); }
.au-seg__part--off { background: hsl(var(--au-neutral-300)); color: hsl(var(--au-neutral-800)); }
.au-seg__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: .875rem; color: hsl(var(--au-text-sub-600)); }
.au-seg__legend li { display: inline-flex; align-items: center; gap: 6px; }
.au-seg__swatch { width: 10px; height: 10px; border-radius: 3px; }
.au-seg__count { font-weight: 600; color: hsl(var(--au-text-strong-950)); font-variant-numeric: tabular-nums; }