/* Spectrum generic application renderer. Opt-in with body.spectrum-app. */
.spectrum-app :where(.tenant-chip, .hero-meta-sub, .breadcrumbs, .hero-title-wrap):empty { display: none; }
:root {
    --sp-canvas: #f3f5f4;
    --sp-surface: #ffffff;
    --sp-surface-muted: #e9eeec;
    --sp-text: #17242a;
    --sp-text-muted: #617178;
    --sp-rule: #c8d1cf;
    --sp-accent: #d99a19;
    --sp-link: #245e70;
    --sp-success: #13745f;
    --sp-warning: #9a5b08;
    --sp-danger: #b33b36;
    --sp-quota-ok: #13745f;
    --sp-quota-warning: #b57900;
    --sp-quota-critical: #b33b36;
    --sp-focus: #0c6f8a;
    --sp-radius: 6px;
    --sp-control-height: 44px;
    --sp-font-body: "Aptos", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    --sp-font-display: "Segoe UI Variable Display", "Aptos Display", "Segoe UI", system-ui, sans-serif;
    --sp-font-data: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

/* A project may recolor the stable Spectrum administration shell without
   replacing its structure or behavior. UARM is the first declarative consumer. */
.spectrum-app[data-project="uarm-intranet"] {
    --sp-accent: #ea4e4a;
    --sp-accent-strong: #cf3e3a;
    --sp-focus: #232b2c;
    background: #f4f4f4;
}

.spectrum-app[data-project="uarm-intranet"] .sidebar {
    background: #232b2c;
    border-color: #232b2c;
}

.spectrum-app[data-project="uarm-intranet"] .sidebar,
.spectrum-app[data-project="uarm-intranet"] .sidebar a,
.spectrum-app[data-project="uarm-intranet"] .sidebar .muted {
    color: #fff;
}

.spectrum-app[data-project="uarm-intranet"] .nav-link:hover,
.spectrum-app[data-project="uarm-intranet"] .nav-link.is-active {
    background: #ea4e4a;
    border-color: #ea4e4a;
    color: #fff;
}

.spectrum-app[data-project="uarm-intranet"] .hero.panel {
    border-top: 4px solid #ea4e4a;
}

.spectrum-app[data-project="uarm-intranet"] .hero-tenant-logo {
    background: #fff;
    border-radius: 12px;
    padding: 6px 10px;
}

.spectrum-app[data-project="uarm-intranet"] .record-identity {
    margin: -0.35rem 0 1.15rem;
    color: #767c6c;
    font-size: .82rem;
}

.spectrum-app[data-project="uarm-intranet"] .record-identity code {
    color: inherit;
    font: inherit;
}

.spectrum-app .resource-field-current {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
}

.spectrum-app .resource-current-name {
    min-width: 0;
    padding: .75rem .9rem;
    overflow: hidden;
    border: 1px solid var(--sp-border, #cbd5e1);
    border-radius: 10px;
    background: var(--sp-surface, #fff);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spectrum-app .resource-policy-help {
    margin: .45rem 0 0;
    color: var(--sp-muted, #64748b);
    font-size: .83rem;
}

.spectrum-app .resource-browser-dialog {
    width: min(920px, calc(100vw - 2rem));
    max-height: min(760px, calc(100vh - 2rem));
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgb(35 43 44 / 28%);
}

.spectrum-app .resource-browser-dialog::backdrop { background: rgb(35 43 44 / 64%); }
.spectrum-app .resource-browser-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: inherit; }
.spectrum-app .resource-browser-header,
.spectrum-app .resource-browser-toolbar,
.spectrum-app .resource-browser-actions { display: flex; gap: .75rem; align-items: center; padding: 1rem 1.2rem; }
.spectrum-app .resource-browser-header { justify-content: space-between; border-bottom: 1px solid var(--sp-border, #dbe4f0); }
.spectrum-app .resource-browser-header h3 { margin: 0; }
.spectrum-app .resource-browser-toolbar { flex-wrap: wrap; background: #f7f7f5; }
.spectrum-app .resource-browser-toolbar input[type="search"] { flex: 1 1 18rem; }
.spectrum-app .resource-browser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; padding: 1rem 1.2rem; overflow: auto; }
.spectrum-app .resource-browser-item { display: grid; gap: .45rem; padding: .65rem; border: 1px solid var(--sp-border, #dbe4f0); border-radius: 12px; cursor: pointer; }
.spectrum-app .resource-browser-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #eef0ed; }
.spectrum-app .resource-browser-item span { overflow-wrap: anywhere; font-size: .82rem; }
.spectrum-app .resource-browser-actions { justify-content: flex-end; border-top: 1px solid var(--sp-border, #dbe4f0); }

@media (max-width: 680px) {
    .spectrum-app .resource-field-current { grid-template-columns: 1fr; }
    .spectrum-app .resource-browser-dialog { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); }
    .spectrum-app .resource-browser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.spectrum-app {
    margin: 0;
    background: var(--sp-canvas);
    color: var(--sp-text);
    font: 15px/1.45 var(--sp-font-body);
}

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

.spectrum-app a {
    color: var(--sp-link);
}

.spectrum-app button,
.spectrum-app input,
.spectrum-app select,
.spectrum-app textarea {
    font: inherit;
}

.spectrum-app :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--sp-focus);
    outline-offset: 2px;
}

.spectrum-app .layout {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 0;
    min-height: 100dvh;
    padding: 0;
}

.spectrum-app .sidebar {
    overflow: hidden;
    border: 0;
    border-right: 1px solid var(--sp-rule);
    border-radius: 0;
    background: var(--sp-surface);
    box-shadow: none;
}

.spectrum-app .sidebar-inner {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    align-content: start;
    align-items: start;
    gap: 20px;
    min-height: 100dvh;
    padding: 24px 18px;
}

.spectrum-app .brand-kicker,
.spectrum-app .eyebrow {
    margin: 0 0 6px;
    color: var(--sp-text-muted);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.spectrum-app .brand h1,
.spectrum-app .panel-title,
.spectrum-app .hero-meta-title {
    font-family: var(--sp-font-display);
    font-weight: 650;
    letter-spacing: -0.025em;
}

.spectrum-app .brand h1 {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.1;
}

.spectrum-app .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.spectrum-app .vis-brand-logo {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 7px;
    object-fit: contain;
    background: var(--sp-accent);
}

.spectrum-app .brand p,
.spectrum-app .muted,
.spectrum-app .hero-meta-sub,
.spectrum-app .exploration-meta,
.spectrum-app .hint {
    color: var(--sp-text-muted);
}

.spectrum-app .tenant-chip,
.spectrum-app .actor-chip,
.spectrum-app .context-pill,
.spectrum-app .sidebar-meta {
    border: 1px solid var(--sp-rule);
    border-radius: var(--sp-radius);
    background: var(--sp-surface);
}

.spectrum-app .tenant-chip,
.spectrum-app .actor-chip,
.spectrum-app .context-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    font-size: 0.88rem;
}

.spectrum-app .sidebar-meta {
    padding: 12px;
}

.spectrum-app .sidebar-meta strong,
.spectrum-app .sidebar-meta span {
    display: block;
}

.spectrum-app .sidebar-meta span {
    margin-top: 3px;
    color: var(--sp-text-muted);
    font-size: 0.86rem;
}

.spectrum-app .sidebar-nav {
    display: grid;
    align-self: start;
    gap: 2px;
}

.spectrum-app .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 11px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sp-text);
    font-weight: 560;
    text-decoration: none;
}

.spectrum-app .nav-link:hover,
.spectrum-app .nav-link.is-active {
    background: var(--sp-surface-muted);
}

.spectrum-app .nav-link.is-active::before {
    position: absolute;
    inset-block: 7px;
    inset-inline-start: -11px;
    width: 3px;
    background: var(--sp-accent);
    content: "";
}

.spectrum-app .sidebar-foot {
    display: grid;
    gap: 8px;
    margin-top: auto;
}

.spectrum-app .main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    min-width: 0;
}

.spectrum-app .panel {
    border: 0;
    border-radius: 0;
    background: var(--sp-surface);
    box-shadow: none;
}

.spectrum-app .panel-inner {
    padding: 22px 28px;
}

.spectrum-app .hero.panel {
    border-bottom: 1px solid var(--sp-rule);
}

.spectrum-app .hero-inner {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(18rem, 1fr) auto;
    align-items: center;
    gap: 24px;
}

.spectrum-app .hero-host-title {
    margin-bottom: 7px;
    color: var(--sp-text);
    font-size: 0.86rem;
    font-weight: 650;
}

.spectrum-app .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    color: var(--sp-text-muted);
    font-size: 0.86rem;
}

.spectrum-app .crumb-sep {
    opacity: 0.55;
}

.spectrum-app .hero-center {
    display: flex;
    justify-content: center;
}

.spectrum-app .hero-title-wrap {
    display: grid;
    gap: 3px;
}

.spectrum-app .hero-meta-title {
    font-size: 1.45rem;
    line-height: 1.15;
}

.spectrum-app .hero-meta {
    min-width: 190px;
    text-align: right;
}

.spectrum-app .hero-side,
.spectrum-app .hero-controls {
    display: flex;
    align-items: center;
}

.spectrum-app .hero-side {
    gap: 16px;
}

.spectrum-app .hero-controls {
    gap: 6px;
}

.spectrum-app .tone-button,
.spectrum-app .icon-button {
    display: inline-grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--sp-radius);
    background: transparent;
    color: var(--sp-text-muted);
    cursor: pointer;
    text-decoration: none;
}

.spectrum-app .tone-button:hover,
.spectrum-app .icon-button:hover {
    background: var(--sp-surface-muted);
    color: var(--sp-text);
}

.spectrum-app .tone-button {
    position: relative;
}

.spectrum-app .tone-state {
    position: absolute;
    right: 2px;
    bottom: 2px;
    display: none;
    padding: 1px 2px;
    border-radius: 3px;
    background: var(--sp-text);
    color: var(--sp-surface);
    font-size: 0.42rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
}

.spectrum-app .tone-button[data-active="true"] {
    border-color: var(--sp-accent);
    background: color-mix(in srgb, var(--sp-accent) 18%, var(--sp-surface));
    color: var(--sp-text);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sp-accent) 35%, transparent);
}

.spectrum-app .tone-button[data-active="true"] .tone-state {
    display: block;
}

.spectrum-app.high-contrast .tone-button[data-active="true"] {
    border-color: #fff;
    background: #ff0;
    color: #000;
    box-shadow: 0 0 0 2px #fff;
}

.spectrum-app.high-contrast .tone-button[data-active="true"] .tone-state {
    background: #000;
    color: #ff0;
}

.spectrum-app .tone-icon svg,
.spectrum-app .icon-button svg,
.spectrum-app .row-indicators svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.spectrum-app .ui-icon {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spectrum-app .vis-badge {
    width: 40px;
    height: 40px;
    padding: 3px;
    border-radius: var(--sp-radius);
    background: var(--sp-accent);
    object-fit: contain;
}

.spectrum-app .main-content {
    display: grid;
    align-content: start;
    gap: 0;
    min-width: 0;
}

.spectrum-app .main-content > .panel {
    min-width: 0;
}

.spectrum-app .panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.spectrum-app .panel-header.split {
    align-items: center;
}

.spectrum-app .panel-title {
    margin: 0;
    font-size: 1.65rem;
    line-height: 1.15;
}

.spectrum-app button,
.spectrum-app .button,
.spectrum-app .tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    gap: 6px;
    padding: 8px 13px;
    border: 1px solid var(--sp-rule);
    border-radius: var(--sp-radius);
    background: var(--sp-surface);
    color: var(--sp-text);
    cursor: pointer;
    font-weight: 620;
    text-decoration: none;
}

.spectrum-app button:hover,
.spectrum-app .button:hover,
.spectrum-app .tab-button:hover {
    border-color: var(--sp-text-muted);
    background: var(--sp-surface-muted);
}

.spectrum-app .notice {
    padding: 12px 14px;
    border: 1px solid var(--sp-rule);
    border-left: 3px solid var(--sp-accent);
    border-radius: var(--sp-radius);
    background: var(--sp-surface);
    color: var(--sp-text);
}

.spectrum-app .notice.warning {
    border-left-color: var(--sp-warning);
}

.spectrum-app .list-filters {
    display: flex;
    align-items: end;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 0;
    border-top: 1px solid var(--sp-rule);
}

.spectrum-app .filter-field {
    display: grid;
    gap: 5px;
    min-width: 220px;
    color: var(--sp-text-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.spectrum-app .search-field {
    flex: 1 1 22rem;
    max-width: 32rem;
}

.spectrum-app .search-field input {
    width: 100%;
    min-height: 40px;
    padding: 7px 11px;
    border: 1px solid var(--sp-rule);
    border-radius: var(--sp-radius);
    background: var(--sp-surface);
    color: var(--sp-text);
}

.spectrum-app .search-field input:focus {
    border-color: var(--sp-accent);
    outline: 3px solid color-mix(in srgb, var(--sp-accent) 18%, transparent);
}

.spectrum-app .sort-link {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 3px;
}

.spectrum-app .sort-link:hover {
    text-decoration: underline;
}

.spectrum-app .feature-picker {
    border: 1px solid var(--sp-rule);
    border-radius: var(--sp-radius);
    padding: 12px;
}

.spectrum-app .feature-picker legend {
    padding: 0 5px;
    font-weight: 650;
}

.spectrum-app .feature-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px 14px;
}

.spectrum-app .feature-options label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
}

.spectrum-app .filter-field select,
.spectrum-app .page-size-form select {
    min-height: 40px;
    padding: 7px 32px 7px 10px;
    border: 1px solid var(--sp-rule);
    border-radius: var(--sp-radius);
    background: var(--sp-surface);
    color: var(--sp-text);
}

.spectrum-app .table-wrap {
    overflow: auto;
    border: 1px solid var(--sp-rule);
    border-radius: var(--sp-radius);
    background: var(--sp-surface);
}

.spectrum-app .table-wrap table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.spectrum-app .table-wrap th,
.spectrum-app .table-wrap td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--sp-rule);
    text-align: left;
    vertical-align: middle;
}

.spectrum-app .table-wrap th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--sp-surface-muted);
    color: var(--sp-text-muted);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.035em;
}

.spectrum-app .table-wrap tbody tr:last-child td {
    border-bottom: 0;
}

.spectrum-app .table-wrap tbody tr:hover,
.spectrum-app .table-wrap tbody tr:focus-within {
    background: var(--sp-surface-muted);
    background: color-mix(in srgb, var(--sp-link) 5%, var(--sp-surface));
}

.spectrum-app [data-role="measure"],
.spectrum-app [data-role="datetime"],
.spectrum-app .pagination-summary {
    font-variant-numeric: tabular-nums;
}

.spectrum-app [data-role="identifier"] {
    font-family: var(--sp-font-data);
    font-size: 0.9em;
}

.spectrum-app [data-role="datetime"][data-freshness="stale"],
.spectrum-app [data-role="datetime"][data-freshness="future_invalid"],
.spectrum-app [data-role="datetime"][data-freshness="incomplete"] {
    color: var(--sp-warning);
    font-weight: 650;
}

.spectrum-app .indicator-heading,
.spectrum-app .indicator-cell {
    width: 40px;
    padding-inline: 6px;
    text-align: center;
}

.spectrum-app .row-indicators {
    display: inline-flex;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.spectrum-app .row-indicators [data-severity="success"] {
    color: var(--sp-success);
}

.spectrum-app .row-indicators [data-severity="warning"] {
    color: var(--sp-warning);
}

.spectrum-app .row-indicators [data-severity="danger"] {
    color: var(--sp-danger);
}

.spectrum-app tr[data-severity="warning"] > td:first-child,
.spectrum-app tr[data-severity="danger"] > td:first-child {
    box-shadow: inset 3px 0 0 var(--sp-warning);
}

.spectrum-app tr[data-severity="danger"] > td:first-child {
    box-shadow: inset 3px 0 0 var(--sp-danger);
}

.spectrum-app .row-actions-heading,
.spectrum-app .row-actions {
    width: 1%;
    white-space: nowrap;
    text-align: end;
}

.spectrum-app .row-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 2px;
}

.spectrum-app .pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 58px;
    gap: 16px;
    padding: 8px 4px;
}

.spectrum-app .pagination-summary {
    margin: 0;
    color: var(--sp-text-muted);
    font-size: 0.88rem;
}

.spectrum-app .pagination-pages {
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.spectrum-app .page-gap {
    min-width: 24px;
    color: var(--sp-text-muted);
    text-align: center;
}

.spectrum-app .page-size-form {
    display: flex;
    justify-self: end;
    gap: 6px;
}

.spectrum-app .pagination-tools { display: flex; justify-self: end; align-items: center; gap: 12px; }
.spectrum-app .page-jump-form { display: flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--sp-text-muted); font-size: .88rem; }
.spectrum-app .page-jump-form label { display: flex; align-items: center; gap: 5px; }
.spectrum-app .page-jump-form input { width: 4.2rem; min-height: 36px; padding: 6px 7px; border: 1px solid var(--sp-rule); border-radius: var(--sp-radius); background: var(--sp-surface); color: var(--sp-text); text-align: center; font: inherit; }

