/* Shared content components. Tokens: design-tokens.css. Shell geometry: workspace-template.css. */

html {
    font-family: var(--app-font-family);
}

body,
button,
input,
select,
textarea,
optgroup,
option {
    font-family: inherit;
}

::file-selector-button {
    font: inherit;
}

.version-update-prompt { display:grid; gap:14px; direction:rtl; text-align:center; color:var(--app-identity-text); }
.version-update-lead,.version-update-note { margin:0; }
.version-update-lead { font-size:17px; font-weight:700; }
.version-update-note { color:var(--app-identity-muted); font-size:13px; line-height:1.9; }
.version-update-flow { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; }
.version-update-chip { min-width:0; flex:1 1 110px; padding:12px; border:1px solid var(--app-identity-border); border-radius:var(--app-identity-card-radius); background:var(--app-identity-surface-soft); }
.version-update-chip span,.version-update-chip strong { display:block; overflow-wrap:anywhere; }
.version-update-chip span { color:var(--app-identity-muted); font-size:11px; }
.version-update-chip strong { margin-top:4px; font-size:17px; direction:ltr; unicode-bidi:isolate; color:var(--app-identity-text); }
.version-update-next { border-color:var(--app-identity-accent); background:var(--app-identity-accent-soft); }
.version-update-next strong { color:var(--app-identity-accent); }
.version-update-arrow { flex:0 0 24px; color:var(--app-identity-muted); font-size:22px; }

.employee-notices-center {
    box-sizing: border-box;
    position: fixed;
    inset: 82px auto auto 18px;
    z-index: 2147482400;
    display: none;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 12px;
    width: min(460px, calc(100vw - 36px));
    max-height: var(--employee-notices-panel-height, calc(100dvh - 100px));
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--app-identity-border);
    border-radius: var(--app-identity-card-radius);
    background: var(--app-identity-surface);
    box-shadow: var(--app-identity-card-shadow);
    color: var(--app-identity-text);
    direction: rtl;
    text-align: right;
}
.employee-notices-center.is-open { display: grid; }
body.employee-notices-center-open::before { content: ""; position: fixed; inset: 0; z-index: 2147482390; background: var(--app-identity-overlay); }
.employee-notices-center-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--app-identity-border); }
.employee-notices-center-head > div { display: grid; gap: 2px; min-width: 0; }
.employee-notices-center-head strong { font-size: 17px; line-height: 1.5; }
.employee-notices-center-head span { color: var(--app-identity-muted); font-size: 12px; }
.employee-notices-center-close { flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid var(--app-identity-border); border-radius: 6px; background: var(--app-identity-surface-soft); color: var(--app-identity-text); font-size: 22px; line-height: 1; cursor: pointer; }
.employee-notices-center-tabs { display: flex; gap: 6px; overflow-x: auto; min-width: 0; }
.employee-notices-center-tab { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 36px; padding: 5px 9px; border: 1px solid var(--app-identity-border); border-radius: 6px; background: var(--app-identity-surface-soft); color: var(--app-identity-text); font: inherit; font-size: 11px; cursor: pointer; }
.employee-notices-center-tab strong { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 4px; border-radius: 50%; background: var(--app-identity-surface); color: var(--app-identity-text); font-size: 10px; }
.employee-notices-center-tab strong:empty { display: none; }
.employee-notices-center-tab.is-active { border-color: var(--app-identity-accent); background: var(--app-identity-accent-soft); color: var(--app-identity-accent); }
.employee-notices-center .employee-notices-list { display: grid; align-content: start; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 4px; }
.employee-notices-center.is-loading .employee-notices-list { opacity: 0.65; }
.employee-notices-empty { display: grid; align-content: center; gap: 4px; min-height: 120px; padding: 16px; border: 1px dashed var(--app-identity-border); border-radius: 6px; background: var(--app-identity-surface-soft); text-align: center; }
.employee-notices-empty span { color: var(--app-identity-muted); font-size: 12px; }
.employee-notice-card { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--app-identity-border); border-inline-start: 3px solid var(--app-identity-accent); border-radius: 6px; background: var(--app-identity-surface-soft); color: var(--app-identity-text); }
.employee-notice-card.is-clickable { cursor: pointer; }
.employee-notice-card.is-clickable:hover { border-color: var(--app-identity-border-hover); }
.employee-notice-card.is-high { border-inline-start-color: var(--app-identity-warning); }
.employee-notice-card.is-urgent { border-inline-start-color: var(--app-identity-danger); }
.employee-notice-card.is-mail { border-inline-start-color: var(--app-identity-accent); }
.employee-notice-card.is-loading { opacity: 0.65; cursor: wait; }
.employee-notice-card-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--app-identity-accent-soft); color: var(--app-identity-accent); }
.employee-notice-card-icon svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.employee-notice-card-main { min-width: 0; }
.employee-notice-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.employee-notice-labels { display: flex; flex-wrap: wrap; gap: 6px; color: var(--app-identity-muted); font-size: 10px; }
.employee-notice-new-badge { color: var(--app-identity-accent); font-weight: 800; }
.employee-notice-action-hint { color: var(--app-identity-accent); font-size: 10px; }
.employee-notice-card-title { font-size: 13px; font-weight: 800; line-height: 1.7; overflow-wrap: anywhere; }
.employee-notice-card-body { margin-top: 3px; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.employee-notice-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; color: var(--app-identity-muted); font-size: 10px; }
.employee-notices-center-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--app-identity-border); }
.employee-notices-center-actions button { min-height: 36px; padding: 5px 10px; border: 1px solid var(--app-identity-border); border-radius: 6px; background: var(--app-identity-surface-soft); color: var(--app-identity-text); font: inherit; font-size: 11px; cursor: pointer; }
.employee-notices-center-actions button[data-employee-notices-read-all] { border-color: var(--app-identity-accent); color: var(--app-identity-accent); }
.employee-notices-center-actions button[hidden] { display: none; }
.employee-notices-center :is(button, [role="button"]):focus-visible { outline: 2px solid var(--app-identity-focus); outline-offset: 2px; }

.swal2-container .swal2-popup.updates-popup { width: min(590px, calc(100vw - 24px)); }
.swal2-container .swal2-title.updates-modal-title { color: var(--app-identity-text); font-size: 20px; }
.swal2-container .swal2-html-container.updates-modal-html { margin: 0; padding: 0; }
.updates-modal-list { display: grid; align-content: start; gap: 8px; max-height: min(58dvh, 430px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px; direction: rtl; }
.updates-modal-card { padding: 12px; border: 1px solid var(--app-identity-border); border-radius: 6px; background: var(--app-identity-surface-soft); color: var(--app-identity-text); text-align: right; }
.updates-modal-card-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.updates-modal-card h3 { margin: 0; font-size: 13px; line-height: 1.7; }
.updates-modal-card time { color: var(--app-identity-accent); font-size: 11px; white-space: nowrap; }
.updates-modal-card p { margin: 0; color: var(--app-identity-muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }

@media (max-width: 560px) {
    .employee-notices-center { inset: auto 8px max(8px, env(safe-area-inset-bottom)) 8px; width: auto; max-height: min(76dvh, 620px); padding: 12px; }
}

.app-ui-question-group { display: grid; gap: 18px; min-width: 0; }
.app-ui-question-group + .app-ui-question-group { margin-block-start: 28px; }
.app-ui-question-category { display: flex; align-items: center; gap: 10px; padding-block: 10px; border-bottom: 1px solid var(--app-identity-border); color: var(--app-identity-muted); }
.app-ui-question-category h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--app-identity-accent); }
.app-ui-question-category > span { margin-inline-start: auto; font-size: var(--app-font-small); }
.app-ui-question { display: grid; gap: 12px; min-width: 0; }
.app-ui-question.is-invalid { padding: var(--app-space-4); border: 1px solid var(--app-identity-danger); border-radius: var(--app-identity-card-radius); background: var(--app-identity-danger-soft); }
.app-ui-question + .app-ui-question { padding-block-start: 20px; border-top: 1px solid var(--app-identity-border); }
.app-ui-question-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.app-ui-question-head h4 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.8; color: var(--app-identity-text); overflow-wrap: anywhere; }
.app-ui-question-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--app-identity-surface-soft); color: var(--app-identity-muted); font-size: var(--app-font-small); }
@media (max-width: 600px) {
    .app-ui-question-head { grid-template-columns: 28px minmax(0, 1fr); }
    .app-ui-question-head > .app-ui-actions { grid-column: 2; }
}

:where(html, body, body *) { scrollbar-width: thin; scrollbar-color: var(--app-scroll-thumb) var(--app-scroll-track); }
.app-ui-page { width: min(100%, 1480px); min-height: 100dvh; margin-inline: auto; padding: var(--app-space-5); background: var(--app-workspace-page-surface); color: var(--app-identity-text); }
.app-ui-page.is-narrow { max-width: 860px; }
.app-ui-grow { flex: 1 1 240px; }
.app-ui-required { margin-inline-start: var(--app-space-1); color: var(--app-identity-danger); }
.app-ui-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
::-webkit-scrollbar { width: var(--app-scroll-size); height: var(--app-scroll-size); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--app-scroll-track); }
::-webkit-scrollbar-thumb { background: var(--app-scroll-thumb); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--app-scroll-thumb-hover); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports selector(::-webkit-scrollbar) {
    :where(html, body, body *) { scrollbar-width: auto; scrollbar-color: auto; }
}
.app-ui-scroll { overflow: auto; min-width: 0; overscroll-behavior: contain; }
.app-ui-scroll-demo { max-height: 180px; padding: 12px; border: 1px solid var(--app-identity-border); }
.app-ui-scroll-demo > div { min-width: 640px; min-height: 260px; }
.app-ui-date-state { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--app-date-tone, var(--app-identity-border)); border-radius: var(--app-identity-card-radius); color: var(--app-date-tone, var(--app-identity-text)); background: var(--app-date-surface, var(--app-identity-surface)); font-size: var(--app-font-small); }
.app-ui-date-state[data-date-mode="today"] { --app-date-tone: var(--app-date-today); --app-date-surface: var(--app-date-today-surface); }
.app-ui-date-state[data-date-mode="past"] { --app-date-tone: var(--app-date-past); --app-date-surface: var(--app-date-past-surface); }
.app-ui-date-state[data-date-mode="future"] { --app-date-tone: var(--app-date-future); --app-date-surface: var(--app-date-future-surface); }
.app-ui-date-state :where(small, b, em) { color: inherit; }
.app-ui-date-state[aria-pressed="true"] { outline: 2px solid var(--app-date-tone); outline-offset: 2px; }
.app-ui-date-state.is-day { display: grid; grid-template-rows: auto 1fr auto; align-content: center; justify-items: center; min-height: 76px; gap: 5px; padding: 8px 10px; white-space: normal; }
.app-ui-date-state.is-day > strong { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; line-height: 1.6; }
.app-ui-date-card-primary, .app-ui-date-card-status, .app-ui-date-card-meta, .app-ui-date-card-extras { min-width: 0; max-width: 100%; color: inherit; text-align: center; }
.app-ui-date-card-primary { font-size: var(--app-font-small); }
.app-ui-date-card-weekday { display: inline; margin-inline-start: 4px; color: inherit; font-size: var(--app-font-xs); font-style: normal; font-weight: 700; white-space: nowrap; }
.app-ui-date-card-status { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; font-weight: 700; line-height: 1.6; }
.app-ui-date-card-meta, .app-ui-date-card-extras { font-size: var(--app-font-xs); line-height: 1.5; }
.app-ui-date-card-badge { font-size: 10px; line-height: 1.2; }
.app-ui-date-card-extras:empty { display: none; }
.app-ui-date-state.is-day[aria-busy="true"] { position: relative; overflow: hidden; cursor: progress; }
.app-ui-date-state.is-day[aria-busy="true"]::after { content: ""; position: absolute; inset-inline-end: 8px; top: 8px; width: 13px; height: 13px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: app-ui-spin 700ms linear infinite; }
.app-ui-date-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
.app-ui-date-parts { display: grid; grid-template-columns: 76px 128px 96px; gap: 8px; }
.app-ui-date-parts .app-ui-field { min-width: 0; }
@media (max-width: 600px) {
    .app-ui-date-parts { width: 100%; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, 1fr); }
    .app-ui-date-toolbar > .app-ui-actions { width: 100%; }
    .app-ui-date-toolbar > .app-ui-actions > button { flex: 1; }
}

.app-page-loader-progress-track { overflow: hidden; min-height: 8px; border-radius: 999px; background: var(--app-identity-surface-soft); }
.app-page-loader-progress-bar { display: block; height: 100%; min-height: inherit; border-radius: inherit; background-color: var(--app-identity-accent); }
[data-app-loader-mode="indeterminate"] .app-page-loader-progress-track { direction: rtl; }
[data-app-loader-mode="indeterminate"] .app-page-loader-progress-bar { width: 32%; background-color: var(--app-identity-accent); animation: app-loader-wait 1.15s ease-in-out infinite; }
[data-app-loader-mode="indeterminate"] .app-page-loader-progress-meta,
[data-app-loader-mode="indeterminate"] .app-page-loader-percent { display: none; }
@keyframes app-loader-wait {
    from { transform: translateX(100%); }
    to { transform: translateX(-315%); }
}
.app-ui-three-pane {
    display: grid;
    grid-template-columns: 220px minmax(300px, 0.46fr) minmax(420px, 1fr);
    min-width: 0;
    border: 1px solid var(--app-identity-border);
    border-radius: var(--app-identity-card-radius);
    background: var(--app-identity-surface);
    overflow: hidden;
}
.app-ui-three-pane > * { min-width: 0; }
.app-ui-three-pane-context, .app-ui-three-pane-list { border-inline-end: 1px solid var(--app-identity-border); }
@media (max-width: 1100px) {
    .app-ui-three-pane { grid-template-columns: 190px minmax(0, 1fr); }
    .app-ui-three-pane-detail { grid-column: 1 / -1; border-top: 1px solid var(--app-identity-border); }
}
@media (max-width: 760px) {
    .app-ui-three-pane { grid-template-columns: 1fr; }
    .app-ui-three-pane-context, .app-ui-three-pane-list { border-inline-end: 0; border-bottom: 1px solid var(--app-identity-border); }
}
@media (prefers-reduced-motion: reduce) {
    [data-app-loader-mode="indeterminate"] .app-page-loader-progress-bar { animation: none; }
}

html[data-app-theme-reveal]::view-transition-group(root),
html[data-app-theme-reveal]::view-transition-old(root) {
    animation: none;
}

html[data-app-theme-reveal]::view-transition-new(root) {
    mix-blend-mode: normal;
    animation: app-theme-reveal-circle 560ms cubic-bezier(.4, 0, .2, 1) both;
}

html[data-app-theme-reveal]::view-transition {
    pointer-events: none;
}

@keyframes app-theme-reveal-circle {
    from { clip-path: circle(0px at var(--app-theme-origin-x) var(--app-theme-origin-y)); }
    to { clip-path: circle(var(--app-theme-radius) at var(--app-theme-origin-x) var(--app-theme-origin-y)); }
}

@media (prefers-reduced-motion: reduce) {
    html[data-app-theme-reveal]::view-transition-new(root) {
        animation: none;
    }
}
.app-ui-stack, .app-ui-section, .app-ui-field {
    display: grid;
    align-content: start;
    gap: var(--app-density-section-gap);
    min-width: 0;
    color: var(--app-identity-text);
}
.app-ui-stack { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; box-sizing: border-box; }
.app-ui-grid > .app-ui-field { align-content: start; }
.app-ui-section [hidden], .app-ui-section[hidden], .app-ui-stack[hidden], .app-ui-filter-strip[hidden], .app-ui-details[hidden], .app-ui-detail[hidden], .app-ui-card[hidden], .app-btn[hidden], .app-ui-alert[hidden] { display: none; }
.app-ui-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--app-density-grid-gap); width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; }
.app-ui-detail, .app-ui-details > :is(div, span) { display: grid; align-content: start; gap: var(--app-space-1); min-width: 0; box-sizing: border-box; text-align: start; }
.app-ui-detail > span, .app-ui-details > div > dt, .app-ui-details > :is(div, span) > small { color: var(--app-identity-muted); font-size: var(--app-font-small); }
.app-ui-detail > strong, .app-ui-details > :is(div, span) > :is(strong, dd) { margin: 0; color: var(--app-identity-text); font-size: var(--app-font-body); overflow-wrap: anywhere; }
.app-ui-details.is-boxed { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--app-space-3); }
.app-ui-details.is-boxed > :is(div, span) { align-content: center; min-height: 76px; padding: var(--app-space-3) var(--app-space-4); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-control-radius); background: var(--app-identity-surface-soft); }
.app-ui-details.is-boxed > [data-detail-tone] { --app-detail-tone: var(--app-identity-muted); border-color: color-mix(in srgb, var(--app-detail-tone) 36%, var(--app-identity-border)); border-block-start: 3px solid var(--app-detail-tone); background: color-mix(in srgb, var(--app-detail-tone) 7%, var(--app-identity-surface)); }
.app-ui-details.is-boxed > [data-detail-tone="accent"] { --app-detail-tone: var(--app-identity-accent); }
.app-ui-details.is-boxed > [data-detail-tone="success"] { --app-detail-tone: var(--app-identity-success); }
.app-ui-details.is-boxed > [data-detail-tone="warning"] { --app-detail-tone: var(--app-identity-warning); }
.app-ui-details.is-boxed > [data-detail-tone="info"] { --app-detail-tone: var(--app-identity-info); }
.app-ui-details.is-boxed > [data-detail-tone="danger"] { --app-detail-tone: var(--app-identity-danger); }
.app-ui-details.is-boxed > [data-detail-tone] > dt { color: var(--app-detail-tone); font-weight: 700; }
.app-ui-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--app-space-2); min-width: 0; }
.app-ui-detail-heading > .app-btn.is-icon { width: 30px; min-height: 30px; height: 30px; padding: 6px; flex-basis: 30px; color: var(--app-detail-tone, var(--app-identity-accent)); }
.app-ui-detail-heading > .app-btn.is-icon svg { width: 15px; height: 15px; flex-basis: 15px; }
.app-ui-details.is-stacked { grid-template-columns: minmax(0, 1fr); }
.app-ui-value-change { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); align-items: center; gap: var(--app-space-2); width: 100%; min-width: 0; }
.app-ui-value-change > span:not(.app-ui-value-change-arrow) { display: grid; gap: var(--app-space-2); min-width: 0; padding-block: var(--app-space-2); }
.app-ui-value-change small { color: var(--app-identity-muted); font-size: var(--app-font-small); font-weight: 400; }
.app-ui-value-change strong { color: var(--app-identity-text); font-size: var(--app-font-body); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.app-ui-value-change > span:last-child strong { color: var(--app-identity-accent); }
.app-ui-value-change-arrow { color: var(--app-identity-muted); text-align: center; direction: ltr; }
.app-ui-details.is-boxed.is-compact > :is(div, span) { min-height: 52px; padding: var(--app-space-2) var(--app-space-3); border: 0; background: var(--app-identity-surface-soft); }
.app-ui-details.is-stacked dd { white-space: pre-wrap; line-height: 1.8; }
.app-ui-response { display: grid; gap: 12px; margin: 0; min-width: 0; }
.app-ui-response > div { width: 100%; min-width: 0; box-sizing: border-box; padding: 12px 16px; border-inline-start: 3px solid var(--app-identity-border-strong); background: var(--app-identity-surface-soft); }
.app-ui-response > div.is-answer { background: color-mix(in srgb, var(--app-identity-accent) 6%, var(--app-identity-surface)); border-inline-start-color: var(--app-identity-accent); }
.app-ui-response dt { color: var(--app-identity-muted); font-size: var(--app-font-small); font-weight: 600; margin-block-end: 6px; }
.app-ui-response dd { color: var(--app-identity-text); margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; }
.app-ui-response > div:not(.is-answer) dd { font-weight: 600; }
.app-ui-avatar { display: grid; place-items: center; width: 96px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--app-identity-surface-soft); color: var(--app-identity-muted); border: 1px solid var(--app-identity-border); }
.app-ui-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.app-ui-avatar.is-small { width: 36px; height: 36px; flex: 0 0 36px; }
.app-ui-avatar.is-tiny { width: 24px; height: 24px; flex: 0 0 24px; }
.app-ui-avatar:not(.has-image):not(:has(.app-ui-avatar-fallback))::before {
    content: "";
    width: 62%;
    height: 62%;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M4 21v-2a8 8 0 0 1 16 0v2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M4 21v-2a8 8 0 0 1 16 0v2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.app-ui-person { display: flex; align-items: center; gap: var(--app-space-3); min-width: 0; }
.app-ui-person > span:last-child:not(.app-ui-person-identity) { display: grid; gap: var(--app-space-1); min-width: 0; }
.app-ui-person strong { font-size: var(--app-font-body); color: var(--app-identity-text); overflow-wrap: anywhere; }
.app-ui-person small { font-size: var(--app-font-small); color: var(--app-identity-muted); line-height: 1.7; }
.app-ui-person > .app-ui-person-identity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-space-2) var(--app-space-3); min-width: 0; }
.app-ui-person-identity > strong { flex: 0 1 auto; }
.app-ui-person-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-space-2); min-width: 0; }
.app-ui-person-meta .app-ui-badge { max-width: 100%; }
.app-ui-person-meta bdi { font-variant-numeric: tabular-nums; }
.app-ui-avatar-fallback { display: grid; place-items: center; width: 100%; height: 100%; }
.app-ui-avatar-fallback svg { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.app-ui-qr-preview { display: grid; place-items: center; gap: var(--app-space-3); text-align: center; min-width: 0; }
.app-ui-qr-preview img { display: block; width: min(260px, 100%); aspect-ratio: 1; object-fit: contain; }
input[type="file"].app-ui-control { overflow: hidden; }
.app-ui-control::file-selector-button { border: 1px solid var(--app-identity-border-strong); border-radius: var(--app-identity-control-radius); padding: 4px 10px; margin-inline-end: var(--app-space-3); background: var(--app-identity-button-surface); color: var(--app-identity-text); font: inherit; cursor: pointer; }
.app-ui-control::file-selector-button:hover { background: var(--app-identity-button-hover); }
.app-ui-grid {
    display: grid;
    align-content: start;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    align-items: stretch;
    gap: var(--app-density-grid-gap);
    min-width: 0;
}
.app-ui-priority-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--app-identity-border);
    border-inline-start: 4px solid var(--app-identity-accent);
    border-radius: var(--app-identity-card-radius);
    background: var(--app-identity-surface);
    box-shadow: var(--app-identity-card-shadow);
}
.app-ui-priority-main { display: grid; align-content: start; gap: var(--app-space-5); min-width: 0; padding: var(--app-space-6); }
.app-ui-priority-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--app-space-4); min-width: 0; }
.app-ui-priority-heading > div { display: grid; gap: var(--app-space-1); min-width: 0; }
.app-ui-priority-heading > .app-ui-priority-heading-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--app-space-2); }
.app-ui-eyebrow { color: var(--app-identity-accent); font-size: var(--app-font-small); font-weight: 700; }
.app-ui-priority-title { margin: 0; color: var(--app-identity-text); font-size: var(--app-font-feature); line-height: 1.35; font-weight: 700; letter-spacing: 0; }
.app-ui-priority-actions { display: grid; align-content: start; gap: var(--app-space-4); min-width: 0; padding: var(--app-space-6); border-inline-start: 1px solid var(--app-identity-border); background: var(--app-identity-surface-soft); }
.app-ui-priority-actions > header { display: grid; gap: var(--app-space-1); }
.app-ui-status-indicator { display: inline-flex; align-items: center; gap: var(--app-space-2); min-height: 34px; padding: 6px 10px; border-radius: var(--app-identity-control-radius); color: var(--app-identity-muted); background: var(--app-identity-surface-soft); font-size: var(--app-font-small); font-weight: 700; }
.app-ui-status-indicator::before { content: ""; width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: currentColor; }
.app-ui-status-indicator[data-status="active"] { color: var(--app-identity-success); background: var(--app-identity-success-soft); }
.app-ui-status-indicator[data-status="outside"], .app-ui-status-indicator[data-status="pending"] { color: var(--app-identity-warning); background: var(--app-identity-warning-soft); }
.app-ui-status-indicator[data-status="complete"] { color: var(--app-identity-info); background: var(--app-identity-info-soft); }
.app-ui-status-dot { display: inline-block; width: 8px; min-width: 8px; height: 8px; margin-inline: 2px 5px; padding: 0; border: 0; border-radius: 50%; background: currentColor; box-shadow: none; vertical-align: middle; }
.app-ui-status-dot.is-unread { color: var(--app-identity-success); }
.app-ui-command-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--app-space-3); min-width: 0; }
.app-ui-command-grid.is-primary-actions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.app-ui-command {
    --app-command-tone: var(--app-identity-accent);
    display: flex;
    align-items: center;
    gap: var(--app-space-3);
    width: 100%;
    min-width: 0;
    min-height: 76px;
    padding: var(--app-space-3) var(--app-space-4);
    border: 1px solid var(--app-identity-border);
    border-block-start: 3px solid var(--app-command-tone);
    border-radius: var(--app-identity-card-radius);
    background: var(--app-identity-surface);
    color: var(--app-identity-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
    box-shadow: var(--app-identity-button-shadow);
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.app-ui-command:hover:not(:disabled) { border-color: var(--app-command-tone); background: color-mix(in srgb, var(--app-command-tone) 6%, var(--app-identity-surface)); }
.app-ui-command:focus-visible { outline: 2px solid var(--app-identity-focus); outline-offset: 3px; }
.app-ui-command:disabled { color: var(--app-identity-disabled-text); border-color: var(--app-identity-border); background: var(--app-identity-disabled-surface); cursor: not-allowed; box-shadow: none; }
.app-ui-command.is-success { --app-command-tone: var(--app-identity-success); }
.app-ui-command.is-warning { --app-command-tone: var(--app-identity-warning); }
.app-ui-command.is-danger { --app-command-tone: var(--app-identity-danger); }
.app-ui-command.is-info { --app-command-tone: var(--app-identity-info); }
.app-ui-command:is(.is-active-action, .is-attention, .is-active-recall) { border-color: var(--app-command-tone); background: color-mix(in srgb, var(--app-command-tone) 10%, var(--app-identity-surface)); box-shadow: var(--app-identity-focus-ring); }
.app-ui-command > span:last-child { display: grid; align-content: center; gap: var(--app-space-1); min-width: 0; }
.app-ui-command strong { display: block; color: inherit; font-size: var(--app-font-body); line-height: 1.5; overflow-wrap: anywhere; }
.app-ui-command small { display: block; color: var(--app-identity-muted); font-size: var(--app-font-small); line-height: 1.5; overflow-wrap: anywhere; }
.app-ui-command-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--app-identity-control-radius); background: color-mix(in srgb, var(--app-command-tone) 12%, var(--app-identity-surface)); color: var(--app-command-tone); }
.app-ui-command-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-ui-sortable-list { display: grid; gap: var(--app-space-2); min-width: 0; }
.app-ui-sortable-item { display: flex; align-items: center; gap: var(--app-space-3); min-width: 0; padding: var(--app-space-3); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-control-radius); background: var(--app-identity-surface); transition: border-color 140ms ease, background-color 140ms ease, opacity 140ms ease; }
.app-ui-sortable-item:hover { border-color: var(--app-identity-border-hover); background: var(--app-identity-surface-soft); }
.app-ui-sortable-item.is-dragging { opacity: .5; border-color: var(--app-identity-accent); background: var(--app-identity-accent-soft); }
.app-ui-sortable-item > span { display: grid; gap: var(--app-space-1); min-width: 0; }
.app-ui-sortable-item > .app-ui-actions { margin-inline-start: auto; flex-wrap: nowrap; }
.app-ui-sortable-item strong { color: var(--app-identity-text); font-size: var(--app-font-body); overflow-wrap: anywhere; }
.app-ui-sortable-item small { color: var(--app-identity-muted); font-size: var(--app-font-small); overflow-wrap: anywhere; }
.app-ui-sort-handle { cursor: grab; touch-action: manipulation; }
.app-ui-sort-handle:active { cursor: grabbing; }
.app-ui-movement-list { display: grid; gap: var(--app-space-2); }
.app-ui-movement-item { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; gap: var(--app-space-3); min-width: 0; padding: var(--app-space-3) var(--app-space-4); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-control-radius); background: var(--app-identity-surface); }
.app-ui-movement-item[data-status="active"] { border-inline-start: 3px solid var(--app-identity-warning); background: var(--app-identity-warning-soft); }
.app-ui-movement-item > span { display: grid; gap: var(--app-space-1); min-width: 0; }
.app-ui-movement-item small { color: var(--app-identity-muted); font-size: var(--app-font-small); }
.app-ui-movement-item strong { color: var(--app-identity-text); font-size: var(--app-font-body); overflow-wrap: anywhere; }
@media (max-width: 900px) {
    .app-ui-priority-panel { grid-template-columns: minmax(0, 1fr); }
    .app-ui-priority-actions { border-inline-start: 0; border-block-start: 1px solid var(--app-identity-border); }
}
@media (max-width: 600px) {
    .app-ui-movement-item { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.app-ui-card {
    display: grid;
    gap: var(--app-density-section-gap);
    min-width: 0;
    margin: 0;
    padding: var(--app-density-card-padding);
    box-sizing: border-box;
    background: var(--app-identity-surface);
    border: 1px solid var(--app-identity-border);
    border-radius: var(--app-identity-card-radius);
    color: var(--app-identity-text);
    box-shadow: var(--app-identity-card-shadow);
}
.app-ui-card.is-compact { padding: var(--app-density-card-compact-padding); gap: var(--app-space-3); }
.app-ui-card.is-flat { box-shadow: none; }
.app-ui-card:is(.is-active, .active), .app-ui-card[aria-selected="true"] { border-color: var(--app-identity-accent); box-shadow: var(--app-identity-focus-ring); }
.app-ui-card[aria-hidden="true"] { display: none; }
.app-ui-card:has(> .app-ui-card-head) { padding: 0; gap: 0; overflow: hidden; }
.app-ui-card > .app-ui-card-head { padding: var(--app-density-card-head-padding) var(--app-density-card-padding); background: var(--app-identity-surface-soft); }
.app-ui-card > .app-ui-card-body { padding: var(--app-density-card-padding); }
.app-ui-card > .app-ui-card-footer { padding: var(--app-density-card-head-padding) var(--app-density-card-padding); background: var(--app-identity-surface-soft); }
.app-ui-card.is-compact > :is(.app-ui-card-head, .app-ui-card-body, .app-ui-card-footer) { padding: var(--app-density-card-compact-padding); }
.app-ui-card.is-seamless { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.app-ui-card.is-seamless > :is(.app-ui-card-head, .app-ui-card-body, .app-ui-card-footer) { padding-inline: 0; }
.app-ui-card-head, .app-ui-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: var(--app-space-3);
    min-width: 0;
    padding-block-end: var(--app-space-3);
    border-bottom: 1px solid var(--app-identity-border);
    text-align: start;
    color: var(--app-identity-text);
}
.app-ui-record-head { align-items: center; flex-wrap: nowrap; padding-block: var(--app-space-3); }
.app-ui-record-head > .app-ui-disclosure-toggle { width: auto; flex: 1 1 280px; padding-block: 0; }
.app-ui-record-head > .app-ui-actions { flex: 0 1 auto; flex-wrap: nowrap; justify-content: flex-end; }
.app-ui-card-body { min-width: 0; }
.app-btn.app-ui-reference-stamp { min-height: 28px; padding: 3px 8px; gap: 6px; border: 1px dashed var(--app-identity-accent); border-radius: 4px; background: var(--app-identity-accent-soft); color: var(--app-identity-accent); box-shadow: none; font-size: var(--app-font-small); }
.app-ui-review-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); align-items: start; gap: var(--app-space-5); min-width: 0; }
.app-ui-review-layout > * { min-width: 0; }
.app-ui-review-decision { position: sticky; top: var(--app-space-3); align-self: start; }
.app-ui-master-detail { display: grid; grid-template-columns: minmax(240px, 32%) minmax(0, 1fr); gap: var(--app-space-5); min-width: 0; align-items: start; }
.app-ui-master-detail > * { min-width: 0; }
.app-ui-master-detail > :first-child { max-height: 70vh; overflow: auto; }
.app-ui-list-option { display: grid; gap: var(--app-space-2); width: 100%; min-width: 0; padding: var(--app-space-4); border: 0; border-bottom: 1px solid var(--app-identity-border); background: var(--app-identity-surface); color: var(--app-identity-text); font: inherit; text-align: start; overflow-wrap: anywhere; cursor: pointer; }
.app-ui-list-option:is(:hover, .is-active) { background: var(--app-identity-accent-soft); box-shadow: inset -3px 0 var(--app-identity-accent); }
.app-ui-list-option:focus-visible { outline: 2px solid var(--app-identity-focus); outline-offset: -2px; }
@media (max-width: 900px) {
    .app-ui-review-layout { grid-template-columns: minmax(0, 1fr); }
    .app-ui-review-decision { position: static; }
    .app-ui-master-detail { grid-template-columns: minmax(0, 1fr); }
    .app-ui-master-detail > :first-child { max-height: 40vh; }
}
.app-ui-section-head { padding: var(--app-space-3) var(--app-space-4); background: var(--app-identity-surface-soft); border-inline-start: 3px solid var(--app-identity-accent); }
.app-ui-section-head > div:not(.app-ui-actions):not(.app-ui-person), .app-ui-card-head > div:not(.app-ui-actions):not(.app-ui-person) { display: grid; gap: var(--app-space-1); min-width: 0; }
.app-ui-section-head > small, .app-ui-card-head > small { flex-basis: 100%; color: var(--app-identity-muted); font-size: var(--app-font-small); font-weight: 400; line-height: 1.8; }
.app-ui-section-head :where(h1, h2, h3), .app-ui-card-head :where(h1, h2, h3) { margin: 0; font-size: var(--app-font-section); line-height: 1.5; }
.app-ui-section-head :where(p), .app-ui-card-head :where(p) { margin: 0; color: var(--app-identity-muted); font-size: var(--app-font-small); font-weight: 400; line-height: 1.8; }
.app-ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--app-space-4); margin: 0 0 var(--app-space-5); }
.app-ui-stats > div { padding: var(--app-space-4); border-inline-start: 2px solid var(--app-identity-accent); background: var(--app-identity-surface-soft); }
.app-ui-stats dt { color: var(--app-identity-muted); font-size: var(--app-font-small); }
.app-ui-stats dd { margin: 0; color: var(--app-identity-text); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
    .app-ui-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 74px), 1fr)); gap: 6px; margin-bottom: 10px; }
    .app-ui-stats > div { min-width: 0; padding: 6px 7px; }
    .app-ui-stats dt { font-size: 10px; line-height: 1.3; }
    .app-ui-stats dd { font-size: 16px; line-height: 1.25; }
}
.app-ui-card-footer { border-top: 1px solid var(--app-identity-border); padding-block-start: var(--app-space-4); }
.app-ui-record-list { display: grid; gap: var(--app-density-grid-gap); margin-block-start: var(--app-density-section-gap); min-width: 0; }
.app-ui-record-list.is-spacious { gap: var(--app-space-6); }
.app-ui-record-summary { display: grid; gap: var(--app-space-2); min-width: 0; }
.app-ui-record-summary > strong { font-size: 1.12rem; color: var(--app-identity-text); }
.app-ui-record-summary > p { margin: 0; overflow-wrap: anywhere; }
.app-ui-record-summary.is-financial { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--app-space-3) var(--app-space-5); }
.app-ui-record-summary.is-financial > div:first-child { display: grid; gap: var(--app-space-1); min-width: 0; }
.app-ui-record-summary.is-financial > div:first-child > small,
.app-ui-record-summary.is-financial > p > small { display: block; color: var(--app-identity-muted); font-size: var(--app-font-small); }
.app-ui-record-summary.is-financial > div:first-child > strong { color: var(--app-identity-text); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.app-ui-record-summary.is-financial > p { grid-column: 1 / -1; padding-block-start: var(--app-space-3); border-block-start: 1px solid var(--app-identity-border); }
@media (max-width: 600px) { .app-ui-record-summary.is-financial { grid-template-columns: minmax(0, 1fr); } }
.app-ui-thread { display: grid; gap: var(--app-space-4); min-width: 0; padding: var(--app-space-4); border-block-start: 1px solid var(--app-identity-border); }
.app-ui-thread-head, .app-ui-thread-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--app-space-2); }
.app-ui-thread-list { display: grid; gap: var(--app-space-3); max-height: 420px; min-width: 0; margin: 0; padding: var(--app-space-2) 0; list-style: none; overflow-y: auto; overscroll-behavior-y: contain; }
.app-ui-thread-message { display: grid; gap: var(--app-space-2); justify-self: start; width: min(85%, 640px); min-width: 0; box-sizing: border-box; padding: var(--app-space-3); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface-soft); }
.app-ui-thread-message.is-own { justify-self: end; border-color: var(--app-identity-accent); background: var(--app-identity-accent-soft); }
.app-ui-thread-meta { font-size: var(--app-font-small); }
.app-ui-thread-meta > span { color: var(--app-identity-muted); }
.app-ui-thread-message > p { margin: 0; overflow-wrap: anywhere; }
.app-ui-thread-compose { display: grid; gap: var(--app-space-3); padding-block-start: var(--app-space-4); border-block-start: 1px solid var(--app-identity-border); }
.app-ui-thread-compose .app-ui-actions { flex-wrap: wrap; }
.app-ui-communication-list { display: grid; gap: 0; min-width: 0; margin: 0; padding: var(--app-space-2); }
.app-ui-communication-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--app-space-3); min-width: 0; padding: var(--app-space-3); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface); color: var(--app-identity-text); box-shadow: var(--app-identity-card-shadow); cursor: pointer; }
.app-ui-communication-item:is(:hover, .selected, .is-selected, [aria-selected="true"]) { border-color: var(--app-identity-accent); background: var(--app-identity-accent-soft); }
.app-ui-communication-item + .app-ui-communication-item { margin-block-start: var(--app-space-2); }
.app-ui-communication-item.is-unread { border-color: var(--app-identity-success); background: var(--app-identity-success-soft); }
.app-ui-communication-main { display: grid; gap: var(--app-space-2); min-width: 0; }
.app-ui-communication-head { display: flex; align-items: start; justify-content: space-between; gap: var(--app-space-2); min-width: 0; }
.app-ui-communication-subject { min-width: 0; color: var(--app-identity-text); font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.app-ui-communication-meta, .app-ui-communication-preview { color: var(--app-identity-muted); font-size: var(--app-font-small); line-height: 1.7; overflow-wrap: anywhere; }
.app-ui-communication-aside { display: grid; justify-items: end; gap: var(--app-space-2); min-width: 0; }
.app-ui-communication-end { align-self: stretch; display: grid; grid-template-rows: auto 1fr auto; justify-items: left; gap: var(--app-space-2); min-width: max-content; }
.app-ui-communication-end > .app-ui-conversation-hover-slot { grid-row: 1; justify-self: left; margin: 0; }
.app-ui-avatar-stack { grid-row: 3; display: inline-flex; align-items: center; direction: rtl; padding-inline-start: 7px; isolation: isolate; }
.app-ui-avatar-stack > :is(.app-ui-avatar, .app-ui-badge) { position: relative; margin-inline-start: -7px; border: 2px solid var(--app-identity-surface); box-shadow: 0 1px 3px color-mix(in srgb, var(--app-identity-text) 14%, transparent); }
.app-ui-avatar-stack > .app-ui-badge { display: inline-grid; place-items: center; width: 28px; min-width: 28px; height: 28px; padding: 0; box-sizing: border-box; border-radius: 50%; direction: ltr; line-height: 1; }
.app-ui-avatar-stack > :is(.app-ui-avatar, .app-ui-badge):hover { z-index: 2; }
.app-ui-conversation-panel { min-width: 0; color: var(--app-identity-text); background: var(--app-identity-surface); }
.app-ui-conversation-head { display: flex; align-items: start; justify-content: space-between; gap: var(--app-space-3); min-width: 0; padding: var(--app-density-card-head-padding); border-bottom: 1px solid var(--app-identity-border); background: var(--app-identity-surface-soft); }
.app-ui-conversation-list { display: grid; gap: var(--app-space-2); min-width: 0; }
.app-ui-conversation-message { display: grid; gap: 6px; min-width: 0; padding: 8px; border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface); box-shadow: var(--app-identity-card-shadow); font-size: var(--app-font-xs); }
.app-ui-conversation-message.is-own { border-inline-start: 3px solid var(--app-identity-accent); background: var(--app-identity-accent-soft); }
.app-ui-conversation-message.is-success { border-color: color-mix(in srgb, var(--app-identity-success) 45%, var(--app-identity-border)); border-inline-start: 3px solid var(--app-identity-success); background: var(--app-identity-success-soft); }
.app-ui-conversation-message.is-danger { border-color: color-mix(in srgb, var(--app-identity-danger) 45%, var(--app-identity-border)); border-inline-start: 3px solid var(--app-identity-danger); background: var(--app-identity-danger-soft); }
.app-ui-conversation-message.is-warning { border-color: color-mix(in srgb, var(--app-identity-warning) 45%, var(--app-identity-border)); border-inline-start: 3px solid var(--app-identity-warning); background: var(--app-identity-warning-soft); }
.app-ui-conversation-message.is-info { border-color: color-mix(in srgb, var(--app-identity-info) 45%, var(--app-identity-border)); border-inline-start: 3px solid var(--app-identity-info); background: var(--app-identity-info-soft); }
.app-ui-conversation-route { display: flex; align-items: center; flex-wrap: wrap; gap: var(--app-space-2); min-width: 0; }
.app-ui-conversation-message > .app-ui-conversation-head { gap: 6px; padding: 7px 8px; }
.app-ui-conversation-person { display: inline-flex; align-items: center; gap: var(--app-space-2); min-width: 0; max-width: 100%; }
.app-ui-conversation-person > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-ui-conversation-body { min-width: 0; color: var(--app-identity-text); line-height: var(--app-density-copy-leading); overflow-wrap: anywhere; }
.app-ui-conversation-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px; margin-block-start: 5px; padding-block-start: 5px; border-block-start: 1px dashed var(--app-identity-border); }
.app-ui-conversation-hover-slot { position: relative; display: inline-grid; place-items: center; min-width: 72px; min-height: 30px; margin-inline-start: auto; }
.app-ui-conversation-hover-meta,
.app-ui-conversation-hover-actions { grid-area: 1 / 1; transition: opacity .15s ease, visibility .15s ease, transform .15s ease; }
.app-ui-conversation-hover-meta { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--app-identity-border); border-radius: 999px; background: var(--app-identity-surface-soft); color: var(--app-identity-muted); font-size: var(--app-font-xs); font-weight: 800; white-space: nowrap; }
.app-ui-conversation-hover-actions { display: inline-flex; align-items: center; gap: 5px; opacity: 0; visibility: hidden; transform: translateY(2px); }
.app-ui-conversation-hover-slot.is-persistent { display: flex; justify-content: space-between; width: 100%; min-width: 0; gap: 6px; }
.app-ui-conversation-hover-slot.is-persistent :is(.app-ui-conversation-hover-meta, .app-ui-conversation-hover-actions) { position: static; grid-area: auto; transform: none; }
.app-ui-conversation-hover-slot.is-persistent .app-ui-conversation-hover-meta { opacity: 1; visibility: visible; }
.app-ui-conversation-hover-slot.is-persistent .app-ui-conversation-hover-actions { opacity: 1; visibility: visible; }
.app-ui-conversation-reply-action { display: none; }
.app-ui-conversation-message:hover .app-ui-conversation-hover-slot.has-actions .app-ui-conversation-hover-meta,
.app-ui-conversation-message:focus-within .app-ui-conversation-hover-slot.has-actions .app-ui-conversation-hover-meta,
.app-ui-communication-item:hover .app-ui-conversation-hover-slot.has-actions .app-ui-conversation-hover-meta,
.app-ui-communication-item:focus-within .app-ui-conversation-hover-slot.has-actions .app-ui-conversation-hover-meta { opacity: 0; visibility: hidden; }
.app-ui-conversation-message:hover .app-ui-conversation-hover-slot.has-actions .app-ui-conversation-hover-actions,
.app-ui-conversation-message:focus-within .app-ui-conversation-hover-slot.has-actions .app-ui-conversation-hover-actions,
.app-ui-communication-item:hover .app-ui-conversation-hover-slot.has-actions .app-ui-conversation-hover-actions,
.app-ui-communication-item:focus-within .app-ui-conversation-hover-slot.has-actions .app-ui-conversation-hover-actions { opacity: 1; visibility: visible; transform: none; }
.app-ui-conversation-message:is(:hover, :focus-within) .app-ui-conversation-hover-slot.is-persistent .app-ui-conversation-hover-meta { opacity: 1; visibility: visible; }
.app-ui-conversation-message:is(:hover, :focus-within) .app-ui-conversation-hover-slot.is-persistent .app-ui-conversation-hover-actions { opacity: 1; visibility: visible; transform: none; }
.app-ui-conversation-message:is(:hover, :focus-within) .app-ui-conversation-reply-action { display: inline-flex; }
.app-ui-conversation-kind-action { pointer-events: none; }
.app-ui-reader-head { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "summary commands close" "facts facts facts"; align-items: start; gap: 10px; width: 100%; box-sizing: border-box; padding: 14px 16px 12px; border-block-end: 1px solid var(--app-identity-border); background: color-mix(in srgb, var(--app-identity-surface) 97%, transparent); box-shadow: 0 8px 18px rgba(18, 50, 74, .05); backdrop-filter: blur(8px); }
.app-ui-reader-summary { grid-area: summary; min-width: 0; }
.app-ui-reader-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.app-ui-reader-title { min-width: 0; color: var(--app-identity-text); font-size: var(--app-font-title); font-weight: 950; line-height: 1.45; overflow-wrap: anywhere; }
.app-ui-reader-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-block-start: 2px; color: var(--app-identity-muted); font-size: var(--app-font-xs); font-weight: 800; line-height: 1.6; }
.app-ui-reader-meta-separator { width: 4px; height: 4px; border-radius: 50%; background: var(--app-identity-border); }
.app-ui-reader-close { grid-area: close; }
.app-ui-reader-mobile-controls { grid-area: close; display: flex; align-items: center; gap: 5px; }
.app-btn.app-ui-reader-mobile-tools { display: none; }
.app-ui-reader-commands { grid-area: commands; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
.app-ui-reader-facts { grid-area: facts; display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; max-width: 100%; padding-block-start: 9px; border-block-start: 1px solid var(--app-identity-border); overflow-x: auto; overflow-y: hidden; }
.app-ui-reader-facts > :not([hidden]) { flex: 0 0 auto; white-space: nowrap; }
.app-ui-reader-fact { white-space: nowrap; }
.app-ui-reader-facts > .app-ui-actions { margin-inline-start: auto; }
.app-ui-reader-fact { cursor: default; pointer-events: none; }
.app-ui-reader-fact small { color: var(--app-identity-muted); font-size: inherit; font-weight: 800; }
.app-ui-icon.is-star { font-size: 20px; line-height: 1; }
.app-ui-target-picker { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; width: 100%; min-width: 0; }
.app-ui-target-picker-label { display: inline-flex; align-items: center; gap: 5px; color: var(--app-identity-text); font-weight: 900; white-space: nowrap; }
.app-ui-recipient-picker { display: flex; align-items: center; align-content: flex-start; flex-wrap: wrap; gap: 6px; min-width: 0; }
.app-ui-recipient-token { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: min(100%, 260px); min-height: 28px; padding: 2px 7px 2px 4px; box-sizing: border-box; border: 1px solid var(--app-identity-border-strong); border-radius: 999px; background: var(--app-identity-surface); color: var(--app-identity-text); }
.app-ui-recipient-token > .app-ui-avatar { width: 24px; min-width: 24px; max-width: 24px; height: 24px; min-height: 24px; max-height: 24px; aspect-ratio: 1; flex: 0 0 24px; border-radius: 50%; }
.app-ui-recipient-token > .app-ui-avatar img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.app-ui-recipient-token > span:not(.app-ui-avatar) { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-ui-recipient-search.app-ui-control { flex: 1 1 180px; min-width: 120px; min-height: 30px; padding: 4px 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0; }
.app-ui-recipient-search.app-ui-control:is(:focus, :focus-visible) { border: 0; box-shadow: none; outline: 0; }
.app-ui-welcome-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: var(--app-space-4); width: 100%; min-width: 0; box-sizing: border-box; padding: var(--app-density-card-padding); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface); box-shadow: var(--app-identity-card-shadow); }
.app-ui-welcome-card .welcome-avatar-frame { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--app-identity-border); border-radius: 50%; background: var(--app-identity-surface-soft); overflow: hidden; }
.app-ui-welcome-card .welcome-avatar-frame > :is(img, .welcome-avatar-fallback) { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.app-ui-welcome-card .welcome-avatar-fallback { display: grid; place-items: center; color: var(--app-identity-muted); }
.app-ui-welcome-card .welcome-avatar-menu-button,
.app-ui-welcome-card .welcome-avatar-menu,
.app-ui-welcome-card .welcome-approved-badge { display: none; }
.app-ui-welcome-card .welcome-copy { display: grid; gap: 3px; min-width: 0; }
.app-ui-welcome-card .welcome-label { color: var(--app-identity-muted); font-size: var(--app-font-small); font-weight: 700; }
.app-ui-welcome-card .welcome-name { min-width: 0; color: var(--app-identity-text); font-size: var(--app-font-title); font-weight: 900; overflow-wrap: anywhere; }
.app-ui-welcome-card .welcome-role { color: var(--app-identity-muted); font-size: var(--app-font-xs); }
.app-ui-help-button { width: 28px; min-width: 28px; height: 28px; padding: 0; border: 1px solid var(--app-identity-border); border-radius: 50%; background: var(--app-identity-surface); color: var(--app-identity-text); display: inline-grid; place-items: center; font: inherit; font-weight: 900; cursor: pointer; }
.app-ui-target-picker .app-ui-control { min-width: 0; width: 100%; }
.app-ui-target-control { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px; border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-control-radius); background: var(--app-identity-surface); }
.app-ui-target-control:focus-within { border-color: var(--app-identity-primary); box-shadow: 0 0 0 3px var(--app-identity-primary-soft); }
.app-ui-target-control > .app-ui-control { flex: 1 1 180px; min-width: 0; border: 0; box-shadow: none; }
.app-ui-target-results { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 5px); z-index: 12; display: none; max-height: 220px; overflow: auto; padding: 5px; border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-control-radius); background: var(--app-identity-surface); box-shadow: var(--app-identity-card-shadow); }
.app-ui-target-picker.is-dropup .app-ui-target-results { inset-block-start: auto; inset-block-end: calc(100% + 5px); }
.app-ui-target-picker.is-inline { display: flex; flex-wrap: nowrap; }
.app-ui-target-picker.is-inline > .app-ui-target-control { flex: 1 1 auto; }
.app-ui-target-picker.is-compact { grid-template-columns: auto minmax(0, 1fr); width: 100%; max-width: 100%; min-width: 0; gap: 4px; }
.app-ui-target-picker.is-compact .app-ui-target-picker-label { gap: 3px; font-size: 11px; }
.app-ui-target-picker.is-compact .app-ui-help-button { width: 24px; min-width: 24px; height: 24px; font-size: 11px; }
.app-ui-target-picker.is-compact :is(.app-ui-control, .app-ui-target-control) { min-height: 30px; height: 30px; padding-block: 2px; font-size: 11px; }
.app-ui-target-picker.is-compact.is-inline { width: min(100%, 430px); }
.app-ui-target-selection { display: contents; }
.app-ui-target-selection.empty { display: none; }
.app-ui-target-control.is-multi-transfer-target { height: auto !important; min-height: 30px; flex-wrap: wrap; align-items: stretch; }
.app-ui-target-selection.is-multi-target { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; flex: 1 0 100%; width: 100%; min-width: 0; }
.app-ui-target-selection.is-multi-target + .app-ui-control { flex: 1 0 100%; width: 100%; min-height: 28px; height: 28px; }
.app-ui-target-token { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px; min-width: 0; padding: 2px 4px; border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-control-radius); background: var(--app-identity-surface-soft); }
.app-ui-target-token > span:not(.app-ui-avatar) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-ui-target-token > .app-btn.is-icon { width: 24px; min-width: 24px; height: 24px; padding: 0; }
.app-ui-target-results.is-open { display: grid; gap: 3px; }
.app-ui-target-option { display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0; padding: 7px 9px; border: 0; border-radius: var(--app-identity-control-radius); background: transparent; color: var(--app-identity-text); font: inherit; text-align: start; cursor: pointer; }
.app-ui-target-option:hover,
.app-ui-target-option:focus-visible { background: var(--app-identity-primary-soft); outline: 0; }
.app-ui-help-note { grid-column: 1 / -1; color: var(--app-identity-muted); font-size: var(--app-font-xs); }
.app-ui-status { min-height: 1.4em; color: var(--app-identity-muted); font-size: var(--app-font-xs); font-weight: 800; }
.app-ui-status.is-success { color: var(--app-identity-success); }
.app-ui-status.is-warning { color: var(--app-identity-danger); }
.app-btn.app-btn-info { border-color: var(--app-identity-info); background: var(--app-identity-info-soft); color: var(--app-identity-info); }
.app-ui-badge.is-complete { border-color: var(--app-identity-info); background: var(--app-identity-info-soft); color: var(--app-identity-info); }
@media (max-width: 760px) {
    .app-ui-reader-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "summary close" "commands commands" "facts facts"; gap: 6px; padding: 7px 8px; }
    .app-ui-reader-title-row { gap: 4px; }
    .app-ui-reader-title { font-size: var(--app-font-title); line-height: 1.3; }
    .app-ui-reader-meta { gap: 4px; margin-block-start: 1px; line-height: 1.35; }
    .app-ui-reader-commands { padding-block-start: 5px; border-block-start: 1px solid var(--app-identity-border); }
    .app-btn.app-ui-reader-mobile-tools { display: none; }
}
@media (hover: none) {
    .app-ui-conversation-hover-meta { display: inline-flex; }
    .app-ui-conversation-hover-actions { display: none; }
    .app-ui-conversation-hover-slot.is-persistent .app-ui-conversation-hover-actions { display: inline-flex; opacity: 1; visibility: visible; transform: none; }
    .app-ui-conversation-reply-action { display: inline-flex; }
    .app-ui-communication-item .app-ui-conversation-hover-slot { display: flex; align-items: center; gap: 5px; min-width: 0; }
    .app-ui-communication-item .app-ui-conversation-hover-meta,
    .app-ui-communication-item .app-ui-conversation-hover-actions { position: static; grid-area: auto; display: inline-flex; opacity: 1; visibility: visible; transform: none; }
    .app-ui-communication-item .app-ui-conversation-hover-actions { max-width: 100%; overflow-x: auto; }
    .app-ui-communication-item .app-ui-conversation-hover-actions .app-btn.is-icon { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 5px; flex-basis: 28px; }
}
.app-ui-rich-editor { min-height: 130px; padding: var(--app-density-control-padding); border: 1px solid var(--app-identity-input-border); border-radius: var(--app-identity-control-radius); background: var(--app-identity-input-surface); color: var(--app-identity-text); line-height: 1.8; overflow: auto; }
.app-ui-rich-editor:focus { border-color: var(--app-identity-focus); outline: 2px solid color-mix(in srgb, var(--app-identity-focus) 22%, transparent); outline-offset: 1px; }
.app-ui-rich-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-space-1); width: 100%; max-width: 100%; min-width: 0; padding: var(--app-space-2); box-sizing: border-box; border: 1px solid var(--app-identity-border); border-bottom: 0; border-radius: var(--app-identity-control-radius) var(--app-identity-control-radius) 0 0; background: var(--app-identity-surface-soft); }
.app-ui-rich-editor-toolbar > button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-control-radius); background: var(--app-identity-surface); color: var(--app-identity-text); font: 700 var(--app-font-small)/1 var(--app-font-family); cursor: pointer; }
.app-ui-rich-editor-toolbar > button:is(:hover, .active, .is-active, [aria-pressed="true"]) { border-color: var(--app-identity-accent); background: var(--app-identity-accent-soft); color: var(--app-identity-accent); }
.app-ui-rich-editor-toolbar > button:focus-visible { outline: 2px solid var(--app-identity-focus); outline-offset: 2px; }
.app-ui-rich-editor-toolbar + .app-ui-rich-editor { border-start-start-radius: 0; border-start-end-radius: 0; }
.app-ui-workflow-composer { display: grid; gap: var(--app-space-3); width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: var(--app-density-card-padding); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface); box-shadow: var(--app-identity-card-shadow); }
.app-ui-workflow-choices { display: flex; flex-wrap: wrap; gap: var(--app-space-2); min-width: 0; }
.app-ui-workflow-choices > .app-btn:is(.active, [aria-pressed="true"]) { border-color: currentColor; box-shadow: var(--app-identity-focus-ring); }
.app-ui-workflow-composer.is-compact { gap: 5px; padding: 6px; }
.app-ui-workflow-choices.is-compact { flex-wrap: nowrap; gap: 4px; padding: 2px; }
.app-ui-workflow-choices.is-compact > .app-btn { min-height: 30px; height: 30px; padding: 3px 7px; gap: 4px; font-size: 10px; white-space: nowrap; }
.app-ui-workflow-choices.is-compact > .app-btn :is(.app-ui-icon, svg) { width: 15px; height: 15px; flex-basis: 15px; }
.app-ui-workflow-choices.is-compact > .app-btn:is(.active, [aria-pressed="true"]) { outline: 1px solid currentColor; outline-offset: 0; box-shadow: none; }
.app-ui-workflow-footer.is-compact { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; width: 100%; min-width: 0; }
.app-ui-workflow-footer.is-compact > .app-ui-target-picker { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
.app-ui-workflow-footer.is-compact > .app-ui-status:empty,
.app-ui-workflow-footer.is-compact > input[hidden] { display: none; }
.app-ui-workflow-footer.is-compact > .app-btn { flex: 0 0 auto; white-space: nowrap; }
.app-ui-multi-toggle.is-compact { align-self: center; min-height: 30px; height: 30px; padding: 3px 7px; box-sizing: border-box; }
.app-btn.is-loading > .app-ui-icon { display: none; }
@media (max-width: 600px) {
    .app-ui-communication-list { padding: 4px; }
    .app-ui-communication-item { grid-template-columns: 34px minmax(0, 1fr) 126px; gap: 7px; padding: 8px; }
    .app-ui-communication-item + .app-ui-communication-item { margin-block-start: 6px; }
    .app-ui-communication-item > .app-ui-avatar.is-small { width: 34px; height: 34px; flex-basis: 34px; }
    .app-ui-communication-main { gap: 4px; }
    .app-ui-communication-subject { line-height: 1.4; }
    .app-ui-communication-meta, .app-ui-communication-preview { font-size: var(--app-font-xs); line-height: 1.45; }
    .app-ui-communication-aside { grid-column: 1 / -1; width: 100%; }
    .app-ui-communication-end { display: contents; }
    .app-ui-communication-end > .app-ui-conversation-hover-slot { display: contents; }
    .app-ui-communication-end .app-ui-conversation-hover-meta { grid-column: 3; grid-row: 1; justify-self: start; align-self: start; opacity: 1; visibility: visible; }
    .app-ui-communication-end > .app-ui-avatar-stack { grid-column: 3; grid-row: 1; justify-self: start; align-self: start; margin-block-start: 35px; padding-inline-start: 5px; }
    .app-ui-communication-end .app-ui-conversation-hover-actions { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; align-self: end; display: flex; flex-wrap: wrap; width: 100%; max-width: 100%; padding-block-start: 5px; border-block-start: 1px solid var(--app-identity-border); opacity: 1; visibility: visible; transform: none; overflow: visible; scrollbar-width: none; }
    .app-ui-communication-item:is(:hover, :focus-within) .app-ui-conversation-hover-slot.has-actions .app-ui-conversation-hover-meta { opacity: 1; visibility: visible; }
    .app-ui-avatar-stack > :is(.app-ui-avatar, .app-ui-badge) { margin-inline-start: -9px; }
    .app-ui-conversation-head { flex-wrap: wrap; }
}
.app-ui-person-card > .app-ui-card-head { align-items: center; }
.app-ui-person-card > .app-ui-card-head > .app-ui-actions { margin-inline-start: auto; }
.app-ui-person-card > .app-ui-card-body { display: grid; gap: var(--app-space-4); }
.app-ui-person-card > .app-ui-card-body > .app-ui-actions { padding-block-start: var(--app-space-3); border-block-start: 1px solid var(--app-identity-border); }
.app-ui-person-card > .app-ui-card-footer { justify-content: flex-end; }
.app-ui-title { margin: 0; font-size: var(--app-font-title); font-weight: 700; line-height: 1.5; color: var(--app-identity-text); }
.app-ui-note { margin: 0; color: var(--app-identity-muted); font-size: var(--app-font-small); font-weight: 400; line-height: 1.8; overflow-wrap: anywhere; }
pre.app-ui-note { white-space: pre-wrap; }
.app-ui-actions, .app-ui-filter-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-space-2); min-width: 0; }
.app-ui-filter-strip { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-block-end: 3px; scrollbar-width: thin; scrollbar-color: var(--app-identity-border) transparent; }
.app-ui-filter-strip > :not([hidden]) { flex: 0 0 auto; }
.app-ui-filter-strip > .app-ui-chip { white-space: nowrap; }
.app-ui-actions.is-nowrap { flex-wrap: nowrap; flex-shrink: 0; }
.app-ui-actions.is-centered { justify-content: center; }
.app-ui-actions.is-split { justify-content: space-between; }
.app-ui-actions[hidden] { display: none; }
.app-ui-form-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--app-density-form-gap); width: 100%; }
.app-ui-form-layout > :where(.app-ui-section-head, .app-ui-sticky-actions, button[type="submit"]) { grid-column: 1 / -1; }
.app-ui-form-layout.is-single-column { grid-template-columns: minmax(0, 1fr); }
.app-ui-field-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--app-space-2); min-width: 0; }
.app-ui-field-prefix { display: grid; place-items: center; min-width: 32px; min-height: 32px; color: var(--app-identity-muted); font-size: var(--app-font-small); font-weight: 700; }
.app-ui-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: var(--app-space-3); padding: var(--app-space-4); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface); box-shadow: var(--app-identity-card-shadow); }
.app-ui-step-number { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--app-identity-on-accent); background: var(--app-identity-accent); font-size: var(--app-font-body); font-weight: 700; }
.app-ui-step-body { display: grid; gap: var(--app-space-4); min-width: 0; }
.app-ui-wizard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 32%); align-items: start; gap: var(--app-density-grid-gap); width: 100%; }
.app-ui-wizard > .app-ui-section-head { grid-column: 1 / -1; }
.app-ui-wizard-main { display: grid; gap: var(--app-density-section-gap); min-width: 0; }
.app-ui-wizard-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--app-space-2); }
.app-ui-wizard-tab { display: flex; align-items: center; gap: var(--app-space-2); min-height: var(--app-control-height); padding: var(--app-space-2) var(--app-space-3); border: 1px solid var(--app-identity-border-strong); border-radius: var(--app-identity-control-radius); background: var(--app-identity-button-surface); color: var(--app-identity-muted); font: 600 var(--app-font-body)/1.5 var(--app-font-family); cursor: pointer; }
.app-ui-wizard-tab > span { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: var(--app-identity-surface-soft); color: var(--app-identity-muted); font-size: var(--app-font-small); }
.app-ui-wizard-tab:is(.active, [aria-current="step"]) { border-color: var(--app-identity-accent); background: var(--app-identity-accent-soft); color: var(--app-identity-text); box-shadow: var(--app-identity-focus-ring); }
.app-ui-wizard > aside { position: sticky; top: var(--app-space-4); }
@media (max-width: 900px) {
    .app-ui-wizard { grid-template-columns: minmax(0, 1fr); }
    .app-ui-wizard > aside { position: static; }
}
.app-ui-sticky-actions { position: sticky; bottom: 0; z-index: 8; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--app-space-3); margin: var(--app-space-1) 0 0; padding: var(--app-space-3) var(--app-space-4); border-block-start: 1px solid var(--app-identity-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface); box-shadow: var(--app-identity-card-shadow); }
.app-ui-sticky-actions > button[type="submit"] { min-width: 180px; }
@media (max-width: 760px) {
    .app-ui-record-head { align-items: stretch; flex-wrap: wrap; }
    .app-ui-record-head > .app-ui-disclosure-toggle { flex-basis: 100%; }
    .app-ui-record-head > .app-ui-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
    .app-ui-form-layout { grid-template-columns: minmax(0, 1fr); }
    .app-ui-sticky-actions { position: static; margin: 0; }
    .app-ui-sticky-actions > button { flex: 1 1 140px; }
}
.app-ui-divider { width: 100%; height: 1px; margin: var(--app-space-4) 0; border: 0; background: var(--app-identity-border); }
.app-ui-toolbar { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--app-space-3); padding: var(--app-density-card-head-padding); background: var(--app-identity-surface-soft); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-control-radius); }
.app-ui-toolbar.is-filter { padding: var(--app-space-2); background: var(--app-identity-surface); }
.app-ui-toolbar.is-filter > .app-ui-filter-strip { flex: 1 1 0; }
.app-ui-toolbar.is-filter > .app-ui-actions { flex: 0 0 auto; }
.app-ui-toolbar.is-filter.is-stacked > :where(.app-ui-filter-strip, .app-ui-actions) { flex-basis: 100%; }
@media (min-width: 901px) {
    .app-ui-toolbar.is-filter:not(.is-stacked) { flex-wrap: nowrap; }
    .app-ui-toolbar.is-filter:not(.is-stacked) > :where(.app-ui-filter-strip, .app-ui-actions) { flex-wrap: nowrap; }
    .app-ui-toolbar.is-filter:not(.is-stacked) > .app-ui-filter-strip { overflow-x: auto; scrollbar-width: thin; }
}
@media (max-width: 600px) {
    .app-ui-toolbar.is-filter { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
    .app-ui-toolbar.is-filter > .app-ui-filter-strip,
    .app-ui-toolbar.is-filter > .app-ui-actions,
    .app-ui-toolbar.is-filter.is-stacked > .app-ui-filter-strip,
    .app-ui-toolbar.is-filter.is-stacked > .app-ui-actions { flex: 0 0 auto; width: max-content; }
    .app-ui-toolbar.is-filter > .app-ui-filter-strip { max-width: none; overflow: visible; padding-block-end: 0; }
    .app-ui-toolbar.is-filter > .app-ui-actions { flex-wrap: nowrap; }
    .app-ui-toolbar.is-filter :where(.app-btn, .app-ui-chip) { padding: 4px 7px; font-size: var(--app-font-small); white-space: nowrap; }
    .app-ui-toolbar.is-filter .app-ui-actions > .app-btn { flex: 0 0 auto; }
    .app-ui-filter-panel { grid-template-columns: 1fr; padding: var(--app-space-3); }
    .app-ui-filter-panel > .app-ui-actions > .app-btn { flex: 1 1 100%; }
}
.app-ui-toolbar.is-filter :where(.app-btn, .app-ui-chip) { min-height: var(--app-density-filter-control-height); }
.app-ui-toolbar.is-filter .app-ui-chip { padding-block: 8px; }
.app-ui-toolbar.is-filter .app-ui-chip > strong { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding-inline: 6px; border-radius: 999px; background: var(--app-identity-surface-soft); color: inherit; font-size: 11px; font-variant-numeric: tabular-nums; }
.app-ui-toolbar.is-filter .app-ui-chip:is(.is-active, .active, [aria-pressed="true"]) > strong { background: var(--app-identity-surface); }
.app-ui-document-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--app-space-2); width: 100%; padding: var(--app-space-2); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-control-radius); background: var(--app-identity-surface); box-shadow: var(--app-identity-card-shadow); }
.app-ui-document-toolbar.is-paper-width { width: min(210mm, 100%); margin-inline: auto; }
.app-ui-document-sheet { width: min(210mm, 100%); min-height: 297mm; margin: var(--app-space-4) auto; padding: 10mm; border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface); color: var(--app-identity-text); box-shadow: var(--app-identity-card-shadow); overflow: hidden; }
.app-ui-document-head, .app-ui-document-title, .app-ui-document-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--app-space-3); }
.app-ui-document-head { padding-bottom: var(--app-space-2); border-bottom: 2px solid var(--app-identity-text); }
.app-ui-document-brand { display: flex; align-items: center; gap: var(--app-space-2); min-width: 0; }
.app-ui-document-logo { width: 54px; height: 54px; object-fit: contain; flex: 0 0 auto; }
.app-ui-document-brand-copy { display: grid; gap: var(--app-space-1); min-width: 0; }
.app-ui-document-brand-copy strong { font-size: var(--app-font-title); }
.app-ui-document-meta, .app-ui-document-reference, .app-ui-document-facts > div, .app-ui-document-summary > div { padding: var(--app-space-2); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-control-radius); background: var(--app-identity-surface-soft); }
.app-ui-document-meta { text-align: center; }
.app-ui-document-title { padding-block: var(--app-space-3); border-bottom: 1px solid var(--app-identity-border); }
.app-ui-document-title h1 { margin: 0; font-size: var(--app-font-title); }
.app-ui-document-reference { min-width: 128px; text-align: center; }
.app-ui-document-facts, .app-ui-document-summary, .app-ui-document-signatures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--app-space-2); margin-block: var(--app-space-3); }
.app-ui-document-facts { grid-template-columns: 1fr; }
.app-ui-document-facts span, .app-ui-document-summary span, .app-ui-document-meta, .app-ui-document-reference small { color: var(--app-identity-muted); font-size: var(--app-font-small); }
.app-ui-document-section, .app-ui-document-flow, .app-ui-document-entry-body, .app-ui-document-attachments { display: grid; gap: var(--app-space-2); }
.app-ui-document-entry { padding: var(--app-space-2); border: 1px solid var(--app-identity-border); border-inline-start: 4px solid var(--app-identity-accent); border-radius: var(--app-identity-control-radius); background: var(--app-identity-surface); break-inside: avoid; }
.app-ui-document-entry:is(.is-success, .is-approved) { border-inline-start-color: var(--app-identity-success); }
.app-ui-document-entry.is-danger { border-inline-start-color: var(--app-identity-danger); }
.app-ui-document-entry:is(.is-warning, .is-request) { border-inline-start-color: var(--app-identity-warning); }
.app-ui-document-entry-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--app-space-2); padding-bottom: var(--app-space-2); border-bottom: 1px solid var(--app-identity-border); }
.app-ui-document-index { display: inline-grid; place-items: center; width: 24px; aspect-ratio: 1; border-radius: 50%; background: var(--app-identity-accent-soft); color: var(--app-identity-accent); font-size: var(--app-font-small); font-weight: 800; }
.app-ui-document-route, .app-ui-document-entry-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--app-space-2); min-width: 0; }
.app-ui-document-entry-meta { justify-content: flex-end; }
.app-ui-document-entry-body { overflow-wrap: anywhere; white-space: pre-wrap; }
.app-ui-document-entry-body.is-rich { white-space: normal; }
.app-ui-document-entry-body img { max-width: 100%; height: auto; }
.app-ui-document-entry-body table { width: 100%; border-collapse: collapse; }
.app-ui-document-entry-body :is(td, th) { padding: var(--app-space-1); border: 1px solid var(--app-identity-border); }
.app-ui-document-attachments { padding-top: var(--app-space-2); border-top: 1px dashed var(--app-identity-border); }
.app-ui-document-signature { min-height: 74px; padding: var(--app-space-3); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-control-radius); }
.app-ui-document-signature span { display: block; margin-top: var(--app-space-6); padding-top: var(--app-space-2); border-top: 1px dashed var(--app-identity-border); color: var(--app-identity-muted); }
.app-ui-document-qr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--app-space-2); }
.app-ui-document-qr-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--app-space-2); padding: var(--app-space-2); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-control-radius); break-inside: avoid; }
.app-ui-document-footer { margin-top: var(--app-space-3); padding-top: var(--app-space-2); border-top: 1px solid var(--app-identity-border); color: var(--app-identity-muted); font-size: var(--app-font-small); }