.spectrum-app .page-size-submit {
    min-height: 36px;
    padding-block: 6px;
}

.spectrum-app .page-button {
    display: inline-grid;
    min-width: 36px;
    height: 36px;
    place-items: center;
    border-radius: var(--sp-radius);
    color: var(--sp-text);
    text-decoration: none;
}

.spectrum-app .page-button:hover {
    background: var(--sp-surface-muted);
}

.spectrum-app .page-button[aria-current="page"] {
    box-shadow: inset 0 0 0 1px var(--sp-accent);
    background: color-mix(in srgb, var(--sp-accent) 14%, var(--sp-surface));
    color: var(--sp-text);
    font-weight: 720;
}

.spectrum-app .record-form {
    display: grid;
    gap: 15px;
    max-width: 52rem;
    margin-inline: auto;
}

.spectrum-app .field {
    display: grid;
    gap: 6px;
}

.spectrum-app .field label {
    font-weight: 620;
}
.spectrum-app .field select,
.spectrum-app .checkbox-field > label,
.spectrum-app .checkbox-field > input { cursor: pointer; }
.spectrum-app input[type="checkbox"],
.spectrum-app input[type="radio"] { accent-color: var(--sp-vis-orange); }

.spectrum-app .field input,
.spectrum-app .field textarea,
.spectrum-app .field select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--sp-rule);
    border-radius: var(--sp-radius);
    background: var(--sp-surface);
    color: var(--sp-text);
}

/* Every single-line field uses one vertical metric. Composite controls add
   accessories inside a shared row so an eye, calendar or future field button
   cannot make its input taller than a neighbouring text/select control. */
.spectrum-app .field > input:not([type="checkbox"]):not([type="radio"]),
.spectrum-app .field > select,
.spectrum-app .field-control-row > input,
.spectrum-app .field-control-row > select,
.spectrum-app .field-control-row > button,
.spectrum-app .field-control-row > .cmd {
    height: var(--sp-control-height);
    min-height: var(--sp-control-height);
    max-height: var(--sp-control-height);
}

.spectrum-app .field-control-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}

.spectrum-app .field-control-row > :is(input, select) {
    flex: 1 1 auto;
    min-width: 0;
}

.spectrum-app .field-control-row > :is(button, .cmd) {
    flex: 0 0 var(--sp-control-height);
    width: var(--sp-control-height);
    min-width: var(--sp-control-height);
    padding: 0;
}

.spectrum-app .checkbox-field input {
    width: auto;
    min-height: auto;
    justify-self: start;
}
.spectrum-app .checkbox-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.spectrum-app .checkbox-field > label { order: 2; }
.spectrum-app .checkbox-field > input { order: 1; margin: 0; }
.spectrum-app .checkbox-field > .hint { flex-basis: 100%; order: 3; margin-top: 0; }

.spectrum-app .detail-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 18px;
}

.spectrum-app .detail-grid dt {
    font-weight: 650;
}

.spectrum-app .dashboard-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--sp-rule);
    border-radius: var(--sp-radius);
    background: var(--sp-rule);
}

.spectrum-app .dashboard-card,
.spectrum-app .card {
    min-height: 96px;
    padding: 16px;
    border: 0;
    border-radius: 0;
    background: var(--sp-surface);
    color: var(--sp-text);
    text-decoration: none;
}

.spectrum-app .dashboard-card:hover,
.spectrum-app .card:hover {
    background: var(--sp-surface-muted);
}

.spectrum-app .app-footer {
    display: none;
}

.spectrum-app .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

body.spectrum-app[data-theme="dark"] {
    color-scheme: dark;
    --sp-canvas: #101719;
    --sp-surface: #172124;
    --sp-surface-muted: #202d30;
    --sp-text: #edf3f1;
    --sp-text-muted: #aab8b7;
    --sp-rule: #39494b;
    --sp-link: #81bac8;
    --sp-success: #57c2a8;
    --sp-warning: #edb855;
    --sp-danger: #ff8b84;
    --sp-quota-ok: #57c2a8;
    --sp-quota-warning: #f2c14e;
    --sp-quota-critical: #ff8b84;
    --sp-focus: #8ad6e7;
}

body.spectrum-app.high-contrast {
    color-scheme: dark;
    --sp-canvas: #000000;
    --sp-surface: #000000;
    --sp-surface-muted: #000000;
    --sp-text: #ffffff;
    --sp-text-muted: #ffffff;
    --sp-rule: #ffffff;
    --sp-link: #ffffff;
    --sp-accent: #ffff00;
    --sp-success: #00ff00;
    --sp-warning: #ffff00;
    --sp-danger: #ff8080;
    --sp-quota-ok: #00ff78;
    --sp-quota-warning: #ffff00;
    --sp-quota-critical: #ff8080;
    --sp-focus: #00ffff;
}

body.spectrum-app.high-contrast :where(a, button, input, select, textarea) {
    border-color: var(--sp-rule);
}

@media (forced-colors: active) {
    .spectrum-app .nav-link.is-active::before {
        background: Highlight;
    }

    .spectrum-app .page-button[aria-current="page"] {
        background: Highlight;
        color: HighlightText;
    }
}

@media (max-width: 1024px) {
    .spectrum-app .layout {
        grid-template-columns: 1fr;
    }

    .spectrum-app .sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--sp-rule);
    }

    .spectrum-app .sidebar-inner {
        min-height: auto;
    }

    .spectrum-app .hero-inner {
        grid-template-columns: 1fr auto;
    }

    .spectrum-app .hero-center {
        justify-content: flex-start;
    }

    .spectrum-app .hero-meta {
        display: none;
    }
}