@media (max-width: 720px) {
  .app-ui-document-sheet { min-height: 0; padding: var(--app-space-4); }
  .app-ui-document-head, .app-ui-document-title, .app-ui-document-footer, .app-ui-document-entry-head, .app-ui-document-qr-grid, .app-ui-document-qr-card, .app-ui-document-signatures, .app-ui-document-summary { grid-template-columns: 1fr; }
  .app-ui-document-entry-meta { justify-content: flex-start; }
}

@page { size: A4 portrait; margin: 6mm; }
@media print {
  .app-ui-document-toolbar, .app-ui-document-print-hint { display: none; }
  .app-ui-document-sheet { width: 100%; max-width: none; min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none; overflow: visible; }
  .app-ui-document-entry, .app-ui-document-signatures, .app-ui-document-qr-card { break-inside: avoid; }
}
.app-btn.is-filter-toggle[aria-expanded="true"] { color: var(--app-identity-accent); background: var(--app-identity-accent-soft); border-color: var(--app-identity-accent); box-shadow: var(--app-identity-focus-ring); }
.app-btn.is-filter-toggle.has-active-filters:not([aria-expanded="true"]) { color: var(--app-identity-accent); border-color: var(--app-identity-accent); }
.app-btn.is-filter-toggle > strong { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding-inline: 6px; border-radius: 999px; background: var(--app-identity-surface-soft); color: inherit; font-size: 11px; font-variant-numeric: tabular-nums; }
.app-btn.is-filter-toggle[aria-expanded="true"] > strong { background: var(--app-identity-surface); }
.app-ui-filter-toggle-mark { transition: transform 140ms ease; }
.app-btn.is-filter-toggle[aria-expanded="true"] .app-ui-filter-toggle-mark { transform: rotate(180deg); }
.app-ui-field-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--app-space-2); }
.app-ui-steps { display: flex; flex-wrap: wrap; gap: var(--app-space-2); padding-block: var(--app-space-3); border-bottom: 1px solid var(--app-identity-border); }
.app-ui-steps > button { flex: 1 1 130px; }
.app-ui-steps > button[aria-current="step"] { border-color: var(--app-identity-accent); background: var(--app-identity-accent-soft); color: var(--app-identity-accent); }
.app-ui-filter-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); align-items: end; gap: var(--app-density-form-gap); padding-block: var(--app-density-card-head-padding); border-bottom: 1px solid var(--app-identity-border); }
.app-ui-search-disclosure { display: flex; align-items: center; gap: var(--app-space-2); width: var(--app-density-filter-control-height); min-width: 0; }
.app-ui-search-disclosure.is-expanded { width: min(100%, 410px); }
.app-ui-search-disclosure[hidden], .app-ui-search-disclosure-panel[hidden] { display: none; }
.app-ui-search-disclosure-toggle { color: var(--app-identity-accent); }
.app-ui-search-disclosure-toggle.app-btn.is-icon.is-compact { width: var(--app-density-filter-control-height); height: var(--app-density-filter-control-height); min-height: var(--app-density-filter-control-height); flex-basis: var(--app-density-filter-control-height); }
.app-ui-search-disclosure-toggle:is([aria-expanded="true"], .has-value) { border-color: var(--app-identity-accent); background: var(--app-identity-accent-soft); box-shadow: var(--app-identity-focus-ring); }
.app-ui-search-disclosure-panel { flex: 1 1 auto; min-width: 0; }
.app-ui-search-disclosure-panel > .app-ui-control { width: 100%; min-height: 34px; height: 34px; padding-block: 5px; }
@media (max-width: 520px) {
    .app-ui-search-disclosure.is-expanded { width: min(82vw, 410px); }
}
.app-ui-filter-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); align-items: end; gap: var(--app-density-form-gap); padding: var(--app-density-card-padding); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-control-radius); background: var(--app-identity-surface-soft); }
.app-ui-filter-panel > .app-ui-actions { align-self: end; }
.app-ui-filter-panel > .app-ui-actions.is-wide { grid-column: 1 / -1; }
.app-ui-filter-panel[hidden] { display: none; }
.app-ui-date-navigation { flex: 1 1 auto; }
.app-ui-date-navigation > .app-ui-date-state { min-width: min(100%, 190px); min-height: var(--app-control-height); }
.app-ui-date-navigation .app-ui-date-state > :where(span, small, b) { display: block; }
.app-ui-date-calendar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: stretch; gap: var(--app-space-2); min-width: 0; }
.app-ui-date-calendar-track { display: flex; align-items: stretch; gap: var(--app-space-2); min-width: 0; overflow-x: auto; overflow-y: visible; scroll-behavior: smooth; scroll-snap-type: x proximity; padding: 4px 0 12px; }
.app-ui-date-calendar-track > .app-ui-date-state.is-day { flex: 0 0 116px; scroll-snap-align: center; }
.app-ui-date-calendar-nav { align-self: stretch; min-width: 44px; height: auto; }
.app-ui-date-calendar-collapse { flex: 0 0 auto; }
@media (max-width: 600px) {
    .app-ui-date-navigation { width: 100%; }
    .app-ui-date-navigation > .app-ui-actions.is-nowrap { flex: 1 1 100%; }
    .app-ui-date-navigation > .app-ui-actions.is-nowrap > .app-ui-date-state { flex: 1 1 auto; min-width: 0; }
    .app-ui-date-calendar { gap: 5px; }
    .app-ui-date-calendar-track { gap: 5px; }
    .app-ui-date-calendar-track > .app-ui-date-state.is-day { flex-basis: 84px; }
}
.app-ui-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-space-2);
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--app-identity-border);
    border-radius: var(--app-identity-control-radius);
    background: var(--app-identity-surface);
    color: var(--app-identity-text);
    font: 600 var(--app-font-small)/1.5 var(--app-font-family);
    text-decoration: none;
    cursor: pointer;
}
.app-ui-chip:is(.is-active, .active, [aria-pressed="true"]) { background: var(--app-identity-accent-soft); border-color: var(--app-identity-accent); color: var(--app-identity-accent); }
.app-ui-chip.is-success { border-color: color-mix(in srgb, var(--app-identity-success) 45%, var(--app-identity-border)); background: var(--app-identity-success-soft); color: var(--app-identity-success); }
.app-ui-chip.is-danger { border-color: color-mix(in srgb, var(--app-identity-danger) 45%, var(--app-identity-border)); background: var(--app-identity-danger-soft); color: var(--app-identity-danger); }
.app-ui-chip.is-warning { border-color: color-mix(in srgb, var(--app-identity-warning) 45%, var(--app-identity-border)); background: var(--app-identity-warning-soft); color: var(--app-identity-warning); }
.app-ui-chip.is-info { border-color: color-mix(in srgb, var(--app-identity-info) 45%, var(--app-identity-border)); background: var(--app-identity-info-soft); color: var(--app-identity-info); }
.app-ui-chip.is-icon { width: 36px; min-width: 36px; padding-inline: 8px; }
.app-ui-chip > :is(small, strong) { min-width: 0; color: inherit; overflow: hidden; text-overflow: ellipsis; }
.app-ui-chip > small { font-size: var(--app-font-xs); font-weight: 500; }
.app-ui-chip > strong { font-size: var(--app-font-small); font-weight: 700; }
.app-ui-field { gap: var(--app-space-2); text-align: start; }
.app-ui-field.is-wide { grid-column: 1 / -1; }
.app-ui-field > label, .app-ui-field > span, .app-ui-field-label { margin: 0; text-align: start; color: var(--app-identity-text); font: 600 var(--app-font-body)/1.7 var(--app-font-family); }
.app-ui-control,
.swal2-container .swal2-select,
.swal2-container .swal2-input,
.swal2-container .swal2-textarea,
.swal2-container .swal2-file {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: var(--app-control-height);
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid var(--app-identity-input-border);
    border-radius: var(--app-identity-control-radius);
    background: var(--app-identity-input-surface);
    color: var(--app-identity-text);
    font: 400 var(--app-font-body)/1.6 var(--app-font-family);
    box-shadow: var(--app-identity-input-shadow);
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.app-ui-control[hidden] { display: none; }
textarea.app-ui-control { min-height: 128px; resize: vertical; }
.app-ui-time-input { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--app-space-2); align-items: center; min-width: 0; direction: ltr; }
.app-ui-time-input > select { padding-inline: var(--app-space-2); text-align: center; }
select option, select optgroup { background: var(--app-identity-input-surface); color: var(--app-identity-text); }
select option:disabled { color: var(--app-identity-disabled-text); }
.app-ui-password { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-width: 0; position: relative; }
.app-ui-password > .app-ui-control { grid-area: 1 / 1 / 2 / 3; padding-inline-end: calc(var(--app-control-height) + var(--app-space-2)); }
.app-ui-password-toggle { grid-area: 1 / 2; z-index: 1; display: grid; place-items: center; width: var(--app-control-height); height: var(--app-control-height); padding: 0; border: 0; border-radius: var(--app-identity-control-radius); background: transparent; color: var(--app-identity-muted); box-shadow: none; cursor: pointer; appearance: none; transition: color 140ms ease; }
.app-ui-password-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-ui-password-toggle:hover:not(:disabled), .app-ui-password-toggle[aria-pressed="true"] { color: var(--app-identity-text); }
.app-ui-password-toggle:focus { outline: none; }
.app-ui-password-toggle:focus-visible { outline: 2px solid var(--app-identity-focus); outline-offset: -6px; }
.app-ui-password-toggle:disabled { color: var(--app-identity-disabled-text); cursor: not-allowed; }
.app-ui-password-slash { display: none; }
.app-ui-password [aria-pressed="true"] .app-ui-password-slash { display: inline; }
.app-ui-control::placeholder { color: var(--app-identity-input-placeholder); opacity: 1; }
.app-ui-control:where(:hover:not(:disabled):not([readonly]):not(:focus)) { border-color: var(--app-identity-border-hover); }
.app-ui-control[data-state="filled"], .app-ui-control:where([placeholder]:not(:placeholder-shown):not(:focus)) { border-color: var(--app-identity-border-hover); }
.app-ui-control[data-state="success"] { border-color: var(--app-identity-success); }
.app-ui-control:focus { border-color: var(--app-identity-focus); box-shadow: var(--app-identity-focus-ring); }
.app-ui-control[aria-invalid="true"] { border-color: var(--app-identity-danger); background: var(--app-identity-danger-soft); }
.app-ui-field.is-invalid .app-ui-control { border-color: var(--app-identity-danger); background: var(--app-identity-danger-soft); }
.app-ui-control[readonly] { background: var(--app-identity-surface-soft); border-style: dashed; box-shadow: none; }
.app-ui-control:disabled { background: var(--app-identity-disabled-surface); color: var(--app-identity-disabled-text); border-color: var(--app-identity-border); box-shadow: none; cursor: not-allowed; opacity: 1; }
.app-ui-help { font-size: var(--app-font-small); line-height: 1.8; color: var(--app-identity-muted); margin: 0; }
.app-ui-help:empty { display: none; }
.app-ui-error { color: var(--app-identity-danger); }
.app-ui-choice { display: inline-flex; align-items: center; gap: var(--app-space-2); min-height: var(--app-control-height); text-align: start; font: 400 var(--app-font-body)/1.7 var(--app-font-family); color: var(--app-identity-text); cursor: pointer; }
.app-ui-choice > span { display: grid; gap: var(--app-space-1); min-width: 0; overflow-wrap: anywhere; }
.app-ui-choice input { width: 18px; height: 18px; margin: 0; flex: 0 0 18px; accent-color: var(--app-identity-accent); }
.app-ui-choice:has(input:disabled) { color: var(--app-identity-disabled-text); cursor: not-allowed; }
.app-ui-choice.is-card { align-items: start; min-height: var(--app-control-height); padding: var(--app-space-3); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface); }
.app-ui-choice.is-card:has(input:checked) { border-color: var(--app-identity-accent); background: var(--app-identity-accent-soft); box-shadow: var(--app-identity-focus-ring); }
.app-ui-choice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--app-space-2); max-height: 330px; min-width: 0; overflow: auto; padding: var(--app-space-1); }
.app-ui-choice-list > .app-ui-empty { grid-column: 1 / -1; }
.app-ui-choice input:focus-visible { outline: 2px solid var(--app-identity-focus); outline-offset: 3px; }
.app-ui-choice input[role="switch"] { appearance: none; width: 38px; height: 22px; flex-basis: 38px; border: 1px solid var(--app-identity-input-border); border-radius: 12px; background: var(--app-identity-button-hover); position: relative; cursor: inherit; }
.app-ui-choice input[role="switch"]::before { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--app-identity-muted); transition: inset-inline-start 140ms ease; }
.app-ui-choice input[role="switch"]:checked { border-color: var(--app-identity-accent); background: var(--app-identity-accent); }
.app-ui-choice input[role="switch"]:checked::before { inset-inline-start: 19px; background: var(--app-identity-on-accent); }
.app-btn {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-space-2);
    min-height: var(--app-control-height);
    padding: 10px 18px;
    border: 1px solid var(--app-identity-border-strong);
    border-radius: var(--app-identity-control-radius);
    background: var(--app-identity-button-surface);
    color: var(--app-identity-text);
    font: 600 var(--app-font-body)/1.5 var(--app-font-family);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--app-identity-button-shadow);
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.app-btn:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { background: var(--app-identity-button-hover); border-color: var(--app-identity-border-hover); }
.app-btn.app-btn-primary { background: var(--app-identity-accent); border-color: var(--app-identity-accent); color: var(--app-identity-on-accent); }
.app-btn.app-btn-primary:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { background: var(--app-identity-accent-hover); border-color: var(--app-identity-accent-hover); }
.app-btn.app-btn-danger { color: var(--app-identity-danger); background: var(--app-identity-danger-soft); border-color: var(--app-identity-danger); }
.app-btn.app-btn-success { color: var(--app-identity-success); background: var(--app-identity-success-soft); border-color: var(--app-identity-success); }
.app-btn.app-btn-warning { color: var(--app-identity-warning); background: var(--app-identity-warning-soft); border-color: var(--app-identity-warning); }
.app-btn.is-clear-filter { color: var(--app-identity-danger); background: var(--app-identity-danger-soft); border-color: var(--app-identity-danger); box-shadow: none; }
.app-btn.is-clear-filter:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { color: var(--app-identity-danger); background: var(--app-identity-danger-soft); border-color: var(--app-identity-danger); box-shadow: var(--app-identity-focus-ring); }
.app-btn:active:not(:disabled):not([aria-disabled="true"]) { box-shadow: var(--app-identity-pressed-shadow); }
.app-btn[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: 2px; }
.app-btn:is(:disabled, [aria-disabled="true"]) { opacity: 1; color: var(--app-identity-disabled-text); background: var(--app-identity-disabled-surface); border-color: var(--app-identity-border); box-shadow: none; cursor: not-allowed; }
.app-btn[aria-busy="true"] { cursor: progress; color: transparent; }
.app-btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; width: 20px; height: 20px; margin: auto; box-sizing: border-box; border: 2px solid var(--app-identity-border-strong); border-top-color: var(--app-identity-text); border-radius: 50%; animation: app-ui-spin 700ms linear infinite; }
@keyframes app-ui-spin { to { transform: rotate(360deg); } }
.app-btn.is-icon { width: var(--app-control-height); padding: 8px; flex: 0 0 var(--app-control-height); }
.app-btn.is-compact { min-height: 34px; padding: 6px 10px; font-size: var(--app-font-small); }
.app-btn.is-icon.is-compact { width: 34px; height: 34px; padding: 7px; flex-basis: 34px; }
.app-btn.is-icon > .app-ui-icon { flex: 0 0 auto; margin: auto; }
.app-btn svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.app-btn > .app-ui-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; color: inherit; }
.app-ui-section > p { margin: 0; color: var(--app-identity-text); font-size: var(--app-font-body); line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.app-ui-control:focus-visible, .app-btn:focus-visible, .app-ui-chip:focus-visible, .app-ui-link-card:focus-visible { outline: 2px solid var(--app-identity-focus); outline-offset: 3px; }
.app-ui-attention { outline: 2px solid var(--app-identity-focus); outline-offset: 2px; box-shadow: var(--app-identity-focus-ring); }
.app-ui-table-wrap { overflow: auto; min-width: 0; border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface); }
.app-ui-table { border-collapse: collapse; width: 100%; text-align: start; font: 400 var(--app-font-small)/1.7 var(--app-font-family); }
.app-ui-table th, .app-ui-table td { padding: var(--app-density-table-padding-block) var(--app-density-table-padding-inline); border-bottom: 1px solid var(--app-identity-border); vertical-align: middle; text-align: start; color: var(--app-identity-text); }
.app-ui-table th { background: var(--app-identity-surface-soft); color: var(--app-identity-text); font-weight: 700; white-space: nowrap; }
.app-ui-table tbody tr:hover { background: var(--app-identity-surface-soft); }
.app-ui-table tbody tr[aria-selected="true"] { background: var(--app-identity-accent-soft); box-shadow: inset -3px 0 var(--app-identity-accent); }
.app-ui-table-wrap[aria-busy="true"] { cursor: progress; }
.app-ui-table tr:last-child td { border-bottom: 0; }
.app-ui-table-wrap.is-tall { max-height: min(62vh, 620px); }
.app-ui-table.is-wide { min-width: 1080px; }
.app-ui-table.is-fixed { table-layout: fixed; }
.app-ui-table.is-sticky-head th { position: sticky; top: 0; z-index: 1; }
.app-ui-table td.is-number { color: var(--app-identity-accent); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-ui-table :is(th, td).is-time { min-width: 132px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-ui-table :is(th, td).is-actions { width: 112px; min-width: 112px; text-align: center; white-space: nowrap; }
.app-ui-table td.is-actions > .app-ui-actions { min-height: var(--app-control-height); justify-content: center; flex-wrap: nowrap; }
.app-ui-table td.is-pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.app-ui-table tbody tr[data-status="approved"] { background: var(--app-identity-success-soft); }
.app-ui-table tbody tr[data-status="pending"] { background: var(--app-identity-warning-soft); }
.app-ui-table tbody tr[data-status="rejected"] { background: var(--app-identity-danger-soft); }
.app-ui-table tbody tr[data-status="inactive"] { color: var(--app-identity-muted); }
.app-ui-badge { display: inline-flex; align-items: center; gap: var(--app-space-2); padding: 3px 8px; border-radius: 4px; color: var(--app-identity-muted); background: var(--app-identity-surface-soft); font: 600 var(--app-font-small)/1.5 var(--app-font-family); }
.app-ui-badge:is(a) { text-decoration: none; }
.app-ui-badge.is-accent { color: var(--app-identity-accent); background: var(--app-identity-accent-soft); }
.app-ui-badge.is-info { color: var(--app-identity-info); background: var(--app-identity-info-soft); }
.app-ui-badge.is-label { padding: 8px 12px; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); font-size: var(--app-font-body); font-weight: 500; max-width: 100%; overflow-wrap: anywhere; }
.app-ui-badge.is-success { color: var(--app-identity-success); background: var(--app-identity-success-soft); }
.app-ui-badge.is-danger { color: var(--app-identity-danger); background: var(--app-identity-danger-soft); }
.app-ui-badge.is-warning { color: var(--app-identity-warning); background: var(--app-identity-warning-soft); }
.app-ui-alert { padding: var(--app-density-card-head-padding); border-inline-start: 3px solid var(--app-identity-warning); border-radius: var(--app-identity-control-radius); background: var(--app-identity-warning-soft); color: var(--app-identity-warning); font-size: var(--app-font-body); line-height: var(--app-density-copy-leading); }
.app-ui-alert.is-danger { background: var(--app-identity-danger-soft); border-color: var(--app-identity-danger); color: var(--app-identity-danger); }
.app-ui-alert.is-success { background: var(--app-identity-success-soft); border-color: var(--app-identity-success); color: var(--app-identity-success); }
.app-ui-alert.is-neutral { background: var(--app-identity-surface-soft); border-color: var(--app-identity-muted); color: var(--app-identity-muted); }
.app-ui-alert.is-split { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--app-space-4); }
.app-ui-alert.is-split > .app-ui-detail > strong { color: inherit; }
.app-ui-status-summary { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--app-space-4); min-width: 0; }
.app-ui-status-summary > .app-ui-alert { flex: 1 1 260px; }
.app-ui-status-summary > .app-ui-alert > strong { color: inherit; }
.app-ui-status-summary > .app-ui-actions { gap: var(--app-space-3); align-content: center; }
.app-ui-toast { position: fixed; z-index: 9999; inset-block-start: var(--app-space-5); inset-inline-end: var(--app-space-5); display: grid; gap: var(--app-space-1); width: min(360px, calc(100vw - 36px)); padding: var(--app-space-4); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface); color: var(--app-identity-text); box-shadow: var(--app-identity-card-shadow); opacity: 0; transform: translateY(-8px); transition: opacity 180ms ease, transform 180ms ease; }
.app-ui-toast.is-visible { opacity: 1; transform: translateY(0); }
.app-ui-toast.is-preview { position: relative; inset: auto; width: min(360px, 100%); opacity: 1; transform: none; }
.app-ui-toast.is-success { border-color: var(--app-identity-success); background: var(--app-identity-success-soft); }
.app-ui-toast.is-warning { border-color: var(--app-identity-warning); background: var(--app-identity-warning-soft); }
.app-ui-toast:is(.is-danger, .is-error) { border-color: var(--app-identity-danger); background: var(--app-identity-danger-soft); }
.app-ui-toast small { color: var(--app-identity-muted); line-height: 1.7; }
.app-ui-dialog, .swal2-container .swal2-popup { box-sizing: border-box; max-width: calc(100vw - 32px); padding: var(--app-density-dialog-padding); border: 1px solid var(--app-identity-border-strong); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface); color: var(--app-identity-text); box-shadow: var(--app-identity-card-shadow); font-family: var(--app-font-family); }
.app-ui-dialog::backdrop, .swal2-container.swal2-backdrop-show { background: var(--app-identity-overlay); }
.app-ui-dialog.is-wide, .swal2-container .swal2-popup.app-ui-dialog-wide { width: min(1440px, calc(100vw - 24px)); }
.swal2-container .swal2-popup.app-ui-dialog-records { width: min(1040px, calc(100vw - 24px)); }
.swal2-container .swal2-popup.app-ui-dialog-form { width: min(760px, calc(100vw - 32px)); }
.swal2-container .swal2-popup:not(.swal2-toast) { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.app-ui-dialog-content { direction: rtl; max-height: calc(100vh - 150px); overflow: auto; text-align: start; }
.swal2-container .swal2-html-container.app-ui-dialog-content { max-height: none; overflow: visible; min-width: 0; }
.app-ui-modal-backdrop { position: fixed; inset: 0; z-index: 10090; display: grid; place-items: center; padding: var(--app-space-5); background: var(--app-identity-overlay); }
.app-ui-modal-backdrop[hidden] { display: none; }
.app-ui-modal-backdrop > .app-ui-dialog { width: min(100%, 420px); }
.app-ui-modal-open { overflow: hidden; }
.app-ui-cropper-viewport { position: relative; width: min(320px, 100%); aspect-ratio: 1; margin-inline: auto; overflow: hidden; border-radius: var(--app-identity-card-radius); background: var(--app-identity-disabled-surface); touch-action: none; cursor: grab; }
.app-ui-cropper-viewport:active { cursor: grabbing; }
.app-ui-cropper-viewport img { position: absolute; inset-block-start: 0; inset-inline-start: 0; user-select: none; -webkit-user-drag: none; }
.app-ui-cropper-viewport img:not([src]), .app-ui-cropper-viewport img[src=""] { display: none; }
.app-ui-cropper-frame { position: absolute; inset: 0; border: 3px solid var(--app-identity-surface); border-radius: inherit; box-shadow: inset 0 0 0 2000px var(--app-identity-overlay); pointer-events: none; }
.swal2-container .swal2-title { padding: 0; margin: 0; color: var(--app-identity-text); font-size: var(--app-font-title); line-height: 1.6; overflow-wrap: anywhere; }
.swal2-container .swal2-html-container { margin: var(--app-space-4) 0; color: var(--app-identity-muted); font-size: var(--app-font-body); line-height: 1.8; }
.swal2-container .swal2-input-label { justify-content: flex-start; margin: var(--app-space-4) 0 var(--app-space-2); color: var(--app-identity-text); font-size: var(--app-font-body); }
.swal2-container :is(.swal2-select, .swal2-input, .swal2-textarea, .swal2-file) { margin: var(--app-space-2) 0 0; text-align: start; }
.swal2-container .swal2-textarea { min-height: 112px; resize: vertical; }
.swal2-container :is(.swal2-select, .swal2-input, .swal2-textarea, .swal2-file):focus { border-color: var(--app-identity-focus); box-shadow: var(--app-identity-focus-ring); outline: 2px solid var(--app-identity-focus); outline-offset: 3px; }
.swal2-container :is(.swal2-select, .swal2-input, .swal2-textarea):disabled { background: var(--app-identity-disabled-surface); color: var(--app-identity-disabled-text); cursor: not-allowed; }
.swal2-container :is(.swal2-input, .swal2-textarea)::placeholder { color: var(--app-identity-input-placeholder); opacity: 1; }
.swal2-container :is(.swal2-checkbox, .swal2-radio) { gap: var(--app-space-3); flex-wrap: wrap; margin: var(--app-space-4) 0; background: transparent; color: var(--app-identity-text); font-size: var(--app-font-body); }
.swal2-container :is(.swal2-checkbox, .swal2-radio) input { accent-color: var(--app-identity-accent); width: 18px; height: 18px; }
.swal2-container .swal2-validation-message { margin: var(--app-space-4) 0 0; padding: var(--app-space-3); border-radius: var(--app-identity-control-radius); background: var(--app-identity-danger-soft); color: var(--app-identity-danger); font-size: var(--app-font-body); }
.swal2-container .swal2-validation-message::before { background: var(--app-identity-danger); color: var(--app-identity-on-accent); }
.swal2-container .swal2-loader { border-color: var(--app-identity-accent) transparent var(--app-identity-accent) transparent; }
.swal2-container .swal2-footer { border-color: var(--app-identity-border); color: var(--app-identity-muted); font-size: var(--app-font-small); }
.swal2-container .swal2-close { color: var(--app-identity-muted); border-radius: var(--app-identity-control-radius); }
.swal2-container .swal2-close:hover { background: var(--app-identity-surface-soft); color: var(--app-identity-danger); }
.swal2-container .swal2-success-ring { border-color: var(--app-identity-success); }
.swal2-container .swal2-success [class^="swal2-success-line"] { background: var(--app-identity-success); }
.swal2-container .swal2-popup.app-ui-dialog-form .swal2-actions { position: sticky; bottom: 0; z-index: 1; width: 100%; padding-block: var(--app-space-3); background: var(--app-identity-surface); border-top: 1px solid var(--app-identity-border); }
.swal2-container .swal2-actions { gap: var(--app-space-2); margin: var(--app-space-5) 0 0; flex-wrap: wrap; }
.swal2-container .swal2-icon { margin: var(--app-space-2) auto var(--app-space-5); }
.swal2-container .swal2-icon.swal2-error { color: var(--app-identity-danger); border-color: currentColor; background: var(--app-identity-danger-soft); }
.swal2-container .swal2-error [class^="swal2-x-mark-line"] { background: currentColor; }
.swal2-container .swal2-icon.swal2-warning { color: var(--app-identity-warning); border-color: currentColor; background: var(--app-identity-warning-soft); }
.swal2-container .swal2-icon:is(.swal2-info, .swal2-question) { color: var(--app-identity-accent); border-color: currentColor; background: var(--app-identity-accent-soft); }
.swal2-container .swal2-popup.swal2-toast .swal2-icon { margin: 0 var(--app-space-2); }
.swal2-container .swal2-styled { margin: 0; min-height: var(--app-control-height); border: 1px solid var(--app-identity-border-strong); border-radius: var(--app-identity-control-radius); font: 600 var(--app-font-body)/1.5 var(--app-font-family); box-shadow: var(--app-identity-button-shadow); }
.swal2-container .swal2-styled.swal2-confirm { background: var(--app-identity-accent); color: var(--app-identity-on-accent); border-color: var(--app-identity-accent); }
.swal2-container .swal2-styled.swal2-cancel { background: var(--app-identity-button-surface); color: var(--app-identity-text); }
.swal2-container .swal2-styled.swal2-deny { background: var(--app-identity-danger); color: var(--app-identity-surface); border-color: var(--app-identity-danger); }
.swal2-container .swal2-styled:focus-visible { outline: 2px solid var(--app-identity-focus); outline-offset: 3px; }
@media (max-width: 640px) {
    .swal2-container { z-index: 200000; padding: var(--app-space-3); padding-bottom: max(var(--app-space-3), env(safe-area-inset-bottom)); }
    .swal2-container .swal2-popup:not(.swal2-toast) { max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)); padding: var(--app-density-dialog-padding); }
    .swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; padding-block: var(--app-space-3); background: var(--app-identity-surface); }
    .swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled { width: 100%; min-height: 48px; }
    .swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-cancel { grid-column: 1 / -1; }
}
.app-ui-menu { min-width: 180px; max-width: calc(100vw - 32px); margin: 0; padding: var(--app-space-2); border: 1px solid var(--app-identity-border-strong); border-radius: var(--app-identity-control-radius); background: var(--app-identity-surface); color: var(--app-identity-text); box-shadow: var(--app-identity-card-shadow); }
.app-ui-menu > :is(button, a) { display: flex; align-items: center; gap: var(--app-space-2); width: 100%; min-height: var(--app-control-height); padding: var(--app-space-2) var(--app-space-3); border: 0; border-radius: var(--app-identity-control-radius); background: transparent; color: inherit; text-align: start; text-decoration: none; font: inherit; cursor: pointer; }
.app-ui-menu > :is(button, a):hover, .app-ui-menu > [aria-selected="true"] { background: var(--app-identity-surface-soft); }
.app-ui-menu > :is(button, a):focus-visible { outline: 2px solid var(--app-identity-focus); outline-offset: -2px; }
.app-ui-menu > :disabled { color: var(--app-identity-disabled-text); cursor: not-allowed; }
.app-ui-empty { display: grid; place-content: center; gap: var(--app-space-2); min-height: 160px; padding: var(--app-density-card-padding); text-align: center; color: var(--app-identity-muted); }
.app-ui-empty.is-compact { min-height: 112px; padding: var(--app-space-4); border: 1px dashed var(--app-identity-border-strong); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface-soft); }
.app-ui-skeleton-list { display: grid; gap: var(--app-space-3); }
.app-ui-skeleton-card { display: grid; gap: var(--app-space-3); padding: var(--app-density-card-head-padding); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface); }
.app-ui-skeleton { display: block; min-height: 12px; border-radius: 999px; background: var(--app-identity-surface-soft); color: transparent; pointer-events: none; animation: app-ui-skeleton-pulse 900ms ease-in-out infinite alternate; }
.app-ui-skeleton.is-short { width: 44%; }
.app-ui-skeleton.is-medium { width: 68%; }
.app-ui-skeleton.is-long { width: 86%; }
.app-ui-skeleton.is-avatar { width: 36px; height: 36px; min-height: 36px; flex: 0 0 36px; border-radius: 50%; }
.app-ui-skeleton.is-block { width: 100%; min-height: 52px; border-radius: var(--app-identity-control-radius); }
.app-ui-skeleton.is-action { width: 92px; min-height: var(--app-control-height); border-radius: var(--app-identity-control-radius); }
@keyframes app-ui-skeleton-pulse { from { opacity: .55; } to { opacity: 1; } }
.app-ui-audit-note { display: grid; gap: var(--app-space-1); padding: var(--app-space-3); border-inline-start: 3px solid var(--app-identity-accent); background: var(--app-identity-accent-soft); color: var(--app-identity-text); }
.app-ui-audit-note strong { color: var(--app-identity-accent); font-size: 13px; }
.app-ui-audit-note span { color: var(--app-identity-muted); font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.app-ui-scroll-list { display: grid; gap: var(--app-space-3); min-height: 0; min-width: 0; overflow: auto; }
.app-ui-list-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--app-space-3); padding-block: var(--app-space-4); border-bottom: 1px solid var(--app-identity-border); text-align: start; color: var(--app-identity-text); }
.app-ui-list-row > div:not(.app-ui-actions) { display: grid; gap: var(--app-space-1); min-width: 0; }
.app-ui-list-row strong { font-size: var(--app-font-body); font-weight: 600; }
.app-ui-list-row small, .app-ui-list-row span:not(.app-ui-badge) { font-size: var(--app-font-small); color: var(--app-identity-muted); }
.app-ui-list-row[role="link"] { cursor: pointer; }
.app-ui-list-row[role="link"]:hover { background: var(--app-identity-surface-soft); }
.app-ui-list-row:focus-visible { outline: 2px solid var(--app-identity-focus); outline-offset: 2px; }
.app-ui-link-card { display: flex; align-items: start; gap: var(--app-space-4); padding: var(--app-space-5); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface); color: var(--app-identity-text); text-decoration: none; min-width: 0; box-shadow: var(--app-identity-card-shadow); transition: border-color 140ms ease, background-color 140ms ease; }
.app-ui-link-card:hover { border-color: var(--app-identity-accent); background: var(--app-identity-surface-soft); }
.app-ui-link-card[aria-disabled="true"] { color: var(--app-identity-disabled-text); background: var(--app-identity-disabled-surface); border-color: var(--app-identity-border); box-shadow: none; cursor: not-allowed; }
.app-ui-link-card[aria-disabled="true"]:hover { background: var(--app-identity-disabled-surface); border-color: var(--app-identity-border); }
.app-ui-link-card > span:last-child { display: grid; gap: var(--app-space-2); min-width: 0; }
.app-ui-link-card strong { font-size: var(--app-font-body); line-height: 1.7; font-weight: 600; }
.app-ui-link-card small { color: var(--app-identity-muted); font-size: var(--app-font-small); line-height: 1.8; font-weight: 400; }
@media (max-width: 900px) {
    .app-ui-grid:has(> .app-ui-link-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .app-ui-link-card { gap: 7px; padding: 10px; }
    .app-ui-link-card > span:last-child { gap: 2px; }
    .app-ui-link-card strong { font-size: var(--app-font-body); line-height: 1.35; }
    .app-ui-link-card small { font-size: var(--app-font-small); line-height: 1.4; }
}
@media (max-width: 600px) {
    .app-ui-grid:has(> .app-ui-link-card) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)); }
}
.app-ui-icon { display: inline-flex; flex: 0 0 24px; width: 24px; height: 24px; color: var(--app-identity-accent); }
.app-ui-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; }
.app-ui-icon svg * { stroke: currentColor; stroke-width: inherit; }
.app-ui-icon.is-active { color: var(--app-identity-warning); }
.app-ui-progress { display: block; width: 100%; height: 4px; accent-color: var(--app-identity-accent); }
.app-ui-spinner { display: inline-block; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; border: 2px solid var(--app-identity-border); border-top-color: var(--app-identity-accent); border-radius: 50%; animation: app-ui-spin 0.75s linear infinite; }
.app-ui-operation-status { display: flex; align-items: center; gap: var(--app-space-3); }
.app-ui-operation-status small { display: block; margin-top: var(--app-space-1); color: var(--app-identity-muted); }
.app-btn.is-loading { cursor: wait; }
.app-btn.is-loading:not([aria-busy="true"])::before { content: ""; display: inline-block; width: 1em; height: 1em; flex: 0 0 1em; border: 2px solid currentColor; border-inline-start-color: transparent; border-radius: 50%; animation: app-ui-spin 0.75s linear infinite; }
@keyframes app-ui-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .app-ui-spinner, .app-btn.is-loading::before { animation: none; } .app-ui-toast { transition: none; } }
.app-ui-footer { margin: 0; text-align: center; color: var(--app-identity-muted); font-size: 11px; line-height: 1.8; }
.app-ui-footer p { margin: 0; }
.app-ui-file-link { color: var(--app-identity-accent); overflow-wrap: anywhere; text-underline-offset: 3px; }
.app-ui-rating { display: grid; gap: var(--app-space-2); min-width: 0; }
.app-ui-rating-row { display: flex; flex-wrap: wrap; gap: var(--app-space-2); }
.app-ui-rating-option { width: var(--app-control-height); height: var(--app-control-height); flex: 0 0 var(--app-control-height); border: 1px solid var(--app-identity-input-border); border-radius: var(--app-identity-control-radius); background: var(--app-identity-button-surface); color: var(--app-identity-text); font: inherit; cursor: pointer; }
.app-ui-rating-option { --app-rating-tone: color-mix(in srgb, var(--app-rating-from, var(--app-identity-danger)), var(--app-rating-to, var(--app-identity-success)) var(--app-rating-mix, 0%)); color: var(--app-rating-tone); border-color: color-mix(in srgb, var(--app-rating-tone) 45%, var(--app-identity-border)); background: color-mix(in srgb, var(--app-rating-tone) 7%, var(--app-identity-surface)); }
.app-ui-rating-option.is-filled { background: color-mix(in srgb, var(--app-rating-tone) 16%, var(--app-identity-surface)); border-color: var(--app-rating-tone); }
.app-ui-rating-option:is(.is-active, [aria-checked="true"], [aria-pressed="true"]) { background: color-mix(in srgb, var(--app-rating-tone) 25%, var(--app-identity-surface)); border-color: var(--app-rating-tone); color: var(--app-identity-text); outline: 2px solid var(--app-rating-tone); outline-offset: 2px; font-weight: 700; }
.app-ui-rating-option:hover:not(:disabled) { box-shadow: var(--app-identity-control-shadow); }
.app-ui-rating-option:focus-visible { outline: 2px solid var(--app-identity-focus); outline-offset: 2px; }
.app-ui-rating-option:disabled { cursor: not-allowed; opacity: .65; }
.app-ui-rating-labels { display: flex; justify-content: space-between; gap: var(--app-space-2); color: var(--app-identity-muted); font-size: var(--app-font-small); }
.app-ui-dropzone { display: grid; gap: var(--app-space-3); padding: var(--app-space-5); border: 1px dashed var(--app-identity-input-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-input-surface); color: var(--app-identity-text); text-align: center; cursor: pointer; min-width: 0; }
.app-ui-dropzone:is(:focus-within, .is-dragover) { border-color: var(--app-identity-accent); background: var(--app-identity-accent-soft); }
.app-ui-dropzone input[type="file"] { max-width: 100%; }
.app-ui-dropzone.is-invalid { border-color: var(--app-identity-danger); background: var(--app-identity-danger-soft); }
.app-ui-dropzone.is-disabled, .app-ui-dropzone[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.app-ui-timeline { display: grid; gap: var(--app-space-3); min-width: 0; }
.app-ui-timeline > div { display: grid; gap: var(--app-space-3); }
.app-ui-timeline-item { width: 100%; min-width: 0; box-sizing: border-box; padding: var(--app-space-3) var(--app-space-4); border-inline-start: 2px solid var(--app-identity-border-strong); background: var(--app-identity-surface-soft); color: var(--app-identity-text); }
.app-ui-timeline-item.is-approved { border-color: var(--app-identity-success); background: var(--app-identity-success-soft); }
.app-ui-timeline-item:is(.is-rejected, .is-revision) { border-color: var(--app-identity-danger); background: var(--app-identity-danger-soft); }
.app-ui-timeline-item.is-comment { border-color: var(--app-identity-info); background: color-mix(in srgb, var(--app-identity-info) 9%, var(--app-identity-surface)); }
.app-ui-timeline-item.is-pending { border-color: var(--app-identity-warning); background: var(--app-identity-warning-soft); }
.app-ui-timeline-line { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--app-space-2); }
.app-ui-timeline-line small { color: var(--app-identity-muted); }
.app-ui-timeline.is-horizontal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--app-space-2); }
.app-ui-timeline.is-horizontal > .app-ui-title { grid-column: 1 / -1; font-size: var(--app-font-small); }
.app-ui-timeline.is-horizontal > .app-ui-timeline-item { --app-step-color: var(--app-identity-muted); border: 1px solid color-mix(in srgb, var(--app-step-color) 35%, var(--app-identity-border)); border-radius: var(--app-identity-control-radius); padding: var(--app-space-2) var(--app-space-3); }
.app-ui-timeline.is-horizontal > .is-approved { --app-step-color: var(--app-identity-success); }
.app-ui-timeline.is-horizontal > :is(.is-rejected, .is-revision) { --app-step-color: var(--app-identity-danger); }
.app-ui-timeline.is-horizontal > .is-pending { --app-step-color: var(--app-identity-warning); }
.app-ui-timeline.is-horizontal .app-ui-timeline-line > strong { color: var(--app-step-color); }
@media (max-width: 600px) {
    .app-ui-timeline.is-horizontal { grid-template-columns: minmax(0, 1fr); }
}
.app-ui-timeline-item p { margin-block: var(--app-space-2) 0; overflow-wrap: anywhere; }
.app-ui-file-card { min-width: 0; align-content: start; }
.app-ui-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--app-space-4); min-width: 0; }
.app-ui-file-card-status, .app-ui-file-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--app-space-2); min-width: 0; }
.app-ui-file-card > .app-ui-file-link { display: block; min-width: 0; font-weight: 600; line-height: 1.8; }
.app-ui-file-card-footer { margin-block-start: auto; padding-block-start: var(--app-space-3); border-top: 1px solid var(--app-identity-border); }
.app-ui-media-card { align-content: start; }
.app-ui-media { display: block; width: 100%; max-height: 360px; object-fit: contain; border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface-soft); }
.app-ui-disclosure { border-block: 1px solid var(--app-identity-border); padding-block: var(--app-space-3); }
.app-ui-disclosure.is-card { padding: var(--app-space-4); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-card-radius); background: var(--app-identity-surface); box-shadow: var(--app-identity-card-shadow); transition: border-color .18s ease; }
.app-ui-disclosure.is-card:is(.open, [open]) { border-color: var(--app-identity-accent); }
.app-ui-disclosure.is-card > .app-ui-disclosure-toggle { padding-block: 0; }
.app-ui-disclosure.is-card > .app-ui-stack { margin-block-start: var(--app-space-4); border-block-start: 1px solid var(--app-identity-border); }
.app-ui-disclosure > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: var(--app-control-height); list-style: none; cursor: pointer; color: var(--app-identity-text); font-size: var(--app-font-body); line-height: 1.8; }
.app-ui-disclosure > summary::-webkit-details-marker { display: none; }
.app-ui-disclosure > summary::before { content: '\2039'; display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; color: var(--app-identity-muted); font: 28px/1 sans-serif; transition: transform .18s ease; }
.app-ui-disclosure > summary::before, .app-ui-disclosure-mark::before { direction: ltr; unicode-bidi: isolate; }
.app-ui-disclosure[open] > summary::before { transform: rotate(-90deg); }
.app-ui-disclosure > summary > .app-ui-person { flex: 1; min-width: 160px; }
.app-ui-disclosure > summary:hover { color: var(--app-identity-accent); }
.app-ui-disclosure > summary:focus-visible { outline: 2px solid var(--app-identity-focus); outline-offset: 3px; }
.app-ui-code { max-width: 100%; overflow: auto; padding: var(--app-space-4); border: 1px solid var(--app-identity-border); border-radius: var(--app-identity-control-radius); background: var(--app-identity-surface-soft); color: var(--app-identity-text); font-size: var(--app-font-small); text-align: start; }
.app-ui-document-sheet > .app-ui-code.is-document-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.app-ui-choice > span { min-width: 0; }
.app-ui-choice > span > small { display: block; color: var(--app-identity-muted); font-size: var(--app-font-small); line-height: 1.8; }
.app-ui-disclosure > .app-ui-stack { padding-block-start: var(--app-space-4); }
.app-ui-disclosure-toggle { display: flex; align-items: center; gap: var(--app-space-3); width: 100%; min-width: 0; min-height: var(--app-control-height); padding: var(--app-space-3) 0; border: 0; background: none; text-align: start; color: var(--app-identity-text); font: 400 var(--app-font-body)/1.7 var(--app-font-family); cursor: pointer; }
.app-ui-disclosure-toggle > .app-ui-stack { flex: 1; width: auto; }
.app-ui-disclosure-copy { display: grid; gap: var(--app-space-1); flex: 1 1 220px; min-width: 0; color: var(--app-identity-text); }
.app-ui-disclosure-copy > strong { font-size: var(--app-font-title); line-height: 1.6; overflow-wrap: anywhere; }
.app-ui-disclosure-copy > :is(small, em) { color: var(--app-identity-muted); font-size: var(--app-font-small); font-style: normal; line-height: 1.7; overflow-wrap: anywhere; }
.app-ui-disclosure-toggle > .app-ui-actions { justify-content: flex-end; }
.app-ui-disclosure-mark { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; color: var(--app-identity-muted); font-size: 0; }
.app-ui-disclosure-mark::before { content: '\2039'; font: 28px/1 sans-serif; transition: transform .18s ease; }
[aria-expanded="true"] > .app-ui-disclosure-mark::before { transform: rotate(-90deg); }
.app-ui-status-edge { border-inline-start: 4px solid var(--app-status-edge, var(--app-identity-border)); }
.app-ui-status-edge[data-status="approved"], .app-ui-status-edge[data-status="active"] { --app-status-edge: var(--app-identity-success); }
.app-ui-status-edge[data-status="rejected"] { --app-status-edge: var(--app-identity-danger); }
.app-ui-status-edge[data-status="pending"] { --app-status-edge: var(--app-identity-warning); }
.app-ui-status-edge[data-status="not-sent"], .app-ui-status-edge[data-status="inactive"] { --app-status-edge: var(--app-identity-muted); }
.app-ui-status-edge[data-status="needs-clarification"] { --app-status-edge: var(--app-identity-info); }
.app-ui-disclosure.is-card.app-ui-status-edge { border-inline-start: 4px solid var(--app-status-edge, var(--app-identity-border)); }
.app-ui-review-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.app-ui-review-list { display: grid; min-width: 0; }
.app-ui-review-entry { min-width: 0; padding-block: 16px; }
.app-ui-review-entry + .app-ui-review-entry { border-block-start: 2px solid var(--app-identity-border-strong); margin-block-start: 8px; padding-block-start: 24px; }
.app-ui-review-entry .app-ui-review-history { gap: 10px; }
.app-ui-review-entry .app-ui-review-history p { margin-block-start: 4px; }
.app-ui-review-history > li { min-width: 0; border-inline-start: 3px solid var(--app-identity-border); padding-inline-start: 14px; }
.app-ui-review-history > li.is-feedback { border-color: var(--app-identity-warning); background: var(--app-identity-warning-soft); padding: 12px 14px; }
.app-ui-review-history > li.is-revision { border-color: var(--app-identity-accent); background: var(--app-identity-accent-soft); padding: 12px 14px; }
.app-ui-review-history header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.app-ui-review-history small { color: var(--app-identity-muted); }
.app-ui-review-history p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; line-height: 1.9; color: var(--app-identity-text); }
.app-ui-disclosure-toggle:hover .app-ui-disclosure-mark { color: var(--app-identity-accent); }
.app-ui-disclosure-toggle:focus-visible { outline: 2px solid var(--app-identity-focus); outline-offset: 2px; }
.app-auth { margin: 0; background: var(--app-workspace-page-surface); color: var(--app-identity-text); font: 400 var(--app-font-body)/1.8 var(--app-font-family); }
:where(.app-auth) *, :where(.app-auth) *::before, :where(.app-auth) *::after { box-sizing: border-box; letter-spacing: 0; }
.app-auth [hidden], .app-ui-stack[hidden], .app-ui-field[hidden], .app-ui-progress[hidden] { display: none; }
.app-auth-main { min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: var(--app-space-5); padding: var(--app-space-5); }
.app-auth-panel { width: min(100%, 480px); padding: var(--app-space-6); gap: var(--app-space-5); }
.app-auth-brand { display: flex; align-items: center; justify-content: flex-start; gap: var(--app-space-4); width: 100%; padding-block-end: var(--app-space-4); border-block-end: 1px solid var(--app-identity-border); text-align: start; }
.app-auth-brand > div { min-width: 0; }
.app-auth-brand img { width: 88px; height: 88px; flex: 0 0 88px; object-fit: contain; }
.app-auth-brand strong { display: block; font-size: 18px; line-height: 1.8; font-weight: 700; overflow-wrap: anywhere; }
.app-auth-panel .app-ui-control { text-align: start; }
.app-auth-panel h1 { margin: 0; font-size: 24px; line-height: 1.5; }
@media (max-width: 900px) {
    .app-ui-page { padding: var(--app-density-card-padding); }
    .app-ui-priority-main, .app-ui-priority-actions { gap: var(--app-density-section-gap); padding: var(--app-density-card-padding); }
    .app-ui-command-grid, .app-ui-file-grid { gap: var(--app-density-grid-gap); }
    .app-ui-command { min-height: 56px; padding: 7px 10px; }
    .app-ui-stack, .app-ui-section, .app-ui-field { gap: var(--app-density-section-gap); }
    .app-ui-section-head { padding: 6px var(--app-density-card-head-padding); }
    .app-ui-card-head, .app-ui-section-head { gap: var(--app-space-2); padding-block-end: var(--app-space-2); }
    .app-ui-field { gap: 4px; }
    .app-ui-field > label, .app-ui-field > span, .app-ui-field-label { font-size: var(--app-font-body); line-height: 1.45; }
    .app-ui-control, .swal2-container :is(.swal2-select, .swal2-input, .swal2-textarea, .swal2-file) { padding: 6px 9px; font-size: 16px; }
    textarea.app-ui-control { min-height: 84px; }
    .app-btn { min-height: var(--app-control-height); padding: 5px 9px; font-size: var(--app-font-body); }
    .app-btn.is-compact { min-height: 32px; padding: 4px 8px; }
    .app-ui-chip { min-height: 32px; padding: 4px 8px; }
    .app-ui-actions, .app-ui-filter-strip { gap: 6px; }
    .app-ui-toolbar { gap: 6px; padding: 6px; }
    .app-ui-toolbar.is-filter .app-ui-chip { padding-block: 4px; }
    .app-ui-toolbar.is-filter :is(.app-ui-chip, .app-btn.is-filter-toggle) > strong { min-width: 18px; min-height: 18px; padding-inline: 4px; font-size: var(--app-font-xs); }
    .app-ui-filter-panel { gap: var(--app-density-form-gap); padding: var(--app-density-card-padding); }
    .app-ui-details.is-boxed > :is(div, span) { min-height: 52px; padding: 6px 8px; }
    .app-ui-badge.is-label { padding: 4px 7px; font-size: var(--app-font-small); }
    .app-ui-alert.is-split { gap: var(--app-space-2); }
    .app-ui-alert { padding: var(--app-density-card-compact-padding); font-size: var(--app-font-body); }
    .app-ui-record-summary > strong { font-size: var(--app-font-section); }
    .app-ui-record-summary.is-financial > div:first-child > strong { font-size: var(--app-font-title); }
    .app-ui-timeline { gap: 6px; font-size: var(--app-font-body); }
    .app-ui-timeline > .app-ui-title { font-size: var(--app-font-section); }
    .app-ui-timeline-item,
    .app-ui-timeline.is-horizontal > .app-ui-timeline-item { padding: 6px 8px; }
    .app-ui-timeline-line { gap: 4px; line-height: 1.45; }
    .app-ui-timeline-line > :is(span, strong) { font-size: var(--app-font-body); }
    .app-ui-timeline-item > :is(small, em) { font-size: var(--app-font-small); line-height: 1.5; }
    .app-ui-empty { min-height: 88px; }
    .app-ui-dropzone, .app-ui-disclosure.is-card { padding: var(--app-density-card-padding); }
    .app-ui-list-row { padding-block: var(--app-space-2); }
    .app-ui-toast { inset-block-start: var(--app-space-3); inset-inline-end: var(--app-space-3); padding: var(--app-density-card-head-padding); }
    .app-ui-menu { padding: 6px; }
}
@media (max-width: 900px) and (pointer: coarse) {
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea, [contenteditable="true"]) { font-size: 16px !important; }
}
.app-auth-links { justify-content: space-between; padding-block-start: var(--app-space-3); border-block-start: 1px solid var(--app-identity-border); }
.app-auth-links :is(button, a) { border: 0; background: none; padding: 8px 0; color: var(--app-identity-accent); font: inherit; font-size: var(--app-font-small); text-decoration: underline; cursor: pointer; }
@media (max-width: 520px) {
    .app-auth-main { gap: var(--app-space-3); padding: var(--app-space-3); }
    .app-auth-panel { gap: var(--app-space-3); padding: var(--app-space-4); }
    .app-auth-brand { gap: var(--app-space-3); padding-block-end: var(--app-space-3); }
    .app-auth-brand img { width: 64px; height: 64px; flex-basis: 64px; }
    .app-auth-brand strong { font-size: 15px; line-height: 1.55; }
    .app-auth-panel h1 { font-size: 19px; line-height: 1.4; }
    .app-ui-person-card > .app-ui-card-head > .app-ui-actions { width: 100%; margin-inline-start: 0; }
    .app-ui-person-card > :is(.app-ui-card-head, .app-ui-card-body, .app-ui-card-footer) { padding: 10px; }
    .app-ui-person-card > .app-ui-card-footer { gap: 6px; justify-content: flex-start; }
    .app-ui-person-card > .app-ui-card-footer > .app-btn { flex: 0 1 auto; min-height: 34px; padding: 6px 9px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .app-ui-control, .app-btn, .app-ui-link-card, .app-ui-choice input[role="switch"]::before { transition: none; }
    .app-btn[aria-busy="true"]::after { animation: none; }
    .app-ui-skeleton { animation: none; }
}
/* Shared dense workspace for complete, editable administration records. */
.app-ui-management-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--app-space-3);
    min-width: 0;
}
.app-ui-management-card,
.app-ui-management-grid > :is([data-employee-row], [data-user-row]) {
    min-width: 0;
    align-content: start;
}
.app-ui-management-grid > :is([data-employee-row], [data-user-row]) > :is(.app-ui-card-head, .app-ui-card-body, .app-ui-card-footer),
.app-ui-management-card > :is(.app-ui-card-head, .app-ui-card-body, .app-ui-card-footer),
.app-ui-management-editor {
    padding: var(--app-space-3);
}
.app-ui-management-grid > [data-employee-row] > .app-ui-card-head,
.app-ui-management-grid > [data-user-row] > .app-ui-card-head,
.app-ui-management-card > .app-ui-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--app-space-2);
}
.app-ui-management-grid .app-ui-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--app-space-2);
}
.app-ui-management-grid :is(.app-ui-form-layout, .app-ui-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--app-space-2);
}
.app-ui-management-grid .app-ui-choice-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: var(--app-space-2);
}
.app-ui-management-grid .app-ui-person > .app-ui-avatar {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    flex: 0 0 40px;
}
.app-ui-management-editor {
    display: grid;
    gap: var(--app-space-3);
    border-block-start: 1px solid var(--app-identity-border);
}
.app-ui-management-editor-title { color: var(--app-identity-text); font-weight: 700; }
.app-ui-management-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0;
    min-width: 0;
}
.app-ui-management-columns.is-three {
    grid-template-columns: minmax(220px, .85fr) minmax(280px, 1fr) minmax(360px, 1.25fr);
}
.app-ui-management-column {
    display: grid;
    align-content: start;
    gap: var(--app-space-3);
    min-width: 0;
    padding-inline: var(--app-space-4);
}
.app-ui-management-column .app-ui-form-layout.is-single { grid-template-columns: minmax(0, 1fr); }
.app-ui-management-column + .app-ui-management-column { border-inline-start: 1px solid var(--app-identity-border); }
.app-ui-management-submit {
    justify-self: center;
    width: auto;
    min-width: 140px;
}
.app-ui-management-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--app-space-2) var(--app-space-3);
    min-width: 0;
}
.app-ui-management-head-meta > small { color: var(--app-identity-muted); }
.app-ui-management-head-meta > .app-ui-alert {
    display: inline-flex;
    align-items: center;
    gap: var(--app-space-2);
    width: auto;
    min-height: 30px;
    margin: 0;
    padding: 4px 8px;
    font-size: var(--app-font-xs);
}
.app-ui-virtual-list > * {
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-block-size: auto 520px;
}
@media (max-width: 760px) {
    .app-ui-management-grid { grid-template-columns: minmax(0, 1fr); }
    .app-ui-management-grid > [data-employee-row] > .app-ui-card-head,
    .app-ui-management-grid > [data-user-row] > .app-ui-card-head,
    .app-ui-management-card > .app-ui-card-head { align-items: flex-start; }
    .app-ui-management-card > .app-ui-card-head > .app-ui-details { width: 100%; }
    .app-ui-management-columns { grid-template-columns: minmax(0, 1fr); gap: var(--app-space-4); }
    .app-ui-management-columns.is-three { grid-template-columns: minmax(0, 1fr); }
    .app-ui-management-column { padding-inline: 0; }
    .app-ui-management-column + .app-ui-management-column { padding-block-start: var(--app-space-4); border-inline-start: 0; border-block-start: 1px solid var(--app-identity-border); }
    .app-ui-management-head-meta { width: 100%; justify-content: flex-start; }
    .app-ui-management-grid > :is([data-employee-row], [data-user-row]) > :is(.app-ui-card-head, .app-ui-card-body, .app-ui-card-footer),
    .app-ui-management-card > :is(.app-ui-card-head, .app-ui-card-body, .app-ui-card-footer),
    .app-ui-management-editor { padding: var(--app-space-2); }
}