@media (max-width: 760px) {
    .spectrum-app .sidebar-inner,
    .spectrum-app .panel-inner {
        padding: 16px;
    }

    .spectrum-app .hero-inner {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .spectrum-app .hero-side {
        justify-content: space-between;
    }

    .spectrum-app .panel-header,
    .spectrum-app .panel-header.split {
        align-items: flex-start;
        flex-direction: column;
    }

    .spectrum-app [data-priority="secondary"] {
        display: none;
    }

    .spectrum-app .pagination {
        grid-template-columns: 1fr auto;
    }

    .spectrum-app .pagination-pages .page-number:not([aria-current="page"]) {
        display: none;
    }

    .spectrum-app .detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Keep this semantic bridge last so declarations win over compatibility
   styles left by older project-specific themes. */
body.spectrum-app {
    background: var(--sp-canvas, #f4f4f4);
    color: var(--sp-text, #111827);
}
body.spectrum-app .sidebar {
    background: var(--sp-navigation, #132a34);
    color: var(--sp-navigation-text, #fff);
}
body.spectrum-app .sidebar :where(.app-brand, .app-brand h1, .app-brand p, .nav-section-title, .nav-link) {
    color: var(--sp-navigation-text, #fff);
}
body.spectrum-app .sidebar .nav-link:hover,
body.spectrum-app .sidebar .nav-link:focus-visible {
    background: color-mix(in srgb, var(--sp-navigation-active, var(--sp-accent, #f2a900)) 24%, transparent);
}
body.spectrum-app .sidebar .nav-link.is-active {
    background: var(--sp-navigation-active, var(--sp-accent, #f2a900));
    color: var(--sp-navigation-text, #fff);
}
body.spectrum-app .hero.panel { border-top-color: var(--sp-accent, #f2a900); }
body.spectrum-app :where(a:not(.button), .link-button) { color: var(--sp-link, var(--sp-accent, #995a26)); }
body.spectrum-app :where(button, input, select, textarea, a):focus-visible { outline-color: var(--sp-focus, #f59e0b); }

/* TinyMCE is a generic editor capability; the application only declares its
   profile and resource policy. Keep the editor inside the responsive form
   grid and preserve a visible focus ring without clipping it. */
.spectrum-app .tinymce-editor-field .tox-tinymce {
    width: 100%;
    max-width: 100%;
    min-height: 26rem;
    border: 1px solid var(--sp-border, #c8d3e1);
    border-radius: 12px;
    overflow: hidden;
}
.spectrum-app .tinymce-editor-field .tox-tinymce:focus-within {
    outline: 3px solid var(--sp-focus, #f59e0b);
    outline-offset: 2px;
}
.spectrum-app .tinymce-editor-field .tox-edit-area__iframe { background: var(--sp-surface, #fff); }
.spectrum-app .tinymce-editor-field .tox .tox-tbtn,
.spectrum-app .tinymce-editor-field .tox .tox-mbtn {
    color: var(--sp-button-text, #f4f7f7) !important;
}
.spectrum-app .tinymce-editor-field .tox .tox-icon svg,
.spectrum-app .tinymce-editor-field .tox .tox-tbtn__select-chevron svg {
    color: currentColor !important;
    fill: currentColor !important;
}
.spectrum-app .tinymce-editor-field .tox .tox-icon svg path,
.spectrum-app .tinymce-editor-field .tox .tox-tbtn__select-chevron svg path {
    fill: currentColor !important;
}
body.spectrum-app[data-theme="dark"] .tinymce-editor-field .tox-tinymce {
    background: #172124 !important;
    border-color: #4b5d60 !important;
}
body.spectrum-app[data-theme="dark"] .tinymce-editor-field .tox .tox-editor-header,
body.spectrum-app[data-theme="dark"] .tinymce-editor-field .tox .tox-toolbar-overlord,
body.spectrum-app[data-theme="dark"] .tinymce-editor-field .tox .tox-toolbar__primary,
body.spectrum-app[data-theme="dark"] .tinymce-editor-field .tox .tox-statusbar {
    background: #172124 !important;
    color: #f4f7f6 !important;
    border-color: #4b5d60 !important;
}
body.spectrum-app[data-theme="dark"] .tinymce-editor-field .tox .tox-tbtn:hover,
body.spectrum-app[data-theme="dark"] .tinymce-editor-field .tox .tox-mbtn:hover {
    background: #2b4146 !important;
}
body.spectrum-app[data-theme="dark"] .tinymce-editor-field .tox .tox-edit-area,
body.spectrum-app[data-theme="dark"] .tinymce-editor-field .tox .tox-edit-area__iframe {
    background: #172124 !important;
}
body.spectrum-app.high-contrast .tinymce-editor-field .tox-tinymce,
body.spectrum-app.high-contrast .tinymce-editor-field .tox .tox-toolbar,
body.spectrum-app.high-contrast .tinymce-editor-field .tox .tox-editor-header,
body.spectrum-app.high-contrast .tinymce-editor-field .tox .tox-toolbar-overlord,
body.spectrum-app.high-contrast .tinymce-editor-field .tox .tox-toolbar__primary,
body.spectrum-app.high-contrast .tinymce-editor-field .tox .tox-statusbar {
    border-color: #fff !important;
    background: #000 !important;
    color: #fff !important;
}
body.spectrum-app.high-contrast .tinymce-editor-field .tox .tox-tbtn,
body.spectrum-app.high-contrast .tinymce-editor-field .tox .tox-mbtn { color: #fff !important; }
body.spectrum-app.high-contrast .tinymce-editor-field .tox .tox-tbtn:hover,
body.spectrum-app.high-contrast .tinymce-editor-field .tox .tox-mbtn:hover,
body.spectrum-app.high-contrast .tinymce-editor-field .tox .tox-tbtn:focus-visible,
body.spectrum-app.high-contrast .tinymce-editor-field .tox .tox-mbtn:focus-visible {
    background: #222 !important;
    color: #fff !important;
}
body.spectrum-app.high-contrast .tinymce-editor-field .tox .tox-edit-area,
body.spectrum-app.high-contrast .tinymce-editor-field .tox .tox-edit-area__iframe { background: #000 !important; }

/* List thumbnails open a read-only image viewer. Keep pagination controls
   icon-only at every breakpoint while their labels remain available to
   assistive technology through aria-label/title. */
.spectrum-app .pagination-center .page-direction {
    width: 2.5rem;
    min-width: 2.5rem;
    padding-inline: 0;
}

.spectrum-app .pagination-center .page-direction-label {
    display: none;
}

.spectrum-image-lightbox {
    width: min(92vw, 72rem);
    max-width: none;
    max-height: 92vh;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--sp-rule);
    border-radius: var(--sp-radius);
    background: var(--sp-surface);
    color: var(--sp-text);
    box-shadow: 0 24px 70px rgb(0 0 0 / 32%);
}

.spectrum-image-lightbox::backdrop {
    background: rgb(10 21 25 / 72%);
}

.spectrum-image-lightbox-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 92vh;
}

.spectrum-image-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--sp-rule);
}

.spectrum-image-lightbox-header h2 {
    margin: 0;
    font-size: 1rem;
}

.spectrum-image-lightbox-close {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0;
}

.spectrum-image-lightbox-figure {
    display: grid;
    place-items: center;
    gap: .75rem;
    min-height: 0;
    margin: 0;
    padding: 1rem;
    overflow: auto;
}

.spectrum-image-lightbox-figure img {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 7rem);
    object-fit: contain;
}

.spectrum-image-lightbox-figure figcaption {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--sp-text-muted);
    text-align: center;
}

body.spectrum-app.high-contrast .spectrum-image-lightbox {
    border-color: #fff;
    background: #000;
    color: #fff;
}

/* Final pagination contract: directional controls never move or disappear.
   Direct page entry submits on Enter or after a valid number change. */
.spectrum-app .pagination-center {
    gap: 8px;
}

.spectrum-app .page-direction {
    display: inline-flex;
    width: auto;
    min-width: 36px;
    padding-inline: 9px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}

.spectrum-app .page-direction .ui-icon {
    width: 16px;
    height: 16px;
}

.spectrum-app .page-direction-label {
    font-size: .78rem;
    font-weight: 700;
}

.spectrum-app .pagination-center .page-button:disabled {
    border-color: var(--sp-rule);
    background: var(--sp-surface-muted);
    color: var(--sp-text-muted);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .58;
}

.spectrum-app .page-jump-form input:disabled {
    cursor: not-allowed;
    opacity: .7;
}

body.spectrum-app.high-contrast .pagination-center .page-button:disabled {
    border-color: #777;
    background: #000;
    color: #aaa;
    opacity: 1;
}

@media (max-width: 520px) {
    .spectrum-app .pagination-center { gap: 5px; }
    .spectrum-app .page-direction { padding-inline: 7px; }
    .spectrum-app .page-direction-label { display: none; }
    .spectrum-app .page-jump-form { gap: 4px; }
    .spectrum-app .page-jump-form input { width: 3.25rem; }
}

/* Declarative administrative appearance. This final layer only maps semantic
   application tokens onto the established Admin layout. */
body.spectrum-app {
    background: var(--sp-canvas, #f4f4f4);
    color: var(--sp-text, #111827);
}

body.spectrum-app .sidebar {
    background: var(--sp-navigation, #132a34);
    color: var(--sp-navigation-text, #fff);
}

body.spectrum-app .sidebar :where(.app-brand, .app-brand h1, .app-brand p, .nav-section-title, .nav-link) {
    color: var(--sp-navigation-text, #fff);
}

body.spectrum-app .sidebar .nav-link:hover,
body.spectrum-app .sidebar .nav-link:focus-visible {
    background: color-mix(in srgb, var(--sp-navigation-active, var(--sp-accent, #f2a900)) 24%, transparent);
}

body.spectrum-app .sidebar .nav-link.is-active {
    background: var(--sp-navigation-active, var(--sp-accent, #f2a900));
    color: var(--sp-navigation-text, #fff);
}

body.spectrum-app .hero.panel { border-top-color: var(--sp-accent, #f2a900); }
body.spectrum-app :where(a:not(.button), .link-button) { color: var(--sp-link, var(--sp-accent, #995a26)); }
body.spectrum-app :where(button, input, select, textarea, a):focus-visible {
    outline-color: var(--sp-focus, #f59e0b);
}

body.spectrum-app.high-contrast {
    --sp-canvas: #000 !important;
    --sp-surface: #000 !important;
    --sp-text: #fff !important;
    --sp-muted: #fff !important;
    --sp-border: #fff !important;
    --sp-navigation: #000 !important;
    --sp-navigation-text: #fff !important;
    --sp-navigation-active: #ff0 !important;
    --sp-focus: #ff0 !important;
}

/* Mobile header identity: keep operator context and tenant mark in two
   balanced columns. The first column owns controls and the two-line context;
   the second owns only the proportion-preserving logo. */
@media (max-width: 760px) {
    .spectrum-app .hero-identity {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        justify-items: stretch !important;
        column-gap: 10px !important;
        row-gap: 2px !important;
        width: 100% !important;
        min-height: 52px !important;
    }
    .spectrum-app .hero-controls {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
    }
    .spectrum-app .hero-user-context {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(100%, 12rem) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        justify-self: end !important;
        justify-items: start !important;
        text-align: left !important;
    }
    .spectrum-app .hero-tenant-name,
    .spectrum-app .hero-user-name {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .spectrum-app .hero-tenant-logo {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 52px !important;
        min-height: 52px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .spectrum-app .hero-tenant-logo img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 44px !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spectrum-app *,
    .spectrum-app *::before,
    .spectrum-app *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Button language: controls are dark VIS charcoal; text/select keep their
   light surfaces. Submit commands remain the accent-orange exception. */
:root {
    --sp-button-bg: #1b2b31;
    --sp-button-hover: #2a4148;
    --sp-button-text: #f4f7f7;
}
.spectrum-app button:not(.cmd.submit):not(.cmd-delete),
.spectrum-app .button:not(.cmd.submit),
.spectrum-app .tab-button:not(.cmd.submit),
.spectrum-app .cmd.cancel,
.spectrum-app .pagination-center .page-button {
    background: var(--sp-button-bg);
    border-color: var(--sp-button-bg);
    color: var(--sp-button-text);
}
.spectrum-app button:not(.cmd.submit):not(.cmd-delete):hover,
.spectrum-app .button:not(.cmd.submit):hover,
.spectrum-app .tab-button:not(.cmd.submit):hover,
.spectrum-app .cmd.cancel:hover,
.spectrum-app .pagination-center .page-button:hover {
    background: var(--sp-button-hover);
    border-color: var(--sp-button-hover);
    color: #fff;
}
.spectrum-app .pagination-center .page-jump-form input,
.spectrum-app .page-size-form select,
.spectrum-app .filter-field select,
.spectrum-app input,
.spectrum-app textarea,
.spectrum-app select {
    background: var(--sp-surface);
    color: var(--sp-text);
}
.spectrum-app.high-contrast button:not(.cmd.submit):not(.cmd-delete),
.spectrum-app.high-contrast .button:not(.cmd.submit),
.spectrum-app.high-contrast .tab-button:not(.cmd.submit),
.spectrum-app.high-contrast .cmd.cancel,
.spectrum-app.high-contrast .pagination-center .page-button {
    background: #000;
    border-color: #fff;
    color: #fff;
}

/* Final chrome layer order.  Main intentionally creates no stacking context:
   otherwise its sticky header cannot cover the sidebar shadow. */
.spectrum-app .layout { isolation: isolate; }
.spectrum-app .main { position: relative; z-index: auto !important; }
.spectrum-app .sidebar {
    z-index: 10 !important;
    box-shadow: 12px 0 28px rgb(20 60 74 / 22%);
}
.spectrum-app .main > .hero {
    position: relative;
    z-index: 20 !important;
    box-shadow: 0 10px 28px rgb(20 60 74 / 22%);
}
.spectrum-app .sidebar-toggle { z-index: 30 !important; }
@media (max-width: 760px) {
    .spectrum-app .sidebar { z-index: 40 !important; }
    .spectrum-app .sidebar-toggle,
    body.spectrum-app.sidebar-collapsed .sidebar-toggle { z-index: 50 !important; }
}

/* Read-only is a framework state, not an application-specific decoration. */
.spectrum-app .field.is-readonly > input[readonly],
.spectrum-app .field.is-readonly > input:disabled,
.spectrum-app .field.is-readonly > textarea[readonly],
.spectrum-app .field.is-readonly > select:disabled,
.spectrum-app .field.is-readonly > input[aria-readonly="true"],
.spectrum-app .field.is-readonly .field-control-row > input[readonly],
.spectrum-app .field.is-readonly .readonly-display {
    opacity: .75;
    background: var(--sp-surface-muted);
    border-color: color-mix(in srgb, var(--sp-border) 72%, var(--sp-text) 28%);
    color: var(--sp-text);
    cursor: default;
}
body.spectrum-app[data-theme="dark"] .field.is-readonly > input[readonly],
body.spectrum-app[data-theme="dark"] .field.is-readonly > input:disabled,
body.spectrum-app[data-theme="dark"] .field.is-readonly > textarea[readonly],
body.spectrum-app[data-theme="dark"] .field.is-readonly > input[aria-readonly="true"] {
    opacity: .8;
    background: #26383e;
    color: #f4f7f6;
}
body.spectrum-app.high-contrast .field.is-readonly > input[readonly],
body.spectrum-app.high-contrast .field.is-readonly > input:disabled,
body.spectrum-app.high-contrast .field.is-readonly > textarea[readonly],
body.spectrum-app.high-contrast .field.is-readonly > input[aria-readonly="true"] {
    opacity: 1;
    background: #000;
    border-color: #fff;
    color: #fff;
}

/* Mobile drawer geometry: the toggle belongs to the drawer edge, not to the
   document flow. Keeping both positions fixed prevents it from drifting when
   the page body or the drawer contents become taller than the viewport. */
@media (max-width: 760px) {
    .spectrum-app {
        --sp-mobile-drawer-width: min(280px, calc(100vw - 48px));
        --sp-mobile-rail-width: 56px;
    }
    .spectrum-app .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: var(--sp-mobile-drawer-width) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
    .spectrum-app .sidebar-inner {
        height: 100% !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    .spectrum-app .sidebar-toggle,
    body.spectrum-app.sidebar-collapsed .sidebar-toggle {
        position: fixed !important;
        top: 50dvh !important;
        right: auto !important;
        left: calc(var(--sp-mobile-drawer-width) - 18px) !important;
        transform: translateY(-50%);
    }
    body.spectrum-app.sidebar-collapsed .sidebar {
        transform: translateX(calc(var(--sp-mobile-rail-width) - var(--sp-mobile-drawer-width))) !important;
    }
    body.spectrum-app.sidebar-collapsed .sidebar-toggle {
        left: calc(var(--sp-mobile-rail-width) - 18px) !important;
    }
}

.spectrum-app .utilization-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.spectrum-app .source-title-cell { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.spectrum-app .source-title-cell .ui-icon { flex: 0 0 17px; width: 17px; height: 17px; color: var(--sp-vis-orange); stroke-width: 1.7; }
.spectrum-app .utilization-pie,
.spectrum-app .utilization-unlimited {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}
.spectrum-app .utilization-pie {
    display: inline-block;
    --sp-utilization-color: var(--sp-quota-ok);
    border: 0;
    border-radius: 50%;
    background: conic-gradient(var(--sp-utilization-color) var(--sp-utilization), var(--sp-surface-muted) 0);
}
.spectrum-app .utilization-pie[data-utilization-state="warning"] {
    --sp-utilization-color: var(--sp-quota-warning);
}
.spectrum-app .utilization-pie[data-utilization-state="critical"] {
    --sp-utilization-color: var(--sp-quota-critical);
}
.spectrum-app .utilization-unlimited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sp-vis-orange);
    font-size: 20px;
    font-weight: 750;
    line-height: 16px;
}
body.spectrum-app[data-theme="dark"] .utilization-pie {
    background: conic-gradient(var(--sp-utilization-color) var(--sp-utilization), #34454b 0);
}
body.spectrum-app.high-contrast .utilization-pie {
    border: 0;
    background: conic-gradient(var(--sp-utilization-color) var(--sp-utilization), #000 0);
}
body.spectrum-app.high-contrast .utilization-unlimited { color: #fff; }

.spectrum-confirm-dialog {
    width: min(520px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 20px;
    color: var(--sp-text);
    background: var(--sp-surface);
    box-shadow: 0 24px 80px rgb(68 8 14 / 42%);
}
.spectrum-confirm-dialog::backdrop { background: rgb(34 7 11 / 68%); backdrop-filter: blur(3px); }
.spectrum-confirm-card { display: grid; grid-template-columns: 52px 1fr; gap: 18px; margin: 0; padding: 28px; border-top: 7px solid var(--sp-danger); }
.spectrum-confirm-mark { display: grid; place-items: center; width: 48px; height: 48px; border: 3px solid var(--sp-danger); border-radius: 50%; color: var(--sp-danger); font-size: 30px; font-weight: 900; }
.spectrum-confirm-copy h2 { margin: 2px 0 10px; color: var(--sp-danger); font-size: 1.45rem; }
.spectrum-confirm-copy p { margin: 0; }
.spectrum-confirm-warning { margin-top: 12px !important; font-weight: 800; }
.spectrum-confirm-actions { grid-column: 1 / -1; margin-top: 4px; }
.spectrum-confirm-actions .cmd.danger { background: var(--sp-danger); border-color: var(--sp-danger); color: #fff; }
.spectrum-confirm-actions .cmd.danger:hover { background: #991b1b; border-color: #991b1b; }
body.spectrum-app[data-theme="dark"] .spectrum-confirm-dialog { background: #1d1115; color: #fff; }
body.spectrum-app.high-contrast .spectrum-confirm-dialog { border: 3px solid #fff; background: #000; color: #fff; }

.spectrum-operation-dialog {
    width: min(34rem, calc(100vw - 32px));
    border: 1px solid var(--sp-rule);
    border-radius: 14px;
    padding: 0;
    background: var(--sp-surface);
    color: var(--sp-text);
    box-shadow: 0 24px 70px rgb(5 18 24 / 36%);
}
.spectrum-operation-dialog[open] {
    display: block;
    position: fixed;
    z-index: 2147483647;
    inset: 50% auto auto 50%;
    margin: 0;
    transform: translate(-50%, -50%);
}
.spectrum-operation-dialog::backdrop { background: rgb(5 18 24 / 62%); backdrop-filter: blur(3px); }
.spectrum-operation-card { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 16px; padding: 28px; }
.spectrum-operation-card h2 { margin: 0 0 8px; font-size: 1.25rem; }
.spectrum-operation-card p { margin: 0; color: var(--sp-text-muted); }
.spectrum-operation-note { margin-top: 10px !important; font-size: .9rem; }
.spectrum-operation-spinner {
    width: 34px; height: 34px; border: 3px solid color-mix(in srgb, var(--sp-vis-orange) 24%, var(--sp-rule));
    border-top-color: var(--sp-vis-orange); border-radius: 50%; animation: spectrum-spin .8s linear infinite;
}
body.spectrum-app[data-theme="dark"] .spectrum-operation-dialog { background: #152126; color: #fff; }
body.spectrum-app.high-contrast .spectrum-operation-dialog { border: 3px solid #fff; background: #000; color: #fff; }
body.spectrum-app.high-contrast .spectrum-operation-spinner { border-color: #555; border-top-color: #ff0; }
@media (prefers-reduced-motion: reduce) { .spectrum-operation-spinner { animation-duration: 1.6s; } }
@media (max-width: 520px) { .spectrum-operation-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 22px; } }

.spectrum-sensitive-dialog {
    width: min(34rem, calc(100vw - 32px));
    border: 1px solid var(--sp-rule);
    border-radius: 14px;
    padding: 24px;
    background: var(--sp-surface);
    color: var(--sp-text);
    box-shadow: 0 24px 70px rgb(5 18 24 / 36%);
}
.spectrum-sensitive-dialog::backdrop { background: rgb(5 18 24 / 62%); backdrop-filter: blur(3px); }
.spectrum-sensitive-dialog h2 { margin: 0 0 8px; }
.spectrum-sensitive-dialog p { margin: 0 0 18px; color: var(--sp-text-muted); }
.spectrum-sensitive-dialog .sensitive-progress { display: grid; place-items: center; gap: 14px; min-height: 8rem; text-align: center; }
.spectrum-sensitive-dialog .sensitive-spinner {
    width: 34px; height: 34px; border: 3px solid color-mix(in srgb, var(--sp-vis-orange) 24%, var(--sp-rule));
    border-top-color: var(--sp-vis-orange); border-radius: 50%; animation: spectrum-spin .8s linear infinite;
}
@keyframes spectrum-spin { to { transform: rotate(360deg); } }
.spectrum-sensitive-dialog .sensitive-value {
    display: block; width: 100%; padding: 14px 16px; border: 1px solid var(--sp-rule); border-radius: 8px;
    background: var(--sp-surface-muted); color: var(--sp-text); font: 700 1.05rem/1.35 var(--sp-font-data);
    overflow-wrap: anywhere; user-select: all;
}
.spectrum-app dialog .cmds,
.spectrum-sensitive-dialog .sensitive-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
.spectrum-app .password-toggle.is-loading { opacity: .7; cursor: wait; }
body.spectrum-app[data-theme="dark"] .spectrum-sensitive-dialog { background: #152126; color: #fff; }
body.spectrum-app.high-contrast .spectrum-sensitive-dialog { border: 3px solid #fff; background: #000; color: #fff; }
body.spectrum-app.high-contrast .spectrum-sensitive-dialog .sensitive-spinner { border-color: #555; border-top-color: #ff0; }
@media (prefers-reduced-motion: reduce) { .spectrum-sensitive-dialog .sensitive-spinner { animation-duration: 1.6s; } }
@media (max-width: 520px) {
    .spectrum-confirm-card { grid-template-columns: 1fr; padding: 22px; }
    .spectrum-confirm-mark { width: 42px; height: 42px; }
    .spectrum-confirm-actions { display: grid; grid-template-columns: 1fr; }
}

/* The main itself must not create a stacking context: this lets the header
   sit above the rail while the rest of main remains at the base layer. */
.spectrum-app .main { z-index: auto !important; }
.spectrum-app .main-content { position: relative; z-index: 0; }
.spectrum-app .sidebar { z-index: 1 !important; }
.spectrum-app .main > .hero {
    z-index: 2 !important;
    box-shadow: 0 10px 26px rgb(20 60 74 / 25%) !important;
}
.spectrum-app .sidebar-toggle { z-index: 3 !important; }
@media (max-width: 760px) {
    .spectrum-app .sidebar { z-index: 10 !important; }
    .spectrum-app .main > .hero { z-index: 20 !important; }
    .spectrum-app .sidebar-toggle,
    body.spectrum-app.sidebar-collapsed .sidebar-toggle { z-index: 30 !important; }
}

/* External directional shadows with explicit ownership: main is the base,
   the rail sits above it, the header sits above the rail, and the control is
   above both. The header shadow is a downward pseudo-surface beginning at the
   main boundary, so it cannot spill left onto the sidebar. */
.spectrum-app .main { position: relative; z-index: auto !important; }
.spectrum-app .sidebar {
    z-index: 1 !important;
    box-shadow: 14px 0 30px rgb(20 60 74 / 25%) !important;
}
.spectrum-app .main > .hero {
    z-index: 2 !important;
    box-shadow: 0 10px 26px rgb(20 60 74 / 25%) !important;
    overflow: visible;
}
.spectrum-app .main > .hero::after { display: none; }
.spectrum-app .main-content { box-shadow: none !important; }
.spectrum-app .sidebar-toggle { z-index: 3 !important; }
@media (max-width: 760px) {
    .spectrum-app .sidebar { z-index: 10 !important; }
    .spectrum-app .main > .hero { z-index: 20 !important; }
    .spectrum-app .sidebar-toggle,
    body.spectrum-app.sidebar-collapsed .sidebar-toggle { z-index: 30 !important; }
}

/* Keep external directional shadows: the rail casts right and the header
   casts down from the main boundary. They never use a shared blur surface. */
.spectrum-app .sidebar {
    box-shadow: 14px 0 30px rgb(20 60 74 / 25%) !important;
}
.spectrum-app .main > .hero { box-shadow: 0 10px 26px rgb(20 60 74 / 25%) !important; }
.spectrum-app .main-content {
    position: relative;
    box-shadow: none !important;
}
@media (max-width: 760px) {
    .spectrum-app .main-content { box-shadow: none !important; }
}

/* The navigation chrome is persistent across page transitions. Excluding it
   from the transition snapshot prevents the circular toggle from flickering
   while only the main view cross-fades. */
.spectrum-app .sidebar,
.spectrum-app .sidebar-toggle {
    view-transition-name: none !important;
}
.spectrum-app .sidebar-toggle { animation: none !important; }

/* Final chrome layer order. Keep this at the end so mobile drawer rules and
   earlier responsive declarations cannot lower the rail below the content. */
.spectrum-app .layout { isolation: isolate; }
.spectrum-app .main { position: relative; z-index: 1; }
.spectrum-app .sidebar {
    z-index: 100;
    box-shadow: 12px 0 28px rgb(20 60 74 / 18%);
}
.spectrum-app .main > .hero { position: relative; z-index: 20; }
.spectrum-app .sidebar-toggle { z-index: 200; }
@media (max-width: 760px) {
    .spectrum-app .sidebar { z-index: 300; }
    .spectrum-app .sidebar-toggle,
    body.spectrum-app.sidebar-collapsed .sidebar-toggle { z-index: 400; }
}

/* Definitive chrome order: keep this last because the legacy stylesheet still
   contains compatibility layers above. */
.spectrum-app .main { position: relative; z-index: auto; }
.spectrum-app .sidebar { z-index: 10; box-shadow: 12px 0 28px rgb(20 60 74 / 22%); }
.spectrum-app .main > .hero { position: relative; z-index: 20; box-shadow: 0 10px 28px rgb(20 60 74 / 22%); }
.spectrum-app .sidebar-toggle { z-index: 30; }
@media (max-width: 760px) {
    .spectrum-app .sidebar { z-index: 40; }
    .spectrum-app .sidebar-toggle,
    body.spectrum-app.sidebar-collapsed .sidebar-toggle { z-index: 50; }
}

/* Chrome stacking contract: the rail and header are separate layers, while
   the collapse control always floats above their boundary. This prevents one
   surface's shadow from painting over the other unpredictably. */
.spectrum-app {
    overflow: hidden;
}
.spectrum-app .layout { isolation: isolate; }
.spectrum-app .layout {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
}
.spectrum-app .main { position: relative; z-index: 1; }
.spectrum-app .main-content { overscroll-behavior: contain; }
.spectrum-app .sidebar {
    position: sticky;
    z-index: 100;
    box-shadow: 12px 0 28px rgb(20 60 74 / 18%);
}
.spectrum-app .main > .hero { z-index: 20; }
.spectrum-app .sidebar-toggle { z-index: 200; }
@media (max-width: 760px) {
    .spectrum-app .sidebar { z-index: 300; }
    .spectrum-app .sidebar-toggle,
    body.spectrum-app.sidebar-collapsed .sidebar-toggle { z-index: 400; }
}

/* Declarative field feedback is immediate, while server validation remains
   authoritative on submit. */
.spectrum-app .field input:invalid:not(:placeholder-shown),
.spectrum-app .field textarea:invalid:not(:placeholder-shown),
.spectrum-app .field select:invalid {
    border-color: var(--sp-danger) !important;
    background: color-mix(in srgb, var(--sp-danger) 7%, var(--sp-surface));
}
body.spectrum-app[data-theme="dark"] .field input:invalid:not(:placeholder-shown),
body.spectrum-app[data-theme="dark"] .field textarea:invalid:not(:placeholder-shown),
body.spectrum-app[data-theme="dark"] .field select:invalid {
    background: color-mix(in srgb, var(--sp-danger) 18%, var(--sp-surface));
}
body.spectrum-app.high-contrast .field input:invalid:not(:placeholder-shown),
body.spectrum-app.high-contrast .field textarea:invalid:not(:placeholder-shown),
body.spectrum-app.high-contrast .field select:invalid {
    border: 2px solid #ff8080 !important;
    background: #000;
}

/* Spectrum view navigation: browsers supporting the View Transitions API
   keep the outgoing and incoming workspace layers alive simultaneously. This
   is a real cross-fade; the fallback below is only for older browsers. */
@view-transition {
    navigation: auto;
}

.spectrum-app .main {
    view-transition-name: spectrum-main;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}

::view-transition-group(spectrum-main) {
    animation-duration: 280ms;
    animation-timing-function: ease-in-out;
}

::view-transition-old(spectrum-main) {
    animation: spectrum-view-out 280ms ease-in-out both;
}

::view-transition-new(spectrum-main) {
    animation: spectrum-view-in 280ms ease-in-out both;
}

@keyframes spectrum-view-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-2px) scale(.997); }
}

@keyframes spectrum-view-in {
    from { opacity: 0; transform: translateY(2px) scale(.997); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Non-supporting browsers still get a visible, slightly longer entrance. */
@supports not (view-transition-name: none) {
    .spectrum-app .main-content {
        animation: spectrum-view-fallback 280ms ease-out both;
    }
}

@keyframes spectrum-view-fallback {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .spectrum-app .main-content { animation: none; }
    ::view-transition-old(spectrum-main),
    ::view-transition-new(spectrum-main),
    ::view-transition-group(spectrum-main) {
        animation-duration: 1ms !important;
    }
}

/* Identity row: one indivisible line. The operator name yields to the
   controls from the left and truncates cleanly instead of wrapping. */
.spectrum-app .hero-user-row {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
    white-space: nowrap;
}
.spectrum-app .hero-user-name {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spectrum-app .hero-controls {
    flex: 0 0 auto;
    display: flex;
    gap: 7px;
}
@media (max-width: 760px) {
    .spectrum-app .hero-user-row {
        width: 100%;
        flex-wrap: nowrap !important;
    }
    .spectrum-app .hero-user-name {
        flex: 1 1 auto;
        max-width: none !important;
    }
}

/* Final mobile hero contract: identity below title, never beside it. */
@media (max-width: 760px) {
    .spectrum-app .hero-inner {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }
    .spectrum-app .hero-left,
    .spectrum-app .hero-side,
    .spectrum-app .hero-identity {
        min-width: 0 !important;
        width: 100% !important;
    }
    .spectrum-app .hero-side { justify-content: flex-end !important; }
    .spectrum-app .hero-identity { justify-items: stretch !important; }
    .spectrum-app .hero-tenant-logo { max-width: none !important; justify-content: flex-end !important; }
    .spectrum-app .hero-tenant-logo img { max-width: min(14rem, 100%) !important; }
    .spectrum-app .hero-user-row { justify-content: flex-end !important; flex-wrap: wrap; }
}

/* Final row-action hover contract: both icons react alike. */
.spectrum-app .row-actions .cmd-edit.cmd-edit,
.spectrum-app .row-actions .cmd-delete.cmd-delete {
    border: 1px solid transparent;
    background: transparent;
}
.spectrum-app .row-actions .cmd-edit.cmd-edit:hover,
.spectrum-app .row-actions .cmd-edit.cmd-edit:focus-visible,
.spectrum-app .row-actions .cmd-delete.cmd-delete:hover,
.spectrum-app .row-actions .cmd-delete.cmd-delete:focus-visible {
    border: 1px solid color-mix(in srgb, currentColor 34%, transparent) !important;
    background: color-mix(in srgb, currentColor 7%, transparent);
}

/* All row commands share the same quiet hover affordance. */
.spectrum-app .row-actions .cmd-edit,
.spectrum-app .row-actions .cmd-delete {
    border: 1px solid transparent;
    background: transparent;
}
.spectrum-app .row-actions .cmd-edit:hover,
.spectrum-app .row-actions .cmd-edit:focus-visible,
.spectrum-app .row-actions .cmd-delete:hover,
.spectrum-app .row-actions .cmd-delete:focus-visible {
    border-color: color-mix(in srgb, currentColor 34%, transparent);
    background: color-mix(in srgb, currentColor 7%, transparent);
}

/* Mobile hero: keep the title/breadcrumb block and tenant identity in
   separate rows.  The identity may shrink, but it must never compete with
   the title or overlap the breadcrumb. */
@media (max-width: 760px) {
    .spectrum-app .hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    .spectrum-app .hero-left,
    .spectrum-app .hero-side,
    .spectrum-app .hero-identity {
        min-width: 0;
        width: 100%;
    }
    .spectrum-app .hero-meta-title {
        max-width: 100%;
        font-size: 1.25rem;
        overflow-wrap: anywhere;
    }
    .spectrum-app .hero-side {
        justify-content: flex-end;
    }
    .spectrum-app .hero-identity {
        justify-items: stretch;
        gap: 6px;
    }
    .spectrum-app .hero-tenant-logo {
        width: 100%;
        max-width: none;
        justify-content: flex-end;
    }
    .spectrum-app .hero-tenant-logo img {
        max-width: min(14rem, 100%);
        max-height: 42px;
    }
    .spectrum-app .hero-user-row {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .spectrum-app .hero-user-name {
        max-width: calc(100% - 84px);
    }
    .spectrum-app .breadcrumbs {
        flex-wrap: wrap;
    }
}

/* Row actions: destructive control is quiet at rest and only gains a
   restrained red affordance on hover/focus, matching the edit icon. */
.spectrum-app .row-actions .cmd-delete.cmd-delete {
    border: 1px solid transparent;
    background: transparent;
    color: var(--sp-danger);
}
.spectrum-app .row-actions .cmd-delete.cmd-delete:hover,
.spectrum-app .row-actions .cmd-delete.cmd-delete:focus-visible {
    border-color: color-mix(in srgb, var(--sp-danger) 38%, transparent);
    background: color-mix(in srgb, var(--sp-danger) 7%, transparent);
    color: var(--sp-danger);
}

@media (max-width: 720px) {
    .spectrum-app .hero-side { width: 100%; }
    .spectrum-app .hero-identity { width: 100%; min-width: 0; }
    .spectrum-app .hero-tenant-logo,
    .spectrum-app .hero-tenant-logo img { max-width: 12rem; }
    .spectrum-app .hero-user-name { max-width: 11rem; }
}

/* Pagination baseline: every control shares one 40px optical centerline. */
.spectrum-app .pagination {
    align-items: center;
}
.spectrum-app .pagination-summary,
.spectrum-app .pagination-center,
.spectrum-app .pagination-tools,
.spectrum-app .page-jump-form,
.spectrum-app .page-size-form {
    display: flex;
    align-items: center;
    min-height: 40px;
}
.spectrum-app .pagination-summary {
    line-height: 40px;
}
.spectrum-app .pagination-center,
.spectrum-app .pagination-tools {
    align-self: center;
}
.spectrum-app .page-jump-form input,
.spectrum-app .page-jump-form .page-size-submit,
.spectrum-app .page-size-form select {
    height: 40px;
    min-height: 40px;
    margin-block: 0;
}
.spectrum-app .page-jump-form .page-size-submit {
    padding-block: 0;
}
@media (max-width: 760px) {
    .spectrum-app .pagination-summary,
    .spectrum-app .pagination-center,
    .spectrum-app .pagination-tools {
        grid-column: 1;
        justify-self: stretch;
        justify-content: center;
    }
    .spectrum-app .pagination-summary {
        justify-content: flex-start;
    }
}

/* Unified pagination: summary, page control, and page-size control. */
.spectrum-app .pagination {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.spectrum-app .pagination-center {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 6px;
    white-space: nowrap;
}
.spectrum-app .pagination-tools {
    grid-column: 3;
    justify-self: end;
}
.spectrum-app .pagination-center .page-button,
.spectrum-app .pagination-center .page-jump-form input,
.spectrum-app .page-size-form select {
    border: 1px solid color-mix(in srgb, var(--sp-link) 45%, var(--sp-rule));
    background: color-mix(in srgb, var(--sp-link) 8%, var(--sp-surface));
    color: var(--sp-link);
}
.spectrum-app .pagination-center .page-button:hover,
.spectrum-app .page-size-form select:hover,
.spectrum-app .pagination-center .page-jump-form input:focus {
    background: color-mix(in srgb, var(--sp-link) 16%, var(--sp-surface));
}
.spectrum-app .pagination-center .page-jump-form {
    color: var(--sp-link);
}
.spectrum-app button:not(.cmd.submit):not(.cmd-delete),
.spectrum-app .button:not(.cmd.submit),
.spectrum-app .tab-button:not(.cmd.submit),
.spectrum-app .cmd.cancel {
    background: color-mix(in srgb, var(--sp-link) 9%, var(--sp-surface));
    border-color: color-mix(in srgb, var(--sp-link) 42%, var(--sp-rule));
    color: var(--sp-link);
}
.spectrum-app button:not(.cmd.submit):not(.cmd-delete):hover,
.spectrum-app .button:not(.cmd.submit):hover,
.spectrum-app .tab-button:not(.cmd.submit):hover,
.spectrum-app .cmd.cancel:hover {
    background: color-mix(in srgb, var(--sp-link) 17%, var(--sp-surface));
    border-color: var(--sp-link);
    color: var(--sp-link);
}

@media (max-width: 760px) {
    .spectrum-app .pagination {
        grid-template-columns: minmax(0, 1fr);
    }
    .spectrum-app .pagination-center,
    .spectrum-app .pagination-tools {
        grid-column: 1;
        justify-self: center;
    }
}

/* Compact application chrome and declarative navigation icons. */
.spectrum-app .brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.spectrum-app .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--sp-radius);
    background: transparent;
    color: var(--sp-text-muted);
    cursor: pointer;
}

.spectrum-app .sidebar-toggle:hover {
    border-color: var(--sp-rule);
    color: var(--sp-text);
}

.spectrum-app .sidebar {
    background: #17242a;
    color: #e9f0ef;
}

.spectrum-app .brand h1 {
    color: #ffffff;
}

.spectrum-app .brand-row {
    padding-bottom: 14px;
    border-bottom: 0;
    background: transparent;
}

.spectrum-app .sidebar-toggle,
.spectrum-app .sidebar .nav-link {
    color: #cbd7d5;
}

.spectrum-app .sidebar-toggle:hover,
.spectrum-app .sidebar .nav-link:hover,
.spectrum-app .sidebar .nav-link.is-active {
    border-color: transparent;
    background: rgb(255 255 255 / 9%);
    color: #ffffff;
}

.spectrum-app .sidebar .nav-link.is-active::before {
    background: var(--sp-accent);
}

.spectrum-app .sidebar-foot {
    padding-top: 12px;
    border-top: 1px solid rgb(255 255 255 / 12%);
}

.spectrum-app .sidebar .action-box,
.spectrum-app .sidebar .action-box button {
    width: 100%;
}

.spectrum-app .nav-link {
    gap: 10px;
}

.spectrum-app .nav-link .ui-icon,
.spectrum-app .sidebar-toggle .ui-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.spectrum-app .hero-inner {
    grid-template-columns: minmax(0, 1fr) auto;
}

.spectrum-app .hero-left {
    display: grid;
    gap: 5px;
}

.spectrum-app .hero-meta-title {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.spectrum-app .list-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 44px;
    padding-block: 8px;
    margin-bottom: 12px;
}

.spectrum-app .list-toolbar:empty {
    display: none;
}

/* Optional regions do not leave a separator behind when the preceding
   toolbar has no renderable controls. The filter row remains available, but
   it starts cleanly at the content edge instead of looking like an empty
   toolbar was rendered above it. */
.spectrum-app .list-toolbar:empty + .list-filters {
    border-top: 0;
    padding-top: 0;
}

.spectrum-app .list-filters:empty {
    display: none;
}

.spectrum-app .list-observation-meta {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    order: -1;
    margin-right: auto;
    gap: .35rem;
    margin-top: 0;
    margin-bottom: 0;
    color: var(--sp-muted);
    font-size: .86rem;
    white-space: nowrap;
}
.spectrum-app .list-observation-label { font-weight: 650; }

/* Tenant identity occupies a quiet two-row stack in the hero: mark above,
   signed-in operator and display controls below. */
.spectrum-app .hero-side {
    align-self: stretch;
    justify-content: flex-end;
}
.spectrum-app .hero-identity {
    display: grid;
    justify-items: end;
    align-content: center;
    gap: 8px;
    min-width: min(100%, 18rem);
}
.spectrum-app .hero-tenant-logo {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 40px;
    max-width: 15rem;
}
.spectrum-app .hero-tenant-logo img {
    display: block;
    max-width: 15rem;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.spectrum-app .hero-user-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 34px;
}
.spectrum-app .hero-user-name {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sp-muted);
    font-size: .9rem;
    font-weight: 650;
}
.spectrum-app .hero-controls { gap: 7px; }
.spectrum-app .hero-controls .tone-button { width: 34px; height: 34px; }
.spectrum-app .hero-controls .tone-icon svg { width: 17px; height: 17px; }

/* Final header identity contract: theme controls, operator and tenant mark
   share one optical row.  The mark owns height, while its width follows the
   image ratio so a wide or square identity never reserves a dead left slot. */
.spectrum-app .hero-side {
    align-self: center;
    min-width: 0;
}
.spectrum-app .hero-identity {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
    min-height: 52px;
}
.spectrum-app .hero-controls {
    order: 1;
    flex: 0 0 auto;
}
.spectrum-app .hero-user-name {
    order: 2;
    min-width: 0;
    max-width: 100%;
    text-align: left;
}
.spectrum-app .hero-user-context {
    order: 2;
    display: grid;
    align-content: center;
    gap: 2px;
    flex: 0 1 19rem;
    min-width: 0;
    max-width: 19rem;
    justify-items: start;
    text-align: left;
}
.spectrum-app .hero-tenant-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sp-text);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .01em;
}
.spectrum-app .hero-tenant-logo {
    order: 3;
    display: flex;
    flex: 0 0 auto;
    width: auto;
    height: 52px;
    min-height: 0;
    max-width: none;
    align-items: center;
    justify-content: flex-end;
}
.spectrum-app .hero-tenant-logo img {
    display: block;
    width: auto;
    height: 44px;
    max-width: none;
    object-fit: contain;
    object-position: right center;
}
.spectrum-app .hero-tenant-logo.is-placeholder img {
    filter: grayscale(1);
    opacity: .58;
}

/* Desktop: shrink-wrap the identity rail so its controls and text stay
   attached to the logo at the right edge instead of spreading through the
   available header width. Mobile intentionally overrides this with its
   two-column full-width layout below. */
@media (min-width: 761px) {
    .spectrum-app .hero-inner {
        display: flex;
        align-items: center;
        gap: 24px;
    }
    .spectrum-app .hero-left {
        flex: 1 1 auto;
        min-width: 0;
    }
    .spectrum-app .hero-side {
        flex: 0 0 auto;
        margin-left: auto;
        justify-content: flex-end;
        width: max-content;
        max-width: 100%;
    }
    .spectrum-app .hero-identity {
        width: max-content;
        max-width: 100%;
    }
}

@media (max-width: 760px) {
    .spectrum-app .hero-inner {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
    }
    .spectrum-app .hero-left { min-width: 0 !important; width: auto !important; }
    .spectrum-app .hero-side,
    .spectrum-app .hero-identity {
        width: auto !important;
        min-width: 0 !important;
    }
    .spectrum-app .hero-identity {
        gap: 7px;
        min-height: 44px;
    }
    .spectrum-app .hero-user-name { display: none; }
    .spectrum-app .hero-user-context { max-width: 11rem; }
    .spectrum-app .hero-tenant-name { font-size: .72rem; }
    .spectrum-app .hero-controls { gap: 4px; }
    .spectrum-app .hero-controls .tone-button { width: 32px; height: 32px; }
    .spectrum-app .hero-tenant-logo {
        width: auto !important;
        height: 44px;
        min-height: 0 !important;
        max-width: none !important;
    }
    .spectrum-app .hero-tenant-logo img {
        width: auto !important;
        height: 36px !important;
        max-width: none !important;
    }
    .spectrum-app .hero-meta-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    .spectrum-app .hero-tenant-logo {
        width: auto !important;
    }
}

.spectrum-app .datetime-value {
    display: inline-flex;
    gap: 0.35em;
    white-space: nowrap;
}

.spectrum-app .datetime-value > span {
    white-space: nowrap;
}

.spectrum-app .timezone-part {
    color: inherit;
    font: inherit;
}

body.spectrum-app.sidebar-collapsed .layout {
    grid-template-columns: 68px minmax(0, 1fr);
}

body.spectrum-app.sidebar-collapsed .sidebar-inner {
    padding-inline: 12px;
}

body.spectrum-app.sidebar-collapsed .brand,
body.spectrum-app.sidebar-collapsed .tenant-chip {
    justify-content: center;
}

body.spectrum-app.sidebar-collapsed .brand h1 {
    display: none;
}

body.spectrum-app.sidebar-collapsed .brand-row {
    position: relative;
    display: block;
    min-height: 42px;
}

body.spectrum-app.sidebar-collapsed .brand {
    width: 100%;
}

body.spectrum-app.sidebar-collapsed .sidebar-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 22px;
    padding: 0;
}

body.spectrum-app.sidebar-collapsed .vis-brand-logo {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    margin-inline: auto;
}

body.spectrum-app.sidebar-collapsed .nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

body.spectrum-app.sidebar-collapsed .brand-row,
body.spectrum-app.sidebar-collapsed .nav-link {
    justify-content: center;
}

body.spectrum-app.sidebar-collapsed .nav-link {
    padding-inline: 8px;
}

body.spectrum-app.sidebar-collapsed .sidebar-toggle .ui-icon {
    transform: rotate(180deg);
}

@media (max-width: 1024px) {
    body.spectrum-app.sidebar-collapsed .layout {
        grid-template-columns: 1fr;
    }

    body.spectrum-app.sidebar-collapsed .brand {
        display: initial;
    }

    body.spectrum-app.sidebar-collapsed .nav-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
    }

    body.spectrum-app.sidebar-collapsed .sidebar-inner {
        padding: 16px;
    }

    body.spectrum-app.sidebar-collapsed .brand-row,
    body.spectrum-app.sidebar-collapsed .nav-link {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .spectrum-app .datetime-value {
        flex-direction: column;
        gap: 0;
    }
}

/* Declarative field layout and command language. */
.spectrum-app .sidebar {
    position: relative;
    overflow: visible;
    z-index: 10;
}
.spectrum-app .sidebar-inner { overflow: hidden; }
.spectrum-app .brand-row { position: relative; }
.spectrum-app .vis-brand-logo {
    width: 116px;
    height: 44px;
    flex-basis: 116px;
    border-radius: 10px;
    background: transparent;
}
.spectrum-app .sidebar-toggle {
    position: absolute;
    top: 50%;
    right: -36px;
    width: 36px;
    height: 36px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid var(--sp-rule);
    border-radius: 50%;
    background: var(--sp-surface);
    box-shadow: 0 4px 16px rgb(20 60 74 / 16%);
    color: var(--sp-link);
    z-index: 12;
}
.spectrum-app .sidebar-toggle:hover { background: var(--sp-surface-muted); }
.spectrum-app .sidebar-toggle .ui-icon { width: 18px; height: 18px; }
.spectrum-app .nav-link { min-height: 44px; }
.spectrum-app .nav-link:hover,
.spectrum-app .nav-link.is-active { justify-content: flex-start; }
.spectrum-app .cmd:not(.row):not(.cmd-delete) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 42px;
    padding: .78rem 1rem;
    border: 1px solid transparent;
    border-radius: 14px;
    font: inherit;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
.spectrum-app .cmd.submit { background: var(--sp-accent); border-color: var(--sp-accent); color: #18252a; }
.spectrum-app .cmd.submit:hover { filter: brightness(.95); }
.spectrum-app .cmd.cancel { background: var(--sp-surface); border-color: var(--sp-rule); color: var(--sp-text); }
.spectrum-app .cmd.cancel:hover { background: var(--sp-surface-muted); border-color: var(--sp-accent); color: var(--sp-text); }
.spectrum-app .cmd-delete,
.spectrum-app .row-actions .cmd { width: 36px; height: 36px; min-width: 36px; padding: 0; border: 0; background: transparent; }
.spectrum-app .cmd-delete { color: var(--sp-danger); }
.spectrum-app .cmd-delete:hover { background: color-mix(in srgb, var(--sp-danger) 12%, transparent); }
.spectrum-app .row-actions { align-items: center; gap: 4px; white-space: nowrap; }
.spectrum-app .form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 10px; }
.spectrum-app .cmds { justify-content: center; border-top: 1px solid var(--sp-rule); padding-top: var(--sp-space-1x, 16px); margin-top: var(--sp-space-1x, 16px); }
.spectrum-app .record-form { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-space-1x, 16px); max-width: 72rem; }
.spectrum-app .record-form.form-width-narrow {
    width: 100%;
    max-width: 42rem;
    margin-inline: auto;
}
.spectrum-app .record-form.form-width-compact { max-width: 40rem; }
.spectrum-app .form-shell {
    width: min(100%, 52rem);
    margin-inline: auto;
}
.spectrum-app .form-shell.form-width-narrow {
    width: min(100%, 42rem);
    margin-inline: auto;
}
.spectrum-app .form-shell.form-width-compact {
    width: min(100%, 40rem);
    margin-inline: auto;
}
.spectrum-app .record-form > .cmds { grid-column: 1 / -1; width: 100%; }
.spectrum-app .record-form > .field { grid-column: span 6; min-width: 0; }
.spectrum-app .record-form > .field.w50 { grid-column: span 3; }
.spectrum-app .record-form > .field.w33 { grid-column: span 2; }
.spectrum-app .record-form > .field.w34 { grid-column: span 2; }
.spectrum-app .record-form > .field.w67 { grid-column: span 4; }
.spectrum-app .record-form > .field.w100 { grid-column: 1 / -1; }
.spectrum-app .record-form > .field.wmin,
.spectrum-app .record-form > .field.wfit { grid-column: span 1; width: max-content; max-width: 100%; }
.spectrum-app .record-form > .field.break { grid-column-start: 1; }
@media (min-width: 761px) {
    .spectrum-app .record-form > .field.w50.break { grid-column: 1 / span 3; }
    .spectrum-app .record-form > .field.w33.break,
    .spectrum-app .record-form > .field.w34.break { grid-column: 1 / span 2; }
    .spectrum-app .record-form > .field.w67.break { grid-column: 1 / span 4; }
    .spectrum-app .record-form > .field.wmin.break,
    .spectrum-app .record-form > .field.wfit.break { grid-column: 1 / span 1; }
    .spectrum-app .record-form > .field.field-month-day { grid-column: span 3; justify-self: start; }
    .spectrum-app .record-form > .field.field-month-day.break { grid-column: 1 / span 3; }
    .spectrum-app .record-form > .field.compact.align-end { grid-column: -3 / -1; justify-self: end; }
    .spectrum-app .record-form:has(> .field.w34.break + .field.w33 + .field.w33) {
        grid-template-columns: minmax(0, 34fr) minmax(0, 33fr) minmax(0, 33fr);
    }
    .spectrum-app .record-form:has(> .field.w34.break + .field.w33 + .field.w33) > .field {
        grid-column: 1 / -1;
    }
    .spectrum-app .record-form:has(> .field.w34.break + .field.w33 + .field.w33) > .field.w34,
    .spectrum-app .record-form:has(> .field.w34.break + .field.w33 + .field.w33) > .field.w33 {
        grid-column: span 1;
    }
    .spectrum-app .record-form:has(> .field.w34.break + .field.w33 + .field.w33) > .field.w67 {
        grid-column: span 2;
    }
}
.spectrum-app .field.compact { width: max-content; max-width: 100%; }
.spectrum-app .field.compact > select,
.spectrum-app .field.compact > input { width: auto; min-width: 9rem; max-width: 100%; justify-self: start; }
.spectrum-app .field.compact > .hint { width: 12rem; max-width: 100%; }
.spectrum-app .field-month-day { width: max-content; max-width: 100%; }
.spectrum-app .field-label { font-weight: 700; }
.spectrum-app .month-day-control { display: flex; align-items: end; gap: 10px; width: max-content; max-width: 100%; }
.spectrum-app .month-day-part { display: grid; gap: 5px; margin: 0; color: var(--sp-text-muted); font-size: .82rem; font-weight: 700; }
.spectrum-app .month-day-part select,
.spectrum-app .month-day-part input { margin: 0; }
.spectrum-app .month-day-month select { width: auto; min-width: 10rem; }
.spectrum-app .month-day-day input { width: 4.25rem; }
.spectrum-app .field-month-day > .hint { width: 15rem; max-width: 100%; }
.spectrum-app .month-day-readonly { display: inline-flex; align-items: center; min-height: 42px; font-weight: 700; }
.spectrum-app .secret-control { display: flex; align-items: stretch; gap: 6px; }
.spectrum-app .secret-control input { flex: 1 1 auto; min-width: 0; }
.spectrum-app .password-toggle { width: 42px; min-width: 42px; padding: 0; border: 1px solid var(--sp-rule); background: var(--sp-surface-muted); color: var(--sp-link); }
.spectrum-app .password-toggle .ui-icon { width: 18px; height: 18px; }
.spectrum-app .sensitive-read-action {
    display: grid; justify-items: start; gap: 4px; margin-top: 8px;
}
.spectrum-app .sensitive-read-trigger { gap: 8px; }
.spectrum-app .sensitive-read-trigger .ui-icon { width: 18px; height: 18px; }
.spectrum-app .password-generator-action { display: grid; justify-items: start; gap: 4px; margin-top: 8px; }
.spectrum-app .password-generator-trigger { gap: 8px; }
.spectrum-app .password-generator-trigger .ui-icon { width: 18px; height: 18px; }
.spectrum-app .password-generator-trigger.is-loading { opacity: .7; cursor: wait; }
.spectrum-password-dialog .sensitive-value { letter-spacing: .08em; }
.spectrum-app .datetime-value { font-variant-numeric: tabular-nums; }
body.spectrum-app.sidebar-collapsed .sidebar-toggle { right: -18px; transform: translateY(-50%) rotate(180deg); }
body.spectrum-app.sidebar-collapsed .sidebar .nav-link,
body.spectrum-app.sidebar-collapsed .sidebar .nav-link:hover,
body.spectrum-app.sidebar-collapsed .sidebar .nav-link.is-active { justify-content: center; padding-inline: 0; }
body.spectrum-app.sidebar-collapsed .sidebar .nav-link .ui-icon { margin: 0 auto; }
body.spectrum-app.sidebar-collapsed .sidebar .vis-brand-logo { width: 42px; height: 42px; flex-basis: 42px; }
body.spectrum-app[data-theme="dark"] .sidebar-toggle { background: #18272d; border-color: #46616a; color: #f2b632; }
body.spectrum-app[data-theme="dark"] .cmd.cancel:hover { background: #24373e; color: #fff; }
body.spectrum-app.high-contrast .sidebar-toggle { background: #000; border-color: #fff; color: #fff; }
body.spectrum-app.high-contrast .cmd.submit { background: #ff0; border-color: #fff; color: #000; }
@media (max-width: 760px) {
    .spectrum-app .record-form { grid-template-columns: 1fr; }
    .spectrum-app .record-form > .field,
    .spectrum-app .record-form > .field.w50,
    .spectrum-app .record-form > .field.w33,
    .spectrum-app .record-form > .field.w34,
    .spectrum-app .record-form > .field.w67,
    .spectrum-app .record-form > .field.wmin,
    .spectrum-app .record-form > .field.wfit { grid-column: 1 / -1; width: auto; }
}

/* Shared friendly form/list finish: the same rules apply to Panel and Studio. */
:root { --sp-sidebar-width: 224px; --sp-vis-orange: #f2a900; --sp-vis-orange-soft: #fff3d6; }
.spectrum-app .layout { grid-template-columns: var(--sp-sidebar-width) minmax(0, 1fr); }
.spectrum-app .sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow: visible;
    box-shadow: 8px 0 22px rgb(20 60 74 / 14%);
}
.spectrum-app .sidebar-inner {
    height: 100%;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}
.spectrum-app .brand { flex: 1 1 auto; min-width: 0; }
.spectrum-app .vis-brand-logo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 8px;
    background: transparent;
}
.spectrum-app .brand h1 {
    min-width: 0;
    margin: 0;
    font-size: 1.28rem;
    line-height: 1.12;
    white-space: normal;
}
.spectrum-app .brand h1 .nav-label { display: block; }
.spectrum-app .sidebar-toggle {
    position: fixed;
    top: 50%;
    left: calc(var(--sp-sidebar-width) - 18px);
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid var(--sp-vis-orange);
    border-radius: 50%;
    background: var(--sp-surface);
    box-shadow: 0 8px 22px rgb(20 60 74 / 22%);
    color: var(--sp-vis-orange);
    z-index: 50;
    transition: left 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.spectrum-app .sidebar-toggle:hover { background: var(--sp-vis-orange-soft); box-shadow: 0 8px 22px rgb(20 60 74 / 30%); }
.spectrum-app .sidebar-toggle .ui-icon { transition: transform 180ms ease; }
body.spectrum-app.sidebar-collapsed { --sp-sidebar-width: 68px; }
body.spectrum-app.sidebar-collapsed .sidebar-toggle {
    position: fixed;
    top: 50%;
    right: auto;
    left: calc(var(--sp-sidebar-width) - 18px);
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
}
body.spectrum-app.sidebar-collapsed .sidebar-toggle .ui-icon { transform: rotate(180deg); }
.spectrum-app .sidebar .nav-link { white-space: nowrap; }

.spectrum-app .record-form,
.spectrum-app .record-form > .field { align-items: start; align-content: start; }
.spectrum-app .record-form > .field { align-self: start; }
.spectrum-app .field .hint,
.spectrum-app .hint {
    margin: 2px 0 0;
    color: var(--sp-text-muted);
    font-size: .8rem;
    line-height: 1.28;
}
.spectrum-app .field-label { font-weight: 700; }
.spectrum-app .validation-message {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 80;
    max-width: min(28rem, calc(100vw - 2rem));
    margin: 0;
    padding: .42rem .62rem;
    border: 1px solid color-mix(in srgb, var(--sp-danger) 38%, transparent);
    border-radius: 8px;
    background: var(--sp-surface, #fff);
    box-shadow: 0 8px 18px rgb(15 23 42 / 14%);
    color: var(--sp-danger);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    pointer-events: none;
}
.spectrum-app .validation-message::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 14px;
    width: 8px;
    height: 8px;
    border-top: 1px solid color-mix(in srgb, var(--sp-danger) 38%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--sp-danger) 38%, transparent);
    background: var(--sp-surface, #fff);
    transform: rotate(45deg);
}
.spectrum-app .field { position: relative; overflow: visible; }
.spectrum-app .validation-message[hidden] { display: none; }
.spectrum-app .validation-message.is-valid { color: #18733a; }
.spectrum-app .validation-message.is-valid { border-color: rgb(24 115 58 / 35%); }
.spectrum-app .validation-message.is-valid::before { border-color: rgb(24 115 58 / 35%); }
.spectrum-app .field.has-validation-error input,
.spectrum-app .field.has-validation-error textarea,
.spectrum-app .field.has-validation-error select { border-color: var(--sp-danger) !important; }
.spectrum-app .field.is-validation-valid input:not([readonly]),
.spectrum-app .field.is-validation-valid textarea,
.spectrum-app .field.is-validation-valid select {
    border-color: #58a873 !important;
    background: #f4fbf6;
}
body.spectrum-app[data-theme="dark"] .field.is-validation-valid input:not([readonly]),
body.spectrum-app[data-theme="dark"] .field.is-validation-valid textarea,
body.spectrum-app[data-theme="dark"] .field.is-validation-valid select {
    border-color: #67c587 !important;
    background: #10291c;
    color: #f4fff7;
}
body.spectrum-app.high-contrast .validation-message { color: #ff0; }
body.spectrum-app.high-contrast .validation-message.is-valid { color: #00ff78; }
body.spectrum-app[data-theme="dark"] .validation-message { background: #111827; }
body.spectrum-app[data-theme="dark"] .validation-message::before { background: #111827; }
body.spectrum-app.high-contrast .validation-message { background: #000; border-color: #ff0; }
body.spectrum-app.high-contrast .validation-message::before { background: #000; border-color: #ff0; }
body.spectrum-app.high-contrast .field.is-validation-valid input:not([readonly]),
body.spectrum-app.high-contrast .field.is-validation-valid textarea,
body.spectrum-app.high-contrast .field.is-validation-valid select { border-color: #00ff78 !important; background: #000 !important; color: #fff !important; }
.spectrum-app .field.help-right {
    grid-template-columns: max-content minmax(18rem, 28rem);
    grid-template-areas: "label label" "control hint";
    column-gap: 12px;
    align-items: center;
    width: auto;
    max-width: 100%;
}
.spectrum-app .field.help-right > label,
.spectrum-app .field.help-right > .field-label { grid-area: label; }
.spectrum-app .field.help-right > .hint { grid-area: hint; margin: 0; max-width: 28rem; }
.spectrum-app .field.help-right > select,
.spectrum-app .field.help-right > input,
.spectrum-app .field.help-right > textarea,
.spectrum-app .field.help-right > .secret-control,
.spectrum-app .field.help-right > .unit-control,
.spectrum-app .field.help-right > .html-readonly-control { grid-area: control; width: max-content; max-width: 100%; }
.spectrum-app .field.help-right > .hint,
.spectrum-app .field.help-right > select,
.spectrum-app .field.help-right > input,
.spectrum-app .field.help-right > textarea,
.spectrum-app .field.help-right > .secret-control,
.spectrum-app .field.help-right > .unit-control,
.spectrum-app .field.help-right > .html-readonly-control { align-self: center; }
.spectrum-app .html-readonly-control {
    display: flex;
    align-items: center;
    min-height: 42px;
}
.spectrum-app .field-html-readonly .field-unavailable {
    color: var(--sp-text-muted);
    font-size: .86rem;
    line-height: 1.25;
}
.spectrum-app .field-html-readonly .cmd { white-space: nowrap; }
.spectrum-app .unit-control { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.spectrum-app .unit-control input { width: 7rem; min-width: 0; }
.spectrum-app .unit-suffix { color: var(--sp-text); font-weight: 700; white-space: nowrap; }
.spectrum-app .field-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sp-space-1x, 16px);
    margin: 8px 0 0;
    padding: 16px;
    border: 1px solid var(--sp-rule);
    border-radius: 10px;
    background: color-mix(in srgb, var(--sp-surface) 94%, var(--sp-vis-orange-soft));
}
.spectrum-app .record-form > .field.wmin.help-right { grid-column: 1 / -1; width: auto; }
.spectrum-app .field-group > .field { grid-column: 1 / -1; }
.spectrum-app .field-group > legend {
    grid-column: 1 / -1;
    width: auto;
    padding: 0 8px;
    color: var(--sp-text);
    font-size: 1rem;
    font-weight: 700;
}
.spectrum-app .field-group > .field { align-self: start; }
.spectrum-app .field-group > .field.w50 { grid-column: span 3; }
.spectrum-app .field-group > .field.w33,
.spectrum-app .field-group > .field.w34 { grid-column: span 2; }
.spectrum-app .field-group > .field.w67 { grid-column: span 4; }
.spectrum-app .field-group > .field.w100 { grid-column: 1 / -1; }
.spectrum-app .field.is-required > input,
.spectrum-app .field.is-required > textarea,
.spectrum-app .field.is-required > select,
.spectrum-app .field.is-required .month-day-part > input,
.spectrum-app .field.is-required .month-day-part > select,
.spectrum-app .field.is-required > .secret-control input {
    background: #fff8f8;
    border-color: #e4a3a3;
}
.spectrum-app .field.is-required > input:focus,
.spectrum-app .field.is-required > textarea:focus,
.spectrum-app .field.is-required > select:focus,
.spectrum-app .field.is-required .month-day-part > input:focus,
.spectrum-app .field.is-required .month-day-part > select:focus,
.spectrum-app .field.is-required > .secret-control input:focus {
    background: #fff;
    border-color: #c94f4f;
}
.spectrum-app .field-group.is-disabled { opacity: 1; }
.spectrum-app .field-group.is-disabled > .field:not(.field-controller) { opacity: .5; pointer-events: none; }
.spectrum-app .field-group.is-disabled > legend,
.spectrum-app .field-group.is-disabled > .field-controller { opacity: 1; }
.spectrum-app .cmd.submit { background: var(--sp-vis-orange); border-color: var(--sp-vis-orange); color: #fff; }
.spectrum-app .cmd.cancel { border-radius: 9px; }
.spectrum-app .cmd.cancel:hover { border-color: var(--sp-rule); background: var(--sp-surface-muted); }

/* The application chrome is fixed while the content region owns scrolling.
   This keeps the breadcrumb/title available while long lists and forms move,
   and gives the header the same visual separation as the navigation rail. */
.spectrum-app .main {
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
}
.spectrum-app .main > .hero {
    position: relative;
    z-index: 20;
    box-shadow: 0 8px 22px rgb(20 60 74 / 14%);
}
.spectrum-app .main-content {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
@media (max-width: 760px) {
    .spectrum-app .main {
        height: 100dvh;
        min-height: 100dvh;
    }
    .spectrum-app .main > .hero {
        box-shadow: 0 6px 18px rgb(20 60 74 / 16%);
    }
}
.spectrum-app .table-wrap th { background: var(--sp-vis-orange-soft); color: var(--sp-text); }
.spectrum-app .table-wrap td.row-actions { display: table-cell; text-align: right; white-space: nowrap; }
.spectrum-app .table-wrap td.row-actions > * { vertical-align: middle; }
.spectrum-app .cmd-delete,
.spectrum-app .cmd-delete:focus-visible { border: 0; box-shadow: none; color: var(--sp-danger); }
.spectrum-app .cmd-delete:hover { background: color-mix(in srgb, var(--sp-danger) 10%, transparent); color: var(--sp-danger); }
.spectrum-app .row-actions .icon-button { transition: color 140ms ease, transform 140ms ease; }
.spectrum-app .row-actions .icon-button:hover { transform: translateY(-1px); }

/* Delete actions use the same icon geometry everywhere.  SVG defaults to
   overflow:hidden; allowing the stroke's antialiasing to breathe prevents
   the lid/body from appearing cut off in compact rows and on mobile. */
.spectrum-app .cmd-delete,
.spectrum-app .icon-delete-button {
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    overflow: visible;
}
.spectrum-app .cmd-delete .ui-icon,
.spectrum-app .icon-delete-button .ui-icon {
    width: 20px;
    height: 20px;
    overflow: visible;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.spectrum-app .cmd-delete:hover,
.spectrum-app .icon-delete-button:hover { transform: none; }

/* VIS accent frames the destructive action without changing its red meaning. */
.spectrum-app .cmd-delete.cmd-delete {
    border: 1px solid var(--sp-vis-orange);
    border-radius: 8px;
    background: color-mix(in srgb, var(--sp-vis-orange) 6%, transparent);
}
.spectrum-app .cmd-delete.cmd-delete:hover,
.spectrum-app .cmd-delete.cmd-delete:focus-visible {
    border-color: var(--sp-vis-orange);
    background: color-mix(in srgb, var(--sp-vis-orange) 14%, transparent);
}

@media (max-width: 1024px) {
    .spectrum-app .sidebar { position: relative; height: auto; }
    .spectrum-app .sidebar-inner { height: auto; max-height: none; overflow: visible; }
    .spectrum-app .sidebar-toggle { position: absolute; top: 50%; left: auto; right: -18px; }
    body.spectrum-app.sidebar-collapsed .sidebar-toggle { left: auto; right: -18px; }
}

@media (max-width: 760px) {
    .spectrum-app .layout { grid-template-columns: 1fr; }
    .spectrum-app .sidebar { position: relative; height: auto; max-height: none; }
    .spectrum-app .sidebar-inner { height: auto; max-height: none; overflow: visible; }
    body.spectrum-app.sidebar-collapsed .layout { grid-template-columns: 1fr; }
    body.spectrum-app.sidebar-collapsed .sidebar-inner { padding: 10px 12px; }
    body.spectrum-app.sidebar-collapsed .brand h1,
    body.spectrum-app.sidebar-collapsed .nav-label,
    body.spectrum-app.sidebar-collapsed .sidebar-meta { display: none; }
    body.spectrum-app.sidebar-collapsed .sidebar-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    body.spectrum-app.sidebar-collapsed .sidebar-foot { margin-top: 8px; }
    body.spectrum-app.sidebar-collapsed .sidebar-toggle { position: absolute; top: 50%; left: auto; right: 8px; }
    .spectrum-app .cmds { flex-wrap: wrap; }
    .spectrum-app .cmds .cmd { min-width: 8rem; }
    .spectrum-app .field-group { grid-template-columns: 1fr; }
    .spectrum-app .field-group > .field,
    .spectrum-app .field-group > .field.w50,
    .spectrum-app .field-group > .field.w33,
    .spectrum-app .field-group > .field.w34,
    .spectrum-app .field-group > .field.w67 { grid-column: 1 / -1; }
    .spectrum-app .field.help-right { grid-template-columns: 1fr; grid-template-areas: "label" "control" "hint"; }
    .spectrum-app .field.help-right > select,
    .spectrum-app .field.help-right > input,
    .spectrum-app .field.help-right > textarea,
    .spectrum-app .field.help-right > .secret-control,
    .spectrum-app .field.help-right > .unit-control { width: 100%; }
    .spectrum-app .table-wrap { overflow: visible; border: 0; background: transparent; }
    .spectrum-app .table-wrap thead { display: none; }
    .spectrum-app .table-wrap table,
    .spectrum-app .table-wrap tbody,
    .spectrum-app .table-wrap tr,
    .spectrum-app .table-wrap td { display: block; width: 100%; }
    .spectrum-app .table-wrap tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        margin: 0 0 10px;
        overflow: hidden;
        border: 1px solid var(--sp-rule);
        border-radius: var(--sp-radius);
        background: var(--sp-surface);
    }
    .spectrum-app .table-wrap td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 10px;
        border-bottom: 1px solid var(--sp-rule);
        overflow-wrap: anywhere;
        text-align: right;
    }
    .spectrum-app .table-wrap td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        color: var(--sp-text-muted);
        font-size: .72rem;
        font-weight: 700;
        text-align: left;
    }
    .spectrum-app .table-wrap td[data-mobile="hidden"] { display: none; }
    .spectrum-app .table-wrap td[data-mobile="compact"] { font-size: .78rem; white-space: normal; }
    .spectrum-app .table-wrap td.indicator-cell {
        display: flex;
        justify-content: flex-end;
        padding-block: 4px;
    }
    .spectrum-app .table-wrap td.indicator-cell::before { content: ""; flex: 0 0 auto; }
    .spectrum-app .table-wrap td.row-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 8px 10px;
        border-bottom: 0;
    }
    .spectrum-app .table-wrap td.row-actions::before { content: "Acciones"; }
    .spectrum-app .table-wrap tbody tr:last-child { margin-bottom: 0; }
}


/* Sidebar viewport contract: fixed chrome, scrollable navigation only. */
.spectrum-app .sidebar-inner {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
}
.spectrum-app .sidebar-nav {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(23 36 42 / 34%) transparent;
    scrollbar-gutter: stable;
}
.spectrum-app .sidebar-nav::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.spectrum-app .sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.spectrum-app .sidebar-nav::-webkit-scrollbar-thumb {
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgb(23 36 42 / 32%);
    background-clip: padding-box;
}
.spectrum-app .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgb(23 36 42 / 52%);
    background-clip: padding-box;
}
.spectrum-app .sidebar-nav::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}
.spectrum-app .sidebar .action-box {
    width: 100%;
    min-width: 0;
    margin: 0;
}
.spectrum-app .sidebar .action-box > .nav-link {
    width: 100%;
    min-width: 0;
    margin: 0;
    transform: none;
    transition: background-color 140ms ease, color 140ms ease;
}
.spectrum-app .sidebar .action-box > .nav-link:hover,
.spectrum-app .sidebar .action-box > .nav-link:focus-visible {
    transform: none;
}
body.spectrum-app[data-theme="dark"] .sidebar-nav {
    scrollbar-color: rgb(242 182 50 / 48%) transparent;
}
body.spectrum-app[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgb(242 182 50 / 42%);
    background-clip: padding-box;
}
body.spectrum-app[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgb(242 182 50 / 68%);
    background-clip: padding-box;
}
body.spectrum-app.high-contrast .sidebar-nav {
    scrollbar-color: #fff #000;
}
body.spectrum-app.high-contrast .sidebar-nav::-webkit-scrollbar-track {
    background: #000;
}
body.spectrum-app.high-contrast .sidebar-nav::-webkit-scrollbar-thumb {
    background: #fff;
}
@media (max-width: 1024px) {
    .spectrum-app .sidebar-inner {
        height: min(100dvh, 100vh);
        max-height: 100dvh;
    }
    .spectrum-app .sidebar-nav {
        min-height: 0;
        overflow-y: auto;
    }

}
@media (max-width: 760px) {
    .spectrum-app .sidebar {
        height: 100dvh;
        max-height: 100dvh;
    }
    .spectrum-app .sidebar-inner {
        height: 100%;
        max-height: 100%;
    }
    body.spectrum-app.sidebar-collapsed .sidebar {
        height: auto;
        max-height: none;
    }
    body.spectrum-app.sidebar-collapsed .sidebar-inner {
        height: auto;
        max-height: none;
    }
    body.spectrum-app.sidebar-collapsed .sidebar-nav {
        overflow: visible;
    }
}


/* Sidebar grid tracks: tenant context is optional. */
.spectrum-app .sidebar-inner {
    grid-template-rows: auto minmax(0, 1fr) auto;
}
.spectrum-app .sidebar-inner:has(> .tenant-chip) {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}


/* Sidebar nav track must stretch within the grid row. */
.spectrum-app .sidebar-nav {
    align-self: stretch;
    height: auto;
    min-height: 0;
}


/* Scrollbar affordance: subtle track, emphatic hover. */
.spectrum-app .sidebar-nav {
    scrollbar-color: rgb(23 36 42 / 42%) rgb(23 36 42 / 7%);
}
.spectrum-app .sidebar-nav::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgb(23 36 42 / 7%);
}
.spectrum-app .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgb(23 36 42 / 42%);
    background-clip: padding-box;
}
.spectrum-app .sidebar-nav:hover {
    scrollbar-color: rgb(23 36 42 / 72%) rgb(23 36 42 / 14%);
}
.spectrum-app .sidebar-nav:hover::-webkit-scrollbar-track {
    background: rgb(23 36 42 / 14%);
}
.spectrum-app .sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: rgb(23 36 42 / 72%);
    background-clip: padding-box;
}
body.spectrum-app[data-theme="dark"] .sidebar-nav {
    scrollbar-color: rgb(242 182 50 / 58%) rgb(242 182 50 / 10%);
}
body.spectrum-app[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-track {
    background: rgb(242 182 50 / 10%);
}
body.spectrum-app[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgb(242 182 50 / 58%);
    background-clip: padding-box;
}
body.spectrum-app[data-theme="dark"] .sidebar-nav:hover {
    scrollbar-color: rgb(242 182 50 / 86%) rgb(242 182 50 / 20%);
}
body.spectrum-app[data-theme="dark"] .sidebar-nav:hover::-webkit-scrollbar-track {
    background: rgb(242 182 50 / 20%);
}
body.spectrum-app[data-theme="dark"] .sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: rgb(242 182 50 / 86%);
    background-clip: padding-box;
}


/* Sidebar footer controls keep a stable alignment on hover. */
.spectrum-app .sidebar-foot .nav-link,
.spectrum-app .sidebar-foot .nav-link:hover,
.spectrum-app .sidebar-foot .nav-link:focus-visible {
    justify-content: flex-start;
}
body.spectrum-app.sidebar-collapsed .sidebar-foot .nav-link,
body.spectrum-app.sidebar-collapsed .sidebar-foot .nav-link:hover,
body.spectrum-app.sidebar-collapsed .sidebar-foot .nav-link:focus-visible {
    justify-content: center;
}


/* Persistent scrollbar affordance for overlay-scrollbar engines. */
.spectrum-app .sidebar-nav {
    padding-inline-end: 8px;
    background-image: linear-gradient(
        to right,
        transparent calc(100% - 6px),
        rgb(23 36 42 / 7%) calc(100% - 6px),
        rgb(23 36 42 / 7%) 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.spectrum-app .sidebar-nav:hover {
    background-image: linear-gradient(
        to right,
        transparent calc(100% - 6px),
        rgb(23 36 42 / 14%) calc(100% - 6px),
        rgb(23 36 42 / 14%) 100%
    );
}
body.spectrum-app[data-theme="dark"] .sidebar-nav {
    background-image: linear-gradient(
        to right,
        transparent calc(100% - 6px),
        rgb(242 182 50 / 10%) calc(100% - 6px),
        rgb(242 182 50 / 10%) 100%
    );
}
body.spectrum-app[data-theme="dark"] .sidebar-nav:hover {
    background-image: linear-gradient(
        to right,
        transparent calc(100% - 6px),
        rgb(242 182 50 / 20%) calc(100% - 6px),
        rgb(242 182 50 / 20%) 100%
    );
}
.spectrum-app .sidebar .nav-link.is-active,
.spectrum-app .sidebar .nav-link.is-active:hover {
    background: var(--sp-vis-orange-soft);
    box-shadow: inset 3px 0 0 var(--sp-vis-orange);
    color: var(--sp-text);
    font-weight: 650;
}
body.spectrum-app[data-theme="dark"] .sidebar .nav-link.is-active,
body.spectrum-app[data-theme="dark"] .sidebar .nav-link.is-active:hover {
    background: rgb(242 182 50 / 18%);
    color: #fff;
}
body.spectrum-app.high-contrast .sidebar .nav-link.is-active,
body.spectrum-app.high-contrast .sidebar .nav-link.is-active:hover {
    background: #222;
    color: #fff;
    box-shadow: inset 4px 0 0 #fff;
}


/* Final sidebar affordance and selection treatment. */
.spectrum-app .sidebar-nav {
    padding-inline-end: 10px;
    background-image: linear-gradient(
        to right,
        transparent calc(100% - 8px),
        rgb(255 255 255 / 14%) calc(100% - 8px),
        rgb(255 255 255 / 14%) 100%
    );
}
.spectrum-app .sidebar-nav:hover {
    background-image: linear-gradient(
        to right,
        transparent calc(100% - 8px),
        rgb(255 255 255 / 32%) calc(100% - 8px),
        rgb(255 255 255 / 32%) 100%
    );
}
.spectrum-app .sidebar .nav-link.is-active,
.spectrum-app .sidebar .nav-link.is-active:hover {
    background: color-mix(in srgb, var(--sp-surface-muted) 50%, transparent);
    box-shadow: inset 3px 0 0 var(--sp-vis-orange);
    color: var(--sp-vis-orange);
    font-weight: 650;
}
body.spectrum-app[data-theme="dark"] .sidebar-nav {
    background-image: linear-gradient(
        to right,
        transparent calc(100% - 8px),
        rgb(242 182 50 / 22%) calc(100% - 8px),
        rgb(242 182 50 / 22%) 100%
    );
}
body.spectrum-app[data-theme="dark"] .sidebar-nav:hover {
    background-image: linear-gradient(
        to right,
        transparent calc(100% - 8px),
        rgb(242 182 50 / 42%) calc(100% - 8px),
        rgb(242 182 50 / 42%) 100%
    );
}
body.spectrum-app[data-theme="dark"] .sidebar .nav-link.is-active,
body.spectrum-app[data-theme="dark"] .sidebar .nav-link.is-active:hover {
    background: rgb(255 255 255 / 8%);
    color: var(--sp-vis-orange);
    box-shadow: inset 3px 0 0 var(--sp-vis-orange);
}


/* Final sidebar contrast: active item is identified by orange semantics; the
   persistent scrollbar uses the same neutral as the menu hover state. */
.spectrum-app .sidebar-nav {
    scrollbar-color: rgb(255 255 255 / 9%) transparent;
    background-image: linear-gradient(
        to right,
        transparent calc(100% - 8px),
        rgb(255 255 255 / 9%) calc(100% - 8px),
        rgb(255 255 255 / 9%) 100%
    );
}
.spectrum-app .sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.spectrum-app .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 9%);
    background-clip: padding-box;
}
.spectrum-app .sidebar-nav:hover {
    scrollbar-color: rgb(255 255 255 / 18%) transparent;
    background-image: linear-gradient(
        to right,
        transparent calc(100% - 8px),
        rgb(255 255 255 / 18%) calc(100% - 8px),
        rgb(255 255 255 / 18%) 100%
    );
}
.spectrum-app .sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 18%);
    background-clip: padding-box;
}
.spectrum-app .sidebar .nav-link.is-active,
.spectrum-app .sidebar .nav-link.is-active:hover {
    background: transparent;
    box-shadow: inset 3px 0 0 var(--sp-vis-orange);
    color: var(--sp-vis-orange);
    font-weight: 650;
}
body.spectrum-app[data-theme="dark"] .sidebar-nav {
    scrollbar-color: rgb(242 182 50 / 22%) transparent;
    background-image: linear-gradient(
        to right,
        transparent calc(100% - 8px),
        rgb(242 182 50 / 22%) calc(100% - 8px),
        rgb(242 182 50 / 22%) 100%
    );
}
body.spectrum-app[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgb(242 182 50 / 22%);
    background-clip: padding-box;
}
body.spectrum-app[data-theme="dark"] .sidebar-nav:hover {
    scrollbar-color: rgb(242 182 50 / 40%) transparent;
    background-image: linear-gradient(
        to right,
        transparent calc(100% - 8px),
        rgb(242 182 50 / 40%) calc(100% - 8px),
        rgb(242 182 50 / 40%) 100%
    );
}
body.spectrum-app[data-theme="dark"] .sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: rgb(242 182 50 / 40%);
    background-clip: padding-box;
}
body.spectrum-app[data-theme="dark"] .sidebar .nav-link.is-active,
body.spectrum-app[data-theme="dark"] .sidebar .nav-link.is-active:hover {
    background: transparent;
    color: var(--sp-vis-orange);
    box-shadow: inset 3px 0 0 var(--sp-vis-orange);
}


/* Scrollbar final: no track/background, no arrows; only the moving thumb. */
.spectrum-app .sidebar-nav {
    background-image: none;
    scrollbar-color: rgb(255 255 255 / 9%) transparent;
}
.spectrum-app .sidebar-nav::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.spectrum-app .sidebar-nav::-webkit-scrollbar-track,
.spectrum-app .sidebar-nav::-webkit-scrollbar-button {
    background: transparent;
    width: 0;
    height: 0;
}
.spectrum-app .sidebar-nav::-webkit-scrollbar-thumb {
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgb(255 255 255 / 9%);
    background-clip: padding-box;
}
.spectrum-app .sidebar-nav:hover {
    background-image: none;
    scrollbar-color: rgb(255 255 255 / 18%) transparent;
}
.spectrum-app .sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 18%);
    background-clip: padding-box;
}
body.spectrum-app[data-theme="dark"] .sidebar-nav {
    background-image: none;
    scrollbar-color: rgb(242 182 50 / 22%) transparent;
}
body.spectrum-app[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgb(242 182 50 / 22%);
    background-clip: padding-box;
}
body.spectrum-app[data-theme="dark"] .sidebar-nav:hover {
    background-image: none;
    scrollbar-color: rgb(242 182 50 / 40%) transparent;
}
body.spectrum-app[data-theme="dark"] .sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: rgb(242 182 50 / 40%);
    background-clip: padding-box;
}

/* Overlay-safe custom thumb: Chromium may hide native scrollbars until hover,
   so the only visible affordance is this moving thumb, never a background track. */
.spectrum-app .sidebar-nav {
    position: relative;
    scrollbar-width: none;
}
.spectrum-app .sidebar-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.spectrum-app .sidebar-nav::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: var(--sp-scroll-thumb-top, 0px);
    right: 1px;
    width: 6px;
    height: var(--sp-scroll-thumb-height, 28%);
    min-height: 34px;
    border-radius: 999px;
    background: rgb(255 255 255 / 9%);
    pointer-events: none;
    transition: background-color 140ms ease;
}
.spectrum-app .sidebar-nav:hover::after {
    background: rgb(255 255 255 / 18%);
}
body.spectrum-app[data-theme="dark"] .sidebar-nav::after {
    background: rgb(242 182 50 / 22%);
}
body.spectrum-app[data-theme="dark"] .sidebar-nav:hover::after {
    background: rgb(242 182 50 / 40%);
}


/* Compact navigation rows inside the fixed, scrollable sidebar viewport. */
.spectrum-app .sidebar-nav {
    align-content: start;
    grid-auto-rows: max-content;
}

/* Tenant context chip sits on the dark VIS sidebar, independently of the
   content theme; keep its label readable without creating a second panel. */
.spectrum-app .tenant-chip {
    background: rgb(255 255 255 / 8%);
    border-color: rgb(255 255 255 / 14%);
    color: #fff;
}
.spectrum-app .tenant-chip strong,
.spectrum-app .tenant-chip span {
    color: inherit;
}
.spectrum-app .sidebar-nav:not([data-scrollable="true"])::after { display: none; }

/* Stable sidebar geometry: collapse changes the rail width, never the
   internal chrome's alignment. The same rules serve Panel and Studio. */
.spectrum-app {
    --sp-sidebar-expanded: 224px;
    --sp-sidebar-collapsed: 68px;
}
.spectrum-app .layout {
    grid-template-columns: var(--sp-sidebar-width, var(--sp-sidebar-expanded)) minmax(0, 1fr);
    transition: grid-template-columns 220ms cubic-bezier(.2,.8,.2,1);
}
.spectrum-app .sidebar-inner,
.spectrum-app .brand-row,
.spectrum-app .brand,
.spectrum-app .tenant-chip,
.spectrum-app .sidebar-nav,
.spectrum-app .sidebar-foot,
.spectrum-app .nav-link,
.spectrum-app .action-box {
    min-width: 0;
    max-width: 100%;
}
.spectrum-app .brand-row {
    min-height: 64px;
    align-items: center;
}
.spectrum-app .brand {
    overflow: hidden;
    transition: gap 220ms ease;
}
.spectrum-app .brand h1 {
    min-width: 0;
    max-width: 12rem;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    transform: translateX(0);
    transition: max-width 220ms ease, opacity 160ms ease, transform 220ms ease;
}
.spectrum-app .tenant-chip {
    overflow: hidden;
    white-space: nowrap;
    transition: width 220ms ease, opacity 160ms ease, transform 220ms ease;
}
.spectrum-app .sidebar-nav {
    width: 100%;
    align-content: start;
    grid-auto-rows: 44px;
}
.spectrum-app .sidebar .nav-link {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    transition: background-color 160ms ease, color 160ms ease, padding 220ms ease;
}
.spectrum-app .sidebar .nav-link .nav-label {
    min-width: 0;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1;
    transition: max-width 220ms ease, opacity 160ms ease;
}
.spectrum-app .sidebar-foot .nav-link {
    width: 100%;
}
.spectrum-app .sidebar-toggle {
    transition: left 220ms cubic-bezier(.2,.8,.2,1), right 220ms ease,
        box-shadow 180ms ease, background-color 180ms ease;
}
body.spectrum-app.sidebar-collapsed {
    --sp-sidebar-width: var(--sp-sidebar-collapsed);
}
body.spectrum-app.sidebar-collapsed .brand-row,
body.spectrum-app.sidebar-collapsed .brand {
    justify-content: center;
}
body.spectrum-app.sidebar-collapsed .brand-row {
    min-height: 64px;
}
body.spectrum-app.sidebar-collapsed .brand h1 {
    max-width: 0;
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
}
body.spectrum-app.sidebar-collapsed .vis-brand-logo {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}
body.spectrum-app.sidebar-collapsed .tenant-chip {
    width: 100%;
    min-height: 36px;
    justify-content: center;
    padding-inline: 0;
    opacity: 0;
    visibility: hidden;
    transform: scaleX(.72);
}
body.spectrum-app.sidebar-collapsed .sidebar .nav-link,
body.spectrum-app.sidebar-collapsed .sidebar-foot .nav-link {
    justify-content: center;
    gap: 0;
    padding-inline: 0;
}
body.spectrum-app.sidebar-collapsed .sidebar .nav-link .nav-label,
body.spectrum-app.sidebar-collapsed .sidebar-foot .nav-link .nav-label {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
}
body.spectrum-app.sidebar-collapsed .sidebar .nav-link .ui-icon,
body.spectrum-app.sidebar-collapsed .sidebar-foot .nav-link .ui-icon {
    margin-inline: auto;
}
body.spectrum-app.sidebar-collapsed .sidebar-toggle {
    left: calc(var(--sp-sidebar-collapsed) - 18px);
    right: auto;
}

/* Mobile uses a fixed drawer/rail, not a tall block above the content. */
@media (max-width: 760px) {
    .spectrum-app .layout {
        display: block;
        min-height: 100dvh;
    }
    .spectrum-app .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 100;
        width: 280px;
        height: 100dvh;
        transform: translateX(0);
        transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease;
        box-shadow: 10px 0 30px rgb(0 0 0 / 18%);
    }
    .spectrum-app .sidebar-inner {
        width: 100%;
        height: 100%;
        min-height: 100dvh;
        max-height: 100dvh;
        padding: 16px;
        overflow: visible;
    }
    .spectrum-app .sidebar-nav {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .spectrum-app .main {
        min-height: 100dvh;
        padding-left: 56px;
    }
    .spectrum-app .sidebar-toggle,
    body.spectrum-app.sidebar-collapsed .sidebar-toggle {
        position: absolute;
        top: 50dvh;
        left: auto;
        right: -18px;
        transform: translateY(-50%);
    }
    body.spectrum-app.sidebar-collapsed .sidebar {
        transform: translateX(-224px);
        box-shadow: 4px 0 18px rgb(0 0 0 / 14%);
    }
    body.spectrum-app.sidebar-collapsed .brand-row,
    body.spectrum-app.sidebar-collapsed .brand,
    body.spectrum-app.sidebar-collapsed .sidebar-nav,
    body.spectrum-app.sidebar-collapsed .sidebar-foot {
        width: 56px;
    }
    body.spectrum-app.sidebar-collapsed .brand .vis-brand-logo {
        margin-inline: auto;
    }
    body.spectrum-app.sidebar-collapsed .sidebar-nav {
        grid-template-columns: 1fr;
        grid-auto-rows: 44px;
        gap: 2px;
    }
    body.spectrum-app.sidebar-collapsed .sidebar-inner {
        width: 56px;
        margin-left: 224px;
        padding-inline: 0;
    }
    body.spectrum-app.sidebar-collapsed .brand-row,
    body.spectrum-app.sidebar-collapsed .brand {
        justify-content: center;
    }
    body.spectrum-app.sidebar-collapsed .tenant-chip {
        width: 56px;
        min-height: 36px;
        visibility: hidden;
    }
    body.spectrum-app.sidebar-collapsed .sidebar .nav-link,
    body.spectrum-app.sidebar-collapsed .sidebar-foot .nav-link {
        width: 56px;
    }
    .spectrum-app .sidebar-toggle,
    body.spectrum-app.sidebar-collapsed .sidebar-toggle {
        z-index: 201;
    }
    .spectrum-app .list-filters {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 10px;
    }
    .spectrum-app .list-filters .filter-field,
    .spectrum-app .list-filters .search-field {
        width: 100%;
        min-width: 0;
        max-width: none;
        flex: none;
    }
    .spectrum-app .list-filters > button {
        width: 100%;
    }
    .spectrum-app .pagination {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        min-width: 0;
        padding-inline: 0;
    }
    .spectrum-app .pagination-summary,
    .spectrum-app .pagination-pages,
    .spectrum-app .pagination-tools {
        grid-column: 1;
        min-width: 0;
    }
    .spectrum-app .pagination-pages {
        justify-content: center;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .spectrum-app .pagination-pages::-webkit-scrollbar {
        display: none;
    }
    .spectrum-app .pagination-tools {
        width: 100%;
        justify-self: stretch;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .spectrum-app .page-size-form {
        flex: 1 1 15rem;
    }
    .spectrum-app .page-size-form select {
        min-width: 0;
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spectrum-app .layout,
    .spectrum-app .sidebar,
    .spectrum-app .brand,
    .spectrum-app .brand h1,
    .spectrum-app .tenant-chip,
    .spectrum-app .sidebar .nav-link,
    .spectrum-app .sidebar .nav-link .nav-label,
    .spectrum-app .sidebar-toggle {
        transition: none !important;
    }
}


/* Password reveal control: keep a real touch target and a legible eye icon. */
.spectrum-app .password-toggle {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.spectrum-app .password-toggle .ui-icon {
    width: 22px;
    height: 22px;
}

.spectrum-app .password-toggle .ui-icon {
    flex: 0 0 22px;
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    height: 22px;
}


/* Declarative datetime picker: manual text remains possible, while the calendar
   offers a readable, keyboard/touch-friendly alternative. */
.spectrum-app .datetime-control {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.spectrum-app .datetime-control input {
    flex: 1 1 auto;
    min-width: 0;
    accent-color: var(--sp-vis-orange);
}
.spectrum-app .datetime-picker-toggle {
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--sp-rule);
    background: var(--sp-surface-muted);
    color: var(--sp-link);
}
.spectrum-app .datetime-picker-toggle .ui-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
}
.spectrum-app .datetime-picker {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 0;
    width: min(300px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid var(--sp-rule);
    border-radius: 16px;
    background: var(--sp-surface);
    box-shadow: 0 16px 36px rgb(20 60 74 / 24%);
}
.spectrum-app .datetime-picker[hidden] { display: none; }
.spectrum-app .datetime-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.spectrum-app .datetime-picker-title {
    flex: 1 1 auto;
    text-align: center;
    color: var(--sp-text);
    font-weight: 750;
    text-transform: capitalize;
}
.spectrum-app .datetime-picker-nav {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--sp-link);
}
.spectrum-app .datetime-picker-nav:hover,
.spectrum-app .datetime-picker-nav:focus-visible {
    background: var(--sp-vis-orange-soft);
    color: var(--sp-vis-orange);
}
.spectrum-app .datetime-weekdays,
.spectrum-app .datetime-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.spectrum-app .datetime-weekdays {
    margin-bottom: 5px;
    color: var(--sp-text-muted);
    font-size: .72rem;
    font-weight: 750;
    text-align: center;
}
.spectrum-app .datetime-weekdays .sunday { color: var(--sp-danger); }
.spectrum-app .datetime-day,
.spectrum-app .datetime-empty {
    min-width: 0;
    min-height: 32px;
}
.spectrum-app .datetime-day {
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--sp-text);
    font: inherit;
    font-size: .84rem;
}
.spectrum-app .datetime-day:hover,
.spectrum-app .datetime-day:focus-visible {
    background: var(--sp-vis-orange-soft);
    color: var(--sp-vis-orange);
}
.spectrum-app .datetime-day.is-selected {
    background: var(--sp-vis-orange);
    color: #fff;
    font-weight: 750;
}
.spectrum-app .datetime-day.is-sunday { color: var(--sp-danger); }
.spectrum-app .datetime-day.is-sunday.is-selected { color: #fff; }
body.spectrum-app[data-theme="dark"] .datetime-picker {
    box-shadow: 0 16px 36px rgb(0 0 0 / 42%);
}


/* Required-field states stay legible across all visual modes. */
body.spectrum-app[data-theme="dark"] .field.is-required > input,
body.spectrum-app[data-theme="dark"] .field.is-required > textarea,
body.spectrum-app[data-theme="dark"] .field.is-required > select,
body.spectrum-app[data-theme="dark"] .field.is-required > .secret-control input,
body.spectrum-app[data-theme="dark"] .field.is-required > .datetime-control input {
    background: #302326;
    border-color: #ff8b84;
    color: var(--sp-text);
}
body.spectrum-app[data-theme="dark"] .field.is-required > input:focus,
body.spectrum-app[data-theme="dark"] .field.is-required > textarea:focus,
body.spectrum-app[data-theme="dark"] .field.is-required > select:focus,
body.spectrum-app[data-theme="dark"] .field.is-required > .secret-control input:focus,
body.spectrum-app[data-theme="dark"] .field.is-required > .datetime-control input:focus {
    background: #3b292c;
    border-color: #ffb3ae;
}
body.spectrum-app.high-contrast .field.is-required > input,
body.spectrum-app.high-contrast .field.is-required > textarea,
body.spectrum-app.high-contrast .field.is-required > select,
body.spectrum-app.high-contrast .field.is-required > .secret-control input,
body.spectrum-app.high-contrast .field.is-required > .datetime-control input {
    background: #000;
    border: 2px solid var(--sp-danger);
    color: #fff;
}
body.spectrum-app.high-contrast .field.is-required > input:focus,
body.spectrum-app.high-contrast .field.is-required > textarea:focus,
body.spectrum-app.high-contrast .field.is-required > select:focus,
body.spectrum-app.high-contrast .field.is-required > .secret-control input:focus,
body.spectrum-app.high-contrast .field.is-required > .datetime-control input:focus {
    background: #000;
    border-color: var(--sp-danger);
    outline: 3px solid var(--sp-focus);
    outline-offset: 2px;
}

/* Structural chrome is one continuous rail.  The brand row must never
   become a second rectangular surface or acquire a separator from another
   renderer layer, including during navigation/entry transitions. */
.spectrum-app .sidebar .brand-row,
.spectrum-app .sidebar .brand,
.spectrum-app .sidebar .brand-row::before,
.spectrum-app .sidebar .brand-row::after {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.spectrum-app .sidebar .brand-row::before,
.spectrum-app .sidebar .brand-row::after {
    content: none !important;
}

.spectrum-app .datetime-picker.is-above {
    top: auto;
    bottom: calc(100% + 8px);
}


/* Theme-safe table headers and required controls. */
body.spectrum-app[data-theme="dark"] .table-wrap th {
    background: #2b4146;
    color: #ffffff;
    border-bottom-color: #5b777d;
}
body.spectrum-app.high-contrast .table-wrap th {
    background: #000000;
    color: #ffffff;
    border-bottom: 2px solid #ffffff;
}
body.spectrum-app[data-theme="dark"] .field.is-required > label,
body.spectrum-app[data-theme="dark"] .field.is-required > .hint {
    color: #ffb3ae;
}
body.spectrum-app.high-contrast .field.is-required > label,
body.spectrum-app.high-contrast .field.is-required > .hint {
    color: #ff8080;
    font-weight: 700;
}
body.spectrum-app[data-theme="dark"] .field.is-required select,
body.spectrum-app[data-theme="dark"] .field.is-required select option {
    background: #302326;
    color: #ffffff;
}
body.spectrum-app.high-contrast .field.is-required select,
body.spectrum-app.high-contrast .field.is-required select option {
    background: #000000;
    color: #ffffff;
}
body.spectrum-app[data-theme="dark"] .field.is-required input::placeholder,
body.spectrum-app[data-theme="dark"] .field.is-required textarea::placeholder {
    color: #e8b8b5;
    opacity: 1;
}
body.spectrum-app.high-contrast .field.is-required input::placeholder,
body.spectrum-app.high-contrast .field.is-required textarea::placeholder {
    color: #ffb3ae;
    opacity: 1;
}

/* Final button surface contract (kept after theme/form overrides). */
:root { --sp-button-bg: #2a4148; --sp-button-hover: #38555d; --sp-button-text: #f4f7f7; }
.spectrum-app button:not(.cmd.submit):not(.cmd-delete),
.spectrum-app .button:not(.cmd.submit),
.spectrum-app .tab-button:not(.cmd.submit),
.spectrum-app .cmd.cancel,
.spectrum-app .pagination-center .page-button {
    background: var(--sp-button-bg);
    border-color: var(--sp-button-bg);
    color: var(--sp-button-text);
}
.spectrum-app button:not(.cmd.submit):not(.cmd-delete):hover,
.spectrum-app .button:not(.cmd.submit):hover,
.spectrum-app .tab-button:not(.cmd.submit):hover,
.spectrum-app .cmd.cancel:hover,
.spectrum-app .pagination-center .page-button:hover {
    background: var(--sp-button-hover);
    border-color: var(--sp-button-hover);
    color: #fff;
}
.spectrum-app .pagination-center .page-jump-form input,
.spectrum-app .page-size-form select,
.spectrum-app .filter-field select,
.spectrum-app input,
.spectrum-app textarea,
.spectrum-app select {
    background: var(--sp-surface);
    color: var(--sp-text);
}
.spectrum-app.high-contrast button:not(.cmd.submit):not(.cmd-delete),
.spectrum-app.high-contrast .button:not(.cmd.submit),
.spectrum-app.high-contrast .tab-button:not(.cmd.submit),
.spectrum-app.high-contrast .cmd.cancel,
.spectrum-app.high-contrast .pagination-center .page-button {
    background: #000;
    border-color: #fff;
    color: #fff;
}

/* Final chrome layer order, after all responsive rules.  Main must not create
   a stacking context: the header then paints above the sidebar shadow while
   both chrome shadows still fall on the content. */
.spectrum-app .layout { isolation: isolate; }
.spectrum-app .main { position: relative; z-index: auto !important; }
.spectrum-app .sidebar {
    z-index: 10 !important;
    box-shadow: 12px 0 28px rgb(20 60 74 / 22%);
}
.spectrum-app .main > .hero {
    position: relative;
    z-index: 20 !important;
    box-shadow: 0 10px 28px rgb(20 60 74 / 22%);
}
.spectrum-app .sidebar-toggle { z-index: 30 !important; }
@media (max-width: 760px) {
    .spectrum-app .sidebar { z-index: 40 !important; }
    .spectrum-app .sidebar-toggle,
    body.spectrum-app.sidebar-collapsed .sidebar-toggle { z-index: 50 !important; }
}
/* Resource previews are engine chrome, not application-specific styling. */
.resource-preview-image {
    display: inline-block;
    max-width: 12rem;
    overflow: hidden;
    vertical-align: middle;
}

.resource-preview-image img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 7rem;
    object-fit: cover;
}

.table-wrap td .resource-preview-image {
    width: auto;
    max-width: 6rem;
    height: auto;
    margin: 0;
}

.table-wrap td .resource-preview-image img {
    width: auto;
    max-width: 6rem;
    height: auto;
    max-height: 4rem;
}

@media (min-width: 761px) {
    .spectrum-app .table-wrap table {
        min-width: 62rem;
        table-layout: fixed;
    }

    .spectrum-app .table-wrap td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .spectrum-app .table-wrap th:last-child,
    .spectrum-app .table-wrap td.row-actions {
        position: sticky;
        right: 0;
        z-index: 2;
        width: 3.5rem;
        min-width: 3.5rem;
        max-width: 3.5rem;
        padding: .35rem !important;
        text-align: center;
        background: var(--sp-surface);
    }

    .spectrum-app .table-wrap th:last-child {
        background: var(--sp-vis-orange-soft);
    }
}

/* Final project-color layer: it must follow Spectrum's compatibility layers. */
.spectrum-app[data-project="uarm-intranet"] {
    --sp-accent: #ea4e4a;
    --sp-vis-orange: #ea4e4a;
    --sp-vis-orange-soft: #fce9e7;
}
.spectrum-app[data-project="uarm-intranet"] .sidebar .nav-link.is-active,
.spectrum-app[data-project="uarm-intranet"] .sidebar .nav-link.is-active:hover {
    color: #ffb8b5;
}
.spectrum-app[data-project="uarm-intranet"] .sidebar .nav-link.is-active::before { background: #ea4e4a; }
@media (min-width: 761px) {
    .spectrum-app .table-wrap th:last-child,
    .spectrum-app .table-wrap td.row-actions {
        width: 5.25rem;
        min-width: 5.25rem;
        max-width: 5.25rem;
        overflow: visible;
        text-overflow: clip;
    }
}
.spectrum-app [hidden] { display: none !important; }

/* Generic declarative HTML editor. */
.spectrum-app [data-html-editor] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .55rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.spectrum-app [data-html-toolbar],
.spectrum-app [data-html-editor] [role="toolbar"] {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .45rem;
    border: 1px solid var(--sp-border, #c8d3e1);
    border-radius: 12px;
    background: var(--sp-surface-subtle, #f7f7f5);
}

.spectrum-app [data-html-toolbar] button,
.spectrum-app [data-html-editor] [role="toolbar"] button {
    min-width: 2.45rem;
    min-height: 2.45rem;
    padding: .45rem .65rem;
    border-radius: 9px;
}

.spectrum-app [data-html-toolbar] button[aria-pressed="true"],
.spectrum-app [data-html-editor] [role="toolbar"] button[aria-pressed="true"] {
    border-color: var(--sp-accent, #995a26);
    box-shadow: inset 0 0 0 1px var(--sp-accent, #995a26);
}

.spectrum-app [data-html-editor-canvas],
.spectrum-app textarea[data-html-editor-value]:not([hidden]) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 16rem;
    max-height: 34rem;
    padding: 1rem 1.05rem;
    overflow: auto;
    border: 1px solid var(--sp-border, #c8d3e1);
    border-radius: 12px;
    background: var(--sp-surface, #fff);
    color: var(--sp-text, #111827);
    font: inherit;
    line-height: 1.6;
    overflow-wrap: anywhere;
    resize: vertical;
}

.spectrum-app [data-html-editor-canvas]:focus,
.spectrum-app textarea[data-html-editor-value]:not([hidden]):focus {
    outline: 3px solid var(--sp-focus, #f59e0b);
    outline-offset: 2px;
}

.spectrum-app [data-html-editor-canvas]:empty::before {
    content: attr(data-placeholder);
    color: var(--sp-muted, #58708e);
    pointer-events: none;
}

.spectrum-app [data-html-editor-canvas] :where(p, h2, h3, ul, ol, blockquote) {
    margin-block: 0 1rem;
}

.spectrum-app [data-html-editor-canvas] :where(ul, ol) {
    padding-inline-start: 1.6rem;
}

.spectrum-app [data-html-editor-canvas] a {
    text-decoration: underline;
    text-underline-offset: .16em;
}

.spectrum-app [data-html-editor-canvas] img[data-resource-ref] {
    display: block;
    max-width: 100%;
    height: auto;
    margin: .75rem auto 1rem;
    border-radius: 10px;
}

.spectrum-app .html-resource-alt { display: grid; gap: .35rem; padding: .75rem 1rem 0; font-weight: 700; }
.spectrum-app .html-resource-alt input { width: 100%; padding: .7rem .8rem; border: 1px solid var(--sp-border, #c8d3e1); border-radius: 9px; background: var(--sp-surface, #fff); color: var(--sp-text, #111827); font: inherit; }

body.spectrum-app.high-contrast [data-html-toolbar],
body.spectrum-app.high-contrast [data-html-editor] [role="toolbar"],
body.spectrum-app.high-contrast [data-html-editor-canvas],
body.spectrum-app.high-contrast textarea[data-html-editor-value]:not([hidden]) {
    border-color: #fff !important;
    background: #000 !important;
    color: #fff !important;
}

body.spectrum-app.high-contrast [data-html-toolbar] button,
body.spectrum-app.high-contrast [data-html-editor] [role="toolbar"] button {
    border-color: #fff !important;
    background: #000 !important;
    color: #fff !important;
}

body.spectrum-app.high-contrast [data-html-toolbar] button:focus,
body.spectrum-app.high-contrast [data-html-editor] [role="toolbar"] button:focus,
body.spectrum-app.high-contrast [data-html-editor-canvas]:focus,
body.spectrum-app.high-contrast textarea[data-html-editor-value]:not([hidden]):focus {
    outline-color: #ff0 !important;
}

body.spectrum-app.high-contrast [data-html-toolbar] button[aria-pressed="true"],
body.spectrum-app.high-contrast [data-html-editor] [role="toolbar"] button[aria-pressed="true"] {
    border-color: #ff0 !important;
    color: #ff0 !important;
    box-shadow: inset 0 0 0 1px #ff0;
}

body.spectrum-app.high-contrast .resource-policy-help {
    color: #fff !important;
}

/* Application ownership is declarative and independent from contextual
   tenant branding. Wide owner marks can stack above the application title;
   square and vertical marks keep the compact inline composition. */
.spectrum-app .sidebar .app-brand.brand-layout-inline {
    flex-direction: row;
    align-items: center;
}

.spectrum-app .sidebar .app-brand.brand-layout-stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
}

.spectrum-app .sidebar .app-brand.brand-layout-stacked .app-brand-logo {
    width: min(100%, 148px);
    height: auto;
    max-height: 52px;
    flex: 0 0 auto;
    border-radius: 0;
    object-fit: contain;
    object-position: left center;
    background: transparent;
}

.spectrum-app .sidebar .app-brand.brand-layout-stacked h1 {
    font-size: 1.12rem;
    letter-spacing: .01em;
}

.spectrum-app .hero-side {
    margin-inline-start: auto;
}

body.spectrum-app.sidebar-collapsed .sidebar .app-brand {
    align-items: center;
    gap: 0;
}

body.spectrum-app.sidebar-collapsed .sidebar .app-brand .app-brand-logo {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    object-fit: contain;
    object-position: center;
}

@media (forced-colors: active) {
    .spectrum-app [data-html-toolbar],
    .spectrum-app [data-html-editor] [role="toolbar"],
    .spectrum-app [data-html-editor-canvas],
    .spectrum-app textarea[data-html-editor-value]:not([hidden]) {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
        forced-color-adjust: auto;
    }
}

@media (max-width: 760px) {
    .spectrum-app [data-html-toolbar],
    .spectrum-app [data-html-editor] [role="toolbar"] {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .spectrum-app [data-html-toolbar] button,
    .spectrum-app [data-html-editor] [role="toolbar"] button {
        flex: 0 0 auto;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .spectrum-app [data-html-editor-canvas],
    .spectrum-app textarea[data-html-editor-value]:not([hidden]) {
        min-height: 13rem;
        max-height: 60vh;
        padding: .85rem;
    }
}

/* Final semantic appearance bridge. */
body.spectrum-app { background: var(--sp-canvas, #f4f4f4); color: var(--sp-text, #111827); }
body.spectrum-app .sidebar { background: var(--sp-navigation, #132a34); color: var(--sp-navigation-text, #fff); }
body.spectrum-app .sidebar :where(.app-brand, .app-brand h1, .app-brand p, .nav-section-title, .nav-link) { color: var(--sp-navigation-text, #fff); }
body.spectrum-app .sidebar .nav-link:hover,
body.spectrum-app .sidebar .nav-link:focus-visible { background: color-mix(in srgb, var(--sp-navigation-active, var(--sp-accent, #f2a900)) 24%, transparent); }
body.spectrum-app .sidebar .nav-link.is-active { background: var(--sp-navigation-active, var(--sp-accent, #f2a900)); color: var(--sp-navigation-text, #fff); }
body.spectrum-app .hero.panel { border-top-color: var(--sp-accent, #f2a900); }
body.spectrum-app :where(a:not(.button), .link-button) { color: var(--sp-link, var(--sp-accent, #995a26)); }
body.spectrum-app :where(button, input, select, textarea, a):focus-visible { outline-color: var(--sp-focus, #f59e0b); }