/*
  COMMENTO CODICE: DocFlow.Web\wwwroot\app.css
  Effetto: asset statico caricato dal browser.
  Scopo: definisce lo stile visuale per app e per gli elementi HTML/Blazor collegati.
*/

html, body {
    font-family: var(--app-font-family, Arial, Helvetica, sans-serif);
    font-size: var(--app-font-size, 14px);
    color: var(--app-text, #1d2430);
    background: var(--app-bg, #f5f7f8);
}

.login-layout {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, var(--login-bg-color, #082042) 0%, var(--login-bg-color-2, #214b5b) 55%, #f5f7f8 55%);
    position: relative;
    overflow: hidden;
}

.login-docflow-mark {
    position: fixed;
    right: clamp(1rem, 4vw, 3.5rem);
    width: clamp(160px, 22vw, 340px);
    max-width: 38vw;
    height: auto;
    object-fit: contain;
    opacity: .95;
    filter: drop-shadow(0 12px 28px rgba(8, 32, 66, .14));
    pointer-events: none;
    z-index: 0;
}

.login-docflow-mark.top-right {
    top: clamp(1rem, 5vh, 4rem);
}

.login-docflow-mark.bottom-right {
    bottom: clamp(1rem, 5vh, 4rem);
}

.login-layout.login-bg-color {
    background: var(--login-bg-color, #082042);
}

.login-layout.login-bg-gradient {
    background: var(--login-bg-gradient, linear-gradient(135deg, color-mix(in srgb, var(--login-bg-color, #082042) var(--login-gradient-opacity, 100%), transparent), color-mix(in srgb, var(--login-bg-color-2, #214b5b) var(--login-gradient-opacity, 100%), transparent)));
}

.login-layout.login-bg-image,
.login-layout.login-bg-random {
    background:
        linear-gradient(rgba(5, 24, 36, .38), rgba(5, 24, 36, .38)),
        var(--login-bg-image),
        linear-gradient(135deg, var(--login-bg-color, #082042) 0%, var(--login-bg-color-2, #214b5b) 55%, #f5f7f8 55%);
    background-position: center;
    background-size: cover;
}

.login-card {
    width: min(420px, 100%);
    display: grid;
    gap: .85rem;
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    padding: 1.35rem;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(25, 43, 55, .22);
    position: relative;
    z-index: 1;
}

.login-brand {
    margin-bottom: .5rem;
}

.login-brand strong {
    display: block;
    color: #082042;
    font-size: 1.6rem;
}

.login-brand span, .login-card small {
    color: #60717d;
}

.login-card label {
    display: grid;
    gap: .3rem;
    color: #41535c;
}

.login-card input,
.login-card select {
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .65rem;
}

.login-card button {
    border: 0;
    border-radius: 6px;
    padding: .7rem;
    color: #ffffff;
    background: #0f6f7c;
}

.primary-button,
.primary-action {
    border-color: var(--app-button-border, #0f6f7c);
    color: var(--app-button-text, #ffffff);
    background: var(--app-button-bg, #0f6f7c);
}

.doc-tree svg,
.doc-tree button svg,
.tree-actions svg,
.tree-node-icon {
    color: var(--app-tree-icon-color, var(--app-icon-color, #0f5260));
}

.icon-only-action {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    font-size: 0;
    line-height: 1;
}

.icon-only-action::before {
    content: attr(data-icon);
    font-size: 1rem;
    font-weight: 700;
}

.danger-button {
    border: 1px solid #d9a3a3;
    border-radius: 6px;
    padding: .45rem .75rem;
    color: #8b1d1d;
    background: #fff4f4;
}

.danger-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.designer-import-button {
    position: relative;
    width: var(--app-icon-button-size, 34px);
    height: var(--app-icon-button-size, 34px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    color: #0f6f7c;
    background: #ffffff;
    overflow: hidden;
    cursor: pointer;
}

.login-secondary-action {
    color: #0f6f7c;
    font-weight: 700;
    text-decoration: none;
}

.login-background-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .65rem;
}

.login-background-live-preview {
    min-height: 170px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #cfe0e6;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--login-bg-color, #082042) 0%, var(--login-bg-color-2, #214b5b) 55%, #f5f7f8 55%);
}

.login-background-live-preview.login-bg-color {
    background: var(--login-bg-color, #082042);
}

.login-background-live-preview.login-bg-gradient {
    background: var(--login-bg-gradient, linear-gradient(135deg, color-mix(in srgb, var(--login-bg-color, #082042) var(--login-gradient-opacity, 100%), transparent), color-mix(in srgb, var(--login-bg-color-2, #214b5b) var(--login-gradient-opacity, 100%), transparent)));
}

.login-background-live-preview.login-bg-image,
.login-background-live-preview.login-bg-random {
    background:
        linear-gradient(rgba(5, 24, 36, .38), rgba(5, 24, 36, .38)),
        var(--login-bg-image),
        linear-gradient(135deg, var(--login-bg-color, #082042) 0%, var(--login-bg-color-2, #214b5b) 55%, #f5f7f8 55%);
    background-position: center;
    background-size: cover;
}

.login-background-preview-card {
    display: grid;
    gap: .2rem;
    min-width: 210px;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 8px;
    color: #082042;
    background: rgba(255,255,255,.88);
    box-shadow: 0 20px 50px rgba(10,25,35,.22);
}

.login-background-preview-card strong {
    font-size: 1.2rem;
}

.login-background-preview-card span {
    color: #60717d;
    font-size: .82rem;
}

.login-background-thumb {
    display: grid;
    gap: .45rem;
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    padding: .45rem;
    background: #ffffff;
}

.login-background-thumb.active {
    border-color: var(--app-primary, #0f6f7c);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary, #0f6f7c) 20%, transparent);
}

.login-background-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 6px;
    background-position: center;
    background-size: cover;
}

.login-background-thumb div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.login-background-thumb span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setup-card {
    width: min(1120px, 100%);
    display: grid;
    gap: 1rem;
    border: 1px solid #d9e1e4;
    border-radius: 10px;
    padding: 1.1rem;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(16, 35, 45, .12);
}

.setup-card-narrow {
    width: min(760px, 100%);
}

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

.setup-header h1 {
    margin: .15rem 0 0;
    font-size: 1.45rem;
}

.setup-action-buttons {
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

.setup-script-status {
    align-self: end;
    min-height: 2.35rem;
    display: flex;
    align-items: center;
    padding: .45rem .5rem;
    border: 1px dashed #b9ccd2;
    border-radius: 6px;
    color: #405660;
    background: #f8fbfc;
    font-size: .82rem;
}

.email-send-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 1rem;
    align-items: start;
}

.email-composer-panel,
.email-preview-panel {
    border: 1px solid #d4e1e6;
    border-radius: 8px;
    background: #ffffff;
    padding: 1rem;
}

.email-field {
    display: grid;
    gap: .3rem;
    margin: .65rem 0;
    font-weight: 700;
}

.email-body {
    min-height: 220px;
    resize: vertical;
}

.email-attachments-section {
    margin-top: 1rem;
}

.email-attachment-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-bottom: .75rem;
}

.email-document-revisions-toggle {
    margin: .5rem 0;
}

.email-attachment-list {
    display: grid;
    gap: .45rem;
    margin-top: .75rem;
}

.email-attachment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .45rem;
    align-items: center;
    padding: .45rem;
    border: 1px solid #dbe7eb;
    border-radius: 8px;
    background: #f8fbfc;
}

.email-attachment-row small {
    display: block;
    color: #60717d;
    font-weight: 400;
}

.email-attachment-preview {
    width: 100%;
    min-height: 520px;
    border: 1px solid #d4e1e6;
    border-radius: 8px;
    background: #f8fbfc;
}

.email-attachment-image-preview {
    max-width: 100%;
    max-height: 70vh;
    border: 1px solid #d4e1e6;
    border-radius: 8px;
    object-fit: contain;
}

@media (max-width: 980px) {
    .email-send-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .email-attachment-preview {
        min-height: 360px;
    }
}

.icon-label-button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    text-decoration: none;
}

.icon-label-button svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.setup-message {
    margin: 0;
    padding: .65rem .75rem;
    border: 1px solid rgba(31, 181, 94, .42);
    border-radius: 8px;
    color: #145c32;
    background: rgba(31, 181, 94, .14);
}

.tenant-list {
    display: grid;
    gap: .55rem;
}

.tenant-list article {
    display: flex;
    gap: .65rem;
    align-items: center;
    border: 1px solid #d9e5e9;
    border-radius: 8px;
    padding: .55rem;
}

.tenant-list img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.tenant-list span {
    display: block;
    color: #60717d;
    font-size: .85rem;
}

.tenant-manager {
    display: grid;
    grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.tenant-sidebar,
.tenant-editor {
    min-width: 0;
}

.tenant-list.selectable {
    gap: .45rem;
}

.tenant-list-item {
    width: 100%;
    display: flex;
    gap: .65rem;
    align-items: center;
    padding: .55rem;
    border: 1px solid #d9e5e9;
    border-radius: 8px;
    background: #ffffff;
    color: #1d2430;
    text-align: left;
}

.tenant-list-item.is-selected {
    border-color: #0f6f7c;
    background: #eef8fa;
}

.tenant-list-item img,
.tenant-logo-preview img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.tenant-list-item small {
    display: block;
    color: #60717d;
}

.tenant-logo-preview {
    display: flex;
    gap: .65rem;
    align-items: center;
    margin: .7rem 0;
    color: #60717d;
    font-size: .85rem;
}

.theme-swatch {
    width: 38px;
    height: 38px;
    border: 1px solid #c9d5d8;
    border-radius: 8px;
    flex: 0 0 auto;
}

.tenant-actions {
    position: sticky;
    bottom: 0;
    padding-top: .65rem;
    background: #ffffff;
}

.tenant-section-actions {
    align-items: center;
    margin: .6rem 0 1rem;
}

.inline-status-message {
    font-size: .88rem;
    font-weight: 700;
}

.inline-status-message.is-success {
    color: #12724c;
}

.inline-status-message.is-error {
    color: #b32121;
}

.tenant-final-actions {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid #d8e3e7;
}

.tenant-sites {
    display: grid;
    gap: .7rem;
}

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

    .setup-header {
        align-items: stretch;
        flex-direction: column;
    }

    .tenant-actions {
        position: static;
    }

    .tenant-final-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }
}

.login-error {
    margin: 0;
    color: #b32121;
}

.app-topbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #d9e1e4;
    padding: .65rem 1rem;
    color: var(--app-topbar-text, #ffffff);
    background: var(--app-topbar-bg, var(--app-primary, #082042));
    font-family: var(--app-topbar-font-family, var(--app-font-family, Arial, Helvetica, sans-serif));
    font-size: var(--app-topbar-font-size, 14px);
    min-height: 48px;
    width: 100%;
    overflow: visible;
    transition: min-height .18s ease, padding .18s ease;
}

.app-topbar.is-collapsed {
    justify-content: space-between;
    min-height: 34px;
    padding: .12rem .65rem;
    overflow: visible;
}

.app-topbar > div,
.topbar-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.topbar-brand.is-collapsed {
    gap: .45rem;
}

.topbar-brand {
    color: inherit;
    text-decoration: none;
}

.topbar-brand:hover {
    color: inherit;
    text-decoration: none;
}

.topbar-session-info {
    flex: 1 1 auto;
    min-width: 7rem;
    color: var(--app-topbar-text, #ffffff);
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-brand.is-collapsed strong {
    font-size: .9rem;
}

.top-config-menu.is-collapsed {
    margin-left: auto;
}

.app-topbar strong {
    color: var(--app-topbar-text, #ffffff);
}

.app-topbar span {
    color: var(--app-topbar-text, #ffffff);
    opacity: .78;
    font-size: .85rem;
}

.app-logo {
    max-width: min(70vw, 1600px);
    width: 30px;
    height: 30px;
    object-fit: contain;
    transition: width .16s ease, height .16s ease;
}

.tree-visibility-toggle {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    color: #263740;
    background: #ffffff;
    font-weight: 700;
}

.tree-visibility-toggle svg, .tree-actions svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.top-config-menu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
}

.top-theme-menu-host {
    position: relative;
    display: inline-flex;
}

.top-user-menu-host {
    position: relative;
    display: inline-flex;
}

.topbar-icon-button,
.document-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-icon-button-size, 34px);
    height: var(--app-icon-button-size, 34px);
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: 0;
    color: var(--app-topbar-text, #263740);
    background: color-mix(in srgb, var(--app-topbar-bg, #ffffff) 70%, #ffffff);
}

.icon-labels-topbar-visible .topbar-icon-button:has(> svg),
.icon-labels-visible .document-icon-action:has(> svg) {
    width: auto;
    min-width: var(--app-icon-button-size, 34px);
    gap: .35rem;
    padding-inline: .55rem;
}

.icon-labels-topbar-visible .topbar-icon-button:has(> svg)::after,
.icon-labels-visible .document-icon-action:has(> svg)::after {
    content: attr(title);
    font-size: var(--app-icon-text-size, 12px);
    font-weight: 700;
    line-height: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-toolbar-toggle {
    margin-right: .9rem;
}

.top-config-menu.is-collapsed .topbar-icon-button {
    width: min(var(--app-icon-button-size, 34px), 34px);
    height: min(var(--app-icon-button-size, 34px), 34px);
}

.icon-labels-topbar-visible .top-config-menu.is-collapsed .topbar-icon-button:has(> svg) {
    width: auto;
    min-width: min(var(--app-icon-button-size, 34px), 34px);
    max-width: min(16rem, 32vw);
    gap: .28rem;
    padding-inline: .45rem;
}

.topbar-icon-button svg,
.document-icon-action svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.document-icon-action.primary {
    border-color: var(--app-button-border, var(--app-primary, #0f6f7c));
    color: var(--app-button-text, #ffffff);
    background: var(--app-button-bg, var(--app-primary, #0f6f7c));
}

.document-icon-action.is-active {
    border-color: var(--app-primary, #0f6f7c);
    color: var(--app-button-text, #ffffff);
    background: var(--app-primary, #0f6f7c);
}

.publication-switch {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: var(--app-icon-button-size, 34px);
    border: 1px solid #c9d5d8;
    border-radius: 999px;
    padding: .25rem .65rem .25rem .35rem;
    color: var(--app-text, #263740);
    background: #ffffff;
    font-weight: 700;
    font-size: .78rem;
    cursor: pointer;
}

.publication-switch:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.publication-switch-track {
    position: relative;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: #dce8eb;
    box-shadow: inset 0 0 0 1px #b8cdd3;
}

.publication-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(8, 32, 66, .25);
    transition: left .16s ease, background .16s ease;
}

.publication-switch.is-on {
    border-color: color-mix(in srgb, var(--app-primary, #0f6f7c) 45%, #c9d5d8);
    color: var(--app-primary, #0f6f7c);
}

.publication-switch.is-on .publication-switch-track {
    background: var(--app-primary, #0f6f7c);
    box-shadow: none;
}

.publication-switch.is-on .publication-switch-thumb {
    left: 19px;
}

.index-published-check {
    width: 16px;
    height: 16px;
    accent-color: var(--app-primary, #0f6f7c);
    cursor: default;
}

.top-config-panel {
    position: absolute;
    top: calc(100% + .45rem);
    right: 2.55rem;
    z-index: 2500;
    display: grid;
    min-width: 170px;
    border: 1px solid #c9d5d8;
    border-radius: 8px;
    padding: .35rem;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(8, 32, 66, .14);
}

.top-theme-panel {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    z-index: 2600;
    display: grid;
    gap: .25rem;
    min-width: 142px;
    border: 1px solid #c9d5d8;
    border-radius: 8px;
    padding: .35rem;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(8, 32, 66, .14);
}

.top-user-panel {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    z-index: 2600;
    display: grid;
    gap: .25rem;
    min-width: 210px;
    border: 1px solid #c9d5d8;
    border-radius: 8px;
    padding: .35rem;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(8, 32, 66, .14);
}

.top-theme-panel button {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 32px;
    border: 0;
    border-radius: 6px;
    padding: .45rem .55rem;
    color: #263740;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.top-theme-panel button.active,
.top-theme-panel button:hover {
    background: #eef3f4;
}

.top-theme-panel svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.top-theme-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: .45rem;
    padding: .45rem .55rem .2rem;
    border-top: 1px solid #d9e6eb;
    color: #31444e;
    font-size: .78rem;
    font-weight: 700;
}

.top-theme-option input {
    width: 16px;
    height: 16px;
}

.top-theme-font-scale {
    display: grid;
    gap: .35rem;
    padding: .5rem .55rem .45rem;
    border-top: 1px solid #d9e6eb;
    color: #31444e;
    font-size: .78rem;
    font-weight: 700;
}

.top-theme-font-scale span {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.top-theme-font-scale svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.top-theme-font-scale strong {
    margin-left: auto;
    color: var(--app-primary, #0f6f7c);
}

.top-theme-font-scale input[type="range"] {
    width: 100%;
    min-width: 0;
}

.top-config-panel a {
    display: flex;
    align-items: center;
    gap: .45rem;
    border-radius: 6px;
    padding: .5rem .6rem;
    color: #263740;
    text-decoration: none;
    font-size: .86rem;
}

.top-user-panel a {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 32px;
    border-radius: 6px;
    padding: .5rem .6rem;
    color: #263740;
    text-decoration: none;
    font-size: .86rem;
}

.top-config-panel a svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.top-user-panel a svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.top-config-panel a:hover {
    background: #eef3f4;
}

.top-user-panel a:hover {
    background: #eef3f4;
}

.todo-summary-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.todo-summary-strip article {
    display: grid;
    gap: .15rem;
    border: 1px solid #d7e4e8;
    border-radius: 8px;
    padding: .85rem 1rem;
    background: #ffffff;
}

.todo-summary-strip strong {
    color: var(--app-primary, #0f6f7c);
    font-size: 1.5rem;
    line-height: 1;
}

.todo-panel {
    margin-bottom: 1rem;
}

.todo-index-table th {
    vertical-align: top;
    min-width: 150px;
}

.todo-index-table th:last-child {
    min-width: 88px;
}

.todo-index-table tbody tr:nth-child(odd) {
    background: #eef6f7;
}

.todo-index-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent-color, #0f6f7c) 8%, #ffffff);
}

.todo-index-filter input[type="date"] {
    min-width: 150px;
}

.document-shell {
    display: grid;
    grid-template-columns: minmax(200px, var(--tree-rail-width, 268px)) minmax(0, 1fr);
    min-height: calc(100vh - var(--topbar-offset, 48px));
    transition: grid-template-columns .18s ease;
}

.document-shell.tree-collapsed {
    grid-template-columns: minmax(0, 1fr);
}

.document-shell.no-topbar {
    min-height: 100vh;
}

.document-tree-rail {
    position: sticky;
    top: var(--topbar-offset, 48px);
    height: calc(100vh - var(--topbar-offset, 48px));
    z-index: 200;
    border-right: 1px solid #d9e1e4;
    color: var(--app-tree-text, #263740);
    background: var(--app-tree-bg, #ffffff);
    font-family: var(--app-tree-font-family, var(--app-font-family, Arial, Helvetica, sans-serif));
    font-size: var(--app-tree-font-size, 14px);
    overflow: auto;
}

.document-tree-rail.collapsed {
    display: none;
}

.document-shell.tree-collapsed .document-main {
    grid-column: 1 / -1;
}

.document-main {
    position: relative;
    z-index: 1;
    min-width: 0;
    color: var(--app-content-text, var(--app-text, #1d2430));
    background: var(--app-content-bg, var(--app-bg, transparent));
    font-family: var(--app-content-font-family, var(--app-font-family, Arial, Helvetica, sans-serif));
    font-size: var(--app-content-font-size, 14px);
}

.tree-shell {
    position: relative;
    min-height: 100%;
    padding: 1rem .85rem;
}

.tree-brand {
    display: none;
    margin-bottom: 1rem;
    color: #082042;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
}

.tree-title {
    display: grid;
    gap: .1rem;
    margin-bottom: .75rem;
    color: var(--app-tree-text, #31444e);
}

.tree-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
}

.tree-title span {
    font-weight: 700;
}

.tree-width-control {
    display: inline-grid;
    grid-template-columns: auto 82px;
    align-items: center;
    gap: .35rem;
    min-width: 124px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--app-tree-text, #31444e);
}

.tree-width-control span {
    min-width: 38px;
    font-size: .68rem;
    text-align: right;
    white-space: nowrap;
}

.tree-width-control input[type="range"] {
    width: 82px;
    accent-color: var(--app-primary, #0f6f7c);
}

.tree-title small, .tree-loading {
    color: #60717d;
}

.tree-actions {
    display: flex;
    gap: .35rem;
    margin-bottom: .75rem;
}

.tree-actions button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: 0;
    color: #263740;
    background: #ffffff;
    font-weight: 700;
}

.tree-empty {
    display: grid;
    gap: .65rem;
    border: 1px dashed #c4d6dc;
    border-radius: 8px;
    padding: .8rem;
    background: color-mix(in srgb, var(--app-tree-bg, #ffffff) 88%, var(--app-primary, #0f6f7c));
}

.tree-empty p {
    margin: 0;
    color: #60717d;
    font-size: .86rem;
}

.tree-empty-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 34px;
    border: 1px solid #0f6f7c;
    border-radius: 6px;
    padding: .45rem .6rem;
    color: #ffffff;
    background: #0f6f7c;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
}

.tree-empty-action svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.doc-tree {
    display: grid;
    gap: .2rem;
}

.doc-tree-item {
    padding-left: calc(var(--depth) * 1rem);
}

.doc-tree-node {
    width: 100%;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: .45rem;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: .45rem;
    text-align: left;
    color: var(--app-tree-text, #263740);
    background: transparent;
}

.doc-tree-node:hover {
    border-color: #d9e1e4;
    background: color-mix(in srgb, var(--app-tree-bg, #ffffff) 78%, var(--app-primary, #0f6f7c));
}

.doc-tree-node.doc-type {
    cursor: pointer;
}

.doc-tree-node.expandable {
    cursor: default;
}

.doc-tree-toggle,
.doc-tree-label {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}

.doc-tree-toggle {
    cursor: pointer;
}

.doc-tree-label {
    min-width: 0;
    cursor: pointer;
}

.doc-tree-node.virtual-group {
    grid-template-columns: 22px minmax(0, 1fr);
    padding: .3rem .4rem;
    font-size: .86rem;
    color: #2d5661;
}

.doc-tree-node.virtual-group span {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: var(--app-primary, #0f6f7c);
    background: #eaf4f6;
}

.doc-tree-node span,
.doc-tree-toggle span {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 5px;
    color: #ffffff;
    background: #34495e;
    font-size: .72rem;
}

.doc-tree-node.doc-type span {
    background: var(--app-primary, #0f6f7c);
}

.doc-tree-node strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-context-menu {
    position: fixed;
    z-index: 20000;
    display: grid;
    gap: .25rem;
    min-width: 190px;
    border: 1px solid #c9d5d8;
    border-radius: 8px;
    padding: .6rem;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(35, 48, 58, .18);
}

.tree-context-menu a, .tree-context-menu button {
    display: flex;
    align-items: center;
    gap: .45rem;
    border: 0;
    border-radius: 5px;
    padding: .45rem;
    color: #263740;
    background: #f5f7f8;
    text-align: left;
    text-decoration: none;
}

.tree-context-menu svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

a, .btn-link {
    color: #0f6f7c;
}

.content {
    padding-top: 1.1rem;
}

h1, h2, p {
    margin-top: 0;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.05rem;
}

.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.page-heading > .button-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    flex-wrap: wrap;
}

.compactable-heading {
    min-height: 42px;
}

.compactable-heading.is-collapsed {
    margin-bottom: .25rem;
    padding: .15rem 0;
}

.compactable-heading.is-collapsed .eyebrow {
    margin-bottom: .1rem;
    font-size: .68rem;
}

.compactable-heading.is-collapsed h1 {
    font-size: 1rem;
    line-height: 1.15;
}

.heading-toggle {
    min-height: 30px;
    padding-inline: .7rem;
}

.index-page-heading {
    margin-bottom: .7rem;
}

.index-page-heading.is-collapsed {
    min-height: 32px;
}

.index-page-heading.is-collapsed .index-heading-title h1 {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    margin: 0;
    font-size: .92rem;
}

.index-page-heading.is-collapsed .index-heading-title span {
    color: #60717d;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.document-page-heading {
    margin-bottom: .75rem;
}

.document-page-heading.is-collapsed {
    min-height: 32px;
    margin-bottom: .25rem;
}

.document-page-heading.is-collapsed .document-heading-title h1 {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    margin: 0;
    font-size: .92rem;
    line-height: 1.15;
}

.document-page-heading.is-collapsed .document-heading-title span {
    color: #60717d;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.eyebrow {
    margin-bottom: .25rem;
    color: #60717d;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.workflow-page-heading {
    position: sticky;
    top: var(--topbar-offset, 0px);
    z-index: 45;
    min-height: 0;
    margin-bottom: .45rem;
    padding: .35rem 0 .45rem;
    align-items: center;
    background: var(--app-bg, #f6f7f8);
    border-bottom: 1px solid #dbe7ea;
}

.workflow-page-heading .eyebrow {
    margin-bottom: .08rem;
    font-size: .66rem;
    line-height: 1;
}

.workflow-page-heading h1 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.1;
}

.workflow-page-heading .inline-actions {
    gap: .32rem;
    align-items: center;
}

.workflow-page-heading .icon-button {
    width: 30px;
    height: 30px;
}

.workflow-page-heading .icon-button svg {
    width: 15px;
    height: 15px;
}

.workflow-import-button {
    position: relative;
    overflow: hidden;
    margin: 0;
    cursor: pointer;
}

.workflow-import-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.status-pill, .kind-badge {
    border: 1px solid #cad6d9;
    border-radius: 999px;
    padding: .35rem .65rem;
    color: #37505a;
    background: #ffffff;
    font-size: .82rem;
    white-space: nowrap;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.metric, .feature-grid article, .details-panel, .tree-panel, .form-canvas, .workflow-shell, .table-shell, .dashboard-detail {
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    background: #ffffff;
}

.metric {
    display: block;
    width: 100%;
    padding: 1rem;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.metric strong {
    display: block;
    color: #0f6f7c;
    font-size: 1.8rem;
}

.metric span {
    color: #60717d;
    font-size: .88rem;
}

.metric:hover, .metric:focus-visible {
    border-color: var(--app-primary, #0f6f7c);
    box-shadow: 0 6px 18px rgba(15, 111, 124, .12);
    outline: 0;
    transform: translateY(-1px);
}

.metric.is-selected {
    border-color: var(--app-primary, #0f6f7c);
    box-shadow: inset 0 0 0 1px var(--app-primary, #0f6f7c);
}

.dashboard-detail {
    display: grid;
    gap: .8rem;
    padding: 1rem 1.1rem;
}

.dashboard-detail h2 {
    margin: .15rem 0 .35rem;
}

.dashboard-detail p {
    margin: 0;
    color: #60717d;
}

.dashboard-detail-table-wrap {
    overflow: auto;
    border: 1px solid #d9e1e4;
    border-radius: 8px;
}

.dashboard-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.dashboard-detail-table th, .dashboard-detail-table td {
    border-bottom: 1px solid #e5ecef;
    padding: .55rem .65rem;
    text-align: left;
    white-space: nowrap;
}

.dashboard-detail-table th {
    color: #36505c;
    background: #f4f7f8;
    font-size: .76rem;
    text-transform: uppercase;
}

.dashboard-detail-table tr:last-child td {
    border-bottom: 0;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .75rem;
}

.feature-grid article {
    padding: 1rem;
}

.feature-grid p, .clean-list, .tree-row small, .node-summary, .field-card small {
    color: #60717d;
}

.settings-accordion {
    display: grid;
    gap: .65rem;
}

.settings-section {
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    background: #ffffff;
}

.settings-section summary {
    cursor: pointer;
    padding: .75rem .95rem;
    color: #263740;
    font-weight: 700;
}

.settings-section[open] summary {
    border-bottom: 1px solid #e3e9eb;
}

.settings-section-body {
    padding: .85rem .95rem 1rem;
}

.settings-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem .95rem;
}

.settings-section-header h2 {
    margin: 0 0 .25rem;
}

.section-collapse-trigger {
    display: inline-flex;
    align-items: flex-start;
    gap: .5rem;
    min-width: 0;
    border: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.section-collapse-trigger strong,
.section-collapse-trigger small {
    display: block;
}

.section-collapse-caret {
    width: 1rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

.office-web-search-row {
    display: flex;
    align-items: end;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 0 .95rem .75rem;
}

.office-web-search-row label:first-child {
    flex: 1 1 280px;
}

.office-web-files-section > .responsive-table,
.office-web-files-section > .muted-text {
    margin: 0 .95rem .95rem;
}

.settings-section-header + .responsive-table,
.settings-section-header + .muted-text {
    margin: 0 .95rem .95rem;
}

.settings-row {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.settings-row h2 {
    margin-bottom: .25rem;
}

.settings-editor {
    display: grid;
    gap: .7rem;
    min-width: 0;
}

.settings-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.settings-actions button:not(.primary-action) {
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .55rem .75rem;
    color: #263740;
    background: #ffffff;
}

.ai-provider-editor {
    max-width: 980px;
}

.ai-provider-list {
    display: grid;
    gap: .75rem;
}

.ai-provider-card {
    border: 1px solid #d7e1e5;
    border-radius: 8px;
    padding: .85rem;
    background: #ffffff;
}

.ai-provider-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.ai-provider-card header small {
    color: #60717d;
    font-size: .78rem;
    white-space: nowrap;
}

.ai-provider-card-actions {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.ai-provider-card .admin-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ai-model-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--app-icon-button-size, 34px);
    gap: .35rem;
    align-items: center;
}

.ai-provider-model-message {
    align-self: end;
    margin: 0;
    color: #60717d;
    font-size: .78rem;
}

.ai-provider-card textarea {
    min-height: 86px;
    resize: vertical;
}

.muted-text {
    color: #60717d;
}

.logo-resize-stage {
    display: grid;
    align-items: start;
    justify-items: start;
    min-height: 190px;
    overflow-x: auto;
    border: 1px dashed #b8c7cc;
    border-radius: 8px;
    padding: 1rem;
    background: #f8fafb;
    user-select: none;
}

.logo-resize-box {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 18px;
    min-height: 18px;
    border: 1px solid #9bb5bf;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(35, 48, 58, .10);
}

.logo-resize-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-resize-box span {
    color: #60717d;
    font-size: .78rem;
    text-align: center;
}

.logo-resize-handle {
    position: absolute;
    border: 2px solid #ffffff;
    border-radius: 4px;
    padding: 0;
    background: #0f6f7c;
    box-shadow: 0 1px 5px rgba(35, 48, 58, .25);
}

.logo-resize-handle-right {
    top: 50%;
    right: -7px;
    width: 14px;
    height: 30px;
    transform: translateY(-50%);
    cursor: ew-resize;
}

.logo-resize-handle-bottom {
    left: 50%;
    bottom: -7px;
    width: 30px;
    height: 14px;
    transform: translateX(-50%);
    cursor: ns-resize;
}

.logo-resize-handle-corner {
    right: -8px;
    bottom: -8px;
    width: 17px;
    height: 17px;
    cursor: nwse-resize;
}

.logo-size-readout {
    display: flex;
    gap: .45rem;
    color: #60717d;
    font-size: .82rem;
}

.logo-size-readout span {
    border: 1px solid #d9e1e4;
    border-radius: 999px;
    padding: .22rem .55rem;
    background: #ffffff;
}

.theme-preview.compact {
    max-width: 620px;
}

.theme-preview-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.theme-preview-brand img {
    object-fit: contain;
}

.workspace, .designer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1rem;
}

.designer-layout {
    grid-template-columns: 260px minmax(0, 1fr);
}

.tree-panel, .details-panel, .form-canvas, .workflow-shell, .table-shell {
    padding: 1rem;
}

.tree-node {
    margin-left: calc(var(--depth) * 1.35rem);
    margin-bottom: .55rem;
}

.category-root-drop {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    margin-bottom: .75rem;
    border: 1px dashed #b8c9ce;
    border-radius: 7px;
    padding: .55rem .65rem;
    color: #31515e;
    background: #f7fafb;
}

.category-tree-row {
    cursor: grab;
}

.category-tree-row.can-drop {
    outline: 1px dashed transparent;
}

.category-order-drop {
    height: .28rem;
    margin-left: calc(var(--depth) * 1.35rem);
    border-radius: 999px;
    opacity: 0;
}

.category-order-drop.is-visible {
    opacity: 1;
    height: 1rem;
}

.category-order-drop.is-drop-target {
    height: 1rem;
    background: #0f6f7c;
}

.category-root-drop.is-drop-target,
.category-tree-node.is-drop-target > .category-tree-row {
    border-color: #0f6f7c;
    outline: 2px solid color-mix(in srgb, #0f6f7c 24%, transparent);
    background: #eef9fb;
}

.tree-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .7rem;
    padding: .65rem;
    border: 1px solid #e4eaec;
    border-radius: 8px;
    background: #fbfcfc;
}

.tree-row-link {
    color: inherit;
    text-decoration: none;
}

.tree-row-link:hover {
    border-color: #9bb5bf;
    background: #f8fbfc;
}

.tree-row .node-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem;
    min-width: 0;
    flex: 1;
}

.tree-row small {
    display: inline;
    overflow-wrap: anywhere;
}

.tree-icon {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: #34495e;
    font-size: .85rem;
}

.node-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-left: auto;
    font-size: .85rem;
    white-space: nowrap;
}

.tree-row .kind-badge {
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .tree-row {
        align-items: flex-start;
    }

    .tree-row .node-title {
        flex-basis: calc(100% - 2.7rem);
    }

    .node-summary {
        margin-left: 2.7rem;
        white-space: normal;
    }
}

.clean-list {
    padding-left: 1.1rem;
}

.document-type-list {
    display: grid;
    gap: .5rem;
    align-content: start;
}

.doc-type-button {
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    padding: .85rem;
    text-align: left;
    background: #ffffff;
}

.doc-type-button.active {
    border-color: #0f6f7c;
    box-shadow: inset 4px 0 0 #0f6f7c;
}

.doc-type-button span {
    display: block;
    color: #60717d;
    font-size: .82rem;
}

.kind-badge.form-kind {
    border-color: #bcd8c8;
    color: #24523a;
    background: #f3fbf6;
}

.kind-badge.file-kind {
    border-color: #c6d4e8;
    color: #284f84;
    background: #f3f7fd;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .75rem;
}

.field-card {
    grid-column: span var(--span);
    min-height: 130px;
    border: 1px solid #d7dcdd;
    border-radius: 8px;
    padding: .85rem;
}

.field-card div:first-child {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}

.field-card small {
    display: block;
    margin-top: .35rem;
}

.field-actions {
    display: flex;
    gap: .35rem;
    margin-top: .75rem;
}

.field-actions button {
    width: 2rem;
    height: 2rem;
    border: 1px solid #bcc8cc;
    border-radius: 6px;
    background: #ffffff;
}

.workflow-shell header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.workflow-trace-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .6rem;
    margin-bottom: 1rem;
}

.workflow-trace-strip article {
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    padding: .75rem;
    background: #fbfcfc;
}

.workflow-trace-strip strong {
    display: block;
    color: #0f6f7c;
    font-size: 1.35rem;
}

.workflow-trace-strip span {
    color: #60717d;
    font-size: .78rem;
}

.condition-list {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
}

.condition-list article {
    border: 1px solid #e0e7e9;
    border-radius: 8px;
    padding: .85rem;
    background: #fbfcfc;
}

.condition-list p {
    margin: .45rem 0 .25rem;
    color: #60717d;
}

.condition-list code {
    display: block;
    overflow-x: auto;
    border-radius: 6px;
    padding: .5rem;
    background: #eef3f4;
}

.workflow-canvas {
    position: relative;
    min-height: 330px;
    overflow: auto;
    border: 1px dashed #b8c7cc;
    border-radius: 8px;
    background: linear-gradient(#eef3f4 1px, transparent 1px), linear-gradient(90deg, #eef3f4 1px, transparent 1px);
    background-size: 24px 24px;
}

.workflow-node {
    position: absolute;
    width: 150px;
    min-height: 84px;
    padding: .75rem;
    border: 1px solid #bcc8cc;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(35, 48, 58, .10);
}

.workflow-node span, .workflow-node small {
    display: block;
    color: #60717d;
    font-size: .82rem;
}

.workflow-visual-canvas {
    position: relative;
    display: block;
    width: 100%;
    inline-size: 100%;
    min-inline-size: 0;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 520px;
    max-height: calc(100dvh - var(--topbar-offset, 0px) - 210px);
    overflow: auto;
    overflow-x: scroll;
    overflow-y: auto;
    padding-bottom: 14px;
    border: 1px dashed #b8c7cc;
    border-radius: 8px;
    background: linear-gradient(#eef3f4 1px, transparent 1px), linear-gradient(90deg, #eef3f4 1px, transparent 1px);
    background-size: 24px 24px;
    scrollbar-width: auto;
    scrollbar-color: #8aa0a8 #edf3f5;
}

.workflow-visual-canvas::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.workflow-visual-canvas::-webkit-scrollbar-thumb {
    border: 2px solid #edf3f5;
    border-radius: 999px;
    background: #8aa0a8;
}

.workflow-visual-canvas::-webkit-scrollbar-track {
    background: #edf3f5;
}

.workflow-horizontal-scrollbar {
    display: block;
    width: 100%;
    height: 28px;
    margin: .35rem 0 0;
    accent-color: var(--app-primary, #0f6f7c);
}

.workflow-horizontal-scrollbar:disabled {
    opacity: .45;
}

.workflow-zoom-surface {
    position: relative;
    display: block;
    width: max-content;
    min-width: max(100%, 2400px);
}

.workflow-visual-surface {
    position: relative;
    min-width: 2400px;
    min-height: 700px;
    transform-origin: top left;
}

.workflow-zoom-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 34px;
    border: 1px solid #cbd8dc;
    border-radius: 8px;
    padding: 0 .45rem;
    color: #244756;
    background: #ffffff;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
}

.workflow-link-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    margin-bottom: .55rem;
    color: #536872;
    font-size: .82rem;
}

.workflow-link-legend span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.legend-line {
    display: inline-block;
    width: 34px;
    height: 0;
    border-top: 3px solid #60717d;
}

.legend-line.condition {
    border-top-style: dashed;
}

.legend-line.back {
    border-top-style: dotted;
}

.workflow-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.workflow-link-main,
.workflow-link-condition,
.workflow-link-back,
.workflow-link-preview {
    stroke-width: 4;
    stroke-linecap: round;
    opacity: .92;
}

.workflow-link-hit {
    stroke: transparent;
    stroke-width: 22;
    stroke-linecap: round;
    pointer-events: stroke;
}

.workflow-link-main {
    stroke: #60717d;
    pointer-events: stroke;
}

.workflow-link-condition {
    stroke: #0f6f7c;
    stroke-dasharray: 7 6;
    pointer-events: stroke;
}

.workflow-link-back {
    stroke: #9b2f24;
    stroke-dasharray: 3 6;
    pointer-events: stroke;
}

.workflow-link-preview {
    stroke: #0f6f7c;
    stroke-dasharray: 4 5;
    opacity: .55;
    pointer-events: none;
}

.workflow-arrow-main-fill {
    fill: #60717d;
}

.workflow-arrow-condition-fill {
    fill: #0f6f7c;
}

.workflow-arrow-back-fill {
    fill: #9b2f24;
}

.workflow-link-group {
    pointer-events: visiblePainted;
}

.workflow-link-group.selected-link .workflow-link-main,
.workflow-link-group.selected-link .workflow-link-condition,
.workflow-link-group.selected-link .workflow-link-back {
    stroke-width: 6;
    filter: drop-shadow(0 0 4px rgba(15, 111, 124, .35));
}

.workflow-link-handle {
    fill: #ffffff;
    stroke: var(--app-primary, #0f6f7c);
    stroke-width: 3;
    cursor: grab;
    opacity: .55;
    pointer-events: all;
    transition: opacity .12s ease;
}

.workflow-link-group:hover .workflow-link-handle {
    opacity: 1;
}

.workflow-link-handle:active {
    cursor: grabbing;
}

.workflow-link-html-handle {
    position: absolute;
    z-index: 5;
    width: 16px;
    height: 16px;
    border: 2px solid var(--app-primary, #0f6f7c);
    border-radius: 999px;
    padding: 0;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(12, 37, 46, .18);
    cursor: grab;
}

.workflow-link-html-handle.condition {
    border-color: #0f6f7c;
}

.workflow-link-html-handle.add {
    border-color: #1f8a45;
    background: #f4fff7;
}

.workflow-link-html-handle.add::after {
    content: "+";
    position: absolute;
    inset: -1px 0 0;
    color: #1f8a45;
    font-size: 13px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

.workflow-link-html-handle.gateway-add {
    z-index: 8;
    box-shadow: 0 0 0 3px rgba(31, 138, 69, .16), 0 2px 8px rgba(12, 37, 46, .18);
}

.workflow-link-html-handle:hover,
.workflow-link-html-handle:focus-visible {
    transform: scale(1.2);
}

.workflow-link-html-handle:active {
    cursor: grabbing;
}

.workflow-link-snap-point {
    position: absolute;
    z-index: 7;
    width: 14px;
    height: 14px;
    border: 2px solid #0f6f7c;
    border-radius: 999px;
    padding: 0;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(15, 111, 124, .14), 0 2px 8px rgba(12, 37, 46, .18);
    cursor: crosshair;
}

.workflow-link-snap-point:hover,
.workflow-link-snap-point:focus-visible,
.workflow-link-snap-point.is-active {
    background: #e7fbff;
    transform: scale(1.3);
}

.workflow-link-snap-point.is-active {
    border-color: #1f8a45;
    box-shadow: 0 0 0 6px rgba(31, 138, 69, .16), 0 2px 8px rgba(12, 37, 46, .18);
}

.workflow-feedback {
    position: fixed;
    right: 20px;
    bottom: 18px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: min(520px, calc(100vw - 40px));
    padding: .68rem .8rem .68rem 1rem;
    border: 1px solid rgba(15, 111, 124, .24);
    border-left: 4px solid var(--app-primary, #0f6f7c);
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 30px rgba(12, 37, 46, .16);
    color: #12313d;
    font-size: .88rem;
}

.workflow-feedback.error {
    border-color: rgba(155, 47, 36, .28);
    border-left-color: #9b2f24;
    color: #5b211b;
}

.workflow-feedback-close {
    width: 24px;
    height: 24px;
    border: 1px solid #cad6d9;
    border-radius: 6px;
    padding: 0;
    background: #ffffff;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}

.workflow-link-arrow {
    position: absolute;
    z-index: 4;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 13px solid var(--workflow-link-color, #60717d);
    pointer-events: none;
    transform-origin: 7px 7px;
}

.workflow-link-arrow.condition,
.workflow-link-arrow.preview {
    border-left-color: var(--workflow-link-color, #0f6f7c);
}

.workflow-link-arrow.back {
    border-left-color: var(--workflow-link-color, #9b2f24);
}

.workflow-link-arrow.preview {
    opacity: .55;
}

.workflow-link-arrow-mid {
    position: absolute;
    z-index: 4;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 12px solid var(--workflow-link-color, #60717d);
    transform-origin: 6px 6px;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(12, 37, 46, .18));
}

.workflow-link-arrow-mid.condition {
    border-left-color: var(--workflow-link-color, #0f6f7c);
}

.workflow-link-arrow-mid.back {
    border-left-color: var(--workflow-link-color, #9b2f24);
}

.workflow-branch-badge {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 .28rem;
    border: 1px solid var(--workflow-link-color, #0f6f7c);
    border-radius: 999px;
    background: #ffffff;
    color: var(--workflow-link-color, #0f6f7c);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(12, 37, 46, .16);
    pointer-events: none;
}

.workflow-branch-badge.back {
    border-color: var(--workflow-link-color, #9b2f24);
    color: var(--workflow-link-color, #9b2f24);
}

.workflow-visual-node {
    position: absolute;
    z-index: 3;
    display: block;
    width: 176px;
    min-height: 96px;
    padding: .75rem;
    border: 1px solid color-mix(in srgb, var(--workflow-node-color, #bcc8cc) 55%, #bcc8cc);
    border-radius: 8px;
    color: #1d2430;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--workflow-node-color, #ffffff) var(--workflow-node-fill-mix, 18%), #ffffff) 0%,
            color-mix(in srgb, var(--workflow-node-color, #ffffff) var(--workflow-node-fill-mix, 18%), #ffffff) var(--workflow-node-fill, 18%),
            #ffffff var(--workflow-node-fill, 18%),
            #ffffff 100%
        );
    box-shadow: 0 8px 24px rgba(35, 48, 58, .10);
    cursor: grab;
    text-align: left;
    user-select: none;
    touch-action: none;
}

.workflow-node-badge {
    position: absolute;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #c8d8df;
    border-radius: 999px;
    color: #315363;
    background: #ffffff;
    box-shadow: 0 5px 14px rgba(20, 42, 52, .14);
    pointer-events: none;
}

.workflow-node-badge svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.workflow-node-badge.pre {
    left: 10px;
    top: -14px;
}

.workflow-node-badge.post {
    left: 38px;
    top: -14px;
    color: #294d7a;
    border-color: #c7d8ef;
    background: #f2f7ff;
}

.workflow-node-badge.timer {
    left: 66px;
    top: -14px;
    color: #8a5a00;
    border-color: #e0bd63;
    background: #fff8dc;
}

.icon-text-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 38px;
    border: 1px solid #cbd8dc;
    border-radius: 8px;
    padding: .45rem .7rem;
    background: #ffffff;
    color: #1d2430;
    cursor: pointer;
}

.icon-text-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-text-button.danger {
    border-color: #efb4b4;
    background: #fff7f7;
    color: #a32323;
}

.icon-text-button.compact {
    min-height: 30px;
    border-radius: 7px;
    padding: .25rem .55rem;
    font-size: .78rem;
}

.icon-text-button.active {
    border-color: #0f7f87;
    color: #ffffff;
    background: #0f7f87;
}

.workflow-mode-button span {
    display: none;
}

.icon-labels-workflow-visible .workflow-mode-button span,
.session-icon-labels-visible .workflow-mode-button span {
    display: inline;
}

.session-icon-labels-hidden .workflow-mode-button span {
    display: none !important;
}

.icon-labels-workflow-visible .workflow-mode-button:has(> svg)::after,
.session-icon-labels-visible .workflow-mode-button:has(> svg)::after {
    content: none;
}

.workflow-visual-node:active {
    cursor: grabbing;
}

.workflow-visual-node.selected-row {
    border-color: var(--workflow-node-color, var(--app-primary, #0f6f7c));
    box-shadow: inset 0 0 0 1px var(--workflow-node-color, var(--app-primary, #0f6f7c)), 0 8px 24px rgba(35, 48, 58, .12);
}

.workflow-visual-node.workflow-gateway-node {
    width: 76px;
    min-height: 76px;
    height: 76px;
    display: grid;
    place-content: center;
    text-align: center;
    border-color: var(--workflow-node-color, #0f6f7c);
    background:
        radial-gradient(circle at center, color-mix(in srgb, var(--workflow-node-color, #ffffff) var(--workflow-node-fill-mix, 18%), #ffffff) 0%, color-mix(in srgb, var(--workflow-node-color, #ffffff) var(--workflow-node-fill-mix, 18%), #ffffff) 58%, #ffffff 100%);
    border-radius: 999px;
    padding: .35rem;
    font-size: .72rem;
}

.workflow-visual-node.workflow-gateway-node > * {
    max-width: 62px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workflow-visual-node.workflow-gateway-node span,
.workflow-visual-node.workflow-gateway-node small {
    display: none;
}

.workflow-visual-node span,
.workflow-visual-node small {
    display: block;
    color: #60717d;
    font-size: .82rem;
}

.workflow-designer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: .85rem;
    align-items: start;
    height: calc(100dvh - var(--topbar-offset, 0px) - 92px);
    min-height: 560px;
    overflow: hidden;
}

.workflow-page-heading {
    position: sticky;
    top: var(--topbar-offset, 0px);
    z-index: 35;
    margin-bottom: .65rem;
    border-bottom: 1px solid #d8e5ea;
    background: color-mix(in srgb, var(--app-page-bg, #f7f2f2) 94%, #ffffff);
    padding-bottom: .55rem;
}

.workflow-properties-panel {
    position: sticky;
    top: calc(var(--topbar-offset, 0px) + 72px);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    align-self: start;
    max-height: calc(100dvh - var(--topbar-offset, 0px) - 86px);
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
    border: 1px solid #cfdde3;
    border-radius: 8px;
    background: #f8fbfc;
    padding: .65rem;
}

.workflow-properties-panel::-webkit-scrollbar,
.workflow-properties-panel *::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.workflow-properties-panel * {
    scrollbar-width: none;
}

.inspector-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.inspector-panel-header h2 {
    margin: 0;
    font-size: 1rem;
}

.mobile-inspector-toggle,
.mobile-inspector-close {
    display: none;
}

.workflow-properties-panel .settings-section {
    border-left: 3px solid color-mix(in srgb, var(--workflow-node-color, #d6e0e4) 70%, #d6e0e4);
}

.workflow-toolbox {
    display: grid;
    gap: .5rem;
}

.workflow-tool {
    display: grid;
    gap: .2rem;
    width: 100%;
    border: 1px solid #cbd8dc;
    border-radius: 8px;
    padding: .65rem;
    color: #1d2430;
    background: #ffffff;
    cursor: grab;
    text-align: left;
}

.workflow-tool:hover {
    border-color: var(--app-primary, #0f6f7c);
}

.workflow-tool strong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.workflow-help-dot {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid #cbd8dc;
    border-radius: 999px;
    color: #536872 !important;
    background: #f7fafb;
    font-size: .72rem !important;
    font-weight: 700;
}

.workflow-tool span {
    color: #60717d;
    font-size: .78rem;
}

.workflow-helper-note {
    display: grid;
    gap: .25rem;
    border: 1px solid color-mix(in srgb, var(--workflow-node-color, #d6e0e4) 35%, #d6e0e4);
    border-left: 4px solid var(--workflow-node-color, var(--app-primary, #0f6f7c));
    border-radius: 8px;
    padding: .65rem .75rem;
    background: color-mix(in srgb, var(--workflow-node-color, #ffffff) 8%, #ffffff);
    color: #1d2430;
}

.workflow-helper-note span {
    color: #536872;
    font-size: .84rem;
    line-height: 1.35;
}

.workflow-designer-main {
    display: grid;
    gap: .75rem;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
}

.workflow-designer-main > .settings-section,
.workflow-designer-main .settings-section-body {
    min-width: 0;
    max-width: 100%;
}

.workflow-designer-main > .settings-section {
    overflow: hidden;
}

.workflow-designer-main .settings-section-body {
    overflow: hidden;
}

.workflow-designer-main::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.workflow-properties-panel .admin-form-grid {
    grid-template-columns: minmax(0, 1fr);
}

.workflow-properties-panel .role-picker {
    min-width: 0;
    display: grid;
    gap: .25rem;
    justify-items: start;
    text-align: left;
    align-items: start;
    padding: .5rem;
    overflow: hidden;
}

.workflow-properties-panel .role-picker legend {
    text-align: left;
    padding: 0 .25rem;
}

.workflow-properties-panel .role-picker .check-row {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    gap: .35rem !important;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: .12rem 0;
    text-align: left;
    line-height: 1.2;
    white-space: normal;
}

.workflow-properties-panel .role-picker .check-row input {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin: 0;
    justify-self: start;
}

.workflow-properties-panel .role-picker .check-row span {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: left;
}

.workflow-properties-panel .settings-section-body > .check-row {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    gap: .35rem !important;
    width: 100%;
    margin: 0;
    text-align: left;
    line-height: 1.2;
}

.workflow-properties-panel .settings-section-body > .check-row input {
    width: 14px;
    height: 14px;
    margin: 0;
    justify-self: start;
}

.workflow-reset-title {
    margin-top: .25rem;
    color: #263740;
    font-weight: 700;
}

.workflow-reset-permissions {
    display: grid;
    gap: .3rem;
    min-width: 0;
    margin: 0;
    border: 1px solid #dbe6e9;
    border-radius: 8px;
    padding: .55rem .65rem .6rem;
    background: #fbfdfd;
}

.workflow-reset-permissions legend {
    float: none;
    width: auto;
    margin: 0 0 .2rem;
    padding: 0 .2rem;
    color: #263740;
    font-size: .9rem;
    font-weight: 700;
}

.workflow-reset-permissions .check-row {
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: .35rem !important;
    min-width: 0;
    margin: 0;
    padding: .1rem 0;
    color: #31444e;
    font-size: .82rem;
    line-height: 1.25;
    text-align: left;
}

.workflow-reset-permissions .check-row input {
    width: 14px;
    height: 14px;
    margin: 0;
}

.workflow-reset-permissions .check-row span {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: left;
}

.workflow-branch-editor {
    display: grid;
    gap: .55rem;
    border: 1px solid #d7e2e5;
    border-radius: 8px;
    padding: .7rem;
    background: #fbfdfd;
}

.workflow-auto-assignment {
    display: grid;
    gap: .55rem;
}

.section-inline-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.workflow-auto-assignment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem;
    border: 1px solid #d7e2e5;
    border-radius: 8px;
    padding: .55rem;
    background: #fbfdfd;
}

.workflow-auto-assignment-row textarea {
    grid-column: 1 / -1;
    min-height: 84px;
}

.workflow-user-assignment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: .35rem;
    width: 100%;
    align-items: center;
    padding: .2rem 0;
}

.workflow-user-assignment-row > .check-row {
    min-width: 0;
}

.workflow-user-assignment-row textarea {
    grid-column: 1 / -1;
    min-height: 78px;
}

.workflow-user-assignment-row select:nth-of-type(2) {
    grid-column: 1 / -1;
}

.icon-button.compact {
    width: 32px;
    height: 32px;
}

@media (max-width: 1180px) {
    .workflow-designer-layout {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 1rem;
    }

    .workflow-properties-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        width: min(390px, calc(100vw - 2rem));
        max-height: none;
        overflow: auto;
        padding: .8rem;
        border: 1px solid #cbd8dc;
        border-radius: 8px 0 0 8px;
        background: #ffffff;
        box-shadow: -18px 0 36px rgba(20, 35, 43, .22);
        transform: translateX(110%);
        transition: transform .18s ease;
    }

    .workflow-properties-panel.is-open {
        transform: translateX(0);
    }

    .workflow-properties-panel .inspector-panel-header {
        position: sticky;
        top: -.8rem;
        z-index: 2;
        margin: -.8rem -.8rem .65rem;
        padding: .8rem;
        border-bottom: 1px solid #e1eaed;
        background: #ffffff;
    }

    .mobile-inspector-toggle,
    .mobile-inspector-close {
        display: inline-grid;
        place-items: center;
    }

    .mobile-inspector-close {
        width: 34px;
        height: 34px;
        border: 1px solid #cbd8dc;
        border-radius: 6px;
        background: #f7fafb;
    }
}

@media (max-width: 760px) {
    .workflow-visual-canvas {
        max-height: 68vh;
    }

    .workflow-properties-panel .settings-section {
        border-radius: 6px;
    }

    .workflow-properties-panel {
        top: auto;
        left: .5rem;
        right: .5rem;
        bottom: .5rem;
        width: auto;
        max-height: min(72vh, 620px);
        border-radius: 8px;
        box-shadow: 0 -14px 36px rgba(20, 35, 43, .24);
        transform: translateY(calc(100% + 1rem));
    }

    .workflow-properties-panel.is-open {
        transform: translateY(0);
    }

    .workflow-toolbox {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workflow-tool {
        min-height: 74px;
    }

    .workflow-user-assignment-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.table-shell {
    overflow-x: auto;
}

.table-shell:has(.compact-index-toolbar) {
    padding-top: .7rem;
}

.document-index-shell.is-tight {
    padding: .45rem .7rem .65rem;
}

.document-index-shell.is-tight .index-toolbar {
    justify-content: flex-end;
    margin-bottom: .35rem;
}

.document-index-shell.is-tight table th,
.document-index-shell.is-tight table td {
    padding-top: .45rem;
    padding-bottom: .45rem;
}

.document-index-shell table {
    margin-bottom: 0;
    table-layout: fixed;
}

.document-index-shell th:last-child,
.document-index-shell td.row-actions {
    position: sticky;
    right: 0;
    z-index: 3;
    background: #ffffff;
    box-shadow: -10px 0 12px -14px rgba(23, 42, 52, .55);
}

.document-index-shell tr.is-selected td.row-actions {
    background: color-mix(in srgb, var(--accent-color, #0f6f7c) 8%, #ffffff);
}

.document-index-shell td.row-actions {
    min-width: max-content;
}

.document-index-shell th.document-index-resizable-column {
    position: relative;
    padding-right: .75rem;
}

.document-index-shell td.document-index-resizable-column {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-index-shell .document-index-column-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    z-index: 4;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

.document-index-shell .document-index-column-resize-handle::after {
    content: "";
    position: absolute;
    top: .4rem;
    bottom: .4rem;
    left: 3px;
    width: 1px;
    background: transparent;
}

.document-index-shell th.document-index-resizable-column:hover .document-index-column-resize-handle::after,
.document-index-shell.is-column-resizing .document-index-column-resize-handle::after {
    background: #0b7f8b;
}

.document-index-shell.is-column-resizing {
    cursor: col-resize;
    user-select: none;
}

.index-column-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: start;
    gap: .25rem;
    min-width: 0;
}

.index-column-sort,
.index-column-filter-toggle,
.index-workflow-legend-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0 .25rem;
    color: #2b4450;
    background: transparent;
}

.index-column-sort {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    align-content: center;
    gap: .08rem;
    min-width: 0;
    min-height: 42px;
    text-align: left;
}

.index-column-sort span {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    line-height: 1.12;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.index-column-sort small {
    color: #60717d;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.index-column-sort.active,
.index-column-filter-toggle.active,
.index-workflow-legend-toggle.active,
.index-column-sort:hover,
.index-column-filter-toggle:hover,
.index-workflow-legend-toggle:hover {
    border-color: #c9d5d8;
    background: #ffffff;
}

.index-column-filter-toggle svg,
.index-workflow-legend-toggle svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.index-column-filter {
    grid-column: 1 / -1;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .25rem;
    width: min(260px, 70vw);
    margin-top: .25rem;
    padding: .4rem;
    border: 1px solid #cfe0e6;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(20, 42, 52, .18);
}

.index-column-filter input {
    flex: 1;
    min-width: 0;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .42rem .5rem;
}

.index-column-filter button {
    width: 28px;
    height: 28px;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    color: #6d1f1f;
    background: #ffffff;
}

.document-index-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    margin-top: .55rem;
    padding: .55rem .15rem 0;
    border-top: 1px solid #dce6ea;
    background: #ffffff;
    min-height: 42px;
}

.document-index-pager span {
    font-weight: 700;
    color: #21323b;
    white-space: nowrap;
}

.document-index-pager small {
    color: #60717d;
    margin-right: .25rem;
    white-space: nowrap;
}

.copy-document-modal {
    width: min(520px, calc(100vw - 2rem));
    border: 1px solid #cfe0e6;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(20, 35, 43, .24);
}

.copy-document-modal > p,
.copy-document-modal > small,
.copy-document-modal > .inline-actions,
.copy-options-list {
    margin: .75rem 1rem;
}

.copy-options-list {
    display: grid;
    gap: .45rem;
}

.index-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}

.compact-index-toolbar {
    margin-bottom: .5rem;
}

.compact-index-toolbar h2 {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
}

.index-toolbar > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    flex-wrap: wrap;
}

.index-message {
    color: #0f6f7c;
    font-size: .85rem;
    font-weight: 700;
}

.report-designer-feedback {
    min-width: 260px;
    max-width: min(520px, 100%);
    padding: .55rem 2.25rem .55rem .75rem;
    border: 1px solid #b9d8c6;
    border-radius: 6px;
    background: #eef9f1;
    color: #24583a;
    box-shadow: 0 6px 18px rgba(30, 58, 72, .08);
}

.report-designer-feedback.error {
    border-color: #efb4b4;
    background: #fff2f2;
    color: #8c1d1d;
}

.select-column {
    width: 36px;
    text-align: center;
}

.workflow-state-column {
    width: 190px;
    min-width: 190px;
}

.workflow-state-column .index-column-header {
    grid-template-columns: minmax(72px, 1fr) 24px 24px;
}

.workflow-state-badge {
    display: inline-flex;
    align-items: center;
    gap: .36rem;
    width: max-content;
    max-width: 176px;
    border: 1px solid #cfe0e6;
    border-radius: 999px;
    padding: .16rem .5rem;
    background: #f7fbfc;
    color: #234451;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.workflow-state-badge span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workflow-state-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid #8fa5ad;
    border-radius: 4px;
    background: transparent;
}

.workflow-state-badge.is-new .workflow-state-icon {
    border-color: #b42318;
    background: #d92d20;
}

.workflow-state-badge.is-draft-done .workflow-state-icon {
    border-color: #d6a100;
    background: #f2c94c;
}

.workflow-state-badge.is-done .workflow-state-icon {
    border-color: #25835b;
    background: #30a46c;
}

.workflow-state-badge.is-none .workflow-state-icon {
    border-color: #4da3c7;
    background: #bdefff;
}

.workflow-state-icon.is-new {
    border-color: #b42318;
    background: #d92d20;
}

.workflow-state-icon.is-draft-done {
    border-color: #d6a100;
    background: #f2c94c;
}

.workflow-state-icon.is-done {
    border-color: #25835b;
    background: #30a46c;
}

.workflow-state-icon.is-none {
    border-color: #4da3c7;
    background: #bdefff;
}

.workflow-state-legend {
    grid-column: 1 / -1;
    z-index: 35;
    display: grid;
    gap: .35rem;
    width: min(280px, 78vw);
    margin-top: .25rem;
    padding: .55rem .65rem;
    border: 1px solid #cfe0e6;
    border-radius: 7px;
    background: #ffffff;
    color: #21323b;
    box-shadow: 0 14px 30px rgba(20, 42, 52, .2);
}

.workflow-state-legend strong {
    font-size: .74rem;
    line-height: 1.2;
}

.workflow-state-legend-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
}

.row-actions {
    display: flex;
    gap: .65rem;
    white-space: nowrap;
}

.row-actions a {
    color: #0f6f7c;
    font-weight: 700;
    text-decoration: none;
}

.revision-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.revision-option-panel {
    display: grid;
    gap: .9rem;
    align-content: start;
    padding: 1rem;
    border: 1px solid #d3dde1;
    border-radius: 8px;
    background: #ffffff;
}

.revision-option-panel h2 {
    margin: 0;
    font-size: 1rem;
}

.revision-option-panel label {
    display: grid;
    gap: .35rem;
    color: #41535c;
    font-size: .85rem;
    font-weight: 700;
}

.revision-option-panel select {
    min-width: 0;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .55rem .65rem;
    color: #1d2430;
    background: #ffffff;
    font-weight: 400;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: .75rem;
    border-bottom: 1px solid #e3e9eb;
    text-align: left;
}

th {
    color: #60717d;
    font-size: .78rem;
    text-transform: uppercase;
}

.translation-table table {
    border-collapse: separate;
    border-spacing: 0;
}

.translation-table .translation-language-row.language-band-primary td {
    background: var(--app-language-group-bg, #eaf6f8);
}

.translation-table .translation-language-row.language-band-alternate td {
    background: var(--app-row-alternate-bg, #f6fafb);
}

.translation-table .translation-language-cell {
    min-width: 150px;
    color: var(--app-language-group-text, var(--app-text, #1d2430));
    font-weight: 700;
    vertical-align: top;
}

.translation-table .translation-language-cell small {
    display: block;
    margin-top: .15rem;
    color: inherit;
    opacity: .7;
    font-weight: 600;
}

.blazor-error-boundary {
    padding: 1rem;
    color: white;
    background: #b32121;
}

@media (max-width: 860px) {
    .page-heading, .workflow-shell header {
        align-items: flex-start;
        flex-direction: column;
    }

    .document-index-pager {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .document-index-shell {
        padding: .55rem .45rem .65rem;
    }

    .document-index-shell table {
        min-width: 760px;
    }

    .document-index-shell th,
    .document-index-shell td {
        padding: .65rem .55rem;
    }

    .document-index-shell td.row-actions {
        padding-block: .5rem;
    }

    .document-index-shell tr:not(.workflow-row-detail) td {
        min-height: 54px;
    }

    .document-index-shell .icon-action {
        min-width: 32px;
        height: 30px;
        padding: 0 .38rem;
    }

    .workflow-inline-panel {
        padding: .35rem;
    }

    .workflow-inline-header {
        position: sticky;
        left: 0;
        z-index: 2;
        flex-wrap: wrap;
        background: #ffffff;
    }

    .workflow-phase-strip {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
        grid-auto-columns: auto;
        gap: .38rem;
        overflow-x: visible;
        padding: .05rem 0 .2rem;
    }

    .workflow-phase-chip {
        grid-column: auto !important;
        min-height: 0;
        padding: .38rem .42rem;
    }

    .workflow-phase-chip strong {
        font-size: .82rem;
    }

    .workflow-branches span,
    .workflow-signer {
        max-width: 100%;
        white-space: normal;
    }

    .workflow-sign-actions {
        flex-wrap: wrap;
    }

    .workflow-sign-actions input {
        width: min(100%, 180px);
    }

    .admin-two-pane {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .dual-list-assignment {
        grid-template-columns: minmax(0, 1fr);
    }

    .dual-list-actions {
        grid-template-columns: repeat(2, auto);
        justify-content: center;
    }

    .user-settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .workspace, .designer-layout {
        grid-template-columns: 1fr;
    }

    .field-card {
        grid-column: span 12;
    }

    .tree-shell {
        min-height: auto;
        padding-bottom: 1.25rem;
    }

    .doc-tree {
        gap: .35rem;
    }
}

.winforms-designer {
    display: grid;
    grid-template-columns: minmax(190px, 220px) minmax(640px, 1fr) 300px;
    gap: .8rem;
    align-items: start;
}

.form-designer-heading {
    display: none;
}

.toolbox-panel, .properties-panel, .designer-surface-wrap {
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    background: #ffffff;
}

.toolbox-panel, .properties-panel {
    padding: .75rem;
}

.toolbox-panel {
    display: grid;
    gap: .4rem;
    position: sticky;
    top: calc(var(--topbar-offset, 48px) + .5rem);
    max-height: calc(100vh - var(--topbar-offset, 48px) - 1rem);
    overflow: auto;
    scrollbar-width: none;
}

.toolbox-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.toolbox-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.toolbox-panel.is-collapsed {
    max-height: 54px;
    min-height: 54px;
    width: 100%;
    padding: .45rem .75rem;
    overflow: hidden;
}

.toolbox-panel.is-collapsed button strong {
    display: none;
}

.toolbox-panel.is-collapsed > button {
    display: none;
}

.toolbox-panel.is-collapsed button {
    grid-template-columns: 34px;
    justify-content: center;
}

.winforms-designer > .properties-panel {
    position: sticky;
    top: calc(var(--topbar-offset, 48px) + .5rem);
    max-height: calc(100vh - var(--topbar-offset, 48px) - 1rem);
    overflow: auto;
    scrollbar-width: none;
}

.winforms-designer > .properties-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.toolbox-panel button {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: .5rem;
    border: 1px solid #d9e1e4;
    border-radius: 6px;
    padding: .45rem;
    text-align: left;
    background: #fbfcfc;
    cursor: grab;
}

.toolbox-panel button span {
    display: inline-grid;
    width: 34px;
    height: 30px;
    place-items: center;
    border-radius: 5px;
    color: #ffffff;
    background: #34495e;
    font-size: .72rem;
}

.designer-toolbar {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    padding: .75rem;
    border: 1px solid #d9e1e4;
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: var(--topbar-offset, 48px);
    z-index: 75;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(12, 37, 45, .08);
}

.designer-toolbar select {
    min-width: 200px;
}

.designer-toolbar select, .designer-toolbar button, .designer-toolbar-link, .properties-panel input, .properties-panel select, .properties-panel textarea {
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .45rem .55rem;
    background: #ffffff;
}

.designer-toolbar button {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    padding: 0;
}

.designer-toolbar svg {
    width: 18px;
    height: 18px;
}

.designer-toolbar button:disabled {
    color: #8b989d;
    background: #eef2f3;
}

.designer-toolbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    color: #123344;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.designer-toolbar-link.icon-link {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
}

.designer-toolbar-link.icon-link svg {
    width: 18px;
    height: 18px;
}

.designer-toolbar-link.primary {
    color: #ffffff;
    border-color: #087887;
    background: #087887;
}

.designer-validation {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: .3rem;
    padding: .55rem 2.4rem .55rem .75rem;
    border-top: 1px solid #efb4b4;
    border-bottom: 1px solid #efb4b4;
    color: #8c1d1d;
    background: #fff2f2;
    font-size: .82rem;
    font-weight: 700;
}

.designer-validation > span {
    display: block;
    min-width: 0;
}

.designer-validation.warning {
    border-top-color: #e5c36b;
    border-bottom-color: #e5c36b;
    color: #7a5200;
    background: #fff7dd;
}

.designer-validation-close {
    position: absolute;
    top: .35rem;
    right: .5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: rgba(255, 255, 255, .72);
    color: inherit;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.designer-validation-close:hover {
    background: rgba(255, 255, 255, .95);
}

.designer-feedback {
    padding: .5rem .75rem;
    border-bottom: 1px solid #b9d8c6;
    color: #24583a;
    background: #eef9f1;
    font-size: .82rem;
    font-weight: 700;
}

.designer-feedback.error {
    border-bottom-color: #efb4b4;
    color: #8c1d1d;
    background: #fff2f2;
}

.docflow-alert-band {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding-right: 2.25rem;
    transition: opacity .18s ease, transform .18s ease;
}

.docflow-alert-band.docflow-alert-success {
    border-color: rgba(31, 181, 94, .42) !important;
    border-top-color: rgba(31, 181, 94, .42) !important;
    border-right-color: rgba(31, 181, 94, .42) !important;
    border-bottom-color: rgba(31, 181, 94, .42) !important;
    border-left-color: #1b8043 !important;
    color: #145c32 !important;
    background: rgba(31, 181, 94, .14) !important;
}

.docflow-alert-band.docflow-alert-warning {
    border-color: rgba(214, 139, 0, .45) !important;
    border-top-color: rgba(214, 139, 0, .45) !important;
    border-right-color: rgba(214, 139, 0, .45) !important;
    border-bottom-color: rgba(214, 139, 0, .45) !important;
    border-left-color: #d68b00 !important;
    color: #7a5200 !important;
    background: rgba(255, 171, 0, .16) !important;
}

.docflow-alert-band.docflow-alert-error {
    border-color: rgba(191, 45, 45, .45) !important;
    border-top-color: rgba(191, 45, 45, .45) !important;
    border-right-color: rgba(191, 45, 45, .45) !important;
    border-bottom-color: rgba(191, 45, 45, .45) !important;
    border-left-color: #bf2d2d !important;
    color: #8c1d1d !important;
    background: rgba(220, 53, 69, .13) !important;
}

.docflow-alert-band.docflow-alert-dismissed {
    opacity: 0;
    transform: translateY(-4px);
}

.docflow-alert-close,
.docflow-alert-band .designer-validation-close,
.docflow-alert-band .workflow-feedback-close {
    position: absolute;
    top: .35rem;
    right: .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: rgba(255, 255, 255, .78);
    color: inherit;
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
}

.docflow-alert-close:hover,
.docflow-alert-band .designer-validation-close:hover,
.docflow-alert-band .workflow-feedback-close:hover {
    background: #ffffff;
}

.dashboard-designer-heading .button-row {
    align-items: center;
}

.dashboard-designer-heading {
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .75rem;
}

.dashboard-designer-heading h1 {
    margin: 0;
    line-height: 1.1;
}

.dashboard-heading-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    max-width: min(920px, 72vw);
}

.dashboard-action-cluster {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: nowrap;
}

.dashboard-designer-heading .icon-button {
    width: 32px;
    height: 32px;
}

.dashboard-designer-heading .icon-button svg {
    width: 16px;
    height: 16px;
}

.dashboard-designer-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 290px;
    gap: .75rem;
    height: calc(100dvh - 150px);
    min-height: 480px;
    overflow: hidden;
}

.dashboard-designer-shell.is-preview {
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-designer-panel {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-width: 0;
    max-height: calc(100vh - 160px);
    overflow: auto;
    scrollbar-width: none;
    border: 1px solid #cfdde3;
    border-radius: 6px;
    background: #f8fbfc;
    padding: .65rem;
}

.dashboard-designer-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.dashboard-designer-panel * {
    scrollbar-width: none;
}

.dashboard-designer-panel *::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.dashboard-designer-panel details {
    border: 1px solid #d8e5ea;
    border-radius: 6px;
    background: #ffffff;
    padding: .45rem .55rem;
}

.dashboard-designer-panel summary {
    cursor: pointer;
    font-weight: 800;
    color: #12323c;
}

.dashboard-designer-panel .muted {
    margin: .45rem 0;
    color: #657d87;
    font-size: .78rem;
    line-height: 1.35;
}

.dashboard-designer-panel .muted.small {
    font-size: .72rem;
}

.dashboard-designer-panel label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-top: .55rem;
    font-size: .78rem;
    font-weight: 700;
    color: #294550;
}

.dashboard-designer-panel input,
.dashboard-designer-panel select,
.dashboard-designer-panel textarea {
    width: 100%;
    border: 1px solid #c9d8df;
    border-radius: 5px;
    padding: .4rem .5rem;
    font: inherit;
    background: #ffffff;
}

.dashboard-toolbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    margin-top: .55rem;
}

.dashboard-toolbox button,
.dashboard-field-list button {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.2rem;
    border: 1px solid #cfe0e7;
    border-radius: 6px;
    background: #f5fafb;
    color: #17343d;
    cursor: pointer;
}

.dashboard-toolbox button:hover,
.dashboard-field-list button:hover {
    border-color: #0f7b85;
    background: #ecf8fa;
}

.dashboard-toolbox span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 4px;
    background: #0f7b85;
    color: #ffffff;
}

.dashboard-field-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .55rem;
}

.dashboard-data-actions {
    margin-top: .55rem;
}

.dashboard-dataset-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .55rem;
}

.dashboard-dataset-list button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    border: 1px solid #cfe0e7;
    border-radius: 6px;
    background: #ffffff;
    padding: .4rem .5rem;
    color: #17343d;
    cursor: pointer;
}

.dashboard-dataset-list button.active {
    border-color: #0f7b85;
    background: #e8f7f9;
}

.dashboard-dataset-list span {
    color: #607985;
    font-size: .72rem;
}

.dashboard-parameter-list,
.dashboard-series-list,
.dashboard-grid-column-list {
    display: grid;
    gap: .55rem;
    margin: .55rem 0;
}

.dashboard-parameter-row,
.dashboard-series-row,
.dashboard-grid-column-row {
    display: grid;
    gap: .45rem;
    border: 1px solid #d8e5ea;
    border-radius: 6px;
    background: #f8fbfc;
    padding: .5rem;
}

.dashboard-field-list span {
    min-width: 52px;
    color: #0f6f7c;
    font-size: .72rem;
}

.dashboard-workspace {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #cfdde3;
    border-radius: 6px;
    background: #eaf2f5;
}

.dashboard-viewer {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    height: calc(100dvh - 120px);
    min-height: 520px;
    overflow: hidden;
    border: 1px solid #cfdde3;
    border-radius: 6px;
    background: #eaf2f5;
}

.dashboard-tab-strip {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow-x: auto;
    min-height: 38px;
    padding: .35rem .65rem 0;
    background: #eef7fa;
    border-bottom: 1px solid #d7e4e9;
    scrollbar-width: none;
    position: relative;
    z-index: 2;
}

.dashboard-tab-strip::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.dashboard-tab-button,
.dashboard-tab-add {
    min-height: 32px;
    border: 1px solid #c9d8df;
    border-bottom-color: #d7e4e9;
    border-radius: 7px 7px 0 0;
    background: #f5fafb;
    color: #294550;
    padding: .38rem .85rem;
    font-weight: 800;
    line-height: 1;
    margin: 0 2px -1px 0;
    box-shadow: inset 0 -1px 0 #d7e4e9;
    cursor: pointer;
    white-space: nowrap;
}

.dashboard-tab-button.active {
    border-color: #0f7b85;
    border-bottom-color: #ffffff;
    background: #ffffff;
    color: #0f5f69;
    box-shadow: none;
    position: relative;
    z-index: 3;
}

.dashboard-tab-placeholder {
    display: inline-block;
    width: 18px;
    height: 6px;
}

.dashboard-tab-button:hover,
.dashboard-tab-add:hover {
    border-color: #0f7b85;
}

.dashboard-viewer.is-embedded .dashboard-tab-strip {
    margin: -.35rem -.35rem 0;
    padding-left: .85rem;
}

.dashboard-cell-link {
    color: #0f6f7c;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dashboard-link-item {
    display: grid;
    align-content: center;
    gap: .35rem;
    height: 100%;
    padding: 1rem;
    border-left: 5px solid var(--accent);
    background: #f8fcfd;
    color: #0f5360;
    text-decoration: none;
}

.dashboard-link-item strong {
    font-size: 1.15rem;
}

.dashboard-link-item span {
    color: #607580;
    word-break: break-all;
}

.dashboard-title-band {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid #c8dbe2;
    background: #ffffff;
}

.dashboard-title-band h2 {
    margin: 0;
    font-size: 1.15rem;
}

.dashboard-title-band p {
    margin: .2rem 0 0;
    color: #526b75;
    font-size: .85rem;
}

.dashboard-export-toolbar,
.dashboard-export-group {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
}

.dashboard-export-toolbar {
    justify-content: flex-end;
}

.dashboard-export-group {
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    min-height: 36px;
    flex-wrap: nowrap;
}

.dashboard-export-group span {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    color: #4e6873;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    min-width: auto;
}

.dashboard-designer-heading .dashboard-export-group .secondary-action.mini {
    min-height: 24px;
    padding: .18rem .42rem;
    font-size: .68rem;
}

.dashboard-designer-heading .dashboard-export-group .export-format-action {
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    border-radius: 6px;
}

.dashboard-designer-heading .dashboard-export-group .export-format-action::before {
    content: none;
}

.dashboard-designer-heading .dashboard-export-group .export-format-action svg {
    width: 1.12rem;
    height: 1.12rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.secondary-action.mini {
    min-height: 1.75rem;
    padding: .2rem .45rem;
    font-size: .68rem;
    line-height: 1;
}

.primary-action.mini {
    min-height: 1.75rem;
    padding: .2rem .45rem;
    font-size: .68rem;
    line-height: 1;
}

.dashboard-global-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
}

.dashboard-filter-chip {
    border: 1px solid #9fc9d2;
    border-radius: 999px;
    background: #eef9fb;
    color: #0f6070;
    padding: .28rem .55rem;
    font-size: .78rem;
    cursor: pointer;
}

.dashboard-filter-chip span {
    margin-left: .35rem;
    font-weight: 900;
}

.dashboard-canvas {
    position: relative;
    display: grid;
    --dashboard-render-columns: var(--dashboard-columns);
    grid-template-columns: repeat(var(--dashboard-render-columns), minmax(0, 1fr));
    grid-template-rows: repeat(var(--dashboard-max-rows), minmax(0, 1fr));
    grid-auto-rows: 0;
    gap: .65rem;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: .75rem;
    background-image: linear-gradient(#d8e8ed 1px, transparent 1px), linear-gradient(90deg, #d8e8ed 1px, transparent 1px);
    background-size: 22px 22px;
}

.dashboard-canvas.theme-compact {
    gap: .4rem;
    padding: .5rem;
}

.dashboard-canvas.theme-contrast {
    background-color: #f4f7f8;
}

.dashboard-item {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #c9dbe2;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(35, 54, 64, .08);
}

.dashboard-item.is-dragging {
    opacity: .88;
    box-shadow: 0 16px 34px rgba(15, 88, 100, .22);
}

.dashboard-item.is-full-row-drag {
    outline: 2px dashed #0f7b85;
    outline-offset: 3px;
}

.dashboard-drop-preview {
    display: none;
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 0;
    border: 2px dashed #0f7b85;
    border-radius: 7px;
    background: rgba(15, 123, 133, .13);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75);
    pointer-events: none;
}

.dashboard-drop-preview.visible {
    display: block;
}

.dashboard-drop-preview.is-full-row::after {
    content: "tutta riga";
    position: absolute;
    right: .45rem;
    top: .35rem;
    padding: .15rem .4rem;
    border-radius: 999px;
    background: #0f7b85;
    color: #ffffff;
    font-size: .68rem;
    font-weight: 800;
}

.dashboard-item.selected {
    outline: 2px solid #0f7b85;
    outline-offset: 2px;
}

.dashboard-item.has-broken-bindings {
    border-color: rgba(196, 43, 43, .82);
    background: linear-gradient(rgba(196, 43, 43, .2), rgba(196, 43, 43, .2)), #ffffff;
    box-shadow: 0 0 0 2px rgba(196, 43, 43, .28), 0 8px 22px rgba(120, 30, 30, .16);
}

.dashboard-item.has-broken-bindings::after {
    content: "Campi non validi";
    position: absolute;
    right: .45rem;
    bottom: .45rem;
    z-index: 12;
    border-radius: 999px;
    background: rgba(196, 43, 43, .9);
    color: #ffffff;
    padding: .18rem .45rem;
    font-size: .68rem;
    font-weight: 800;
    pointer-events: none;
}

.dashboard-item.hide-caption .dashboard-item-caption {
    display: none;
}

.dashboard-item-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 2.35rem;
    padding: .45rem .55rem;
    border-bottom: 1px solid #e2edf1;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, white), #ffffff);
    cursor: move;
}

.dashboard-item-caption strong {
    display: block;
    color: #12313a;
    font-size: .86rem;
}

.dashboard-item-caption span {
    color: #627984;
    font-size: .72rem;
}

.dashboard-item-actions {
    display: flex;
    gap: .2rem;
}

.dashboard-item-actions button {
    width: 1.45rem;
    height: 1.45rem;
    border: 1px solid #c3d6dd;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
}

.dashboard-item-body {
    flex: 1;
    min-height: 0;
    padding: .65rem;
    overflow: hidden;
}

.dashboard-resize-handle {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 11;
    width: 20px;
    height: 20px;
    border: 1px solid #ffffff;
    border-radius: 5px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 91, 101, .2);
    cursor: nwse-resize;
    opacity: .9;
    touch-action: none;
}

.dashboard-resize-handle::before {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #0f7b85;
    border-bottom: 2px solid #0f7b85;
}

.dashboard-resize-handle:hover {
    opacity: 1;
    transform: scale(1.05);
}

.dashboard-kpi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    border-left: 5px solid var(--accent);
    padding-left: .75rem;
}

.dashboard-kpi strong {
    font-size: 2.1rem;
    line-height: 1;
    color: #0f2630;
}

.dashboard-kpi span,
.dashboard-text-item {
    color: #58707a;
}

.dashboard-text-item {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dashboard-grid-wrap {
    height: 100%;
    overflow: auto;
}

.dashboard-grid-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: .76rem;
}

.dashboard-grid-table {
    table-layout: fixed;
}

.dashboard-item-pager {
    position: sticky;
    left: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    min-height: 34px;
    padding: .35rem .45rem;
    border-top: 1px solid #d7e4e9;
    background: rgba(248, 252, 253, .96);
    color: #284250;
    font-size: .78rem;
    font-weight: 700;
}

.dashboard-item-pager span {
    margin-right: auto;
    color: #60717d;
}

.dashboard-item-pager button {
    width: 28px;
    height: 28px;
    border: 1px solid #c9d5d8;
    border-radius: 5px;
    background: #ffffff;
    color: #0f3d47;
    font-weight: 800;
}

.dashboard-item-pager button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.dashboard-grid-wrap th,
.dashboard-grid-wrap td {
    border: 1px solid #d7e4e9;
    padding: .35rem .45rem;
    text-align: left;
    vertical-align: top;
}

.dashboard-grid-wrap th {
    position: sticky;
    top: 0;
    background: #edf6f8;
    color: #12313a;
}

.dashboard-grid-wrap th.dashboard-grid-resizable-header {
    position: sticky;
    padding-right: .75rem;
}

.dashboard-grid-column-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
    z-index: 3;
}

.dashboard-grid-column-resize-handle::after {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 3px;
    width: 1px;
    background: rgba(15, 123, 133, .45);
    opacity: 0;
}

.dashboard-grid-wrap th.dashboard-grid-resizable-header:hover .dashboard-grid-column-resize-handle::after,
.dashboard-grid-column-resizing .dashboard-grid-column-resize-handle::after {
    opacity: 1;
}

.dashboard-grid-wrap tfoot td {
    position: sticky;
    bottom: 0;
    background: #f4fafb;
    color: #0f3d47;
    font-weight: 800;
}

.dashboard-grid-wrap td.nowrap-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-grid-wrap td.wrap-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

.dashboard-grid-wrap td.fixed-row-height .dashboard-grid-cell-content {
    display: -webkit-box;
    -webkit-line-clamp: var(--grid-max-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-grid-wrap td.nowrap-text .dashboard-grid-cell-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.runtime-grid-image-cell {
    display: grid;
    gap: .25rem;
    min-width: 90px;
}

.runtime-grid-image-cell img {
    display: block;
    width: 100%;
    max-width: 160px;
    height: 72px;
    object-fit: contain;
    border: 1px solid #d7e4e9;
    border-radius: 4px;
    background: #f7fbfc;
}

.runtime-grid-image-cell input {
    min-width: 0;
    font-size: .72rem;
}

.runtime-grid-image-placeholder {
    display: grid;
    place-items: center;
    min-height: 54px;
    padding: .35rem;
    border: 1px dashed #bfd2da;
    border-radius: 4px;
    color: #607985;
    background: #f7fbfc;
    font-size: .72rem;
    text-align: center;
}

.dashboard-grid-user-toolbar {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .35rem .45rem;
    border-bottom: 1px solid #d7e2e6;
    background: #f5fafb;
}

.dashboard-grid-user-toolbar .render-grid-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    color: #0f7b85;
    background: #ffffff;
}

.icon-text-visible .dashboard-grid-user-toolbar .render-grid-icon-button,
.dashboard-grid-user-toolbar .render-grid-icon-button:has(span:not(:empty)) {
    width: auto;
    min-width: 34px;
    max-width: min(240px, 100%);
    height: auto;
    min-height: 34px;
    padding: .35rem .55rem;
    gap: .35rem;
    line-height: 1.15;
    white-space: normal;
    text-align: left;
}

.dashboard-grid-user-toolbar .render-grid-icon-button span {
    display: inline-block;
    overflow-wrap: anywhere;
}

.dashboard-grid-user-toolbar .render-grid-icon-button.active {
    color: #ffffff;
    border-color: #0f7b85;
    background: #0f7b85;
}

.dashboard-grid-column-layout {
    border-bottom: 1px solid #d7e2e6;
}

.dashboard-grid-filter-panel {
    border-bottom: 1px solid #d7e2e6;
}

.dashboard-grid-sort-header {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    width: 100%;
    border: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    font-weight: 800;
    text-align: left;
}

.dashboard-grid-sort-header small {
    color: #58707a;
    font-size: .62rem;
    font-weight: 800;
}

.dashboard-treemap {
    position: relative;
    height: 100%;
    min-height: 160px;
    overflow: hidden;
    border: 1px solid #cfe0e6;
    background: #f7fbfc;
}

.dashboard-treemap-tile {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    min-width: 34px;
    min-height: 28px;
    padding: 8px;
    border: 2px solid #fff;
    border-radius: 0;
    color: #fff;
    background: var(--tile-color);
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    box-shadow: inset 0 -40px 70px rgb(0 0 0 / 12%);
}

.dashboard-treemap-tile strong,
.dashboard-treemap-tile span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgb(0 0 0 / 28%);
}

.dashboard-treemap-tile strong {
    font-size: .78rem;
}

.dashboard-treemap-tile span {
    font-size: .72rem;
    font-weight: 800;
}

.dashboard-empty {
    display: grid;
    place-items: center;
    height: 100%;
    color: #6f838c;
}

.dashboard-pivot-builder {
    display: grid;
    gap: 10px;
}

.dashboard-pivot-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
    margin-top: .55rem;
    color: #526b75;
    font-size: .75rem;
}

.dashboard-pivot-editor-modal {
    width: calc(100vw - 24px);
    max-width: none;
    min-width: min(620px, calc(100vw - 24px));
    height: calc(100dvh - 72px);
    max-height: calc(100dvh - 72px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: #ffffff;
    overflow: hidden;
    resize: both;
}

.modal-backdrop:has(.dashboard-pivot-editor-modal) {
    place-items: stretch;
    padding: .35rem;
}

.dashboard-pivot-editor-modal > header {
    align-items: center;
    padding-block: .55rem;
}

.dashboard-pivot-editor-modal > header p {
    margin: .15rem 0 0;
    color: #607985;
}

.dashboard-pivot-designer {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: .75rem;
    min-height: 0;
    overflow: hidden;
}

.dashboard-pivot-field-browser,
.dashboard-pivot-drop-layout {
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
}

.dashboard-pivot-field-browser::-webkit-scrollbar,
.dashboard-pivot-drop-layout::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.dashboard-pivot-field-browser {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 1px solid #c8dce4;
    border-radius: 8px;
    background: #f8fbfc;
}

.dashboard-pivot-field-browser > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .65rem .7rem;
    border-bottom: 1px solid #d7e5eb;
}

.dashboard-pivot-field-toggle {
    flex: 0 0 auto;
}

.dashboard-pivot-field-browser.is-collapsed {
    grid-template-rows: auto;
    align-self: start;
}

.dashboard-pivot-field-browser.is-collapsed .dashboard-pivot-field-checklist {
    display: none;
}

.dashboard-pivot-field-browser > header span {
    color: #607985;
    font-size: .74rem;
}

.dashboard-pivot-field-checklist {
    display: grid;
    align-content: start;
    gap: .3rem;
    padding: .55rem;
    overflow: auto;
    scrollbar-width: none;
}

.dashboard-pivot-field-checklist::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.dashboard-pivot-field-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem .45rem;
    border: 1px solid #d7e5eb;
    border-radius: 6px;
    background: #fff;
    cursor: grab;
}

.dashboard-pivot-field-choice label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-weight: 800;
}

.dashboard-pivot-field-choice small {
    color: #607985;
}

.dashboard-pivot-drop-layout {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: .55rem;
}

.dashboard-pivot-areas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(190px, auto);
    gap: .55rem;
    min-height: 0;
    overflow: auto;
    padding-right: .15rem;
    scrollbar-width: none;
}

.dashboard-pivot-areas-grid::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.dashboard-pivot-options-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .5rem .65rem;
    border: 1px solid #d7e5eb;
    border-radius: 8px;
    background: #f8fbfc;
}

.dashboard-pivot-options-bar label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
}

.dashboard-pivot-config-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid #bdd3dc;
    border-radius: 6px;
    background: #ffffff;
    color: #0f6f7c;
    cursor: pointer;
}

.dashboard-pivot-config-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-pivot-field-bank,
.dashboard-pivot-area {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 8px;
    border: 1px solid #c8dce4;
    border-radius: 8px;
    background: #f8fbfc;
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
}

.dashboard-pivot-area::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.dashboard-pivot-field,
.dashboard-pivot-area-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 6px;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    padding: 6px;
    border: 1px solid #d7e5eb;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.icon-labels-dashboard-designer-visible .dashboard-viewer .dashboard-pivot-config-button:has(> svg) {
    height: var(--app-icon-button-size, 34px);
    width: auto;
}

.dashboard-pivot-area-row {
    grid-template-columns: auto minmax(140px, 1.15fr) minmax(120px, .85fr) auto;
}

.dashboard-pivot-area-row.selected {
    border-color: var(--accent-color, #0b7f8b);
    background: #e7f7fa;
    box-shadow: inset 4px 0 0 var(--accent-color, #0b7f8b);
}

.dashboard-pivot-area-row label {
    display: grid;
    gap: 3px;
    margin: 0;
    min-width: 0;
    max-width: 100%;
    color: #314b57;
    font-size: .72rem;
    font-weight: 800;
    overflow: hidden;
}

.dashboard-pivot-area-row select,
.dashboard-pivot-area-row input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    height: 30px;
    padding: .28rem .4rem;
}

.dashboard-pivot-area-row.value-row {
    grid-template-columns: auto minmax(140px, 1fr) minmax(120px, .85fr) minmax(120px, .85fr) minmax(110px, .8fr) auto;
}

.dashboard-pivot-area-row .danger-action.mini {
    align-self: end;
    min-height: 30px;
    padding: .25rem .45rem;
}

.dashboard-pivot-order-toolbar {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) repeat(4, 34px);
    align-items: center;
    gap: .35rem;
    width: 100%;
    min-width: 0;
    padding: .45rem .55rem;
    border: 1px solid #d7e5eb;
    border-radius: 7px;
    background: #f8fbfc;
    overflow: visible;
    position: relative;
    z-index: 3;
}

.dashboard-pivot-order-toolbar span {
    color: #314b57;
    font-size: .78rem;
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-pivot-order-toolbar .pivot-order-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #bdd4dc;
    border-radius: 7px;
    background: #ffffff;
    color: #0b7782;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.dashboard-pivot-order-toolbar .pivot-order-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.dashboard-pivot-order-toolbar .pivot-order-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.dashboard-pivot-dropzone {
    display: none;
    min-height: 6px;
    border-radius: 999px;
    transition: background-color .12s ease, min-height .12s ease;
}

.dashboard-pivot-dropzone.visible {
    display: block;
    background: repeating-linear-gradient(
        90deg,
        rgba(8, 120, 135, .34),
        rgba(8, 120, 135, .34) 8px,
        transparent 8px,
        transparent 14px
    );
}

.dashboard-pivot-dropzone.visible:hover {
    min-height: 10px;
    background: rgba(8, 120, 135, .42);
}

@media (max-width: 900px) {
    .dashboard-pivot-editor-modal {
        width: calc(100vw - 8px);
        min-width: 0;
        height: calc(100dvh - 56px);
        max-height: calc(100dvh - 56px);
        border-radius: 6px;
    }

    .modal-backdrop:has(.dashboard-pivot-editor-modal) {
        padding: .25rem;
        align-items: stretch;
        justify-items: stretch;
    }

    .dashboard-pivot-editor-modal > header {
        padding: .42rem .55rem;
    }

    .dashboard-pivot-editor-modal > header h2 {
        font-size: .95rem;
    }

    .dashboard-pivot-designer {
        grid-template-columns: 1fr;
        overflow: auto;
        scrollbar-width: none;
        gap: .45rem;
        align-content: start;
    }

    .dashboard-pivot-designer::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .dashboard-pivot-field-browser,
    .dashboard-pivot-drop-layout {
        overflow: visible;
        min-height: auto;
    }

    .dashboard-pivot-field-browser {
        max-height: 30dvh;
    }

    .dashboard-pivot-field-browser.is-collapsed {
        max-height: none;
    }

    .dashboard-pivot-field-browser > header {
        padding: .42rem .5rem;
    }

    .dashboard-pivot-field-checklist {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        max-height: 130px;
        padding: .35rem;
    }

    .dashboard-pivot-field-choice {
        padding: .24rem .34rem;
    }

    .dashboard-pivot-drop-layout {
        display: flex;
        flex-direction: column;
        gap: .45rem;
        min-height: auto;
        overflow: visible;
    }

    .dashboard-pivot-areas-grid {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        overflow: visible;
        gap: .42rem;
        min-height: auto;
        padding-right: 0;
        width: 100%;
    }

    .dashboard-pivot-area {
        display: block;
        flex: 0 0 auto;
        min-height: 108px;
        max-height: none;
        overflow: auto;
        padding: .45rem;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        clear: both;
        contain: layout;
    }

    .dashboard-pivot-area > strong {
        display: block;
        margin-bottom: .15rem;
    }

    .dashboard-pivot-area-row,
    .dashboard-pivot-area-row.value-row {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: .35rem;
        padding: .42rem;
        min-width: 0;
        width: 100%;
        min-height: 118px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .dashboard-pivot-area-row.value-row {
        min-height: 218px;
    }

    .dashboard-pivot-area-row label {
        overflow: visible;
    }

    .dashboard-pivot-area-row select,
    .dashboard-pivot-area-row input {
        width: 100%;
        min-width: 0;
    }

    .dashboard-pivot-area-row .drag-handle {
        justify-self: start;
    }

    .dashboard-pivot-area-row .danger-action.mini {
        justify-self: stretch;
    }

    .dashboard-pivot-options-bar {
        order: 4;
        position: static;
        flex: 0 0 auto;
        gap: .35rem .7rem;
        padding: .38rem .5rem;
        width: 100%;
        box-sizing: border-box;
    }

    .dashboard-pivot-editor-modal > footer {
        padding: .45rem .55rem;
    }
}

.dashboard-pivot-wrap {
    overflow: auto;
    height: 100%;
}

.dashboard-pivot-runtime-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: end;
    padding: 8px;
    border-bottom: 1px solid #bfd5de;
    background: rgba(232, 243, 245, .92);
    position: sticky;
    top: 0;
    z-index: 3;
}

.dashboard-pivot-runtime-filters label {
    display: grid;
    gap: 3px;
    min-width: 140px;
    color: #0b2b3b;
    font-size: .74rem;
    font-weight: 700;
}

.dashboard-pivot-runtime-filters select {
    min-height: 28px;
    border: 1px solid #b8d0da;
    border-radius: 5px;
    background: #fff;
    color: #0b2b3b;
    font: inherit;
}

.dashboard-pivot-wrap table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: .76rem;
}

.dashboard-pivot-wrap th,
.dashboard-pivot-wrap td {
    border: 1px solid #bfd5de;
    padding: .35rem .45rem;
    text-align: right;
    white-space: nowrap;
}

.dashboard-pivot-wrap th:first-child,
.dashboard-pivot-wrap td:first-child {
    text-align: left;
}

.dashboard-pivot-wrap thead th,
.dashboard-pivot-wrap tfoot td {
    background: #e8f3f5;
    color: #0b2b3b;
    font-weight: 800;
}

.dashboard-pivot-toggle {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    border: 1px solid #8fb9c4;
    border-radius: 4px;
    background: #fff;
    color: #0f6670;
    font-weight: 800;
    cursor: pointer;
}

.dashboard-card-tile {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    align-content: center;
    height: 100%;
    padding: 14px;
    border-left: 5px solid var(--accent);
    background: linear-gradient(135deg, #ffffff, #eef8f9);
}

.dashboard-card-tile strong {
    font-size: 1.7rem;
    color: #0b2b3b;
}

.dashboard-card-tile small,
.dashboard-card-tile em {
    grid-column: 2;
    color: #536b76;
}

.dashboard-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-weight: 900;
}

.dashboard-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    height: 100%;
    align-content: start;
    overflow: auto;
}

.dashboard-tile {
    min-height: 72px;
    border: 1px solid #c8dce4;
    border-top: 4px solid var(--accent);
    border-radius: 8px;
    background: #fff;
    color: #0b2b3b;
    text-align: left;
    padding: 10px;
}

.dashboard-tile strong {
    display: block;
    font-size: 1.25rem;
}

.dashboard-tile span {
    color: #536b76;
}

.dashboard-bars {
    position: relative;
    display: flex;
    align-items: end;
    gap: .55rem;
    height: 100%;
    min-height: 120px;
    padding: 1.55rem 1.15rem 3rem 2.15rem;
    border-left: 1px solid #d7e4e9;
    border-bottom: 1px solid #d7e4e9;
    overflow: hidden;
}

.dashboard-bars.legend-right {
    padding-right: 6.25rem;
}

.dashboard-bars.legend-left {
    padding-left: 6.25rem;
}

.dashboard-bars.legend-top {
    padding-top: 2.75rem;
}

.dashboard-bars.legend-bottom {
    padding-bottom: 4.25rem;
}

.dashboard-bars.show-grid,
.dashboard-line-frame.show-grid {
    background-image: linear-gradient(#e3eef2 1px, transparent 1px), linear-gradient(90deg, #edf4f6 1px, transparent 1px);
    background-size: 100% 25%, 25% 100%;
}

.dashboard-bars:not(.show-axes) {
    border-left-color: transparent;
    border-bottom-color: transparent;
}

.dashboard-bar-group {
    position: relative;
    display: flex;
    align-items: end;
    gap: 3px;
    flex: 1;
    height: 100%;
    min-width: 0;
}

.dashboard-bar-group button {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    min-height: 8px;
    min-width: 12px;
    border: 0;
    border-radius: 3px 3px 0 0;
    opacity: .9;
    cursor: pointer;
    overflow: visible;
}

.dashboard-bar-group button strong {
    position: absolute;
    left: 50%;
    top: -1.45rem;
    display: block;
    max-width: 100%;
    color: #12313a;
    font-size: .65rem;
    white-space: nowrap;
    transform: translateX(-50%) rotate(-20deg);
    pointer-events: none;
}

.dashboard-bars.data-label-inside .dashboard-bar-group button strong {
    top: .22rem;
    max-width: calc(100% - .3rem);
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    transform: translateX(-50%);
}

.dashboard-bar-group button:hover {
    opacity: 1;
    filter: brightness(.94);
}

.dashboard-bar-group span {
    position: absolute;
    left: 50%;
    bottom: -1.35rem;
    max-width: 80px;
    transform: translateX(-50%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .68rem;
}

.dashboard-series-legend {
    position: absolute;
    right: .4rem;
    top: .35rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
    max-width: 65%;
    padding: .25rem .35rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, .82);
    color: var(--legend-color, #284250);
    font-size: .68rem;
    line-height: 1.2;
    z-index: 6;
    pointer-events: none;
}

.dashboard-series-legend.position-left {
    left: .4rem;
    right: auto;
}

.dashboard-series-legend.position-bottom {
    top: auto;
    bottom: .35rem;
}

.dashboard-series-legend.position-top {
    top: .35rem;
    bottom: auto;
}

.dashboard-series-legend span::before {
    content: "";
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .25rem;
    border-radius: 2px;
    background: var(--series-color);
}

.dashboard-line {
    width: 100%;
    height: 100%;
}

.dashboard-line-frame,
.dashboard-pie-frame {
    position: relative;
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 0;
    padding: .85rem .75rem 2.75rem 2.15rem;
    overflow: hidden;
}

.dashboard-line-frame.legend-top,
.dashboard-pie-frame.legend-top {
    padding-top: 2.85rem;
}

.dashboard-line-frame.legend-bottom,
.dashboard-pie-frame.legend-bottom {
    padding-bottom: 4rem;
}

.dashboard-line-frame.legend-left,
.dashboard-pie-frame.legend-left {
    padding-left: 6.5rem;
}

.dashboard-line-frame.legend-right,
.dashboard-pie-frame.legend-right {
    padding-right: 6.5rem;
}

.dashboard-line-frame:not(.show-axes) .dashboard-line {
    opacity: .92;
}

.dashboard-axis-label {
    position: absolute;
    z-index: 3;
    color: #31505b;
    font-size: .68rem;
    font-weight: 800;
    pointer-events: none;
    line-height: 1;
}

.dashboard-axis-label.x-axis {
    left: 50%;
    bottom: .55rem;
    transform: translateX(-50%);
    max-width: calc(100% - 4rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-axis-label.y-axis {
    left: .45rem;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    max-width: calc(100% - 3rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-pie {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .25rem;
    width: 100%;
    border-radius: 50%;
    aspect-ratio: 1;
    margin: auto;
    color: #12313a;
    overflow: visible;
}

.dashboard-pie-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: visible;
    z-index: 1;
}

.dashboard-pie-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    padding: .35rem;
}

.dashboard-pie-card {
    display: grid;
    place-items: center;
    gap: .35rem;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    height: 100%;
    min-height: 0;
    flex: 1 1 0;
    container-type: size;
}

.dashboard-pie-card .dashboard-pie {
    width: clamp(3rem, min(100cqw, calc(100cqh - 1.4rem)), 100%);
    max-width: 100%;
    height: auto;
}

.dashboard-pie-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #536b76;
    font-size: .68rem;
    font-weight: 700;
}

.dashboard-pie strong,
.dashboard-pie span {
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    padding: .18rem .5rem;
}

.dashboard-pie strong {
    position: relative;
    z-index: 3;
}

.dashboard-pie .dashboard-pie-slice-label {
    position: absolute;
    left: var(--label-x);
    top: var(--label-y);
    z-index: 4;
    min-width: 2.1rem;
    text-align: center;
    font-size: .68rem;
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(35, 48, 58, .18);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.dashboard-pie-slice-label-svg {
    pointer-events: none;
}

.dashboard-pie-slice-label-svg rect {
    fill: rgba(255, 255, 255, .9);
    filter: drop-shadow(0 1px 1px rgba(35, 48, 58, .22));
}

.dashboard-pie-slice-label-svg text {
    fill: #12313a;
    font-size: .42rem;
    font-weight: 800;
    text-anchor: middle;
}

.dashboard-gauge {
    display: grid;
    place-items: center;
    height: 100%;
}

.dashboard-gauge-dial {
    width: min(180px, 80%);
    aspect-ratio: 2;
    border-radius: 160px 160px 0 0;
    background: conic-gradient(from 270deg, var(--accent) 0 var(--angle), #dfeaed var(--angle) 180deg, transparent 180deg);
}

.dashboard-gauge strong {
    margin-top: -1.2rem;
    font-size: 1.5rem;
}

.dashboard-filter-values {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: .4rem;
    height: 100%;
    overflow: auto;
}

.dashboard-filter-values button {
    border: 1px solid #c4d9e0;
    border-radius: 999px;
    background: #ffffff;
    padding: .35rem .6rem;
    cursor: pointer;
}

.dashboard-filter-values button.active {
    border-color: #0f7b85;
    background: #e5f7fa;
    color: #0f6070;
    font-weight: 800;
}

.dashboard-import-modal {
    width: min(780px, 92vw);
}

.dashboard-sql-editor-modal {
    width: min(1280px, 94vw);
    max-height: 88vh;
}

.modal-backdrop-nested {
    z-index: 1300;
}

.dashboard-source-parameters-modal {
    width: min(980px, 92vw);
}

.source-formula-value {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: .35rem;
    align-items: stretch;
}

.source-formula-value textarea {
    min-height: 34px;
    max-height: 120px;
    resize: vertical;
}

.dashboard-formula-editor-modal {
    width: min(1280px, 96vw);
    height: min(820px, 92vh);
    display: grid;
    grid-template-rows: auto auto auto minmax(140px, 30vh) minmax(360px, 1fr) auto;
    resize: both;
    overflow: auto;
}

.formula-editor-toolbar {
    display: flex;
    align-items: end;
    gap: .45rem;
    flex-wrap: wrap;
    padding-bottom: .45rem;
}

.formula-editor-toolbar label {
    display: grid;
    gap: .14rem;
    font-size: .74rem;
    font-weight: 700;
    color: #41535c;
}

.formula-editor-toolbar select {
    min-width: 170px;
    height: 32px;
    border: 1px solid #c9d8df;
    border-radius: 5px;
    background: #fff;
}

.formula-editor-layout {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1.15fr;
    gap: .45rem;
    height: min(260px, 30vh);
    min-height: 0;
    overflow: hidden;
}

.formula-browser {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    border: 1px solid #cfdde3;
    background: #f7fbfc;
}

.formula-browser h3 {
    margin: 0;
    padding: .38rem .5rem;
    border-bottom: 1px solid #dbe6ea;
    font-size: .82rem;
}

.formula-browser-list {
    overflow: auto;
    padding: .35rem;
}

.formula-browser details {
    margin-bottom: .25rem;
}

.formula-browser summary {
    cursor: pointer;
    font-weight: 700;
    color: #17343d;
}

.formula-browser button {
    display: block;
    width: 100%;
    margin: .14rem 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #17343d;
    text-align: left;
    padding: .22rem .35rem;
}

.formula-browser button:hover {
    border-color: #bcd5dc;
    background: #e8f7f9;
}

.formula-editor-code-label {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    margin-top: .35rem;
    color: #1d53c8;
    font-family: Consolas, "Courier New", monospace;
    font-weight: 700;
}

.formula-editor-code {
    width: 100%;
    height: 100%;
    min-height: 360px;
    border: 1px solid #d5e0e4;
    border-radius: 5px;
    padding: .55rem;
    resize: none;
    font-family: Consolas, "Courier New", monospace;
    font-size: .9rem;
    font-weight: 400;
}

@media (max-width: 900px) {
    .dashboard-formula-editor-modal {
        width: calc(100vw - 8px);
        height: calc(100dvh - 56px);
        grid-template-rows: auto auto auto auto minmax(240px, 1fr) auto;
    }

    .formula-editor-layout {
        grid-template-columns: 1fr;
        height: auto;
        max-height: 38dvh;
        overflow: auto;
    }

    .formula-browser {
        min-height: 120px;
    }

    .formula-editor-code {
        min-height: 240px;
    }
}

.dashboard-query-preview-modal {
    width: min(1180px, 92vw);
    height: min(680px, 86vh);
}

.dashboard-sql-editor-toolbar {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin-bottom: .3rem;
}

.dashboard-sql-editor-toolbar label {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 260px;
    font-size: .72rem;
    font-weight: 700;
}

.dashboard-sql-editor-toolbar input {
    border: 1px solid #c9d8df;
    border-radius: 5px;
    padding: .28rem .45rem;
}

.dashboard-sql-editor {
    height: min(64vh, 660px);
    min-height: 420px;
    border: 1px solid #c9d8df;
    border-radius: 6px;
    overflow: hidden;
}

.dashboard-query-preview {
    display: grid;
    gap: .45rem;
    margin-top: .55rem;
}

.dashboard-query-preview .sql-result-grid {
    max-height: 220px;
    overflow: auto;
}

.dashboard-query-preview-grid {
    height: calc(100% - 2.4rem);
    min-height: 260px;
    overflow: auto;
}

.dashboard-import-modal textarea {
    width: 100%;
    margin-top: .75rem;
    font-family: Consolas, monospace;
    font-size: .82rem;
}

.dashboard-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.dashboard-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #cfdde3;
    border-radius: 7px;
    background: #ffffff;
    padding: .9rem 1rem;
    box-shadow: 0 6px 18px rgba(35, 54, 64, .06);
}

.dashboard-list-item h2 {
    margin: 0;
    font-size: 1rem;
    color: #12313a;
}

.dashboard-list-item p {
    margin: .2rem 0;
    color: #526b75;
}

.dashboard-list-item span {
    color: #6a818b;
    font-size: .78rem;
}

.dashboard-security-panel {
    margin-top: .75rem;
    border-top: 1px solid #d8e5ea;
    padding-top: .75rem;
}

.runtime-library-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-bottom: 1rem;
}

.runtime-library-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.15fr) minmax(260px, 2fr) auto;
    align-items: center;
    gap: .85rem;
    border: 1px solid #cfdde3;
    border-radius: 7px;
    padding: .75rem .85rem;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(35, 54, 64, .06);
}

.runtime-library-row.selected {
    border-color: var(--app-primary, #0f6f7c);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary, #0f6f7c) 16%, transparent);
}

.runtime-library-main {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.runtime-library-main strong {
    overflow: hidden;
    color: #12313a;
    font-size: .98rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.runtime-library-main span,
.runtime-library-meta {
    color: #60717d;
    font-size: .8rem;
}

.runtime-library-main span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.runtime-library-meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    min-width: 0;
}

.runtime-library-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border: 1px solid #d6e4e8;
    border-radius: 999px;
    padding: .15rem .5rem;
    color: #244b59;
    background: #f5fafb;
    font-weight: 700;
}

.runtime-library-pill.enabled,
.runtime-library-pill.compiled {
    border-color: #bfe7cd;
    color: #116136;
    background: #ecfbf1;
}

.runtime-library-pill.disabled,
.runtime-library-pill.pending {
    border-color: #f1d6a8;
    color: #7a4d00;
    background: #fff8e7;
}

.runtime-library-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.runtime-library-editor-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1180px, calc(100vw - 2rem));
    height: min(820px, calc(100vh - 72px));
    overflow: hidden;
}

.runtime-library-editor-modal > header {
    align-items: flex-start;
}

.runtime-library-editor-window {
    position: fixed;
    z-index: 99970;
    top: 3rem;
    left: 50%;
    min-width: min(520px, calc(100vw - 1rem));
    min-height: 420px;
    max-width: calc(100vw - 8px);
    max-height: calc(100vh - 8px);
    resize: both;
    transform: translateX(-50%);
}

.runtime-library-editor-window > header {
    cursor: move;
    user-select: none;
}

.runtime-library-editor-body {
    display: grid;
    grid-template-rows: auto minmax(260px, 1fr) auto;
    gap: .75rem;
    min-height: 0;
    overflow: auto;
    padding: .85rem;
    scrollbar-width: none;
}

.runtime-library-editor-body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.runtime-library-standalone-editor {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: .75rem;
    height: calc(100dvh - var(--topbar-offset, 0px) - 120px);
    min-height: 560px;
    overflow: hidden;
}

.runtime-library-source-editor,
.runtime-library-source-editor .advanced-code-inline-host,
.runtime-library-source-editor .advanced-code-field,
.runtime-library-source-editor .advanced-code-inline,
.runtime-library-source-editor .advanced-code-workspace,
.runtime-library-source-editor .advanced-code-editor-pane,
.runtime-library-source-editor .runtime-code-editor {
    min-height: 0;
}

.runtime-library-source-editor {
    display: flex;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
}

.runtime-library-source-editor .advanced-code-inline-host,
.runtime-library-source-editor .advanced-code-field,
.runtime-library-source-editor .advanced-code-inline {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
}

.runtime-library-source-editor .advanced-code-workspace {
    flex: 1 1 0;
    min-height: 0;
    height: auto !important;
    overflow: hidden;
}

.runtime-library-source-editor .advanced-code-editor-pane,
.runtime-library-source-editor .runtime-code-editor,
.runtime-library-source-editor .runtime-code-fallback {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
}

@media (max-width: 900px) {
    .runtime-library-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .runtime-library-actions {
        justify-content: flex-start;
    }

    .runtime-library-editor-modal {
        width: calc(100vw - 1rem);
        height: calc(100vh - 64px);
    }

    .runtime-library-editor-body {
        grid-template-rows: auto minmax(220px, 1fr) auto;
    }
}

.dashboard-column-editor-modal {
    width: min(1120px, calc(100vw - 48px));
    min-width: min(680px, calc(100vw - 48px));
    min-height: min(360px, calc(100vh - 48px));
    height: min(820px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    resize: both;
    background: #ffffff;
}

.dashboard-column-editor-modal > .muted.small {
    margin: 0;
    padding: .65rem .9rem 0;
}

.dashboard-grid-column-list.popup {
    display: flex;
    flex-direction: column;
    gap: .32rem;
    min-height: 0;
    margin: .45rem 0 0;
    padding: 0 .9rem .75rem;
    overflow: auto;
}

.dashboard-column-editor-modal > .button-row {
    margin: 0;
    padding: .65rem .9rem .75rem;
    justify-content: flex-end;
    border-top: 1px solid #d8e2e7;
    background: #ffffff;
}

.dashboard-grid-column-list.popup .dashboard-grid-column-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 122px;
    align-items: center;
    gap: .45rem;
    border: 1px solid #cfdde3;
    border-radius: 6px;
    padding: .42rem .5rem;
    background: #fafdfe;
}

.dashboard-grid-column-list.popup .dashboard-grid-column-row.dragging {
    opacity: .62;
    outline: 2px solid #0f7b85;
}

.dashboard-grid-column-fields {
    min-width: 0;
}

.dashboard-grid-column-main,
.dashboard-grid-column-options {
    display: grid;
    grid-template-columns: 32px minmax(150px, 1.1fr) minmax(160px, 1.1fr) 86px 118px;
    gap: .38rem;
    align-items: end;
}

.dashboard-grid-column-options {
    grid-template-columns: minmax(150px, .85fr) minmax(220px, 1.25fr) 92px minmax(106px, auto) minmax(132px, auto) 82px;
    margin-top: .32rem;
    padding-top: .32rem;
    border-top: 1px dashed #d4e3e8;
}

.dashboard-grid-column-main label,
.dashboard-grid-column-options label {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    font-size: .76rem;
    font-weight: 700;
    color: #254550;
}

.dashboard-grid-column-main label.small,
.dashboard-grid-column-options label.small {
    min-width: 0;
}

.dashboard-grid-column-main input,
.dashboard-grid-column-main select,
.dashboard-grid-column-options input,
.dashboard-grid-column-options select {
    width: 100%;
    min-height: 30px;
    border: 1px solid #c9d8df;
    border-radius: 5px;
    padding: .32rem .4rem;
    background: #fff;
}

.dashboard-grid-column-main > .icon-button.mini {
    width: 32px;
    height: 32px;
    align-self: end;
}

.dashboard-grid-column-main > .icon-button.mini svg,
.dashboard-pivot-field-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-grid-column-options .check-row {
    flex-direction: row;
    align-items: center;
    gap: .35rem;
    min-height: 30px;
}

.dashboard-grid-column-options .check-row input {
    width: auto;
    min-height: 0;
}

.dashboard-grid-column-options .check-row {
    flex-direction: row;
    align-items: center;
    align-self: end;
    min-height: 30px;
    gap: .35rem;
}

.dashboard-grid-column-options .check-row input {
    width: auto;
    min-height: auto;
}

.dashboard-grid-column-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .24rem;
    align-self: center;
}

.dashboard-grid-column-actions .danger-action {
    grid-column: 1 / -1;
}

.dashboard-grid-column-dropzone {
    display: grid;
    place-items: center;
    min-height: 7px;
    border: 0;
    border-radius: 999px;
    color: transparent;
    font-size: 0;
    transition: background .12s ease, min-height .12s ease;
}

.dashboard-grid-column-dropzone:hover,
.dashboard-grid-column-dropzone.active {
    min-height: 11px;
    background: repeating-linear-gradient(
        90deg,
        rgba(8, 120, 135, .48),
        rgba(8, 120, 135, .48) 10px,
        transparent 10px,
        transparent 16px
    );
}

.dashboard-grid-column-list.popup .drag-handle {
    cursor: grab;
    align-self: center;
    color: #607d88;
    font-weight: 700;
}

@media (max-width: 980px) {
    .dashboard-grid-column-list.popup .dashboard-grid-column-row {
        grid-template-columns: 24px 1fr;
    }

    .dashboard-grid-column-actions {
        grid-column: 2;
        display: flex;
        justify-content: flex-end;
    }

    .dashboard-grid-column-main,
    .dashboard-grid-column-options {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1180px) {
    .dashboard-grid-column-list.popup .dashboard-grid-column-row {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .dashboard-grid-column-actions {
        grid-column: 2;
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

.dashboard-security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.dashboard-security-grid fieldset {
    border: 1px solid #cfdde3;
    border-radius: 8px;
    padding: .6rem;
    max-height: 180px;
    overflow: auto;
}

.dashboard-user-assignment-panel {
    margin-top: .75rem;
    border: 1px solid #cfdde3;
    border-radius: 8px;
    padding: .65rem;
    background: #f8fbfc;
}

.dashboard-user-assignment-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .55rem;
}

.dashboard-user-assignment-toolbar strong {
    color: #12313a;
    font-size: .92rem;
}

.dashboard-user-assignment-toolbar span {
    color: #5d737d;
    font-size: .78rem;
}

.dashboard-user-assignment-table-wrap {
    max-height: 260px;
    overflow: auto;
    border: 1px solid #d7e3e8;
    border-radius: 6px;
    background: #ffffff;
}

.dashboard-user-assignment-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: .8rem;
}

.dashboard-user-assignment-table th,
.dashboard-user-assignment-table td {
    border-bottom: 1px solid #e4edf0;
    padding: .35rem .45rem;
    text-align: left;
    vertical-align: middle;
}

.dashboard-user-assignment-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #29434e;
    background: #eef5f7;
}

.dashboard-user-assignment-table th:first-child,
.dashboard-user-assignment-table td:first-child {
    width: 46px;
    text-align: center;
}

.dashboard-user-assignment-table tr.already-assigned td {
    color: #587079;
    background: #fbfdfd;
}

.dashboard-user-assignment-table input[type="checkbox"] {
    width: 15px;
    height: 15px;
}

.dashboard-preference-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .4rem 1rem;
}

.home-dashboard-slideshow {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-height: calc(100vh - 112px);
}

.home-dashboard-slideshow:fullscreen {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    padding: .75rem;
    background: #eaf2f5;
}

.home-dashboard-slideshow:fullscreen .home-dashboard-frame {
    flex: 1 1 auto;
    min-height: 0;
    height: calc(100vh - 58px);
}

.home-dashboard-slideshow:fullscreen .home-dashboard-dots {
    flex: 0 0 auto;
}

.home-operational-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .35rem;
    padding-block: .2rem;
}

.home-operational-heading h1 {
    display: inline;
    font-size: 1.3rem;
    margin: 0;
}

.home-operational-heading .eyebrow {
    margin-bottom: .08rem;
}

.home-active-dashboard {
    display: inline-flex;
    align-items: center;
    margin-left: .75rem;
    color: #35535e;
    font-size: .88rem;
    font-weight: 700;
}

.home-heading-actions {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.home-dashboard-slideshow > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 34px;
}

.home-dashboard-slideshow > header h2 {
    margin: 0;
    font-size: 1rem;
}

.home-dashboard-slideshow > header .eyebrow {
    margin-bottom: .1rem;
}

.home-dashboard-frame {
    width: 100%;
    min-height: calc(100vh - 136px);
    border: 1px solid #cfdde3;
    border-radius: 8px;
    background: #fff;
}

.home-dashboard-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .45rem;
}

.home-dashboard-dots.is-toolbar {
    justify-content: flex-start;
    gap: .35rem;
}

.home-dashboard-fullscreen-controls {
    display: none;
}

.home-dashboard-slideshow:fullscreen .home-dashboard-fullscreen-controls {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 20;
    display: flex;
    padding: .3rem .45rem;
    border: 1px solid #cfdde3;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 6px 18px rgba(17, 43, 55, .14);
}

.home-dashboard-slideshow:fullscreen .home-dashboard-fullscreen-controls .home-dashboard-dots {
    display: flex;
}

.home-dashboard-dots button {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid #0f6f7c;
    background: transparent;
    padding: 0;
}

.home-dashboard-dots .home-slideshow-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: .35rem;
    border-radius: 6px;
    background: #ffffff;
}

.home-slideshow-toggle svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #0f6f7c;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-dashboard-dots button.active {
    background: #0f6f7c;
}

.dashboard-viewer.is-embedded {
    padding: .35rem;
    position: relative;
}

.dashboard-viewer.is-embedded .dashboard-canvas,
.dashboard-viewer.is-fullscreen-view .dashboard-canvas {
    min-height: calc(100vh - 18px);
}

.dashboard-viewer.is-fullscreen-view {
    min-height: 100vh;
    padding: .35rem;
    position: relative;
}

.dashboard-viewer.is-fullscreen-view .dashboard-viewer-toolbar {
    position: absolute;
}

.dashboard-viewer.is-embedded .dashboard-viewer-toolbar {
    position: static;
    justify-content: flex-end;
    margin-bottom: .25rem;
}

.dashboard-viewer-toolbar {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem;
    border: 1px solid #cfdde3;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 14px rgba(17, 43, 55, .08);
}

.dashboard-viewer:not(.is-embedded) .dashboard-viewer-toolbar {
    position: static;
    display: flex;
    justify-content: flex-end;
    margin-bottom: .5rem;
}

.dashboard-viewer-toolbar .icon-button {
    width: 28px;
    height: 28px;
}

.dashboard-viewer:fullscreen,
.dashboard-item:fullscreen {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    padding: 1rem;
    border: 0;
    border-radius: 0;
    background: #eaf2f5;
    overflow: auto;
}

.dashboard-viewer:fullscreen {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.dashboard-viewer:fullscreen .dashboard-canvas {
    min-height: calc(100vh - 96px);
}

.dashboard-item:fullscreen {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-width: none;
}

.dashboard-item:fullscreen .dashboard-item-body {
    min-height: 0;
    overflow: auto;
}

.dashboard-item:fullscreen .dashboard-resize-handle {
    display: none;
}

.dashboard-viewer-export-mini {
    display: none;
}

.dashboard-export-menu-host {
    position: relative;
}

.dashboard-export-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: .3rem;
    min-width: 260px;
    padding: .55rem;
    border: 1px solid #cfdde3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(24, 45, 55, .16);
}

.dashboard-export-menu strong {
    grid-column: 1 / -1;
    color: #254550;
    font-size: .72rem;
    text-transform: uppercase;
}

.dashboard-export-menu button {
    min-height: 28px;
    border: 1px solid #cfdde3;
    border-radius: 5px;
    background: #f8fbfc;
    color: #0f5360;
    font-size: .72rem;
    font-weight: 800;
    padding: .18rem .4rem;
}

.dashboard-export-menu button:disabled {
    opacity: .42;
}

@media (max-width: 760px) {
    .dashboard-security-grid {
        grid-template-columns: 1fr;
    }

    .home-dashboard-frame {
        min-height: calc(100vh - 150px);
    }

    .home-operational-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-active-dashboard {
        display: block;
        margin-left: 0;
        margin-top: .1rem;
    }
}

.empty-state-panel {
    border: 1px dashed #b9cfd7;
    border-radius: 8px;
    background: #f7fbfc;
    padding: 1.25rem;
}

@media (max-width: 1180px) {
    .dashboard-designer-shell {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100dvh - 140px);
        overflow: visible;
    }

    .dashboard-designer-panel {
        max-height: 240px;
    }

    .dashboard-workspace {
        min-height: min(620px, calc(100dvh - 160px));
    }
}

@media (max-width: 560px) {
    .dashboard-designer-shell {
        gap: .45rem;
    }

    .dashboard-title-band {
        flex-direction: column;
    }

    .dashboard-canvas {
        gap: .4rem;
        padding: .5rem;
    }

    .dashboard-item-caption {
        min-height: 2rem;
        padding: .35rem .4rem;
    }

    .dashboard-item-caption span,
    .dashboard-item-actions {
        display: none;
    }
}

.windows-form-canvas {
    position: relative;
    min-height: 620px;
    overflow: auto;
    background-color: #f8fafb;
    background-image: radial-gradient(#cfdadd 1px, transparent 1px);
    background-size: 12px 12px;
}

.form-control-widget {
    position: absolute;
    container-type: inline-size;
    overflow: hidden;
    border: 1px solid #8fa1a8;
    border-radius: 3px;
    padding: .35rem;
    box-shadow: 0 1px 2px rgba(35, 48, 58, .10);
    cursor: move;
    touch-action: none;
    user-select: none;
}

.form-control-widget.is-required::after,
.runtime-required-marker {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: 0;
    height: 0;
    border-top: 11px solid rgba(196, 123, 25, .92);
    border-left: 11px solid transparent;
    pointer-events: none;
}

.runtime-required-marker {
    pointer-events: auto;
    cursor: help;
}

.form-control-widget.selected {
    outline: 2px solid #0f6f7c;
    outline-offset: 2px;
}

.form-control-widget.multi-selected {
    box-shadow: 0 0 0 2px rgba(15, 111, 124, .22);
}

.form-control-widget.dirty {
    border-color: #c58a00;
}

.selection-marquee {
    position: absolute;
    z-index: 9999;
    border: 1px dashed #0f6f7c;
    background: rgba(15, 111, 124, .12);
    pointer-events: none;
}

.canvas-safe-spacer {
    position: absolute;
    left: 0;
    width: 1px;
    height: 96px;
    pointer-events: none;
}

.object-kind-badge {
    position: absolute;
    display: none;
    left: 2px;
    bottom: 2px;
    z-index: 8;
    max-width: calc(50% - 4px);
    overflow: hidden;
    border-radius: 3px;
    padding: .08rem .25rem;
    color: #ffffff;
    background: rgba(52, 73, 94, .9);
    font-size: .66rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.control-name-badge {
    position: absolute;
    display: none;
    right: 2px;
    bottom: 2px;
    z-index: 8;
    max-width: calc(50% - 4px);
    overflow: hidden;
    border-radius: 3px;
    padding: .08rem .25rem;
    color: #141414;
    background: #ffd84d;
    box-shadow: 0 0 0 1px rgba(65, 49, 0, .28);
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.form-control-widget.selected .object-kind-badge,
.form-control-widget.multi-selected .object-kind-badge,
.form-control-widget.selected .control-name-badge,
.form-control-widget.multi-selected .control-name-badge {
    display: inline-block;
}

@container (max-width: 130px) {
    .object-kind-badge {
        display: none !important;
    }

    .control-name-badge {
        right: 2px;
        max-width: calc(100% - 4px);
    }
}

.missing-binding-badge {
    position: absolute;
    right: 3px;
    top: 3px;
    z-index: 7;
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    color: #c62828;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 0 0 1px rgba(198, 40, 40, .28), 0 1px 2px rgba(35, 48, 58, .18);
    pointer-events: none;
}

.missing-binding-badge svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.6;
}

.form-control-widget.selected .missing-binding-badge {
    right: 16px;
    top: 16px;
}

.select-check {
    position: absolute;
    right: 2px;
    top: 2px;
    display: inline-grid !important;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid #8fa1a8;
    border-radius: 4px;
    padding: 0;
    color: #0f6f7c;
    background: rgba(255,255,255,.92);
    font-size: .78rem;
    font-weight: 700;
}

.toolbar-separator {
    width: 1px;
    height: 26px;
    background: #d9e1e4;
}

.resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    border-left: 1px solid #0f6f7c;
    border-top: 1px solid #0f6f7c;
    background: linear-gradient(135deg, transparent 45%, #0f6f7c 46%, #0f6f7c 58%, transparent 59%);
    cursor: nwse-resize;
}

.form-control-widget label {
    display: grid;
    gap: .25rem;
    font-size: .78rem;
}

.form-control-widget input, .form-control-widget select, .form-control-widget textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #b7c5ca;
    border-radius: 3px;
    padding: .25rem;
    background: var(--control-bg, #ffffff);
    font-size: .78rem;
}

.form-control-widget .designer-checkbox-control {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .45rem;
    width: 100%;
    height: 100%;
    min-width: 0;
}

.form-control-widget .designer-checkbox-control span {
    order: 2;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-control-widget .designer-checkbox-control input[type="checkbox"] {
    order: 1;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
}

.form-control-widget textarea {
    height: 58px;
    resize: none;
}

.form-control-widget button {
    width: 100%;
    height: 100%;
    border: 1px solid #8fa1a8;
    border-radius: 4px;
    background: var(--control-bg, #eef3f4);
}

.tab-preview {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    border: 1px solid #b7c5ca;
    background: var(--control-bg, #ffffff);
}

.tab-preview-strip {
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-bottom: 1px solid #b7c5ca;
    background: #eef3f4;
}

.tab-preview .tab-preview-strip button {
    width: auto;
    height: auto;
    min-width: 54px;
    max-width: 120px;
    overflow: hidden;
    border: 0;
    border-right: 1px solid #b7c5ca;
    border-radius: 0;
    padding: .38rem .6rem;
    color: #31444e;
    background: #eef3f4;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tab-preview .tab-preview-strip button.active {
    position: relative;
    top: 1px;
    border-top: 2px solid #0f6f7c;
    background: #ffffff;
    font-weight: 700;
}

.tab-preview-page {
    display: grid;
    place-items: center;
    min-height: 0;
    background: var(--tab-page-bg, var(--control-bg, #ffffff));
    color: #7a8a92;
    font-size: .78rem;
}

.panel-preview {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    border: 1px solid #9fb4bc;
    border-radius: 5px;
    background: var(--control-bg, #ffffff);
    overflow: hidden;
}

.panel-preview-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 30px;
    padding: .35rem .55rem;
    color: #ffffff;
    background: #0f6f7c;
    font-size: .78rem;
}

.panel-preview-body {
    display: grid;
    place-items: center;
    min-height: 0;
    color: #70848d;
    font-size: .78rem;
}

.panel-preview > button {
    height: auto;
    margin: .45rem;
    padding: .35rem .55rem;
}

.grid-preview {
    height: 100%;
    border: 1px solid #b7c5ca;
    background: repeating-linear-gradient(#ffffff, #ffffff 28px, #eef3f4 29px);
    font-size: .78rem;
}

.grid-preview strong {
    display: block;
    padding: .35rem;
    color: #ffffff;
    background: #34495e;
}

.grid-preview div {
    padding: .45rem;
    color: #60717d;
}

.properties-panel {
    display: grid;
    gap: .55rem;
    max-height: calc(100vh - 126px);
    overflow: auto;
}

.properties-panel label {
    display: grid;
    gap: .25rem;
    color: #41535c;
    font-size: .82rem;
}

.properties-panel input, .properties-panel select, .properties-panel textarea {
    width: 100%;
}

.properties-panel textarea {
    min-height: 70px;
}

.report-image-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: 1px dashed #9fb9c1;
    color: #60717d;
    background: repeating-linear-gradient(45deg, #f6fbfc 0, #f6fbfc 8px, #eef6f8 8px, #eef6f8 16px);
    font-size: .82rem;
}

.report-image-content {
    max-width: 100%;
    max-height: 100%;
}

.report-import-action {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    cursor: pointer;
}

.report-import-action input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.prop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .45rem;
}

.check-row {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .4rem !important;
}

.check-row input {
    width: auto;
}

.icon-text-scope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .45rem .8rem;
    margin: .35rem 0 .6rem;
}

.icon-text-switch {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 28px;
    font-weight: 700;
    color: var(--app-content-text, var(--app-text, #1d2430));
    cursor: pointer;
}

.icon-text-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.icon-text-switch .switch-track {
    position: relative;
    width: 42px;
    height: 22px;
    flex: 0 0 auto;
    border: 1px solid #b9ccd3;
    border-radius: 999px;
    background: #dfe9ec;
    transition: background .16s ease, border-color .16s ease;
}

.icon-text-switch .switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 42, 52, .28);
    transition: transform .16s ease;
}

.icon-text-switch input:checked + .switch-track {
    border-color: var(--app-primary, #0f6f7c);
    background: var(--app-primary, #0f6f7c);
}

.icon-text-switch input:checked + .switch-track::after {
    transform: translateX(20px);
}

.icon-text-switch input:focus-visible + .switch-track {
    outline: 2px solid color-mix(in srgb, var(--app-primary, #0f6f7c) 35%, transparent);
    outline-offset: 2px;
}

.nudge-pad {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .4rem;
}

.nudge-pad button {
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .45rem;
    background: #fbfcfc;
}

.binding-summary {
    display: grid;
    gap: .25rem;
    border: 1px solid #d9e1e4;
    border-radius: 6px;
    padding: .55rem;
    background: #fbfcfc;
    color: #41535c;
    font-size: .8rem;
}

.binding-summary span {
    overflow-wrap: anywhere;
    color: #60717d;
}

.form-input {
    width: 100%;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .45rem .55rem;
    background: #ffffff;
}

.office-web-rename-input {
    max-width: 34rem;
}

.primary-action {
    border: 1px solid var(--app-button-border, var(--app-primary, #0f6f7c));
    border-radius: 6px;
    padding: .55rem .75rem;
    color: var(--app-button-text, #ffffff);
    background: var(--app-button-bg, var(--app-primary, #0f6f7c));
}

.secondary-action {
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .55rem .75rem;
    color: var(--app-text, #263740);
    background: var(--app-surface, #ffffff);
}

.settings-related-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #cfe0e4;
    border-radius: 6px;
    background: #f6fafb;
}

.settings-related-action small {
    display: block;
    margin-top: 2px;
    color: #5c6b73;
}

.danger-action {
    color: #8a1f17;
    border-color: #e1b8b4;
    background: #fff7f6;
}

.icon-button,
.topbar-icon-button,
.document-icon-action,
.secondary-action.icon-only-action,
.icon-action {
    border-color: #c9d5d8;
    color: var(--app-icon-color, #0f5260);
    background: var(--app-icon-button-bg, #ffffff);
}

.primary-action.icon-only-action,
.primary-button.icon-only-action,
.icon-button.primary,
.icon-button.primary-icon,
.document-icon-action.primary {
    border-color: var(--app-button-border, var(--app-primary, #0f6f7c));
    color: var(--app-button-text, #ffffff);
    background: var(--app-button-bg, var(--app-primary, #0f6f7c));
}

.danger-action.icon-only-action,
.icon-button.danger,
.icon-button.danger-icon {
    border-color: #efb4b4;
    color: #a32323;
    background: #fff7f7;
}

.inline-actions {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
}

.sql-query-editor-section {
    display: grid;
    gap: .7rem;
    min-width: 0;
}

.sql-save-row {
    display: flex;
    align-items: end;
    gap: .6rem;
    flex-wrap: wrap;
}

.sql-save-row label {
    flex: 1 1 280px;
}

.saved-query-list {
    display: grid;
    gap: .55rem;
}

.saved-query-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid #d8e4e8;
    border-radius: 8px;
    padding: .7rem .8rem;
    background: #ffffff;
}

.saved-query-main {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.saved-query-main .muted-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sql-editor {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 100%;
    min-height: 260px;
    border: 1px solid #b8c8ce;
    border-radius: 6px;
    padding: .75rem;
    color: #111827;
    background: #ffffff;
    font-family: Consolas, "Courier New", monospace;
    font-size: .95rem;
    line-height: 1.45;
    resize: both;
}

.sql-parameter-panel {
    display: grid;
    gap: .65rem;
    border: 1px solid #c8dce3;
    border-radius: 8px;
    padding: .75rem;
    background: #f7fbfc;
}

.sql-parameter-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    color: #1c3f4b;
}

.sql-parameter-heading span {
    color: #60717d;
    font-size: .82rem;
}

.sql-parameter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .65rem;
}

.sql-parameter-field {
    display: grid;
    gap: .28rem;
    min-width: 0;
    color: #254550;
    font-size: .82rem;
    font-weight: 700;
}

.sql-parameter-field input,
.sql-parameter-field select {
    min-height: 34px;
}

.sql-parameter-field input[type="checkbox"] {
    justify-self: start;
    width: 20px;
    min-height: 20px;
}

.sql-result-panel {
    display: grid;
    gap: .65rem;
    min-width: 0;
}

.sql-result-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #60717d;
    font-size: .86rem;
}

.sql-result-summary label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
}

.sql-result-summary select {
    min-width: 76px;
}

.sql-result-grid {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid #d9e1e4;
    border-radius: 8px;
}

.sql-result-grid table {
    min-width: max-content;
    width: 100%;
    border-collapse: collapse;
}

.sql-result-grid th,
.sql-result-grid td {
    border-bottom: 1px solid #e5ecef;
    padding: .55rem .65rem;
    text-align: left;
    white-space: nowrap;
}

.sql-result-grid th {
    color: #36505c;
    background: #f4f7f8;
    font-size: .76rem;
    text-transform: uppercase;
}

.sql-result-default-value {
    color: color-mix(in srgb, currentColor 24%, transparent);
    font-style: italic;
}

.sql-result-grid tr:last-child td {
    border-bottom: 0;
}

.sql-result-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    padding-bottom: .1rem;
    color: #60717d;
    font-size: .86rem;
}

.admin-two-pane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 1rem;
    align-items: start;
}

.user-admin-stack {
    display: grid;
    gap: 1rem;
}

.admin-list table span {
    display: block;
    color: #60717d;
    font-size: .78rem;
}

.admin-list tr.selected-row {
    background: #e9f6f8;
    box-shadow: inset 4px 0 0 #0f6f7c;
}

.causpar-search-row {
    display: flex;
    justify-content: flex-start;
    margin: .5rem 0 .75rem;
}

.causpar-search-row label {
    width: min(520px, 100%);
    font-weight: 700;
}

.causpar-search-row input {
    width: 100%;
    margin-top: .25rem;
}

.causpar-small-action {
    min-height: 34px;
    padding: .35rem .55rem;
    font-size: .82rem;
}

.causpar-small-action svg {
    width: 16px;
    height: 16px;
}

.causpar-detail-row > td {
    padding: .55rem .7rem;
    background: #f6fbfc;
    border-top: 0;
}

.data-table tr.causpar-selected-category {
    background: #d9f3ef;
    box-shadow: inset 6px 0 0 #0f7f7c;
}

.data-table tr.causpar-selected-category td {
    border-top-color: #9bd4cc;
    border-bottom-color: #9bd4cc;
}

.data-table tr.causpar-selected-category td:first-child strong {
    color: #064f4d;
}

.causpar-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .45rem .75rem;
}

.causpar-detail-grid > div {
    min-width: 0;
    padding: .45rem .55rem;
    border: 1px solid #d8e4e8;
    border-radius: 6px;
    background: #ffffff;
}

.causpar-detail-grid strong {
    display: block;
    color: #31444e;
    font-size: .72rem;
}

.causpar-detail-grid span {
    display: block;
    overflow-wrap: anywhere;
}

.causpar-modal-backdrop {
    position: fixed;
    inset: 48px 0 0 0;
    z-index: 6500;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(15 23 42 / .38);
    overflow: auto;
}

.causpar-modal-panel {
    width: min(920px, calc(100vw - 2rem));
    min-width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 80px);
    overflow: auto;
    resize: both;
    border: 1px solid #b9ccd4;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgb(20 42 52 / .34);
}

.causpar-modal-header,
.causpar-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem .95rem;
    background: #ffffff;
}

.causpar-modal-header {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #d8e2e7;
}

.causpar-modal-actions {
    position: sticky;
    bottom: 0;
    justify-content: flex-end;
    border-top: 1px solid #d8e2e7;
}

.causpar-modal-panel > .property-grid {
    padding: .9rem;
}

.checklist-editor {
    width: min(1180px, calc(100vw - 2rem));
    max-height: calc(100dvh - 4rem);
}

.checklist-editor-window {
    min-width: min(720px, calc(100vw - 1rem));
    min-height: min(520px, calc(100dvh - 1rem));
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    resize: both;
    overflow: auto;
}

.checklist-editor-detached {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1080;
    box-shadow: 0 18px 60px rgba(13, 44, 54, .22);
}

.checklist-editor-window .draggable-modal-handle {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #ffffff;
    border-bottom: 1px solid #d8e2e7;
}

.checklist-editor-window .trigger-editor-body {
    overflow: visible;
}

.checklist-editor-window > footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: .75rem 1rem;
    background: #ffffff;
    border-top: 1px solid #d8e2e7;
}

.checklist-assign-modal {
    width: min(860px, calc(100vw - 2rem));
}

.checklist-recipient-box {
    grid-column: 1 / -1;
    display: grid;
    gap: .65rem;
    margin: 0;
    padding: .75rem;
    border: 1px solid #d7e4e8;
    border-radius: 8px;
    background: #f8fbfc;
}

.checklist-recipient-box legend {
    padding: 0 .35rem;
    color: #183743;
    font-weight: 900;
}

.checklist-recipient-users {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .35rem .75rem;
    max-height: 180px;
    overflow: auto;
}

.checklist-recipient-users .check-row,
.checklist-option-list .check-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
}

.checklist-recipient-users input[type="checkbox"],
.checklist-option-list input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
}

.checklist-summary-panel {
    padding: 0;
}

.checklist-summary-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    cursor: pointer;
    list-style: none;
}

.checklist-summary-panel > summary::-webkit-details-marker {
    display: none;
}

.checklist-summary-panel > summary h2 {
    margin: 0;
}

.checklist-panel-tools {
    padding: 0 1rem 1rem;
}

.checklist-panel-tools label {
    display: grid;
    gap: .35rem;
    max-width: 520px;
    font-weight: 700;
}

.data-table tr.is-selected {
    background: #dff3f5;
    box-shadow: inset 4px 0 0 var(--accent-color, #0b7f8b);
}

.checklist-model-options {
    border: 1px solid #d7e4e8;
    border-radius: 8px;
    background: #fbfdfe;
}

.checklist-model-options > summary {
    padding: .6rem .75rem;
    cursor: pointer;
    color: #183743;
    font-size: .9rem;
    font-weight: 900;
    list-style: none;
}

.checklist-model-options > summary::-webkit-details-marker {
    display: none;
}

.checklist-model-options-grid {
    padding: .75rem;
}

.checklist-model-flags {
    display: grid;
    gap: .45rem;
    align-content: start;
}

.checklist-model-flags .check-row {
    justify-content: flex-start;
    min-height: 30px;
}

.checklist-model-options-grid > .checklist-description-field {
    grid-column: 1 / -1;
}

.checklist-model-options-grid > .checklist-description-field textarea {
    width: 100%;
    min-height: 70px;
}

.checklist-questions-toolbar {
    position: sticky;
    top: 56px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: .6rem 0 .45rem;
    padding: .4rem .55rem;
    border: 1px solid #d7e4e8;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
}

.checklist-questions-toolbar h3 {
    margin: 0;
    color: #183743;
    font-size: 1rem;
    line-height: 1.2;
}

.checklist-question-global-tools {
    display: flex;
    gap: .3rem;
    align-items: center;
}

.checklist-question-grid {
    display: grid;
    gap: .45rem;
}

.checklist-question-card {
    border: 1px solid #d7e4e8;
    border-radius: 7px;
    background: #fff;
    overflow: hidden;
}

.checklist-question-card:nth-child(even) {
    background: #f5fafb;
}

.checklist-question-card.is-dragging {
    opacity: .58;
}

.checklist-question-card.is-selected {
    border-color: var(--accent-color, #0b7f8b);
    background: #eef9fb;
    box-shadow: inset 4px 0 0 var(--accent-color, #0b7f8b);
}

.checklist-question-card > summary {
    display: grid;
    grid-template-columns: 28px minmax(86px, .45fr) minmax(220px, 1.4fr) minmax(130px, .7fr) minmax(150px, .65fr) 82px 42px;
    gap: .55rem;
    align-items: end;
    padding: .65rem;
    cursor: grab;
    list-style: none;
}

.checklist-question-card > summary::-webkit-details-marker {
    display: none;
}

.checklist-question-card > summary label,
.checklist-question-details label {
    display: grid;
    gap: .25rem;
    min-width: 0;
    color: #244454;
    font-size: .78rem;
    font-weight: 800;
    text-transform: none;
}

.checklist-question-card > summary input,
.checklist-question-card > summary select,
.checklist-question-details input,
.checklist-question-details select,
.checklist-question-details textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #c8dbe2;
    border-radius: 6px;
    padding: .45rem .55rem;
    background: #fff;
    font: inherit;
    font-weight: 500;
}

.checklist-question-card .drag-handle {
    justify-self: center;
    color: #58717c;
    font-weight: 900;
    letter-spacing: -2px;
}

.question-order-tools {
    display: grid;
    place-items: center;
    align-self: center;
}

.checklist-required {
    align-self: center;
    min-height: 36px;
}

.checklist-question-details {
    display: grid;
    grid-template-columns: minmax(160px, .7fr) minmax(200px, 1fr) minmax(160px, .55fr) minmax(160px, .55fr);
    gap: .65rem;
    padding: .7rem;
    border-top: 1px solid #dce8ed;
}

.checklist-question-details .span-two {
    grid-column: span 2;
}

.checklist-run-shell {
    width: min(1120px, calc(100vw - 1rem));
    margin: 0 auto;
    padding: clamp(.75rem, 2vw, 1.5rem);
}

.checklist-run-header,
.checklist-run-section,
.checklist-run-actions {
    margin-bottom: 1rem;
    border: 1px solid #d7e4e8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 26px rgb(34 62 74 / .08);
}

.checklist-run-header {
    padding: 1rem;
}

.checklist-run-header h1 {
    margin: .1rem 0 .35rem;
    font-size: clamp(1.45rem, 5vw, 2.15rem);
}

.checklist-run-status {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .85rem;
}

.checklist-run-status span {
    padding: .25rem .5rem;
    border: 1px solid #cbe0e7;
    border-radius: 999px;
    background: #f4fafb;
    color: #284250;
    font-size: .8rem;
    font-weight: 700;
}

.checklist-run-section {
    overflow: hidden;
}

.checklist-run-section > summary {
    display: block;
    margin: 0;
    padding: .75rem 1rem;
    background: #eef6f7;
    color: #183743;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.checklist-run-section > summary::-webkit-details-marker {
    display: none;
}

.checklist-run-question {
    display: grid;
    grid-template-columns: minmax(220px, .85fr) minmax(280px, 1.15fr);
    gap: 1rem;
    align-items: start;
    padding: .85rem 1rem;
    border-top: 1px solid #e1ebef;
}

.checklist-run-question:nth-of-type(even) {
    background: #f7fbfc;
}

.checklist-run-question:nth-of-type(odd) {
    background: #ffffff;
}

.checklist-run-label {
    display: grid;
    gap: .3rem;
    color: #183743;
    font-weight: 800;
}

.checklist-run-label small {
    color: #536b76;
    font-weight: 500;
}

.required-marker {
    color: #a22929;
}

.checklist-run-question input,
.checklist-run-question select,
.checklist-run-question textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid #c8dbe2;
    border-radius: 7px;
    padding: .5rem .65rem;
    font: inherit;
    font-weight: 500;
}

.checklist-readonly-answer {
    display: grid;
    gap: .35rem;
    min-height: 40px;
    padding: .55rem .65rem;
    border: 1px solid #c8dbe2;
    border-radius: 7px;
    background: #f8fbfc;
    white-space: pre-wrap;
}

.checklist-signature-preview {
    max-width: min(100%, 480px);
    max-height: 180px;
    border: 1px solid #d7e4e8;
    border-radius: 6px;
    background: #fff;
    object-fit: contain;
}

.checklist-signer-name,
.checklist-signer-input {
    display: grid;
    gap: .25rem;
    margin-bottom: .45rem;
    color: #244454;
    font-weight: 800;
}

.checklist-signer-input input {
    width: min(100%, 360px);
}

.checklist-option-list {
    display: grid;
    gap: .35rem;
}

.checklist-run-actions {
    position: sticky;
    bottom: .5rem;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem;
}

@media (max-width: 640px) {
    .checklist-editor-window {
        width: calc(100vw - .5rem);
        min-width: 0;
        min-height: 0;
        max-height: calc(100dvh - .5rem);
        resize: none;
    }

    .checklist-editor-detached {
        top: .25rem;
        right: .25rem;
    }

    .checklist-model-options-grid {
        grid-template-columns: 1fr;
    }

    .checklist-model-options-grid .span-two,
    .checklist-description-field {
        grid-column: auto;
    }

    .checklist-question-card > summary {
        grid-template-columns: 28px 1fr;
        align-items: start;
    }

    .checklist-question-card > summary label,
    .checklist-question-card > summary .checklist-required,
    .checklist-question-card > summary button {
        grid-column: 2;
    }

    .checklist-question-details {
        grid-template-columns: 1fr;
    }

    .checklist-question-details .span-two {
        grid-column: auto;
    }

    .checklist-run-question {
        grid-template-columns: 1fr;
        gap: .55rem;
    }

    .checklist-run-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .checklist-run-actions button {
        width: 100%;
        min-height: 44px;
    }
}

.causpar-edit-grid {
    align-items: start;
}

.causpar-edit-grid label {
    min-width: 0;
}

.causpar-edit-grid input,
.causpar-edit-grid textarea {
    width: 100%;
    min-width: 0;
}

.causpar-edit-grid .span-two,
.causpar-note-field {
    grid-column: 1 / -1;
}

.causpar-note-field textarea {
    min-height: 112px;
    resize: vertical;
}

@media (max-width: 640px) {
    .causpar-modal-backdrop {
        inset: 0;
        place-items: stretch;
        padding: .5rem;
    }

    .causpar-modal-panel {
        width: 100%;
        min-width: 0;
        max-height: calc(100dvh - 1rem);
        resize: none;
    }

    .causpar-edit-grid,
    .causpar-modal-panel > .property-grid.two {
        grid-template-columns: minmax(0, 1fr);
    }

    .causpar-modal-header,
    .causpar-modal-actions {
        padding: .7rem;
    }

    .causpar-modal-actions {
        flex-wrap: wrap;
    }

    .causpar-modal-actions button {
        flex: 1 1 140px;
    }
}

.user-edit-detail-row > td {
    padding: 0;
    border-top: 0;
    background: #f3fafb;
}

.user-inline-editor {
    margin: .65rem;
    border-color: #99c6ce;
    background: #fbfefe;
}

.inline-editor-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.admin-flag {
    border-color: #b7d6bf;
    color: #175b2a;
    background: #f1fbf3;
}

.admin-editor {
    display: grid;
    gap: .75rem;
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    padding: .85rem;
    background: #ffffff;
}

.admin-editor h2 {
    margin: 0;
    color: #0f3442;
    font-size: 1.05rem;
}

.admin-editor details {
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    background: #f8fafb;
}

.admin-editor summary {
    cursor: pointer;
    padding: .55rem .65rem;
    color: #263740;
    font-weight: 700;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    padding: .65rem;
}

.admin-form-grid.one-column {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
}

.admin-form-grid label,
.role-check-list label {
    display: grid;
    gap: .25rem;
    color: #31444e;
    font-size: .82rem;
}

.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea {
    width: 100%;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .45rem .5rem;
    color: #1d2430;
    background: #ffffff;
}

.admin-form-grid textarea {
    min-height: 92px;
    resize: vertical;
}

.role-check-list {
    display: grid;
    gap: .35rem;
    max-height: 210px;
    overflow: auto;
    padding: .65rem;
}

.dual-list-assignment {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
}

.dual-list-assignment h3 {
    margin: 0 0 .35rem;
    color: #31444e;
    font-size: .9rem;
}

.dual-list-box {
    display: grid;
    gap: .28rem;
    min-height: 220px;
    max-height: 260px;
    overflow: auto;
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    padding: .55rem;
    background: #ffffff;
}

.dual-list-actions {
    display: grid;
    gap: .5rem;
}

.dual-list-actions button {
    min-width: 42px;
}

.logo-preview {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: contain;
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    padding: .5rem;
    background: #ffffff;
}

.theme-admin-card {
    grid-column: span 2;
}

.user-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
    gap: 1rem;
    align-items: start;
}

.user-settings-stack {
    grid-template-columns: minmax(0, 1fr);
}

.master-user-settings-heading,
.master-user-settings {
    width: min(1120px, calc(100vw - 2rem));
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.master-user-settings-heading {
    align-items: flex-start;
}

.master-user-settings .settings-section {
    width: 100%;
}

.master-user-settings .admin-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.master-user-settings .theme-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.user-settings-stack .admin-editor {
    border: 0;
    padding: 0;
    background: transparent;
}

.user-theme-editor {
    max-width: none;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .55rem;
    max-height: 320px;
    overflow: auto;
    padding: .25rem;
}

.theme-card {
    display: grid;
    gap: .45rem;
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    padding: .6rem;
    color: var(--app-text);
    background: var(--app-bg);
    text-align: left;
}

.theme-card.active {
    border-color: var(--app-primary);
    box-shadow: inset 0 0 0 2px var(--app-primary);
}

.theme-card span {
    display: block;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--app-primary), var(--app-accent));
}

.theme-preview {
    overflow: hidden;
    border: 1px solid #d9e1e4;
    border-radius: 10px;
    color: var(--app-text);
    background: var(--app-bg);
}

.theme-preview header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .75rem;
    color: #ffffff;
    background: var(--app-primary);
}

.theme-preview button {
    border: 0;
    border-radius: 6px;
    padding: .35rem .55rem;
    color: #ffffff;
    background: var(--app-accent);
}

.icon-size-control {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto auto;
    gap: .55rem;
    align-items: center;
    margin-top: .25rem;
}

.icon-size-control input[type="range"] {
    width: 100%;
    min-width: 0;
}

.font-scale-control {
    display: grid;
    gap: .45rem;
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    padding: .75rem;
    color: var(--app-text, #1d2430);
    background: color-mix(in srgb, var(--app-primary, #0f6f7c) 5%, #ffffff);
}

.font-scale-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
}

.font-scale-title svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.font-scale-title strong {
    margin-left: auto;
    color: var(--app-primary, #0f6f7c);
}

.font-scale-slider {
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr) auto;
    gap: .55rem;
    align-items: center;
}

.font-scale-slider input[type="range"] {
    width: 100%;
    min-width: 0;
}

.icon-size-value {
    min-width: 48px;
    color: #60717d;
    font-size: .82rem;
    font-weight: 700;
    text-align: right;
}

.icon-size-preview {
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    color: var(--app-primary, #0f6f7c);
    background: color-mix(in srgb, var(--app-primary, #0f6f7c) 12%, #ffffff);
}

.icon-size-preview svg {
    width: 55%;
    height: 55%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-set-preview {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    padding: .55rem;
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    background: var(--app-surface, #ffffff);
}

.icon-set-preview span {
    width: var(--app-icon-button-size, 34px);
    height: var(--app-icon-button-size, 34px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    color: var(--app-icon-color, #0f5260);
    background: var(--app-icon-button-bg, #ffffff);
}

.icon-set-preview.icon-labels-visible span {
    width: auto;
    min-width: var(--app-icon-button-size, 34px);
    gap: .35rem;
    padding-inline: .55rem;
}

.icon-set-preview.icon-labels-visible span::after {
    content: attr(title);
    font-size: var(--app-icon-text-size, 12px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.icon-set-preview svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-preview section {
    margin: .75rem;
    border-radius: 8px;
    padding: .75rem;
    background: var(--app-surface);
}

.property-section {
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    background: #fbfcfc;
}

.property-section summary {
    cursor: pointer;
    padding: .6rem .65rem;
    color: #31444e;
    font-weight: 700;
}

.property-section[open] {
    padding-bottom: .65rem;
}

.property-section[open] summary {
    margin-bottom: .45rem;
    border-bottom: 1px solid #e3e9eb;
}

.property-section > label,
.property-section > .check-row,
.property-section > .role-picker,
.property-section > .storage-editor,
.property-section > .binding-summary,
.property-section > .nudge-pad,
.property-section > .tab-editor-list,
.property-section > .secondary-action,
.property-section > .primary-action,
.property-section > .inline-actions,
.property-section > .property-help,
.property-section > .clean-list {
    margin-left: .65rem;
    margin-right: .65rem;
}

.combo-query-editor {
    min-height: 120px;
    resize: vertical;
    font-family: Consolas, "Courier New", monospace;
}

.category-config-panel {
    display: grid;
    gap: .7rem;
}

.category-message {
    margin: 0;
    border: 1px solid #bfdde2;
    border-radius: 7px;
    padding: .55rem .65rem;
    color: #0f6f7c;
    background: #f2fbfc;
    font-weight: 700;
}

.role-picker {
    display: grid;
    gap: .35rem;
    border: 1px solid #e1e8eb;
    border-radius: 7px;
    padding: .55rem;
    background: #ffffff;
}

.role-picker strong {
    color: #41535c;
    font-size: .82rem;
}

.virtual-group-editor {
    display: grid;
    gap: .45rem;
}

.virtual-group-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    align-items: stretch;
    border: 1px solid #d9e4e7;
    border-radius: 7px;
    padding: .55rem;
    background: #ffffff;
}

.virtual-group-row label {
    display: grid;
    gap: .2rem;
}

.virtual-group-line {
    display: grid;
    grid-template-columns: 1fr;
}

.virtual-group-row textarea {
    min-height: 96px;
    resize: vertical;
}

.virtual-group-actions {
    display: flex;
    justify-content: flex-end;
}

.virtual-group-visibility-summary {
    display: grid;
    gap: .2rem;
    padding: .55rem;
    border: 1px solid #d6e0e4;
    border-radius: 6px;
    background: #f8fbfc;
}

.virtual-group-visibility-summary span {
    color: #405766;
    font-size: .86rem;
}

.visibility-editor-shell {
    display: grid;
    gap: .7rem;
}

.visibility-editor-header {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
    padding: .75rem;
    border: 1px solid #d8e2e7;
    border-radius: 6px;
    background: #fff;
}

.visibility-editor-header div {
    display: grid;
    gap: .15rem;
}

.visibility-editor-header span {
    color: #536a78;
    font-size: .88rem;
}

.dual-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
}

.dual-list .dual-list-box {
    min-height: 180px;
}

.standalone-forms-admin {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.standalone-form-editor,
.standalone-form-list {
    display: grid;
    gap: .8rem;
}

.standalone-card-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.standalone-card-heading h2 {
    margin: 0;
}

.standalone-card-heading p {
    margin: .15rem 0 0;
    color: #536a78;
    font-size: .9rem;
}

.standalone-enabled {
    white-space: nowrap;
    margin-top: .15rem;
}

.standalone-form-fields {
    display: grid;
    grid-template-columns: minmax(110px, 180px) minmax(240px, 1fr);
    gap: .65rem .75rem;
    align-items: start;
}

.standalone-form-fields label {
    display: grid;
    gap: .25rem;
    font-size: .86rem;
    font-weight: 700;
    color: #183247;
}

.standalone-form-fields label.wide {
    grid-column: 1 / -1;
}

.standalone-form-fields input,
.standalone-form-fields textarea {
    width: 100%;
    min-width: 0;
    font-weight: 400;
}

.standalone-permission-section {
    margin: 0;
}

.standalone-dual-list .dual-list-box {
    max-height: 240px;
    overflow: auto;
}

.standalone-dual-list .check-row {
    align-items: flex-start;
    gap: .4rem;
    line-height: 1.25;
}

.standalone-exclusion-grid {
    display: grid;
    gap: .85rem;
}

.standalone-exclusion-grid h3 {
    margin: 0 0 .45rem;
    font-size: .92rem;
    color: #183247;
}

.standalone-form-table {
    display: grid;
    gap: .35rem;
}

.standalone-form-table-header,
.standalone-form-table-row {
    display: grid;
    grid-template-columns: minmax(240px, 1.2fr) minmax(220px, 1fr) 110px minmax(420px, auto);
    gap: .75rem;
    align-items: center;
}

.standalone-form-table-header {
    padding: .35rem .65rem;
    color: #536a78;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.standalone-form-table-row {
    min-width: 0;
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    padding: .7rem;
    background: #fbfdfe;
}

.standalone-form-title,
.standalone-form-permissions {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.standalone-form-title span,
.standalone-form-title small,
.standalone-form-permissions small {
    color: #536a78;
    overflow-wrap: anywhere;
}

.standalone-form-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.status-pill.ok {
    border-color: #bad9c8;
    color: #145c38;
    background: #effaf3;
}

.status-pill.muted {
    color: #6a7680;
    background: #f3f5f6;
}

@media (max-width: 900px) {
    .virtual-group-row {
        grid-template-columns: 1fr;
    }

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

    .standalone-forms-admin,
    .standalone-form-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .standalone-form-table-header {
        display: none;
    }

    .standalone-form-table-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .standalone-form-actions {
        justify-content: flex-start;
    }
}

.tab-editor-list {
    display: grid;
    gap: .4rem;
}

.tab-editor-row {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    gap: .35rem;
    align-items: center;
}

.tab-editor-row .icon-button {
    width: 34px;
    height: 34px;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    color: #31444e;
    background: #ffffff;
}

.compact-fieldset {
    border: 0 !important;
    padding: 0 !important;
    background: transparent;
}

.floating-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(29, 36, 48, .28);
}

.grid-columns-modal-backdrop {
    z-index: 6200;
}

.floating-panel {
    width: min(860px, 100%);
    max-height: min(760px, calc(100vh - 2.5rem));
    overflow: auto;
    position: relative;
    z-index: 1;
    border: 1px solid #c9d5d8;
    border-radius: 8px;
    padding: 1rem;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(25, 43, 55, .24);
}

.floating-panel.checklist-editor-detached {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    left: auto;
    z-index: 7200;
    display: flex;
    flex-direction: column;
    width: min(1120px, calc(100vw - 2.5rem));
    height: min(780px, calc(100dvh - 2.5rem));
    min-width: min(760px, calc(100vw - 1rem));
    min-height: min(520px, calc(100dvh - 1rem));
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    margin: 0;
    padding: 0;
    overflow: hidden;
    resize: both;
    box-shadow: 0 24px 90px rgba(13, 44, 54, .28);
}

.floating-panel.checklist-editor-detached > .draggable-modal-handle {
    flex: 0 0 auto;
    margin: 0;
    padding: .85rem 1rem;
    cursor: move;
}

.floating-panel.checklist-editor-detached > .trigger-editor-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
}

.floating-panel.checklist-editor-detached > footer {
    flex: 0 0 auto;
}

.checklist-model-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--topbar-height, 0px));
    background: var(--page-background, #f5f9fb);
}

.checklist-model-titlebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid #d5e3e8;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(18, 48, 60, .08);
}

.checklist-model-titlebar h1 {
    margin: 0;
    font-size: 1.25rem;
}

.checklist-model-page-body {
    display: grid;
    gap: .75rem;
    padding: 1rem;
}

.invalid-field {
    border-color: #c74747 !important;
    box-shadow: 0 0 0 2px rgba(199, 71, 71, .12);
}

.validation-warning {
    color: #a32323;
    font-weight: 700;
}

.floating-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}

.floating-panel header h2 {
    margin: 0;
}

.floating-panel header > button {
    width: 34px;
    height: 34px;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    background: #ffffff;
}

.grid-column-list {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    align-content: start;
    margin-top: .4rem;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    padding-right: .25rem;
}

.grid-column-drop-zone {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 9px;
    border: 1px dashed transparent;
    border-radius: 999px;
    color: transparent;
    background: transparent;
    font-size: 0;
    font-weight: 700;
}

.grid-column-list:has(.grid-column-editor.dragging) .grid-column-drop-zone {
    display: flex;
    border-color: rgba(8, 120, 135, .34);
    background: repeating-linear-gradient(90deg, rgba(8, 120, 135, .20), rgba(8, 120, 135, .20) 12px, rgba(223, 242, 245, .74) 12px, rgba(223, 242, 245, .74) 18px);
}

.grid-column-drop-zone.active {
    min-height: 12px;
    border-color: #087887;
    background: repeating-linear-gradient(90deg, rgba(8, 120, 135, .58), rgba(8, 120, 135, .58) 12px, rgba(223, 242, 245, .94) 12px, rgba(223, 242, 245, .94) 18px);
}

.grid-columns-floating {
    width: min(1180px, calc(100vw - 2rem));
    height: min(720px, calc(100vh - 2rem));
    min-width: 760px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    resize: both;
}

.grid-columns-header {
    display: grid;
    grid-template-columns: minmax(180px, auto) 1fr auto;
    align-items: center;
    gap: .75rem;
    margin-bottom: .35rem;
}

.grid-columns-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.grid-columns-header .primary-action,
.grid-columns-header .secondary-action {
    width: auto;
    height: 34px;
    min-height: 34px;
    padding: .42rem .75rem;
    white-space: nowrap;
}

.grid-columns-toolbar {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    position: sticky;
    top: -1rem;
    z-index: 2;
    padding: .35rem 0 .65rem;
    background: #ffffff;
}

.document-render-shell {
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(35, 48, 58, .08);
    max-width: 100%;
    overflow: visible;
}

.document-render-shell.is-tight {
    border-radius: 6px;
    box-shadow: none;
}

.document-render-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .9rem;
    border-bottom: 1px solid #e3e9eb;
    background: #fbfcfc;
}

.document-render-header strong {
    font-size: .92rem;
}

.document-render-header.is-collapsed {
    padding: .45rem .75rem;
}

.document-render-header.is-collapsed strong {
    font-size: .9rem;
}

.document-render-header.is-collapsed span {
    font-size: .72rem;
}

.document-render-header span {
    color: #60717d;
    font-size: .85rem;
}

.system-fields-panel {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: .75rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid #d9e1e4;
    background: #f8fafb;
}

.system-fields-panel label {
    display: grid;
    gap: .25rem;
    color: #41535c;
    font-size: .78rem;
    font-weight: 700;
}

.system-fields-panel input,
.system-fields-panel select {
    min-width: 0;
    width: 100%;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .5rem .6rem;
    color: #1d2430;
    background: #ffffff;
    font-weight: 400;
}

@media (max-width: 760px) {
    .document-render-header {
        align-items: flex-start;
        flex-direction: column;
        gap: .25rem;
    }

    .system-fields-panel {
        grid-template-columns: 1fr;
        gap: .65rem;
        padding: .75rem;
    }
}

.document-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}

.document-actions > span:not(.status-pill) {
    color: #0f6f7c;
    font-size: .85rem;
    font-weight: 700;
}

.document-page-tabs {
    display: flex;
    gap: .35rem;
    padding: .4rem .75rem;
    border-bottom: 1px solid #d9e1e4;
    background: #f8fafb;
}

.document-page-tabs.is-tight {
    padding: .25rem .45rem;
}

.document-page-tabs.is-tight button {
    padding: .35rem .55rem;
    font-size: .8rem;
}

.document-page-tabs button {
    border: 1px solid #cbd7dc;
    border-radius: 6px;
    padding: .38rem .65rem;
    color: #41535c;
    background: #eef3f4;
    font-size: .84rem;
    font-weight: 700;
}

.document-page-tabs button.active {
    color: #0f3442;
    background: #ffffff;
    box-shadow: inset 0 -2px 0 #0f6f7c;
}

.document-context-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid #d9e1e4;
    background: #f8fafb;
}

.document-context-strip div {
    display: grid;
    gap: .1rem;
}

.document-context-strip strong {
    font-size: .9rem;
    color: #183241;
}

.document-context-strip span {
    color: #60717d;
    font-size: .78rem;
}

.document-context-strip.historical {
    background: #fff8e6;
    border-bottom-color: #ead59b;
    border-left: 4px solid #d69b00;
}

.document-context-strip.current {
    border-left: 4px solid #0f6f7c;
}

.document-context-strip .context-code {
    padding: .18rem .5rem;
    border: 1px solid #d1dde2;
    border-radius: 999px;
    background: #fff;
    color: #425968;
    white-space: nowrap;
}

.status-pill.historical {
    border-color: #d69b00;
    background: #fff8e6;
    color: #6d4b00;
}

.revision-tab-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    padding: 1rem;
    background: #ffffff;
}

.event-editor-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.event-editor-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.event-editor-shell.fullscreen {
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: calc(100vh - 120px);
}

.event-sidebar, .event-editor-main {
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    background: #ffffff;
}

.event-sidebar {
    display: grid;
    gap: .35rem;
    padding: .8rem;
}

.event-sidebar h2 {
    margin: 0 0 .35rem;
    font-size: 1rem;
}

.event-sidebar button {
    display: grid;
    gap: .15rem;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: .55rem;
    color: #263740;
    background: #f7fafb;
    text-align: left;
}

.event-sidebar button.active {
    border-color: #8fb4bd;
    background: #edf7f9;
}

.event-sidebar button span {
    color: #60717d;
    font-size: .78rem;
}

.bulk-event-editor-shell .event-sidebar {
    align-content: start;
    gap: .2rem;
    max-height: calc(100dvh - var(--topbar-offset, 48px) - 120px);
    overflow: auto;
    padding: .55rem;
}

.bulk-event-editor-shell .event-sidebar h2 {
    font-size: .88rem;
    margin-bottom: .2rem;
}

.bulk-event-editor-shell .event-sidebar button {
    border-radius: 5px;
    gap: .05rem;
    min-height: 0;
    padding: .32rem .4rem;
}

.bulk-event-editor-shell .event-sidebar button strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
}

.bulk-event-editor-shell .event-sidebar button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .68rem;
}

.bulk-event-selector {
    display: grid;
    gap: .25rem;
    color: #60717d;
    font-size: .74rem;
    font-weight: 700;
}

.bulk-event-selector select {
    width: 100%;
    min-height: 32px;
    border: 1px solid #cbd8de;
    border-radius: 6px;
    padding: .35rem .45rem;
    color: #24343d;
    background: #ffffff;
    font-size: .82rem;
}

.bulk-event-selector option.has-code {
    font-weight: 700;
}

.event-editor-main {
    display: grid;
    gap: .8rem;
    padding: .9rem;
    min-height: 0;
    overflow: hidden;
}

.event-editor-main > .runtime-code-editor {
    height: clamp(320px, calc(100dvh - var(--topbar-offset, 48px) - 360px), 620px);
    min-height: 320px;
    max-height: 620px;
}

.event-editor-toolbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: .65rem;
    align-items: end;
}

.event-editor-toolbar label {
    display: grid;
    gap: .25rem;
    color: #41535c;
    font-size: .82rem;
    font-weight: 700;
}

.event-editor-toolbar input,
.event-editor-toolbar select,
.runtime-code-fallback {
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .55rem .65rem;
    color: #1d2430;
    background: #ffffff;
}

.runtime-code-editor {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 520px;
    box-sizing: border-box;
    border: 1px solid #c9d5d8;
    border-radius: 7px;
    overflow: hidden;
    background: #ffffff;
}

.runtime-code-editor .monaco-editor,
.runtime-code-editor .monaco-editor-background,
.runtime-code-editor .margin,
.runtime-code-editor .monaco-editor .inputarea.ime-input {
    background: #ffffff !important;
}

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

.advanced-code-inline {
    padding: .35rem;
    border: 1px solid #d7e3e7;
    border-radius: 8px;
    background: #fbfdfe;
}

.advanced-code-inline.fullscreen {
    position: fixed;
    top: 1rem;
    left: 50%;
    width: min(1180px, calc(100vw - 2rem));
    height: min(760px, calc(100vh - 2rem));
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    z-index: 100000;
    transform: translateX(-50%);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    padding: .75rem;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
}

.document-shell.tree-collapsed .advanced-code-inline.fullscreen,
.document-shell.no-tree .advanced-code-inline.fullscreen {
    left: 50%;
}

.advanced-code-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.advanced-code-preview {
    width: 100%;
    min-height: 7rem;
    resize: vertical;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.86rem;
    line-height: 1.45;
}

.advanced-code-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(15, 23, 42, 0.68);
}

.advanced-code-floating-host {
    display: contents;
}

.advanced-code-modal {
    position: fixed;
    top: clamp(0.75rem, 5vh, 3rem);
    left: 50%;
    z-index: 99991;
    width: min(1180px, calc(100vw - 2rem));
    height: min(760px, calc(100vh - 2rem));
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
    transform: translateX(-50%);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    background: #fff;
    border: 1px solid #c9d5d8;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
    pointer-events: auto;
    visibility: visible;
}

.advanced-code-inline.fullscreen.advanced-code-modal {
    top: max(2.25rem, env(safe-area-inset-top));
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(1120px, calc(100vw - 4rem));
    height: min(720px, calc(100dvh - 4.5rem));
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 2rem);
    transform: translateX(-50%);
    border: 1px solid #c9d5d8;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .32);
}

.advanced-code-detached-backdrop {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.25rem 1rem 1rem;
}

.advanced-code-detached-modal {
    resize: both;
}

.advanced-code-detached-modal .advanced-code-field-header {
    min-height: 42px;
    margin: -.75rem -.75rem 0;
    padding: .6rem .75rem;
    border-bottom: 1px solid #dbe7ea;
    border-radius: 10px 10px 0 0;
    background: #f7fbfc;
    cursor: move;
    user-select: none;
}

.advanced-code-modal * {
    visibility: visible;
}

body:has(.advanced-code-modal-backdrop) .workflow-visual-canvas,
body:has(.advanced-code-modal-backdrop) .workflow-canvas {
    visibility: hidden;
}

.advanced-code-modal.advanced-code-event-main {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .75rem;
}

.advanced-code-event-toolbar {
    grid-template-columns: minmax(180px, 1fr) minmax(140px, 180px) minmax(0, 1fr) auto;
    padding: .35rem .45rem;
    border-radius: 8px;
    background: #f7fbfc;
}

.advanced-code-event-toolbar .icon-button {
    justify-self: end;
}

.advanced-code-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #dbe7ea;
    background: #f5f9fa;
}

.advanced-code-modal.advanced-code-event-main .advanced-code-toolbar {
    padding: 0;
    border-bottom: 0;
    background: transparent;
}

.advanced-code-toolbar .active {
    border-color: #246b83;
    color: #123746;
    background: #e5f4f8;
}

.advanced-code-workspace {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
}

.advanced-code-inline.fullscreen .advanced-code-workspace {
    height: auto !important;
    min-height: 0;
}

.advanced-code-editor-pane {
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
}

.advanced-code-editor-host {
    min-height: 0;
    width: 100%;
}

.advanced-runtime-code-editor {
    min-height: 0;
    height: 100%;
}

.advanced-code-inline:not(.fullscreen) .advanced-runtime-code-editor {
    min-height: 150px;
}

.advanced-code-fallback {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    resize: none;
    border: 0;
    font-family: Consolas, "Courier New", monospace;
}

.advanced-code-function-menu {
    position: relative;
}

.advanced-code-function-popover {
    position: absolute;
    z-index: 6100;
    top: calc(100% + 6px);
    left: 0;
    width: min(520px, calc(100vw - 2rem));
    max-height: min(520px, calc(100vh - 12rem));
    overflow: auto;
    border: 1px solid #c9d8de;
    border-radius: 8px;
    background: #fbfdfe;
    box-shadow: 0 18px 54px rgba(20, 42, 52, .22);
}

.advanced-code-function-group {
    padding: 0.75rem;
    border-bottom: 1px solid #e4ecef;
}

.advanced-code-function-group h3 {
    margin: 0;
    color: #1d2430;
    font-size: 0.86rem;
}

.advanced-code-function-group p {
    margin: 0.2rem 0 0.55rem;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.advanced-code-function-list {
    display: grid;
    gap: 0.35rem;
}

.advanced-code-function-list button {
    display: grid;
    gap: 0.12rem;
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0.5rem;
    text-align: left;
    border: 1px solid #d6e2e6;
    border-radius: 6px;
    background: #ffffff;
    color: #1d2430;
}

.advanced-code-function-list button:hover,
.advanced-code-function-list button:focus {
    border-color: #246b83;
    background: #eef8fb;
}

.advanced-code-function-list strong {
    overflow-wrap: anywhere;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.79rem;
}

.advanced-code-function-list span {
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.25;
}

.advanced-code-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-top: 1px solid #dbe7ea;
    background: #fff;
}

@media (max-width: 900px) {
    .advanced-code-function-popover {
        left: auto;
        right: 0;
        width: min(420px, calc(100vw - 2rem));
    }

    .advanced-code-modal {
        top: .5rem;
        left: .5rem;
        width: calc(100vw - 1rem);
        height: calc(100vh - 1rem);
        transform: none;
    }

    .advanced-code-event-toolbar {
        grid-template-columns: 1fr auto;
    }

    .advanced-code-event-toolbar label:nth-of-type(2),
    .advanced-code-event-toolbar span {
        display: none;
    }
}

.event-editor-shell.fullscreen .runtime-code-editor {
    height: 100%;
    min-height: 0;
    max-height: none;
}

.event-editor-shell.fullscreen .event-editor-main {
    height: calc(100dvh - var(--topbar-offset, 48px) - 92px);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.event-editor-shell.fullscreen .event-editor-main > .runtime-code-editor {
    height: 100%;
    min-height: 0;
    max-height: none;
}

.runtime-code-fallback {
    width: 100%;
    min-height: 520px;
    font-family: Consolas, "Courier New", monospace;
}

.raw-code-panel {
    border: 1px solid #d9e1e4;
    border-radius: 7px;
    background: #fbfcfc;
}

.raw-code-panel summary {
    cursor: pointer;
    padding: .45rem .65rem;
    color: #41535c;
    font-size: .82rem;
    font-weight: 700;
}

.raw-code-panel .runtime-code-fallback {
    border: 0;
    border-top: 1px solid #d9e1e4;
    border-radius: 0 0 7px 7px;
    min-height: 240px;
}

.event-editor-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.event-editor-footer {
    display: grid;
    gap: .35rem;
    align-items: start;
}

.event-editor-footer .icon-only-action {
    overflow: hidden;
    font-size: 0;
}

.event-editor-footer .property-help {
    display: block;
    margin: 0;
    line-height: 1.35;
}

.validation-error-text {
    color: #b32121 !important;
}

.runtime-diagnostics {
    display: grid;
    gap: .5rem;
}

.runtime-diagnostics > div {
    border: 1px solid #e1b8b4;
    border-radius: 7px;
    padding: .6rem;
    background: #fff7f6;
}

.runtime-diagnostics strong {
    color: #8a1f17;
}

.runtime-diagnostics span {
    display: block;
    color: #60717d;
    font-size: .8rem;
}

.document-file-panel {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .55rem .75rem;
    border-bottom: 1px solid #d9e1e4;
    background: #ffffff;
}

.document-file-panel strong {
    color: #31444e;
}

.primary-file-choice-dialog {
    width: min(620px, calc(100vw - 2rem));
    display: grid;
    gap: .8rem;
    border: 1px solid #cbd8de;
    border-radius: 8px;
    padding: .9rem;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(20, 42, 52, .28);
}

.primary-file-choice-dialog header,
.primary-file-choice-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.primary-file-choice-dialog header {
    padding-bottom: .65rem;
    border-bottom: 1px solid #d8e2e7;
}

.primary-file-choice-dialog header div {
    display: grid;
    gap: .15rem;
}

.primary-file-choice-dialog header strong,
.primary-file-source-option strong {
    color: #17333e;
}

.primary-file-choice-dialog header span,
.primary-file-source-option small,
.primary-file-choice-name {
    color: #60717d;
    font-size: .82rem;
}

.primary-file-source-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .65rem;
    align-items: flex-start;
    padding: .7rem;
    border: 1px solid #dbe5e9;
    border-radius: 7px;
    background: #fbfcfc;
}

.primary-file-source-option span {
    display: grid;
    gap: .15rem;
}

.primary-file-choice-dialog footer {
    justify-content: flex-end;
    padding-top: .35rem;
}

.distribution-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 1rem;
}

.distribution-composer,
.distribution-history,
.external-share-card,
.external-share-document {
    display: grid;
    gap: .85rem;
    border: 1px solid #d8e4e8;
    border-radius: 8px;
    padding: 1rem;
    background: #ffffff;
}

.distribution-composer header,
.distribution-composer footer,
.external-share-document > header,
.distribution-history-row header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.distribution-options,
.distribution-mode {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.distribution-mode label,
.primary-file-source-option {
    cursor: pointer;
}

.distribution-recipients {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.2fr);
    gap: .75rem;
}

.distribution-internal-users,
.distribution-recipients textarea,
.distribution-mail-body {
    width: 100%;
}

.distribution-internal-users > div {
    min-height: 120px;
    max-height: 220px;
    overflow: auto;
    border: 1px solid #d8e4e8;
    border-radius: 6px;
    padding: .5rem;
}

.distribution-history {
    align-content: start;
}

.distribution-history-row {
    display: grid;
    gap: .35rem;
    border: 1px solid #e1e9ec;
    border-radius: 7px;
    padding: .65rem;
    background: #fbfcfc;
}

.distribution-history-row.revoked {
    opacity: .68;
}

.distribution-history-row p,
.distribution-history-row span,
.distribution-history-row small {
    margin: 0;
    color: #60717d;
    font-size: .82rem;
}

.distribution-history-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.distribution-created-links {
    display: grid;
    gap: .35rem;
    border: 1px solid #bee3ea;
    border-radius: 7px;
    padding: .65rem;
    background: #f2fbfd;
}

.external-share-page {
    min-height: 100vh;
    padding: 2rem;
    background: #eef5f7;
}

.external-share-card,
.external-share-document {
    max-width: 1120px;
    margin: 0 auto;
}

.external-share-metadata {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .5rem;
}

.external-share-metadata div {
    border: 1px solid #e1e9ec;
    border-radius: 6px;
    padding: .5rem;
}

.external-share-metadata dt {
    color: #60717d;
    font-size: .78rem;
}

.external-share-metadata dd {
    margin: 0;
    color: #17333e;
    font-weight: 700;
}

.external-share-report {
    width: 100%;
    min-height: 720px;
    border: 1px solid #d8e4e8;
    border-radius: 6px;
    background: #ffffff;
}

.database-import-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.database-table-list,
.database-import-panel {
    display: grid;
    align-content: start;
    gap: .75rem;
    border: 1px solid #d8e4e8;
    border-radius: 8px;
    padding: .9rem;
    background: #ffffff;
}

.database-table-list header,
.database-import-panel header,
.database-import-panel footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.database-table-list header {
    align-items: stretch;
    flex-direction: column;
}

.database-table-list button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: center;
    width: 100%;
    border: 1px solid #d8e4e8;
    border-radius: 6px;
    padding: .5rem;
    background: #fbfcfc;
    color: #17333e;
    text-align: left;
}

.database-table-list button.is-selected {
    border-color: #0f6f7c;
    background: #eaf7f9;
}

.database-table-list small {
    color: #60717d;
    white-space: nowrap;
}

.database-table-picker {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(260px, 1fr);
    gap: .75rem;
    align-items: end;
}

.database-import-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem;
    align-items: end;
}

.danger-check {
    color: #8a1f17;
}

.database-schema-grid {
    max-height: 420px;
    overflow: auto;
}

.database-schema-grid table {
    width: 100%;
    border-collapse: collapse;
}

.database-schema-grid th,
.database-schema-grid td {
    border: 1px solid #d8e4e8;
    padding: .4rem .5rem;
    text-align: left;
}

.database-schema-grid th {
    background: #eef6f8;
}

.database-import-errors {
    border: 1px solid #e1b8b4;
    border-radius: 7px;
    padding: .65rem;
    background: #fff7f6;
}

.database-import-errors p {
    margin: .25rem 0;
    color: #8a1f17;
    font-size: .82rem;
}

@media (max-width: 1100px) {
    .distribution-layout,
    .distribution-recipients,
    .database-import-layout {
        grid-template-columns: 1fr;
    }

    .database-table-picker {
        grid-template-columns: 1fr;
    }
}

.attachment-list {
    display: grid;
    gap: .35rem;
    min-width: min(620px, 100%);
}

.attachment-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    gap: .75rem;
    align-items: center;
    padding: .35rem .45rem;
    border: 1px solid #e3e9eb;
    border-radius: 6px;
    background: #fbfcfc;
}

.attachment-row span {
    color: #60717d;
    font-size: .78rem;
    white-space: nowrap;
}

.category-template-list {
    display: grid;
    gap: .4rem;
    min-width: 0;
}

.category-template-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem;
    align-items: center;
    min-width: 0;
    border: 1px solid #e3e9eb;
    border-radius: 6px;
    padding: .45rem;
    background: #fbfcfc;
}

.category-template-text {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.category-template-text strong,
.category-template-text span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-template-text span {
    color: #60717d;
    font-size: .75rem;
}

.category-template-actions {
    display: flex;
    gap: .25rem;
}

.category-template-actions .icon-button {
    width: 32px;
    height: 32px;
}

.linked-document-panel {
    align-items: stretch;
    flex-direction: column;
}

.linked-document-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.linked-document-search {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: min(420px, 100%);
}

.linked-document-search input {
    flex: 1;
    min-width: 180px;
}

.linked-document-candidates {
    display: grid;
    gap: .35rem;
    max-height: 180px;
    overflow-y: auto;
}

.linked-document-candidates button {
    display: grid;
    gap: .15rem;
    text-align: left;
    border: 1px solid #d7e3e8;
    border-radius: 6px;
    background: #f8fbfc;
    padding: .45rem .55rem;
}

.linked-document-candidates span,
.linked-document-list a,
.linked-document-list span {
    font-size: .78rem;
}

.linked-document-list .attachment-row {
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto auto auto auto;
}

.runtime-diagnostics p {
    margin: .25rem 0 0;
}

.app-error-alert {
    display: grid;
    gap: .75rem;
    margin: 1rem 0;
    border: 1px solid #e0b24b;
    border-left: 5px solid #d39100;
    border-radius: 8px;
    padding: 1rem;
    color: #263740;
    background: #fff8e6;
    box-shadow: 0 10px 32px rgba(83, 62, 16, .12);
}

.app-error-alert header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.app-error-alert h1 {
    margin: 0;
    font-size: 1.15rem;
}

.app-error-alert p,
.app-error-alert strong {
    margin: 0;
}

.app-error-alert details {
    border: 1px solid #ead7a7;
    border-radius: 7px;
    background: #ffffff;
}

.app-error-alert summary {
    cursor: pointer;
    padding: .55rem .7rem;
    font-weight: 700;
}

.stack-trace-actions {
    display: flex;
    justify-content: flex-end;
    padding: .45rem .7rem;
    border-top: 1px solid #ead7a7;
    background: #fffaf0;
}

.stack-copy-button {
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .35rem .65rem;
    color: #17313b;
    background: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.stack-copy-button:hover {
    border-color: #087789;
    color: #075a68;
}

.app-error-alert pre {
    max-height: 420px;
    margin: 0;
    overflow: auto;
    border-top: 1px solid #ead7a7;
    padding: .75rem;
    color: #20313a;
    white-space: pre-wrap;
    word-break: break-word;
}

.compile-alert {
    width: min(760px, calc(100vw - 2rem));
    max-height: min(720px, calc(100vh - 2rem));
    display: grid;
    gap: .75rem;
    overflow: auto;
    border: 1px solid #c9d5d8;
    border-radius: 8px;
    padding: 1rem;
    background: #ffffff;
    box-shadow: 0 20px 70px rgba(25, 43, 55, .24);
}

.compile-alert header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #e3e9eb;
    padding-bottom: .65rem;
}

.compile-alert header h2 {
    margin: 0;
}

.compile-alert header button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    color: #263740;
    background: #ffffff;
}

.compile-inline-alert {
    margin: .6rem 0;
    padding: .65rem .75rem;
    border: 1px solid #c9d8de;
    border-radius: 8px;
    background: #f8fbfc;
    color: #284250;
}

.compile-inline-alert.success {
    border-color: #9fd3b2;
    background: #edf9f1;
    color: #1f6a39;
}

.compile-inline-alert.error {
    border-color: #e7b2b2;
    background: #fff3f3;
    color: #8a2d2d;
}

.runtime-diagnostics.compact {
    margin-top: .5rem;
}

.document-render-canvas {
    position: relative;
    min-height: 640px;
    overflow: visible;
    padding: 1rem;
    background: #ffffff;
}

.runtime-field-reference-palette {
    display: grid;
    gap: .65rem;
    border-top: 1px solid #d8e3e6;
    border-bottom: 1px solid #d8e3e6;
    padding: .75rem 1rem;
    background: #f6fafb;
}

.runtime-field-reference-palette > div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .45rem .75rem;
}

.runtime-field-reference-palette strong {
    color: #19323b;
}

.runtime-field-reference-palette span,
.runtime-field-reference-palette small {
    color: #4a626d;
}

.runtime-field-reference-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.runtime-field-reference-list button,
.runtime-field-reference-badge {
    border: 1px solid #9fc7d0;
    border-radius: 6px;
    color: #0b5965;
    background: #ffffff;
    cursor: pointer;
}

.runtime-field-reference-list button {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: .1rem .45rem;
    align-items: center;
    max-width: min(100%, 430px);
    padding: .35rem .5rem;
    text-align: left;
}

.runtime-field-reference-list button code {
    grid-column: 1 / -1;
    overflow: hidden;
    color: #0f6f7c;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.runtime-field-reference-list button span {
    grid-column: 1 / -1;
    overflow: hidden;
    color: #526a74;
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.runtime-field-reference-badge {
    position: absolute;
    top: -1.2rem;
    left: .25rem;
    z-index: 5;
    max-width: calc(100% - .5rem);
    padding: .12rem .4rem;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.25;
    box-shadow: 0 4px 10px rgba(20, 55, 65, .12);
}

.runtime-field-reference-badge span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.render-control {
    position: absolute;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    padding: .25rem;
    background: transparent !important;
}

.render-control.has-field-reference {
    overflow: visible;
}

.render-control label {
    display: grid;
    gap: .35rem;
    color: #41535c;
    font-size: .82rem;
    font-weight: 700;
}

.render-control .render-checkbox-control {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .45rem;
    width: 100%;
    height: 100%;
    min-width: 0;
    color: inherit;
}

.render-control .render-checkbox-control span {
    order: 2;
    min-width: 0;
    overflow-wrap: anywhere;
}

.render-control input, .render-control select, .render-control textarea {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: clamp(.08rem, calc((var(--runtime-control-height, 34px) - 1.35em - 2px) / 2), .55rem) .65rem;
    color: #1d2430;
    background: var(--control-bg, #f8fafb);
    font-weight: 400;
    line-height: 1.25;
    min-height: 0;
}

.render-control textarea {
    padding: .45rem .65rem;
    line-height: 1.35;
}

.render-control .render-checkbox-control input[type="checkbox"] {
    order: 1;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
}

.render-control > input, .render-control > textarea {
    height: 100%;
}

.render-control > select {
    height: 100%;
}

.runtime-combo-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 34px;
}

.runtime-combo-field.has-thumbnail {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem;
    align-items: center;
}

.render-control .runtime-combo-field input,
.render-control .runtime-combo-field select {
    min-width: 0;
    height: 100%;
    min-height: 0;
}

.runtime-combo-thumbnail {
    width: min(36px, var(--runtime-control-height, 36px));
    height: min(36px, var(--runtime-control-height, 36px));
    object-fit: cover;
    border: 1px solid #c9d5d8;
    border-radius: 4px;
    background: #fff;
}

.runtime-file-upload-field {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: .2rem;
    width: 100%;
    height: 100%;
    min-width: 0;
}

.render-control .runtime-file-upload-field input[type="file"] {
    height: 100%;
    min-height: 0;
    padding: .35rem .45rem;
    font-size: .78rem;
}

.runtime-file-upload-field small {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #546873;
    font-size: .72rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.render-label {
    display: flex;
    align-items: center;
    color: #31444e;
    font-weight: 700;
}

.render-tab-container {
    border: 1px solid #d4dee2;
    background: var(--control-bg, #fbfcfc) !important;
    overflow: hidden;
}

.render-tabs {
    display: flex;
    align-items: flex-end;
    height: auto;
    min-height: 36px;
    max-height: 42px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 6px;
    border-bottom: 1px solid #d4dee2;
    background: var(--control-bg, #ffffff);
}

.render-tabs button {
    width: auto;
    height: auto;
    border-right: 1px solid #d4dee2;
    border-bottom: 1px solid #d4dee2;
    border-left: 0;
    border-top: 0;
    border-radius: 0;
    padding: .55rem .85rem;
    color: #31444e;
    background: #eef3f4;
    font-weight: 700;
}

.render-tabs button.active {
    border-top: 2px solid #0f6f7c;
    border-bottom-color: #ffffff;
    background: #ffffff;
}

.render-panel-container {
    background: transparent !important;
    overflow: visible;
}

.render-panel-open-button {
    width: 100%;
    height: 100%;
    border: 1px solid #b8ccd3;
    border-radius: 6px;
    background: #ffffff;
    color: #0f6f7c;
    font-weight: 700;
}

.render-panel-shell {
    position: fixed;
    z-index: 5000;
    display: flex;
    padding: 1rem;
    pointer-events: auto;
}

.render-panel-shell.is-modal {
    inset: 0;
    background: rgba(18, 31, 38, .42);
}

.render-panel-shell.is-floating {
    background: transparent;
}

.render-panel-shell.pos-center {
    align-items: center;
    justify-content: center;
}

.render-panel-shell.pos-top-left {
    align-items: flex-start;
    justify-content: flex-start;
}

.render-panel-shell.pos-top-right {
    align-items: flex-start;
    justify-content: flex-end;
}

.render-panel-shell.pos-bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
}

.render-panel-shell.pos-bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
}

.render-panel-window {
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    border: 1px solid #bdd0d6;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(15, 38, 46, .28);
    overflow: hidden;
}

.render-panel-window.is-resizable {
    resize: both;
    overflow: auto;
}

.render-panel-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 38px;
    padding: .55rem .8rem;
    color: #ffffff;
    background: #0f6f7c;
}

.render-panel-close-button {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 6px;
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}

.render-panel-body {
    position: relative;
    min-height: 180px;
    padding: .75rem;
    overflow: auto;
}

.render-panel-child {
    position: absolute;
}

.render-grid-container {
    border: 1px solid #d4dee2;
    background: #ffffff !important;
    overflow: hidden;
}

.render-grid-container.auto-height {
    overflow: visible;
    height: auto !important;
    min-height: max-content;
}

.render-grid {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.render-grid-container.auto-height .render-grid {
    height: auto;
    overflow: visible;
}

.render-grid strong {
    color: #31444e;
}

.render-grid-title {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .7rem;
    background: #eef3f4;
}

.render-grid-title-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    flex-wrap: wrap;
}

.render-grid-title button,
.render-grid td button {
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .35rem .5rem;
    color: #263740;
    background: #ffffff;
}

.render-grid-title .render-grid-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
}

.render-grid-icon-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.render-grid-icon-button.danger {
    color: #a01818;
}

.render-grid-icon-button:disabled {
    opacity: .45;
}

.render-grid-column-layout {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .45rem .65rem;
    border-top: 1px solid #d9e1e4;
    background: #f8fafb;
}

.runtime-column-strip {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.runtime-column-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 30px;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .25rem .45rem;
    background: #ffffff;
    cursor: grab;
    font-size: .78rem;
    color: #31444e;
}

.runtime-column-chip.dragging {
    opacity: .55;
}

.runtime-column-chip.drop-target {
    border-color: #0b7782;
    box-shadow: inset 0 -2px 0 #0b7782;
}

.runtime-column-chip.selected {
    border-color: var(--accent-color, #0b7f8b);
    background: #e7f7fa;
    box-shadow: inset 0 0 0 2px rgba(11, 127, 139, .18);
}

.runtime-column-order-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
}

.runtime-column-order-tools span {
    margin-right: auto;
    color: #314b57;
    font-size: .78rem;
    font-weight: 800;
}

.runtime-column-order-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
}

.runtime-column-order-tools svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.render-grid-column-layout button {
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .32rem .55rem;
    color: #263740;
    background: #ffffff;
    white-space: nowrap;
}

.render-grid-column-layout button:disabled {
    opacity: .45;
}

.render-grid-filter-panel {
    flex: 0 0 auto;
    display: grid;
    gap: .45rem;
    padding: .55rem .65rem;
    border-top: 1px solid #d9e1e4;
    background: #ffffff;
}

.render-grid-filter-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .55rem;
}

.render-grid-filter-list label {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "title"
        "operator"
        "value";
    align-items: end;
    gap: .3rem;
    border: 1px solid #d9e1e4;
    border-radius: 7px;
    padding: .42rem;
    background: #f8fafb;
    color: #31444e;
    font-size: .78rem;
}

.render-grid-filter-list span {
    grid-area: title;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.render-grid-filter-list select {
    grid-area: operator;
}

.render-grid-filter-list input {
    grid-area: value;
}

.render-grid-filter-list select,
.render-grid-filter-list input {
    min-width: 0;
    width: 100%;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .32rem .4rem;
    color: #1d2430;
    background: #ffffff;
}

.render-grid-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    color: #60717d;
    font-size: .78rem;
}

.render-grid-filter-actions button {
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .3rem .5rem;
    color: #263740;
    background: #ffffff;
}

.render-grid table {
    font-size: .82rem;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.render-grid-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    border-top: 1px solid #d9e1e4;
}

.render-grid th, .render-grid td {
    padding: .55rem .5rem;
    vertical-align: top;
}

.render-grid th.runtime-grid-resizable-header {
    position: relative;
    padding-right: .75rem;
}

.runtime-grid-header-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.runtime-grid-column-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    z-index: 2;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

.runtime-grid-column-resize-handle::after {
    content: "";
    position: absolute;
    top: .4rem;
    bottom: .4rem;
    left: 3px;
    width: 1px;
    background: transparent;
}

.render-grid th.runtime-grid-resizable-header:hover .runtime-grid-column-resize-handle::after,
body.runtime-grid-column-resizing .runtime-grid-column-resize-handle::after {
    background: #0b7f8b;
}

body.runtime-grid-column-resizing {
    cursor: col-resize;
    user-select: none;
}

.render-grid .render-grid-select-cell {
    width: 34px;
    min-width: 34px;
    text-align: center;
}

.render-grid .render-grid-select-cell input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    padding: 0;
}

.render-grid td input,
.render-grid td select {
    width: 100%;
    min-width: 0;
    height: 32px;
    border: 1px solid #c9d5d8;
    border-radius: 5px;
    padding: .45rem .5rem;
    background: #ffffff;
}

.render-grid td.runtime-grid-styled-cell input,
.render-grid td.runtime-grid-styled-cell select,
.runtime-grid-wrap td.runtime-grid-styled-cell input,
.runtime-grid-wrap td.runtime-grid-styled-cell select {
    color: inherit;
    font-weight: inherit;
    background-color: transparent;
}

.render-grid tr.runtime-grid-styled-row > td,
.runtime-grid-wrap tr.runtime-grid-styled-row > td {
    color: inherit;
    font-weight: inherit;
    background-color: inherit;
}

.render-grid tr.runtime-grid-styled-row input,
.render-grid tr.runtime-grid-styled-row select,
.runtime-grid-wrap tr.runtime-grid-styled-row input,
.runtime-grid-wrap tr.runtime-grid-styled-row select {
    color: inherit;
    font-weight: inherit;
    background-color: transparent;
}

.render-grid td.runtime-grid-styled-cell .runtime-query-list-field,
.runtime-grid-wrap td.runtime-grid-styled-cell .runtime-query-list-field {
    color: inherit;
    font-weight: inherit;
}

.render-grid td input[type="checkbox"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    padding: 0;
}

.render-grid .runtime-grid-query-list-field input {
    min-width: 0;
}

.render-grid-pager {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    padding: .45rem .7rem;
    border-top: 1px solid #d9e1e4;
    color: #66757c;
    font-size: .78rem;
    background: #f8fafb;
}

.render-grid-pager button {
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .28rem .5rem;
    color: #263740;
    background: #ffffff;
}

.render-grid-pager button:disabled {
    opacity: .45;
}

.standalone-runtime-grid {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    border: 1px solid #d4dee2;
    background: #ffffff;
    overflow: hidden;
}

.standalone-runtime-grid .render-grid-title {
    flex: 0 0 auto;
    min-height: 44px;
}

.standalone-runtime-grid .runtime-grid-text-button {
    width: auto;
    min-width: 34px;
    padding: 0 .55rem;
    white-space: nowrap;
    font-size: .76rem;
}

.standalone-grid-body {
    flex: 1 1 auto;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto;
}

.standalone-runtime-grid .render-grid-column-layout,
.standalone-runtime-grid .render-grid-filter-panel,
.standalone-runtime-grid .render-grid-pager {
    flex: 0 0 auto;
}

.standalone-runtime-grid table {
    width: max-content;
    table-layout: fixed;
}

.standalone-runtime-grid th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f4f8f9;
}

.standalone-runtime-grid td input,
.standalone-runtime-grid td select {
    min-width: 0;
}

.standalone-grid-column-layout {
    align-items: flex-start;
}

.standalone-column-chip {
    cursor: grab;
}

.standalone-column-chip .runtime-column-width-input {
    width: 68px;
    min-width: 68px;
    height: 26px;
    border: 1px solid #c9d5d8;
    border-radius: 5px;
    padding: .2rem .3rem;
    font-size: .74rem;
}

.storage-editor, .role-picker {
    display: grid;
    gap: .55rem;
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    padding: .65rem;
}

.storage-editor legend, .role-picker legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0 .25rem;
    color: #31444e;
    font-size: .86rem;
    font-weight: 700;
}

.property-help {
    display: block;
    color: #60717d;
    font-size: .78rem;
    line-height: 1.35;
}

.dictionary-hint {
    display: grid;
    gap: .2rem;
    border: 1px solid #d9e1e4;
    border-radius: 6px;
    padding: .5rem;
    color: #41535c;
    background: #f8fafb;
    font-size: .8rem;
}

.dictionary-hint span {
    color: #60717d;
}

.grid-column-editor {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: .4rem;
    border: 1px solid #d9e1e4;
    border-radius: 6px;
    padding: .45rem;
    background: #fbfcfc;
    cursor: grab;
    height: auto;
    min-height: max-content;
    overflow: visible;
}

.grid-column-main-fields {
    display: grid;
    grid-template-columns: 36px 86px minmax(150px, 1.15fr) minmax(190px, 1.35fr) 90px 110px 64px 40px;
    grid-auto-rows: max-content;
    align-items: end;
    gap: .4rem;
    min-width: 0;
}

.grid-column-editor.dragging {
    border-color: #087887;
    background: #edf7f9;
    opacity: .72;
}

.grid-column-editor label {
    display: grid;
    gap: .18rem;
    min-width: 0;
    color: #41535c;
    font-size: .74rem;
    font-weight: 700;
}

.grid-column-editor input,
.grid-column-editor select {
    min-width: 0;
    width: 100%;
    height: 30px;
    border: 1px solid #c9d5d8;
    border-radius: 4px;
    padding: .25rem .35rem;
    font-size: .82rem;
    background: #ffffff;
}

.grid-column-main-fields > .icon-button.mini {
    width: 32px;
    height: 32px;
    align-self: end;
}

.grid-column-main-fields > .icon-button.mini svg,
.toolbox-panel-header .icon-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.grid-column-order-tools,
.index-column-order-tools {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.grid-column-order-tools .drag-handle,
.index-column-order-tools + label {
    min-width: 0;
}

.grid-column-order-tools .icon-button.mini,
.index-column-order-tools .icon-button.mini,
.dashboard-grid-column-actions .icon-button.mini {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: .25rem;
}

.grid-column-expanded-fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: max-content;
    gap: .55rem .65rem;
    align-items: end;
    margin-top: .2rem;
    padding-top: .65rem;
    border-top: 1px dashed #d9e1e4;
    min-width: 0;
    overflow: visible;
}

.grid-column-expanded-fields label.wide {
    min-width: 0;
}

.grid-column-expanded-fields textarea {
    min-height: 78px;
    box-sizing: border-box;
    resize: vertical;
}

.grid-style-rules-editor {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    align-self: stretch;
    width: 100%;
    height: auto;
    min-height: max-content;
    min-width: 0;
    margin-top: .6rem;
    padding-top: .55rem;
    border-top: 1px solid #edf2f4;
    overflow: visible;
}

.grid-style-rules-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-weight: 700;
    color: #41535c;
}

.grid-style-rules-header .secondary-action.mini {
    min-height: 28px;
    padding: .25rem .55rem;
    font-size: .78rem;
}

.grid-style-empty {
    border: 1px dashed #cad8dc;
    border-radius: 5px;
    padding: .55rem;
    color: #60717d;
    background: #f8fbfc;
    font-size: .82rem;
}

.grid-style-rule-list {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: .45rem;
    height: auto;
    min-height: max-content;
    overflow: visible;
}

.grid-style-rule-row {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 88px minmax(110px, .8fr) minmax(220px, 1.6fr) 72px 72px 76px 32px;
    gap: .45rem;
    align-items: end;
    border: 1px solid #d9e1e4;
    border-radius: 5px;
    padding: .45rem;
    background: #ffffff;
    min-width: 0;
    width: 100%;
}

.grid-style-rule-row label {
    font-size: .72rem;
}

.grid-style-rule-row label.condition {
    min-width: 0;
}

.grid-style-rule-row input[type="color"] {
    padding: 2px;
}

.grid-style-rule-row .check-row.compact {
    display: flex;
    align-items: center;
    gap: .35rem;
    height: 30px;
    margin: 0;
    font-size: .78rem;
}

.grid-style-rule-row .check-row.compact input {
    width: auto;
    height: auto;
}

.gantt-preview,
.docflow-gantt {
    width: 100%;
    height: 100%;
    min-height: 120px;
    overflow: hidden;
    border: 1px solid #d9e1e4;
    border-radius: 6px;
    background: #ffffff;
    color: #284250;
    box-sizing: border-box;
}

.gantt-preview {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: .45rem;
    padding: .55rem;
}

.gantt-preview-timeline {
    position: relative;
    min-height: 82px;
    border-left: 92px solid #f3f7f8;
    background: repeating-linear-gradient(90deg, #edf3f5 0, #edf3f5 1px, transparent 1px, transparent 42px);
}

.gantt-preview-timeline span {
    position: absolute;
    height: 14px;
    border-radius: 999px;
}

.gantt-preview-timeline span:nth-child(1) { top: 10px; }
.gantt-preview-timeline span:nth-child(2) { top: 34px; }
.gantt-preview-timeline span:nth-child(3) { top: 58px; }

.docflow-gantt {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.docflow-gantt-header {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    align-items: center;
    padding: .45rem .6rem;
    border-bottom: 1px solid #e4edf0;
    background: #f8fbfc;
    font-size: .84rem;
}

.docflow-gantt-header span {
    color: #60717d;
    font-size: .78rem;
}

.docflow-gantt-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: .45rem .55rem .65rem;
    background: repeating-linear-gradient(90deg, transparent 0, transparent 47px, #eef4f6 48px);
}

.docflow-gantt-scale {
    margin-left: 130px;
    padding-bottom: .35rem;
    color: #60717d;
    font-size: .74rem;
}

.docflow-gantt-row {
    position: relative;
    display: grid;
    grid-template-columns: 124px minmax(180px, 1fr);
    align-items: center;
    min-height: 30px;
    gap: .4rem;
}

.docflow-gantt-label {
    overflow: hidden;
    color: #31444e;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.docflow-gantt-bar {
    position: absolute;
    left: var(--gantt-left, 0);
    top: 7px;
    height: 16px;
    border: 0;
    border-radius: 999px;
    background: var(--gantt-color, #0f7b85);
    box-shadow: 0 1px 2px rgba(0,0,0,.16);
    padding: 0;
    overflow: hidden;
}

button.docflow-gantt-bar {
    cursor: pointer;
}

.docflow-gantt-bar > span {
    display: block;
    height: 100%;
    background: rgba(255,255,255,.34);
}

.frappe-runtime-gantt {
    min-height: 140px;
    overflow: auto;
    padding: 8px;
}

.frappe-runtime-gantt .gantt-container {
    width: 100%;
    max-width: 100%;
}

.frappe-runtime-gantt svg {
    display: block;
    min-width: 100%;
}

.frappe-runtime-gantt .docflow-gantt-selected .bar {
    stroke: #102a43;
    stroke-width: 2px;
}

.grid-style-json-toggle {
    justify-self: start;
    border: 0;
    padding: 0;
    color: #087887;
    background: transparent;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: underline;
}

.grid-column-expanded-fields > label {
    min-width: 0;
}

.grid-column-expanded-fields > label:nth-child(1) {
    grid-column: span 3;
}

.grid-column-expanded-fields > label:nth-child(2) {
    grid-column: span 3;
}

.grid-column-expanded-fields > label:nth-child(3) {
    grid-column: span 4;
}

.grid-column-expanded-fields > label:nth-child(4) {
    grid-column: span 2;
}

.grid-column-expanded-fields > label:nth-child(5),
.grid-column-expanded-fields > label:nth-child(6),
.grid-column-expanded-fields > label:nth-child(7) {
    grid-column: span 3;
}

.grid-column-expanded-fields > label:nth-child(8) {
    grid-column: span 3;
}

.grid-column-expanded-fields .query-list-editor {
    grid-column: 1 / span 9;
}

.grid-column-expanded-fields .query-list-editor textarea {
    width: 100%;
}

.grid-column-expanded-fields .query-list-render-mode {
    grid-column: span 3;
}

.grid-column-expanded-fields .query-list-restrict {
    grid-column: 10 / span 3;
    align-self: center;
}

.grid-column-expanded-fields .check-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-height: 28px;
    white-space: nowrap;
}

.grid-column-expanded-fields .check-row input {
    width: 16px;
    height: 16px;
}

.grid-column-editor label.tiny {
    max-width: 62px;
}

.grid-column-editor label.small {
    max-width: 118px;
}

.grid-column-actions {
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    gap: .25rem;
}

.grid-column-actions button {
    width: 32px;
    height: 32px;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: 0;
    background: #ffffff;
}

.grid-column-actions .danger {
    width: 30px;
    height: 30px;
    border-color: #efb4b4;
    color: #a32323;
    background: #fff7f7;
}

.row-actions {
    display: flex;
    gap: .35rem;
    align-items: center;
    position: relative;
}

.icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 30px;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: 0 .45rem;
    color: #006b75;
    background: #ffffff;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-icon-button-size, 34px);
    height: var(--app-icon-button-size, 34px);
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: 0;
    color: var(--app-icon-color, #0f5260);
    background: var(--app-icon-button-bg, #ffffff);
}

.icon-labels-visible .settings-section .icon-button:has(> svg),
.icon-labels-visible .settings-panel .icon-button:has(> svg),
.icon-labels-visible .trigger-list-panel .icon-button:has(> svg),
.icon-labels-visible .runtime-library-list .icon-button:has(> svg),
.icon-labels-visible .page-heading:not(.workflow-page-heading):not(.form-designer-heading):not(.report-designer-heading):not(.dashboard-designer-heading) .icon-button:has(> svg),
.icon-labels-visible .user-settings-heading .icon-button:has(> svg),
.icon-labels-visible .theme-preview button:has(> svg),
.icon-labels-tree-visible .tree-actions button:has(> svg),
.icon-labels-tree-visible .tree-visibility-toggle:has(> svg),
.icon-labels-document-index-visible .document-index-shell .icon-button:has(> svg),
.icon-labels-document-index-visible .document-index-shell .icon-action:has(> svg),
.icon-labels-document-index-visible .document-index-shell .render-grid-icon-button:has(> svg),
.icon-labels-form-designer-visible .form-designer-heading .icon-button:has(> svg),
.icon-labels-form-designer-visible .winforms-designer .designer-toolbar button:has(> svg),
.icon-labels-form-designer-visible .winforms-designer .designer-toolbar-link:has(> svg),
.icon-labels-form-designer-visible .winforms-designer .designer-import-button:has(> svg),
.icon-labels-report-designer-visible .report-designer-heading .icon-button:has(> svg),
.icon-labels-report-designer-visible .report-designer-shell .icon-button:has(> svg),
.icon-labels-dashboard-designer-visible .dashboard-designer-heading .icon-button:has(> svg),
.icon-labels-dashboard-designer-visible .dashboard-designer-shell .icon-button:has(> svg),
.icon-labels-dashboard-designer-visible .dashboard-viewer .dashboard-pivot-config-button:has(> svg),
.icon-labels-workflow-visible .workflow-page-heading .icon-button:has(> svg),
.icon-labels-workflow-visible .workflow-designer-layout .icon-button:has(> svg),
.session-icon-labels-visible .icon-button:has(> svg),
.session-icon-labels-visible .icon-action:has(> svg),
.session-icon-labels-visible .render-grid-icon-button:has(> svg),
.session-icon-labels-visible .designer-toolbar button:has(> svg),
.session-icon-labels-visible .designer-toolbar-link:has(> svg),
.session-icon-labels-visible .designer-import-button:has(> svg) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: var(--app-icon-button-size, 34px);
    gap: .35rem;
    padding-inline: .55rem;
}

.icon-labels-visible .settings-section .icon-button:has(> svg)::after,
.icon-labels-visible .settings-panel .icon-button:has(> svg)::after,
.icon-labels-visible .trigger-list-panel .icon-button:has(> svg)::after,
.icon-labels-visible .runtime-library-list .icon-button:has(> svg)::after,
.icon-labels-visible .page-heading:not(.workflow-page-heading):not(.form-designer-heading):not(.report-designer-heading):not(.dashboard-designer-heading) .icon-button:has(> svg)::after,
.icon-labels-visible .user-settings-heading .icon-button:has(> svg)::after,
.icon-labels-visible .theme-preview button:has(> svg)::after,
.icon-labels-tree-visible .tree-actions button:has(> svg)::after,
.icon-labels-tree-visible .tree-visibility-toggle:has(> svg)::after,
.icon-labels-document-index-visible .document-index-shell .icon-button:has(> svg)::after,
.icon-labels-document-index-visible .document-index-shell .icon-action:has(> svg)::after,
.icon-labels-document-index-visible .document-index-shell .render-grid-icon-button:has(> svg)::after,
.icon-labels-form-designer-visible .form-designer-heading .icon-button:has(> svg)::after,
.icon-labels-form-designer-visible .winforms-designer .designer-toolbar button:has(> svg)::after,
.icon-labels-form-designer-visible .winforms-designer .designer-toolbar-link:has(> svg)::after,
.icon-labels-form-designer-visible .winforms-designer .designer-import-button:has(> svg)::after,
.icon-labels-report-designer-visible .report-designer-heading .icon-button:has(> svg)::after,
.icon-labels-report-designer-visible .report-designer-shell .icon-button:has(> svg)::after,
.icon-labels-dashboard-designer-visible .dashboard-designer-heading .icon-button:has(> svg)::after,
.icon-labels-dashboard-designer-visible .dashboard-designer-shell .icon-button:has(> svg)::after,
.icon-labels-dashboard-designer-visible .dashboard-viewer .dashboard-pivot-config-button:has(> svg)::after,
.icon-labels-workflow-visible .workflow-page-heading .icon-button:has(> svg)::after,
.icon-labels-workflow-visible .workflow-designer-layout .icon-button:has(> svg)::after,
.session-icon-labels-visible .icon-button:has(> svg)::after,
.session-icon-labels-visible .icon-action:has(> svg)::after,
.session-icon-labels-visible .render-grid-icon-button:has(> svg)::after,
.session-icon-labels-visible .designer-toolbar button:has(> svg)::after,
.session-icon-labels-visible .designer-toolbar-link:has(> svg)::after,
.session-icon-labels-visible .designer-import-button:has(> svg)::after {
    content: attr(title);
    font-size: var(--app-icon-text-size, 12px);
    font-weight: 700;
    line-height: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-icon-labels-hidden .icon-button:has(> svg),
.session-icon-labels-hidden .icon-action:has(> svg),
.session-icon-labels-hidden .render-grid-icon-button:has(> svg),
.session-icon-labels-hidden .designer-toolbar button:has(> svg),
.session-icon-labels-hidden .designer-toolbar-link:has(> svg),
.session-icon-labels-hidden .designer-import-button:has(> svg) {
    width: var(--app-icon-button-size, 34px) !important;
    min-width: var(--app-icon-button-size, 34px) !important;
    gap: 0 !important;
    padding-inline: 0 !important;
}

.session-icon-labels-hidden .icon-button:has(> svg)::after,
.session-icon-labels-hidden .icon-action:has(> svg)::after,
.session-icon-labels-hidden .render-grid-icon-button:has(> svg)::after,
.session-icon-labels-hidden .designer-toolbar button:has(> svg)::after,
.session-icon-labels-hidden .designer-toolbar-link:has(> svg)::after,
.session-icon-labels-hidden .designer-import-button:has(> svg)::after {
    content: none !important;
}

.row-action-panel {
    position: absolute;
    top: calc(100% + .25rem);
    right: 0;
    z-index: 12;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    width: max-content;
    max-width: min(360px, calc(100vw - 2rem));
    padding: .45rem;
    border: 1px solid #cfe0e6;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(20, 42, 52, .18);
}

.document-index-shell .row-action-panel {
    position: fixed;
    top: calc(var(--action-menu-y, 0px) + 2.25rem);
    right: max(.75rem, calc(100vw - var(--action-menu-x, 0px) - 2.25rem));
    left: auto;
    z-index: 1200;
}

.document-index-shell td.row-actions:has(.row-action-panel) {
    z-index: 1201;
}

.icon-button svg,
.icon-action svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-button.primary {
    border-color: var(--app-button-border, var(--app-primary, #0f6f7c));
    color: var(--app-button-text, #ffffff);
    background: var(--app-button-bg, var(--app-primary, #0f6f7c));
}

.icon-button.danger {
    border-color: #efb4b4;
    color: #a32323;
    background: #fff7f7;
}

.icon-button:disabled {
    opacity: .45;
}

.icon-set-thin .icon-button svg,
.icon-set-thin .topbar-icon-button svg,
.icon-set-thin .document-icon-action svg,
.icon-set-thin.icon-set-preview svg {
    stroke-width: 1.25;
}

.icon-set-bold .icon-button svg,
.icon-set-bold .topbar-icon-button svg,
.icon-set-bold .document-icon-action svg,
.icon-set-bold.icon-set-preview svg {
    stroke-width: 2.9;
}

.icon-set-solid .icon-button svg,
.icon-set-solid .topbar-icon-button svg,
.icon-set-solid .document-icon-action svg,
.icon-set-solid.icon-set-preview svg {
    fill: currentColor;
    stroke-width: 1.2;
}

.icon-set-soft .icon-button,
.icon-set-soft .topbar-icon-button,
.icon-set-soft .document-icon-action,
.icon-set-soft.icon-set-preview span {
    border-color: color-mix(in srgb, var(--app-icon-color, #0f5260) 20%, #ffffff);
    background: color-mix(in srgb, var(--app-icon-color, #0f5260) 10%, var(--app-icon-button-bg, #ffffff));
}

.icon-set-round .icon-button,
.icon-set-round .topbar-icon-button,
.icon-set-round .document-icon-action,
.icon-set-round.icon-set-preview span {
    border-radius: 999px;
}

.icon-set-technical .icon-button,
.icon-set-technical .topbar-icon-button,
.icon-set-technical .document-icon-action,
.icon-set-technical.icon-set-preview span {
    border-radius: 3px;
}

.icon-set-technical .icon-button svg,
.icon-set-technical .topbar-icon-button svg,
.icon-set-technical .document-icon-action svg,
.icon-set-technical.icon-set-preview svg {
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.icon-set-compact .icon-button,
.icon-set-compact .topbar-icon-button,
.icon-set-compact .document-icon-action,
.icon-set-compact.icon-set-preview span {
    width: max(26px, calc(var(--app-icon-button-size, 34px) - 6px));
    height: max(26px, calc(var(--app-icon-button-size, 34px) - 6px));
}

.icon-set-contrast .icon-button,
.icon-set-contrast .topbar-icon-button,
.icon-set-contrast .document-icon-action,
.icon-set-contrast.icon-set-preview span {
    color: var(--app-button-text, #ffffff);
    background: var(--app-button-bg, var(--app-primary, #0f6f7c));
    border-color: var(--app-button-border, var(--app-primary, #0f6f7c));
}

.icon-set-outline .icon-button,
.icon-set-outline .topbar-icon-button,
.icon-set-outline .document-icon-action,
.icon-set-outline.icon-set-preview span {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app-icon-color, #0f5260) 35%, transparent);
}

.icon-labels-visible.icon-set-compact .settings-section .icon-button:has(> svg),
.icon-labels-tree-visible.icon-set-compact .tree-actions button:has(> svg),
.icon-labels-document-index-visible.icon-set-compact .document-index-shell .icon-button:has(> svg),
.icon-labels-form-designer-visible.icon-set-compact .winforms-designer .designer-toolbar button:has(> svg),
.icon-labels-report-designer-visible.icon-set-compact .report-designer-heading .icon-button:has(> svg),
.icon-labels-dashboard-designer-visible.icon-set-compact .dashboard-designer-heading .icon-button:has(> svg),
.icon-labels-workflow-visible.icon-set-compact .workflow-page-heading .icon-button:has(> svg),
.session-icon-labels-visible.icon-set-compact .icon-button:has(> svg),
.icon-labels-topbar-visible.icon-set-compact .topbar-icon-button:has(> svg),
.icon-labels-visible.icon-set-compact .document-icon-action:has(> svg),
.icon-labels-document-index-visible.icon-set-compact .render-grid-icon-button:has(> svg),
.icon-set-compact.icon-set-preview.icon-labels-visible span {
    width: auto;
    min-width: max(26px, calc(var(--app-icon-button-size, 34px) - 6px));
}

.attachments-workspace {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1rem;
    min-height: 620px;
}

.attachments-list, .attachment-preview {
    border: 1px solid #d9e1e4;
    border-radius: 8px;
    background: #ffffff;
}

.attachments-list {
    display: grid;
    align-content: start;
    gap: .45rem;
    padding: .75rem;
}

.attachments-list button {
    display: grid;
    gap: .15rem;
    border: 1px solid #d9e1e4;
    border-radius: 6px;
    padding: .55rem .65rem;
    text-align: left;
    background: #ffffff;
}

.attachments-list button.active {
    border-color: #0f6f7c;
    background: #eef9fb;
}

.attachments-list span {
    color: #60717d;
    font-size: .78rem;
}

.attachment-preview {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.attachment-preview-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: .75rem 1rem;
    border-bottom: 1px solid #d9e1e4;
}

.attachment-preview-header small {
    display: block;
    margin-top: .15rem;
    color: #60717d;
    font-size: .78rem;
}

.attachment-preview iframe,
.attachment-preview img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    border: 0;
    object-fit: contain;
}

.preview-placeholder {
    display: grid;
    place-content: center;
    gap: .35rem;
    min-height: 560px;
    color: #41535c;
    text-align: center;
}

.download-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    justify-self: center;
    margin-top: .35rem;
    border: 1px solid #0f6f7c;
    border-radius: 6px;
    padding: .55rem .8rem;
    color: #0f6f7c;
    background: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.download-action svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.document-index-shell tr.is-selected td {
    background: color-mix(in srgb, var(--accent-color, #0f6f7c) 8%, #ffffff);
}

.workflow-row-detail td {
    background: #f7fbfc;
    padding: .45rem .6rem;
}

.workflow-inline-panel {
    border: 1px solid #cfe0e6;
    border-radius: 6px;
    background: #ffffff;
    padding: .45rem;
    font-size: var(--app-font-size, 14px);
}

.workflow-inline-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .35rem;
}

.workflow-inline-header span {
    color: #536773;
    font-size: .68rem;
    margin-right: .5rem;
}

.workflow-phase-strip {
    display: grid;
    grid-auto-columns: minmax(280px, 360px);
    grid-auto-flow: row;
    gap: .45rem;
    overflow-x: auto;
    padding: .15rem .05rem .28rem;
    font-size: var(--app-font-size, 14px);
}

.workflow-reset-preview {
    display: grid;
    gap: .25rem;
    margin: .4rem 0 .65rem;
    border-left: 3px solid #0f6f7c;
    background: #f3f8fa;
    padding: .5rem .65rem;
    font-size: .84rem;
}

.workflow-reset-preview ul {
    margin: .2rem 0 0 1rem;
    padding: 0;
}

.workflow-phase-chip {
    position: relative;
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: .12rem .42rem;
    min-width: 0;
    min-height: 78px;
    max-width: 100%;
    grid-column: var(--workflow-phase-column, auto);
    border: 1px solid #d8e2e7;
    border-radius: 7px;
    padding: .42rem .5rem .42rem;
    background: #ffffff;
}

.grid-columns-floating .grid-column-list {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
}

.grid-columns-floating .grid-column-list > .grid-column-editor {
    align-self: start;
    height: auto;
    min-height: max-content;
    overflow: visible;
}

.grid-columns-floating .grid-style-rules-editor {
    align-items: stretch;
}

.document-index-shell .workflow-phase-chip {
    border-color: var(--workflow-phase-color, #d8e2e7);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--workflow-phase-color, #0f6f7c) 48%, transparent);
}

.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) {
    align-self: center;
    width: 104px;
    min-height: 72px;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: .45rem;
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--workflow-phase-color, #0f6f7c) 30%, transparent);
}

.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) .workflow-status-icon,
.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) .workflow-completion-indicator,
.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) .workflow-signers {
    display: none;
}

.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) strong,
.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) .workflow-phase-id,
.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) .workflow-branches,
.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) .workflow-phase-indicators {
    grid-column: 1;
    padding-right: 0;
}

.workflow-phase-strip.is-simple {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 560px;
    overflow-x: visible;
}

.workflow-phase-chip.is-simple {
    grid-column: auto !important;
    grid-template-columns: 18px minmax(0, 1fr);
    min-height: 56px;
    padding: .38rem .48rem;
    box-shadow: inset 3px 0 0 var(--workflow-phase-color, #0f6f7c);
}

.workflow-phase-chip.is-simple strong {
    padding-right: 0;
}

.workflow-phase-chip.is-simple .workflow-phase-id {
    display: none;
}

.workflow-phase-chip.is-simple .workflow-signers {
    margin-top: .08rem;
}

.workflow-phase-chip.is-simple .workflow-phase-quick-actions {
    position: absolute;
    right: .35rem;
    bottom: .35rem;
}

.workflow-phase-chip strong {
    padding-right: 5.7rem;
    font-size: calc(.88rem * var(--app-user-font-scale, 1));
    line-height: 1.12;
}

.workflow-phase-chip strong,
.workflow-phase-chip .workflow-phase-id,
.workflow-phase-chip .workflow-completion-indicator,
.workflow-phase-chip .workflow-branches,
.workflow-phase-chip .workflow-signers,
.workflow-phase-chip .workflow-sign-actions,
.workflow-phase-chip .workflow-phase-indicators {
    grid-column: 2;
}

.workflow-phase-id {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: .06rem .32rem;
    color: #526674;
    background: #edf4f6;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.workflow-readonly-node .workflow-phase-id {
    display: inline-flex;
    margin: .18rem auto .06rem;
}

.workflow-phase-indicators {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
    margin-top: .08rem;
}

.workflow-phase-indicators.compact {
    justify-content: center;
    margin: .25rem 0 .1rem;
}

.workflow-phase-indicator {
    display: inline-flex;
    align-items: center;
    gap: .18rem;
    width: fit-content;
    border: 1px solid #cfdee4;
    border-radius: 999px;
    padding: .08rem .34rem;
    color: #315363;
    background: #f4fafb;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.workflow-phase-indicator svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.workflow-phase-indicator.post {
    color: #294d7a;
    border-color: #c7d8ef;
    background: #f2f7ff;
}

.workflow-phase-indicator.timer {
    color: #805300;
    border-color: #e0bd63;
    background: #fff8dc;
}

.workflow-completion-indicator {
    position: absolute;
    top: .35rem;
    right: .4rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .18rem;
    width: fit-content;
    border: 1px solid #cfdee4;
    border-radius: 999px;
    padding: .08rem .34rem;
    color: #315363;
    background: #f4fafb;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.workflow-readonly-node .workflow-completion-indicator {
    top: .28rem;
    right: .28rem;
    max-width: calc(100% - .56rem);
}

.workflow-completion-indicator svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.workflow-completion-indicator.is-flow {
    color: #294d7a;
    border-color: #c7d8ef;
    background: #f2f7ff;
}

.workflow-completion-indicator.is-timeout {
    color: #805300;
    border-color: #e0bd63;
    background: #fff8dc;
}

.workflow-completion-indicator.is-condition {
    color: #6b3b8c;
    border-color: #d9c4ef;
    background: #fbf6ff;
}

.workflow-log-panel {
    margin-top: .65rem;
    border: 1px solid #d8e5ea;
    border-radius: 7px;
    background: #fbfdfe;
}

.workflow-log-panel summary {
    cursor: pointer;
    padding: .48rem .65rem;
    color: #234451;
    font-size: .78rem;
    font-weight: 800;
}

.workflow-log-panel > div {
    display: grid;
    gap: .35rem;
    padding: 0 .65rem .65rem;
}

.workflow-log-panel p {
    display: grid;
    grid-template-columns: minmax(110px, auto) minmax(80px, auto) minmax(120px, 1fr);
    gap: .35rem .55rem;
    margin: 0;
    border-left: 3px solid #87a7b3;
    background: #f4f8fa;
    padding: .45rem .55rem;
    color: #183442;
    font-size: .76rem;
}

.workflow-log-panel p.error {
    border-left-color: #b42318;
    background: #fff4f2;
    color: #7a271a;
}

.workflow-log-panel em {
    grid-column: 1 / -1;
    font-style: normal;
}

.workflow-log-modal {
    width: min(980px, calc(100vw - 40px));
    max-height: calc(100vh - 64px);
}

.workflow-log-list {
    display: grid;
    gap: .55rem;
    max-height: calc(100vh - 150px);
    overflow: auto;
    padding: .75rem;
}

.workflow-log-entry {
    display: grid;
    grid-template-columns: 128px 64px minmax(70px, 110px) minmax(150px, 220px) minmax(180px, 1fr);
    align-items: center;
    gap: .4rem .7rem;
    border: 1px solid #d7e4ea;
    border-left: 4px solid #0f6f7c;
    border-radius: 7px;
    background: #f8fbfc;
    padding: .42rem .65rem;
    min-height: 36px;
    color: #244653;
    font-size: .78rem;
}

.workflow-log-entry.error {
    border-left-color: #b42318;
    background: #fff4f2;
}

.workflow-log-entry > strong,
.workflow-log-entry > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workflow-log-entry.error {
    color: #7a271a;
}

.workflow-log-entry p {
    min-width: 0;
    margin: 0;
    color: #1e3540;
    font-size: .78rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 820px) {
    .workflow-log-modal {
        width: min(980px, calc(100vw - 16px));
    }

    .workflow-log-list {
        max-height: calc(100vh - 132px);
        padding: .55rem;
    }

    .workflow-log-entry {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: .25rem;
        padding: .5rem .6rem;
    }

    .workflow-log-entry > strong,
    .workflow-log-entry > span,
    .workflow-log-entry p {
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr);
        gap: .45rem;
        align-items: start;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .workflow-log-entry > strong::before,
    .workflow-log-entry > span::before,
    .workflow-log-entry p::before {
        content: attr(data-label);
        color: #60717d;
        font-weight: 800;
    }
}

.workflow-status-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    color: #6b7b85;
    border-radius: 999px;
}

.workflow-status-icon svg,
.workflow-signer svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.workflow-phase-chip.is-running .workflow-status-icon {
    color: #9a6a00;
    background: #fff6c4;
}

.workflow-phase-chip.is-running {
    border-color: #d49a00;
    color: #5f4200;
    background: #fff3b0;
}

.workflow-phase-chip.is-closed .workflow-status-icon {
    color: #166534;
    background: #cdeed8;
}

.workflow-phase-chip.is-closed {
    border-color: #1f8a45;
    color: #14532d;
    background: #c7efd5;
}

.workflow-phase-chip.is-pending .workflow-status-icon {
    color: #71808a;
    background: #ffffff;
}

.settings-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}

.connected-users-list {
    display: grid;
    gap: .45rem;
}

.connected-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .65rem;
    border: 1px solid #dbe5e8;
    border-radius: 6px;
    background: #f8fbfc;
}

.connected-user-row > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.secondary-action.danger {
    color: #8a1f17;
    border-color: #e1b8b4;
}

.secondary-action.danger:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.runtime-query-list-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 34px;
}

.runtime-query-list-field.has-thumbnail {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.render-control .runtime-query-list-field input {
    min-width: 0;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.render-control .runtime-query-list-button {
    width: max(28px, min(34px, var(--runtime-control-height, 34px)));
    min-width: max(28px, min(34px, var(--runtime-control-height, 34px)));
    height: 100%;
    min-height: 0;
    padding: 0;
    display: inline-grid;
    place-items: center;
    align-self: stretch;
    box-sizing: border-box;
    border: 1px solid #c9d5d8;
    border-left: 0;
    border-radius: 0 6px 6px 0;
    color: var(--app-icon-color, #0f5260);
    background: #ffffff;
}

.render-control .runtime-query-list-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.render-control .runtime-query-list-thumbnail {
    width: max(28px, min(34px, var(--runtime-control-height, 34px)));
    min-width: max(28px, min(34px, var(--runtime-control-height, 34px)));
    height: 100%;
    min-height: 0;
    object-fit: cover;
    align-self: stretch;
    box-sizing: border-box;
    border: 1px solid #c9d5d8;
    border-left: 0;
    border-radius: 0 6px 6px 0;
    background: #f8fbfc;
}

.runtime-query-list-field.has-thumbnail .runtime-query-list-button {
    border-radius: 0;
}

.query-list-dialog {
    width: min(960px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: .75rem;
    padding: 1rem;
    border-radius: 8px;
    background: var(--app-surface, #ffffff);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .22);
}

.query-list-dialog header,
.query-list-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.query-list-search-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: .75rem;
}

.query-list-search-row label {
    flex: 1 1 auto;
    display: grid;
    gap: .25rem;
    margin: 0;
    min-width: 12rem;
}

.query-list-search-row small {
    flex: 0 0 auto;
    padding-bottom: .5rem;
    white-space: nowrap;
}

.query-list-table-wrap {
    min-height: 0;
    overflow: auto;
    border: 1px solid #dbe5e8;
    border-radius: 6px;
}

.query-list-table {
    width: 100%;
    border-collapse: collapse;
}

.query-list-table th,
.query-list-table td {
    padding: .45rem .55rem;
    border-bottom: 1px solid #e4ecef;
    text-align: left;
    white-space: nowrap;
}

.query-list-thumbnail-cell {
    width: 56px;
    min-width: 56px;
}

.query-list-thumbnail-cell img {
    width: 40px;
    height: 40px;
    display: block;
    object-fit: cover;
    border: 1px solid #d8e3e7;
    border-radius: 4px;
    background: #f8fbfc;
}

.query-list-table tbody tr {
    cursor: pointer;
}

.query-list-table tbody tr:hover,
.query-list-table tbody tr.selected {
    background: #eaf6f8;
}

@media (max-width: 640px) {
    .query-list-search-row {
        align-items: stretch;
        flex-direction: column;
    }

    .query-list-search-row small {
        padding-bottom: 0;
        white-space: normal;
    }
}

.workflow-phase-chip.is-pending {
    border-color: #cbd8de;
    color: #263740;
    background: #ffffff;
    box-shadow: none;
}

.workflow-phase-chip.is-skipped {
    border-color: #cbd8de;
    color: #60717d;
    background: #ffffff;
    box-shadow: none;
}

.workflow-branches {
    display: grid;
    gap: .08rem;
    margin-top: .1rem;
}

.workflow-branches span {
    width: fit-content;
    border-radius: 999px;
    padding: .08rem .32rem;
    background: #eef6f8;
    color: #315363;
    font-size: .66rem;
    line-height: 1.25;
}

.workflow-signers {
    display: grid;
    gap: .08rem;
    margin-top: .18rem;
}

.workflow-signer {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    flex-wrap: wrap;
    max-width: 100%;
    width: fit-content;
    border-radius: 999px;
    padding: .08rem .34rem;
    font-size: .68rem;
    line-height: 1.25;
    background: #eef4f6;
}

.document-index-shell .workflow-signers {
    position: relative;
    gap: .12rem;
    margin-top: .2rem;
    padding-left: .7rem;
}

.document-index-shell .workflow-signers::before {
    content: "";
    position: absolute;
    left: .18rem;
    top: .1rem;
    bottom: .1rem;
    width: 1px;
    background: #cbd9df;
}

.document-index-shell .workflow-signer {
    position: relative;
}

.document-index-shell .workflow-signer::before {
    content: "";
    position: absolute;
    left: -.52rem;
    width: .42rem;
    height: 1px;
    background: #cbd9df;
}

.workflow-signer b {
    font-size: calc(.62rem * var(--app-user-font-scale, 1));
    font-weight: 700;
    margin-left: .08rem;
    opacity: .82;
}

.workflow-signer-date {
    margin-left: .08rem;
    padding-left: .28rem;
    border-left: 1px solid currentColor;
    font-size: calc(.62rem * var(--app-user-font-scale, 1));
    font-weight: 600;
    opacity: .78;
    white-space: nowrap;
}

.workflow-signer.is-ok {
    color: #166534;
    background: #e5f7ec;
}

.workflow-signer.is-ko {
    color: #991b1b;
    background: #fde8e8;
}

.workflow-signer.is-missing {
    color: #596a73;
}

.workflow-signer.muted {
    color: #71808a;
}

.workflow-debug-sign-actions {
    display: inline-flex;
    align-items: center;
    gap: .12rem;
    margin-left: .18rem;
}

.workflow-debug-sign-date {
    display: inline-flex;
    align-items: center;
    gap: .14rem;
    margin-left: .18rem;
}

.workflow-debug-sign-date input {
    width: 142px;
    height: 22px;
    border: 1px solid #bad1d9;
    border-radius: 5px;
    padding: .1rem .22rem;
    font-size: calc(.68rem * var(--app-user-font-scale, 1));
    color: #14313d;
    background: #ffffff;
}

.workflow-debug-sign {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid #bad1d9;
    border-radius: 5px;
    background: #ffffff;
    color: #0f7f87;
    cursor: pointer;
}

.workflow-debug-sign svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.workflow-debug-sign.ok {
    color: #15803d;
}

.workflow-debug-sign.danger {
    color: #b91c1c;
}

.workflow-debug-sign.save {
    color: #0f7f87;
}

.icon-labels-workflow-visible .workflow-inline-header .document-icon-action:has(> svg)::after,
.icon-labels-workflow-visible .workflow-inline-header .icon-button:has(> svg)::after,
.session-icon-labels-visible .workflow-inline-header .document-icon-action:has(> svg)::after,
.session-icon-labels-visible .workflow-inline-header .icon-button:has(> svg)::after {
    max-width: 14rem;
}

.icon-labels-workflow-visible .workflow-phase-chip .document-icon-action:has(> svg),
.icon-labels-workflow-visible .workflow-phase-chip .icon-button:has(> svg),
.icon-labels-workflow-visible .workflow-phase-chip .workflow-debug-sign:has(> svg),
.session-icon-labels-visible .workflow-phase-chip .document-icon-action:has(> svg),
.session-icon-labels-visible .workflow-phase-chip .icon-button:has(> svg),
.session-icon-labels-visible .workflow-phase-chip .workflow-debug-sign:has(> svg) {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
}

.icon-labels-workflow-visible .workflow-phase-chip .document-icon-action:has(> svg)::after,
.icon-labels-workflow-visible .workflow-phase-chip .icon-button:has(> svg)::after,
.icon-labels-workflow-visible .workflow-phase-chip .workflow-debug-sign:has(> svg)::after,
.session-icon-labels-visible .workflow-phase-chip .document-icon-action:has(> svg)::after,
.session-icon-labels-visible .workflow-phase-chip .icon-button:has(> svg)::after,
.session-icon-labels-visible .workflow-phase-chip .workflow-debug-sign:has(> svg)::after {
    content: none;
}

.icon-labels-workflow-visible .workflow-inline-panel .document-icon-action:has(> svg),
.icon-labels-workflow-visible .workflow-inline-panel .icon-button:has(> svg),
.session-icon-labels-visible .workflow-inline-panel .document-icon-action:has(> svg),
.session-icon-labels-visible .workflow-inline-panel .icon-button:has(> svg) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: var(--app-icon-button-size, 34px);
    gap: .35rem;
    padding-inline: .55rem;
}

.icon-labels-workflow-visible .workflow-inline-panel .document-icon-action:has(> svg)::after,
.icon-labels-workflow-visible .workflow-inline-panel .icon-button:has(> svg)::after,
.session-icon-labels-visible .workflow-inline-panel .document-icon-action:has(> svg)::after,
.session-icon-labels-visible .workflow-inline-panel .icon-button:has(> svg)::after {
    content: attr(title);
    max-width: 14rem;
    font-size: var(--app-icon-text-size, 12px);
    font-weight: 700;
    line-height: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-labels-workflow-visible .workflow-inline-panel .workflow-debug-sign:has(> svg),
.session-icon-labels-visible .workflow-inline-panel .workflow-debug-sign:has(> svg) {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
}

.icon-labels-workflow-visible .workflow-inline-panel .workflow-debug-sign:has(> svg)::after,
.session-icon-labels-visible .workflow-inline-panel .workflow-debug-sign:has(> svg)::after {
    content: none;
}

.icon-labels-document-index-visible:not(.icon-labels-workflow-visible):not(.session-icon-labels-visible) .workflow-inline-panel .document-icon-action:has(> svg),
.icon-labels-document-index-visible:not(.icon-labels-workflow-visible):not(.session-icon-labels-visible) .workflow-inline-panel .icon-button:has(> svg),
.icon-labels-visible:not(.icon-labels-workflow-visible):not(.session-icon-labels-visible) .workflow-inline-panel .document-icon-action:has(> svg) {
    width: var(--app-icon-button-size, 34px) !important;
    min-width: var(--app-icon-button-size, 34px) !important;
    gap: 0 !important;
    padding-inline: 0 !important;
}

.icon-labels-document-index-visible:not(.icon-labels-workflow-visible):not(.session-icon-labels-visible) .workflow-inline-panel .document-icon-action:has(> svg)::after,
.icon-labels-document-index-visible:not(.icon-labels-workflow-visible):not(.session-icon-labels-visible) .workflow-inline-panel .icon-button:has(> svg)::after,
.icon-labels-visible:not(.icon-labels-workflow-visible):not(.session-icon-labels-visible) .workflow-inline-panel .document-icon-action:has(> svg)::after {
    content: none !important;
}

.workflow-sign-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .24rem;
    margin-top: .25rem;
}

.workflow-sign-actions input {
    min-width: 0;
    width: 120px;
    height: 28px;
    border: 1px solid #c8d7dd;
    border-radius: 5px;
    padding: .2rem .35rem;
    font-size: calc(.78rem * var(--app-user-font-scale, 1));
}

.document-index-shell .workflow-phase-quick-actions {
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    gap: .22rem;
    margin-top: .2rem;
}

.document-index-shell .workflow-phase-quick-actions .icon-button {
    width: 28px;
    height: 28px;
}

.document-index-shell .workflow-assignee-actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .24rem;
    margin-top: .12rem;
}

.document-index-shell .workflow-mini-action {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    width: fit-content;
    min-height: 24px;
    border: 1px solid #c8d7dd;
    border-radius: 999px;
    padding: .12rem .42rem;
    color: #315363;
    background: #ffffff;
    font-size: calc(.66rem * var(--app-user-font-scale, 1));
    font-weight: 800;
    line-height: 1;
}

.document-index-shell .workflow-mini-action svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.document-index-shell .workflow-assignee-editor {
    grid-column: 2;
    display: grid;
    gap: .4rem;
    margin-top: .2rem;
    border: 1px solid #cbdce2;
    border-radius: 7px;
    padding: .42rem;
    background: #f8fbfc;
}

.document-index-shell .workflow-assignee-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: .22rem .4rem;
    max-height: 130px;
    overflow: auto;
}

.document-index-shell .workflow-assignee-list label {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    font-size: .72rem;
    color: #31444e;
}

.document-index-shell .workflow-assignee-list span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-index-shell .workflow-assignee-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: .35rem;
    flex-wrap: wrap;
}

.primary-action.compact,
.secondary-action.compact {
    min-height: 28px;
    padding: .22rem .55rem;
    font-size: .74rem;
}

.workflow-phase-menu {
    z-index: 5100;
}

.workflow-phase-menu strong {
    padding: .35rem .5rem .2rem;
    color: #31444e;
    font-size: .82rem;
}

.modal-backdrop {
    position: fixed;
    inset: 48px 0 0 0;
    z-index: 6200;
    display: grid;
    place-items: center;
    padding: .75rem;
    background: rgb(15 23 42 / .28);
    overflow: auto;
}

.modal-card {
    min-width: 0;
    min-height: 0;
    border: 1px solid #cbd8de;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(20, 42, 52, .3);
}

.modal-card > header,
.modal-card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .9rem;
    background: #ffffff;
}

.modal-card > header {
    border-bottom: 1px solid #d8e2e7;
}

.modal-card > footer {
    border-top: 1px solid #d8e2e7;
}

.modal-card > header h3 {
    margin: 0;
}

.theme-mode-dark {
    color-scheme: dark;
    min-height: 100vh;
    color: var(--app-text, #e8eef2);
    background: var(--app-bg, #0f151b);
}

.theme-mode-dark .document-main,
.theme-mode-dark .content {
    background: var(--app-content-bg, #0f151b);
    color: var(--app-content-text, #e8eef2);
}

.theme-mode-dark .setup-card,
.theme-mode-dark .admin-panel,
.theme-mode-dark .admin-editor,
.theme-mode-dark .settings-section,
.theme-mode-dark .settings-section-body,
.theme-mode-dark .table-shell,
.theme-mode-dark .document-index-shell,
.theme-mode-dark .index-layout-modal,
.theme-mode-dark .copy-document-modal,
.theme-mode-dark .workflow-inline-panel,
.theme-mode-dark .row-action-panel,
.theme-mode-dark .workflow-modal,
.theme-mode-dark .workflow-log-modal,
.theme-mode-dark .details-panel,
.theme-mode-dark .tree-panel,
.theme-mode-dark .form-canvas,
.theme-mode-dark .metric,
.theme-mode-dark .feature-grid article,
.theme-mode-dark .dashboard-detail,
.theme-mode-dark .dashboard-viewer,
.theme-mode-dark .dashboard-workspace,
.theme-mode-dark .dashboard-item,
.theme-mode-dark .dashboard-title-band,
.theme-mode-dark .modal-card,
.theme-mode-dark .dashboard-column-editor-modal,
.theme-mode-dark .dashboard-pivot-editor-modal,
.theme-mode-dark .dashboard-pivot-area,
.theme-mode-dark .dashboard-pivot-field-browser,
.theme-mode-dark .dashboard-pivot-options-bar,
.theme-mode-dark .dashboard-grid-column-row,
.theme-mode-dark .dashboard-list-item,
.theme-mode-dark .top-config-panel,
.theme-mode-dark .top-theme-panel,
.theme-mode-dark .top-user-panel,
.theme-mode-dark .todo-summary-strip article {
    border-color: #31434e;
    background: #17212a;
    color: #e8eef2;
}

.theme-mode-dark .document-tree-rail,
.theme-mode-dark .tree-shell,
.theme-mode-dark .tree-empty,
.theme-mode-dark .doc-tree-node,
.theme-mode-dark .doc-tree-toggle,
.theme-mode-dark .doc-tree-label {
    border-color: #31434e;
    background: var(--app-tree-bg, #121b22);
    color: var(--app-tree-text, #e8eef2);
}

.theme-mode-dark .doc-tree-node:hover,
.theme-mode-dark .doc-tree-node.doc-type,
.theme-mode-dark .doc-tree-node.virtual-group {
    background: #1d2a33;
    color: #e8eef2;
}

.theme-mode-dark .tree-title,
.theme-mode-dark .tree-title small,
.theme-mode-dark .doc-tree-node span,
.theme-mode-dark .doc-tree-toggle span,
.theme-mode-dark .doc-tree-node strong {
    color: #e8eef2;
}

.theme-mode-dark .tree-actions button,
.theme-mode-dark .tree-empty-action {
    border-color: #3a4d58;
    background: #1d2a33;
    color: #e8eef2;
}

.theme-mode-dark .modal-card > header,
.theme-mode-dark .modal-card > footer,
.theme-mode-dark .dashboard-pivot-field-choice,
.theme-mode-dark .dashboard-pivot-area-row,
.theme-mode-dark .dashboard-pivot-field,
.theme-mode-dark .index-column-filter,
.theme-mode-dark .index-column-choice-list label,
.theme-mode-dark .index-sort-choice,
.theme-mode-dark .dashboard-grid-column-list.popup .dashboard-grid-column-row,
.theme-mode-dark .dashboard-item-pager,
.theme-mode-dark .dashboard-grid-wrap tfoot td,
.theme-mode-dark .dashboard-pivot-runtime-filters,
.theme-mode-dark .dashboard-pivot-wrap thead th,
.theme-mode-dark .dashboard-pivot-wrap tfoot td {
    border-color: #31434e;
    background: #1d2a33;
    color: #e8eef2;
}

.theme-mode-dark input,
.theme-mode-dark select,
.theme-mode-dark textarea {
    border-color: #3a4d58;
    background: #0f151b;
    color: #e8eef2;
}

.theme-mode-dark input::placeholder,
.theme-mode-dark textarea::placeholder,
.theme-mode-dark .eyebrow,
.theme-mode-dark .muted,
.theme-mode-dark .muted-text,
.theme-mode-dark .small,
.theme-mode-dark .property-help,
.theme-mode-dark .document-index-pager small,
.theme-mode-dark .index-column-sort small,
.theme-mode-dark .dashboard-title-band p,
.theme-mode-dark .dashboard-item-caption span,
.theme-mode-dark .dashboard-pivot-field-browser > header span {
    color: #a9b8c0;
}

.theme-mode-dark .secondary-button,
.theme-mode-dark .secondary-action,
.theme-mode-dark .icon-button,
.theme-mode-dark .topbar-icon-button,
.theme-mode-dark .dashboard-item-pager button,
.theme-mode-dark .dashboard-pivot-config-button {
    border-color: #3a4d58;
    background: #1d2a33;
    color: #e8eef2;
}

.icon-set-contrast.theme-mode-dark .icon-button,
.icon-set-contrast.theme-mode-dark .topbar-icon-button,
.icon-set-contrast.theme-mode-dark .document-icon-action,
.icon-set-contrast.theme-mode-dark .secondary-action.icon-only-action,
.icon-set-contrast.theme-mode-dark .icon-action,
.icon-set-contrast .topbar-icon-button,
.icon-set-contrast .document-icon-action,
.icon-set-contrast .secondary-action.icon-only-action,
.icon-set-contrast .icon-action,
.icon-set-contrast .icon-button.active,
.icon-set-contrast .topbar-icon-button.active {
    color: var(--app-button-text, #ffffff);
    background: var(--app-button-bg, var(--app-primary, #0f6f7c));
    border-color: var(--app-button-border, var(--app-primary, #0f6f7c));
}

.icon-set-contrast .doc-tree-node span,
.icon-set-contrast .doc-tree-toggle span,
.icon-set-contrast .tree-node-icon {
    color: var(--app-button-text, #ffffff);
    background: var(--app-button-bg, var(--app-primary, #0f6f7c));
    border: 1px solid var(--app-button-border, var(--app-primary, #0f6f7c));
}

.icon-set-contrast .doc-tree svg,
.icon-set-contrast .doc-tree button svg,
.icon-set-contrast .tree-actions svg {
    color: var(--app-button-text, #ffffff);
}

.theme-mode-dark .primary-button,
.theme-mode-dark .primary-action,
.theme-mode-dark .icon-button.primary {
    border-color: var(--app-button-border, var(--app-accent, #4aa3b2));
    background: var(--app-button-bg, var(--app-accent, #4aa3b2));
    color: var(--app-button-text, #061014);
}

.theme-mode-dark .top-config-panel a,
.theme-mode-dark .top-user-panel a,
.theme-mode-dark .top-theme-panel button,
.theme-mode-dark .top-theme-option,
.theme-mode-dark .top-theme-font-scale {
    color: #e8eef2;
}

.theme-mode-dark .top-theme-option,
.theme-mode-dark .top-theme-font-scale {
    border-color: #31434e;
}

.theme-mode-dark .top-config-panel a:hover,
.theme-mode-dark .top-user-panel a:hover,
.theme-mode-dark .top-theme-panel button:hover,
.theme-mode-dark .top-theme-panel button.active {
    background: #263742;
}

.theme-mode-dark .dashboard-canvas,
.theme-mode-dark .home-dashboard-slideshow:fullscreen {
    background-color: #101820;
    background-image: linear-gradient(#21313b 1px, transparent 1px), linear-gradient(90deg, #21313b 1px, transparent 1px);
}

.theme-mode-dark .dashboard-grid-wrap th,
.theme-mode-dark .dashboard-grid-wrap td,
.theme-mode-dark .dashboard-pivot-wrap th,
.theme-mode-dark .dashboard-pivot-wrap td {
    border-color: #334650;
}

.theme-mode-dark .page-heading,
.theme-mode-dark .index-page-heading {
    color: #e8eef2;
}

.theme-mode-dark .page-heading h1,
.theme-mode-dark .index-page-heading h1,
.theme-mode-dark .index-heading-title span,
.theme-mode-dark .compact-index-toolbar h2,
.theme-mode-dark .document-index-pager span,
.theme-mode-dark .metric span,
.theme-mode-dark .workflow-inline-header strong,
.theme-mode-dark .workflow-inline-header span {
    color: #e8eef2;
}

.theme-mode-dark .document-index-shell table th,
.theme-mode-dark .document-index-shell table td {
    border-color: #334650;
    color: #e8eef2;
}

.theme-mode-dark .document-index-shell table th {
    background: #1d2a33;
    color: #b8c8d0;
}

.theme-mode-dark .document-index-shell table tbody tr {
    background: #17212a;
}

.theme-mode-dark .document-index-shell table tbody tr:nth-child(even) {
    background: #141e26;
}

.theme-mode-dark .document-index-shell table tbody tr:hover,
.theme-mode-dark .document-index-shell table tbody tr.is-selected {
    background: #21313b;
}

.theme-mode-dark .document-index-shell th:last-child,
.theme-mode-dark .document-index-shell td.row-actions {
    background: #17212a;
    box-shadow: -10px 0 12px -14px rgba(0, 0, 0, .85);
}

.theme-mode-dark .document-index-shell tr.is-selected td.row-actions {
    background: #21313b;
}

.theme-mode-dark .document-index-shell a,
.theme-mode-dark .document-index-shell .index-message {
    color: #65c7d5;
}

.theme-mode-dark .index-column-sort,
.theme-mode-dark .index-column-filter-toggle,
.theme-mode-dark .index-workflow-legend-toggle {
    color: #d8e4e9;
}

.theme-mode-dark .index-column-sort.active,
.theme-mode-dark .index-column-filter-toggle.active,
.theme-mode-dark .index-workflow-legend-toggle.active,
.theme-mode-dark .index-column-sort:hover,
.theme-mode-dark .index-column-filter-toggle:hover,
.theme-mode-dark .index-workflow-legend-toggle:hover {
    border-color: #3a4d58;
    background: #24343f;
}

.theme-mode-dark .workflow-state-legend {
    border-color: #31434e;
    background: #17212a;
    color: #e8eef2;
}

.theme-mode-dark .document-index-pager {
    border-color: #31434e;
    background: #17212a;
}

.theme-mode-dark .icon-action {
    border-color: #3a4d58;
    background: #1d2a33;
    color: #e8eef2;
}

.theme-mode-dark .icon-action:hover {
    background: #263742;
}

.theme-mode-dark .status-pill,
.theme-mode-dark .kind-badge {
    border-color: #3a4d58;
    background: #1d2a33;
    color: #d8e4e9;
}

.theme-components-forced .dashboard-canvas {
    background-color: #101820;
    background-image: linear-gradient(#21313b 1px, transparent 1px), linear-gradient(90deg, #21313b 1px, transparent 1px);
}

.theme-components-forced .dashboard-item,
.theme-components-forced .dashboard-item-body,
.theme-components-forced .dashboard-grid-wrap,
.theme-components-forced .dashboard-card-tile,
.theme-components-forced .dashboard-filter-values {
    border-color: #31434e;
    background: #17212a;
    color: #e8eef2;
}

.theme-components-forced .dashboard-item-caption {
    border-color: #31434e;
    background: #1d2a33;
}

.theme-components-forced .dashboard-item-caption strong,
.theme-components-forced .dashboard-card-tile strong,
.theme-components-forced .dashboard-card-tile small {
    color: #e8eef2;
}

.theme-components-forced .dashboard-item-actions button,
.theme-components-forced .dashboard-filter-values button {
    border-color: #3a4d58;
    background: #24343f;
    color: #e8eef2;
}

.theme-components-forced .windows-form-canvas,
.theme-components-forced .document-render-canvas {
    background-color: #101820;
    background-image: radial-gradient(#263842 1px, transparent 1px);
}

.theme-components-forced .form-control-widget,
.theme-components-forced .render-tab-container,
.theme-components-forced .render-grid-container,
.theme-components-forced .render-tabs,
.theme-components-forced .render-grid-title {
    border-color: #31434e;
    background: #17212a !important;
    color: #e8eef2;
}

.theme-components-forced .form-control-widget label,
.theme-components-forced .render-control label,
.theme-components-forced .render-label,
.theme-components-forced .render-grid strong {
    color: #e8eef2;
}

.theme-components-forced .form-control-widget input,
.theme-components-forced .form-control-widget select,
.theme-components-forced .form-control-widget textarea,
.theme-components-forced .render-control input,
.theme-components-forced .render-control select,
.theme-components-forced .render-control textarea {
    border-color: #3a4d58;
    background: #0f151b;
    color: #e8eef2;
}

.theme-components-forced .form-control-widget.has-custom-bg input,
.theme-components-forced .form-control-widget.has-custom-bg select,
.theme-components-forced .form-control-widget.has-custom-bg textarea,
.theme-components-forced .form-control-widget.has-custom-bg button,
.theme-mode-dark .form-control-widget.has-custom-bg input,
.theme-mode-dark .form-control-widget.has-custom-bg select,
.theme-mode-dark .form-control-widget.has-custom-bg textarea,
.theme-mode-dark .form-control-widget.has-custom-bg button,
.theme-components-forced .render-control.has-custom-bg input,
.theme-components-forced .render-control.has-custom-bg select,
.theme-components-forced .render-control.has-custom-bg textarea,
.theme-components-forced .render-control.has-custom-bg button,
.theme-mode-dark .render-control.has-custom-bg input,
.theme-mode-dark .render-control.has-custom-bg select,
.theme-mode-dark .render-control.has-custom-bg textarea,
.theme-mode-dark .render-control.has-custom-bg button,
.theme-components-forced .render-tab-container.has-custom-bg,
.theme-components-forced .render-tab-container.has-custom-bg .render-tabs,
.theme-mode-dark .render-tab-container.has-custom-bg,
.theme-mode-dark .render-tab-container.has-custom-bg .render-tabs,
.theme-components-forced .form-control-widget.has-custom-bg .tab-preview,
.theme-components-forced .form-control-widget.has-custom-bg .tab-preview-page,
.theme-mode-dark .form-control-widget.has-custom-bg .tab-preview,
.theme-mode-dark .form-control-widget.has-custom-bg .tab-preview-page {
    background: var(--control-bg) !important;
    color: var(--control-fg, inherit) !important;
}

.theme-components-forced .form-control-widget.has-custom-fg,
.theme-components-forced .form-control-widget.has-custom-fg label,
.theme-components-forced .form-control-widget.has-custom-fg input,
.theme-components-forced .form-control-widget.has-custom-fg select,
.theme-components-forced .form-control-widget.has-custom-fg textarea,
.theme-components-forced .form-control-widget.has-custom-fg button,
.theme-mode-dark .form-control-widget.has-custom-fg,
.theme-mode-dark .form-control-widget.has-custom-fg label,
.theme-mode-dark .form-control-widget.has-custom-fg input,
.theme-mode-dark .form-control-widget.has-custom-fg select,
.theme-mode-dark .form-control-widget.has-custom-fg textarea,
.theme-mode-dark .form-control-widget.has-custom-fg button,
.theme-components-forced .render-control.has-custom-fg,
.theme-components-forced .render-control.has-custom-fg label,
.theme-components-forced .render-control.has-custom-fg input,
.theme-components-forced .render-control.has-custom-fg select,
.theme-components-forced .render-control.has-custom-fg textarea,
.theme-components-forced .render-control.has-custom-fg button,
.theme-mode-dark .render-control.has-custom-fg,
.theme-mode-dark .render-control.has-custom-fg label,
.theme-mode-dark .render-control.has-custom-fg input,
.theme-mode-dark .render-control.has-custom-fg select,
.theme-mode-dark .render-control.has-custom-fg textarea,
.theme-mode-dark .render-control.has-custom-fg button {
    color: var(--control-fg, inherit) !important;
}

.theme-components-forced .form-control-widget button,
.theme-components-forced .render-tabs button {
    border-color: #3a4d58;
    background: #24343f;
    color: #e8eef2;
}

.theme-components-forced .render-tabs button.active {
    border-top-color: var(--app-accent, #4aa3b2);
    border-bottom-color: #17212a;
    background: #17212a;
}

.workflow-modal {
    width: min(1380px, calc(100vw - 1.5rem));
    height: min(820px, calc(100vh - 72px));
    border: 1px solid #cbd8de;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgb(15 23 42 / .25);
    overflow: hidden;
}

.workflow-modal:has(.workflow-graph-preview) {
    width: min(1320px, calc(100vw - 2rem));
    height: min(760px, calc(100vh - 80px));
    transform: translateX(clamp(0px, calc(var(--tree-rail-width, 220px) / 2), 120px));
}

.workflow-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .85rem;
    border-bottom: 1px solid #d8e2e7;
}

.modal-window-enabled {
    min-width: min(360px, calc(100vw - 16px));
    min-height: min(220px, calc(100vh - 16px));
}

.modal-window-enabled:not(.advanced-code-modal) {
    position: relative;
}

.modal-window-drag-handle {
    cursor: move;
    touch-action: none;
    user-select: none;
}

.modal-window-drag-handle button,
.modal-window-drag-handle a,
.modal-window-drag-handle input,
.modal-window-drag-handle select,
.modal-window-drag-handle textarea {
    cursor: auto;
}

.modal-resize-handle {
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 6;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    touch-action: none;
    opacity: .72;
}

.modal-resize-handle::before,
.modal-resize-handle::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    border-right: 2px solid #6f8791;
    border-bottom: 2px solid #6f8791;
}

.modal-resize-handle::before {
    width: 12px;
    height: 12px;
}

.modal-resize-handle::after {
    width: 7px;
    height: 7px;
}

.modal-is-moving,
.modal-is-resizing {
    user-select: none;
}

.document-message-stack {
    display: grid;
    gap: .35rem;
    margin: .45rem 0 .75rem;
}

.document-message-band {
    border: 1px solid;
    border-left-width: 4px;
    border-radius: 6px;
    padding: .55rem .45rem .55rem .75rem;
    font-size: .88rem;
    font-weight: 650;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.document-message-band.success {
    border-color: #84d1a7;
    background: #ecfff4;
    color: #145c35;
}

.document-message-band.warning {
    border-color: #e5c46a;
    background: #fff7db;
    color: #765100;
}

.document-message-band.error {
    border-color: #f2a3a3;
    background: #fff0f0;
    color: #9b1c1c;
}

.document-message-close {
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid currentColor;
    border-radius: 5px;
    background: rgba(255, 255, 255, .55);
    color: inherit;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: .85rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.document-message-close:hover {
    background: rgba(255, 255, 255, .9);
}

.office-web-launcher {
    display: grid;
    gap: 1rem;
}

.office-web-create-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) auto;
    gap: .75rem;
    align-items: end;
}

.office-web-file-card {
    margin-top: 1rem;
    border: 1px solid var(--app-border, #c9dce3);
    border-radius: 8px;
    background: var(--app-surface, #fff);
    overflow: hidden;
}

.office-web-file-card header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .65rem .85rem;
    background: color-mix(in srgb, var(--app-accent, #0f8b8d) 7%, var(--app-surface, #fff));
}

.office-web-file-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

.office-web-share-panel {
    display: grid;
    gap: .75rem;
}

.office-web-share-grid {
    display: grid;
    gap: .4rem;
}

.office-web-share-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(3, auto);
    gap: .7rem;
    align-items: center;
    padding: .45rem .55rem;
    border: 1px solid var(--app-border, #c9dce3);
    border-radius: 6px;
    background: var(--app-surface, #fff);
}

@media (max-width: 780px) {
    .office-web-create-row {
        grid-template-columns: 1fr;
    }

    .office-web-share-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.virtual-link-modal {
    width: min(760px, calc(100vw - 1.5rem));
    max-height: min(760px, 90vh);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 1px solid #cbd8de;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(20, 42, 52, .28);
    overflow: hidden;
}

.virtual-link-body {
    display: grid;
    gap: .75rem;
    padding: .85rem;
    overflow-y: auto;
}

.virtual-link-results {
    max-height: 360px;
}

.virtual-link-results button {
    width: 100%;
}

.workflow-graph-preview {
    position: relative;
    height: calc(100% - 52px);
    overflow: auto;
    padding: 0;
    background-image:
        linear-gradient(#eef4f6 1px, transparent 1px),
        linear-gradient(90deg, #eef4f6 1px, transparent 1px);
    background-size: 20px 20px;
}

.workflow-graph-canvas {
    position: relative;
    min-width: 100%;
    min-height: 100%;
}

.workflow-graph-links {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    overflow: visible;
}

.workflow-graph-links path {
    stroke: #5d6d76;
    stroke-width: 2.5;
    stroke-linecap: round;
    fill: none;
}

.workflow-graph-links marker path {
    fill: #5d6d76;
    stroke: none;
}

.workflow-graph-links path.is-conditional {
    stroke-dasharray: 6 4;
    stroke: #0f6f7c;
}

.workflow-graph-links path.is-back {
    stroke-dasharray: 2 4;
    stroke: #9a3412;
}

.workflow-readonly-node {
    position: absolute;
    width: 150px;
    min-height: 84px;
    cursor: default;
    pointer-events: none;
}

.workflow-readonly-node.workflow-gateway-node {
    width: 72px;
    min-height: 72px;
}

.workflow-readonly-node.is-running {
    color: #5f4200;
    border-color: #d49a00;
    background: #fff3b0 !important;
    box-shadow: 0 8px 24px rgba(154, 106, 0, .14);
}

.workflow-readonly-node.is-closed {
    color: #14532d;
    border-color: #1f8a45;
    background: #c7efd5 !important;
    box-shadow: 0 8px 24px rgba(31, 138, 69, .14);
}

.workflow-readonly-node.is-pending {
    color: #263740;
    border-color: #cbd8de;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(35, 48, 58, .08);
}

.workflow-readonly-node.is-skipped {
    color: #60717d;
    border-color: #cbd8de;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(35, 48, 58, .08);
}

.workflow-readonly-node strong,
.workflow-readonly-node span,
.workflow-readonly-node small {
    display: block;
}

.workflow-readonly-node span,
.workflow-readonly-node small {
    color: inherit;
    opacity: .72;
}

.workflow-link-arrow-mid.readonly {
    z-index: 4;
}

.workflow-branch-badge.readonly {
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

.category-translation-page {
    display: grid;
    gap: .75rem;
}

.category-translation-wide table {
    min-width: 980px;
}

.category-translation-wide td:nth-child(4),
.category-translation-wide td:nth-child(5) {
    min-width: 260px;
}

.category-translation-wide .table-input {
    width: 100%;
}

@media (max-width: 1180px) {
    .winforms-designer {
        grid-template-columns: 1fr;
        padding-bottom: 1rem;
    }

    .toolbox-panel {
        position: sticky;
        top: .35rem;
        z-index: 8;
        display: flex;
        gap: .45rem;
        overflow-x: auto;
        padding: .6rem;
    }

    .toolbox-panel h2 {
        display: none;
    }

    .toolbox-panel button {
        flex: 0 0 132px;
        grid-template-columns: 30px minmax(0, 1fr);
        min-height: 48px;
    }

    .toolbox-panel button span {
        width: 30px;
        height: 28px;
    }

    .designer-surface-wrap {
        min-width: 0;
        overflow: hidden;
    }

    .windows-form-canvas {
        min-width: 720px;
    }

    .properties-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        width: min(390px, calc(100vw - 2rem));
        max-height: none;
        overflow: auto;
        padding: .8rem;
        border: 1px solid #cbd8dc;
        border-radius: 8px 0 0 8px;
        background: #ffffff;
        box-shadow: -18px 0 36px rgba(20, 35, 43, .22);
        transform: translateX(110%);
        transition: transform .18s ease;
    }

    .properties-panel.is-open {
        transform: translateX(0);
    }

    .properties-panel .inspector-panel-header {
        position: sticky;
        top: -.8rem;
        z-index: 2;
        margin: -.8rem -.8rem .65rem;
        padding: .8rem;
        border-bottom: 1px solid #e1eaed;
        background: #ffffff;
    }

    .grid-column-main-fields {
        grid-template-columns: 36px minmax(140px, 1fr) minmax(150px, 1fr) 84px 100px 60px 40px;
    }

    .grid-column-expanded-fields {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .document-render-shell {
        overflow: hidden;
    }

    .document-render-canvas {
        min-height: 520px;
        transform: scale(.82);
        transform-origin: top left;
        width: 122%;
        padding: .75rem;
    }

    .grid-column-main-fields {
        grid-template-columns: 36px 1fr 1fr;
    }

    .grid-column-main-fields > .icon-button.mini,
    .grid-column-actions {
        align-self: end;
    }

    .grid-column-expanded-fields,
    .grid-column-expanded-fields .query-list-editor {
        grid-column: 1 / -1;
    }

    .grid-column-expanded-fields {
        grid-template-columns: 1fr;
    }

    .grid-column-expanded-fields > label,
    .grid-column-expanded-fields .query-list-render-mode,
    .grid-column-expanded-fields .query-list-restrict {
        grid-column: 1 / -1;
    }

    .designer-toolbar {
        gap: .35rem;
        padding: .55rem;
    }

    .designer-toolbar select {
        flex: 1 1 100%;
        min-width: 0;
    }
}

@media (max-width: 680px) {
    .toolbox-panel {
        margin-inline: -.35rem;
        border-radius: 0;
    }

    .toolbox-panel button {
        flex-basis: 92px;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .toolbox-panel button strong {
        font-size: .72rem;
    }

    .windows-form-canvas {
        min-width: 620px;
        min-height: 520px;
    }

    .properties-panel {
        top: auto;
        left: .5rem;
        right: .5rem;
        bottom: .5rem;
        width: auto;
        max-height: min(72vh, 620px);
        border-radius: 8px;
        box-shadow: 0 -14px 36px rgba(20, 35, 43, .24);
        transform: translateY(calc(100% + 1rem));
    }

    .properties-panel.is-open {
        transform: translateY(0);
    }

    .property-section summary,
    .settings-section summary {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .properties-panel input,
    .properties-panel select,
    .properties-panel textarea,
    .workflow-properties-panel input,
    .workflow-properties-panel select,
    .workflow-properties-panel textarea {
        min-height: 42px;
        font-size: 16px;
    }

    .document-render-canvas {
        min-height: 460px;
        transform: scale(.68);
        width: 147%;
    }

    .render-grid td input {
        min-width: 92px;
    }

    .document-index-shell {
        overflow-x: visible;
    }

    .document-index-shell table,
    .document-index-shell thead,
    .document-index-shell tbody,
    .document-index-shell tr,
    .document-index-shell th,
    .document-index-shell td {
        display: block;
    }

    .document-index-shell table {
        min-width: 0;
        width: 100%;
    }

    .document-index-shell thead {
        display: none;
    }

    .document-index-shell tbody {
        display: grid;
        gap: .55rem;
    }

    .document-index-shell tr:not(.workflow-row-detail) {
        border: 1px solid #d7e3e8;
        border-radius: 7px;
        background: #ffffff;
        overflow: visible;
    }

    .document-index-shell tr:not(.workflow-row-detail) td {
        display: grid;
        grid-template-columns: minmax(84px, 34%) minmax(0, 1fr);
        align-items: center;
        gap: .55rem;
        min-height: 0;
        padding: .48rem .55rem;
        border-bottom: 1px solid #edf3f5;
        white-space: normal;
    }

    .document-index-shell tr:not(.workflow-row-detail) td::before {
        content: attr(data-label);
        color: #425868;
        font-size: .68rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .document-index-shell tr:not(.workflow-row-detail) td.select-column {
        display: flex;
        justify-content: flex-start;
    }

    .document-index-shell tr:not(.workflow-row-detail) td.select-column::before {
        content: "Seleziona";
        margin-right: .55rem;
    }

    .document-index-shell th:last-child,
    .document-index-shell td.row-actions {
        position: static;
        box-shadow: none;
        min-width: 0;
    }

    .document-index-shell td.row-actions {
        display: flex !important;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: .35rem;
        background: #f8fbfc;
    }

    .document-index-shell td.row-actions::before {
        margin-right: auto;
        align-self: center;
    }

    .workflow-row-detail {
        border: 0;
        background: transparent;
    }

    .workflow-row-detail td {
        display: block;
        padding: 0;
    }

    .workflow-inline-panel {
        margin: -.15rem 0 .65rem;
        max-width: 100%;
        overflow: visible;
    }

    .workflow-phase-strip {
        overflow-x: visible;
    }

    .linked-document-header,
    .linked-document-search {
        align-items: stretch;
        flex-direction: column;
    }

    .linked-document-search input {
        width: 100%;
    }

    .linked-document-list .attachment-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .document-render-shell:has(.responsive-runtime-canvas) {
        overflow: visible;
    }

    .document-render-canvas.responsive-runtime-canvas {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem .8rem;
        width: 100%;
        min-height: 0;
        height: auto;
        overflow: visible;
        padding: .85rem;
        transform: none;
    }

    .document-render-canvas.responsive-runtime-canvas .canvas-safe-spacer {
        display: none;
    }

    .document-render-canvas.responsive-runtime-canvas .responsive-runtime-control {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        min-width: 0;
        min-height: 0 !important;
        overflow: visible;
        order: var(--runtime-order, 0);
        grid-column: span var(--runtime-span, 1);
        padding: .2rem;
    }

    .document-render-canvas.responsive-runtime-canvas .render-label {
        min-height: 38px;
        align-items: end;
    }

    .document-render-canvas.responsive-runtime-canvas .render-control > input,
    .document-render-canvas.responsive-runtime-canvas .render-control > textarea,
    .document-render-canvas.responsive-runtime-canvas .render-control select,
    .document-render-canvas.responsive-runtime-canvas .render-control label > input,
    .document-render-canvas.responsive-runtime-canvas .render-control label > textarea {
        width: 100%;
        max-width: 100%;
    }

    .document-render-canvas.responsive-runtime-canvas .render-control > input,
    .document-render-canvas.responsive-runtime-canvas .render-control label > input,
    .document-render-canvas.responsive-runtime-canvas .render-control select {
        min-height: 42px;
    }

    .document-render-canvas.responsive-runtime-canvas .runtime-query-list-field input {
        min-height: 42px;
    }

    .document-render-canvas.responsive-runtime-canvas .runtime-query-list-button {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
    }

    .document-render-canvas.responsive-runtime-canvas .render-control input[type="checkbox"] {
        width: auto;
        min-height: 0;
    }

    .document-render-canvas.responsive-runtime-canvas .render-tab-container,
    .document-render-canvas.responsive-runtime-canvas .render-grid-container {
        grid-column: 1 / -1;
    }

    .document-render-canvas.responsive-runtime-canvas .render-tabs {
        min-height: 44px;
        height: auto;
        overflow-x: auto;
    }

    .document-render-canvas.responsive-runtime-canvas .render-grid-body {
        overflow-x: auto;
    }
}

@media (max-width: 680px) {
    .document-render-canvas.responsive-runtime-canvas {
        grid-template-columns: minmax(0, 1fr);
        gap: .65rem;
        padding: .65rem;
    }

    .document-render-canvas.responsive-runtime-canvas .responsive-runtime-control {
        grid-column: 1 / -1;
    }

    .document-render-canvas.responsive-runtime-canvas .render-grid-title,
    .document-render-canvas.responsive-runtime-canvas .render-grid-column-layout {
        align-items: stretch;
        flex-direction: column;
    }

    .document-render-canvas.responsive-runtime-canvas .render-grid-title-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 860px) {
    .document-index-shell th:last-child,
    .document-index-shell td.row-actions {
        position: sticky;
        right: 0;
        z-index: 4;
        background: #ffffff;
        box-shadow: -10px 0 12px -14px rgba(23, 42, 52, .55);
    }

    .document-index-shell tr.is-selected td.row-actions {
        background: color-mix(in srgb, var(--accent-color, #0f6f7c) 8%, #ffffff);
    }

    .document-index-shell table {
        min-width: 760px;
    }

    .document-index-shell th,
    .document-index-shell td {
        padding: .65rem .55rem;
    }

    .document-index-shell td.row-actions {
        min-width: 760px;
        padding-block: .5rem;
    }

    .document-index-shell .icon-action {
        min-width: 32px;
        height: 30px;
        padding: 0 .38rem;
    }

    .workflow-inline-panel {
        padding: .35rem;
    }

    .workflow-inline-header {
        position: sticky;
        left: 0;
        z-index: 2;
        flex-wrap: wrap;
        background: #ffffff;
    }

    .workflow-phase-strip {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
        grid-auto-columns: auto;
        gap: .38rem;
        overflow-x: visible;
        padding: .05rem 0 .2rem;
    }

    .workflow-phase-chip {
        grid-column: auto !important;
        min-height: 0;
        padding: .38rem .42rem;
    }

    .workflow-phase-chip strong {
        font-size: .82rem;
    }

    .workflow-branches span,
    .workflow-signer {
        max-width: 100%;
        white-space: normal;
    }

    .workflow-sign-actions {
        flex-wrap: wrap;
    }

    .workflow-sign-actions input {
        width: min(100%, 180px);
    }
}

@media (max-width: 900px) {
    .document-index-shell {
        max-width: 100%;
        overflow-x: hidden;
    }

    .document-index-shell table,
    .document-index-shell thead,
    .document-index-shell tbody,
    .document-index-shell tr,
    .document-index-shell th,
    .document-index-shell td {
        display: block;
    }

    .document-index-shell table {
        min-width: 0 !important;
        width: 100%;
    }

    .document-index-shell thead {
        display: none;
    }

    .document-index-shell tbody {
        display: grid;
        gap: .6rem;
    }

    .document-index-shell tr:not(.workflow-row-detail) {
        border: 1px solid #d7e3e8;
        border-radius: 7px;
        background: #ffffff;
        overflow: hidden;
    }

    .document-index-shell tr:not(.workflow-row-detail) td {
        display: grid;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        align-items: center;
        gap: .55rem;
        min-height: 0;
        padding: .5rem .6rem;
        border-bottom: 1px solid #edf3f5;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .document-index-shell tr:not(.workflow-row-detail) td::before {
        content: attr(data-label);
        color: #425868;
        font-size: .68rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .document-index-shell tr:not(.workflow-row-detail) td.select-column {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: .55rem;
    }

    .document-index-shell tr:not(.workflow-row-detail) td.select-column::before {
        content: "Seleziona";
        flex: 0 0 auto;
        min-width: 92px;
        margin-right: 0;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }

    .document-index-shell th:last-child,
    .document-index-shell td.row-actions {
        position: static !important;
        right: auto;
        z-index: auto;
        min-width: 0 !important;
        width: auto;
        box-shadow: none !important;
    }

    .document-index-shell td.row-actions {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: .35rem;
        padding-block: .5rem;
        background: #f8fbfc;
        white-space: normal;
        position: relative !important;
    }

    .document-index-shell td.row-actions::before {
        content: "Azioni";
        flex: 0 0 min(34%, 118px);
        margin: 0 .2rem 0 0;
        align-self: center;
    }

    .document-index-shell .icon-action {
        flex: 0 0 32px;
        min-width: 32px;
        width: 32px;
        height: 30px;
        padding: 0;
    }

    .document-index-shell .row-action-panel {
        position: fixed;
        left: .75rem;
        right: .75rem;
        bottom: .75rem;
        top: auto;
        z-index: 80;
        transform: none;
        width: auto;
        max-width: none;
        margin: 0;
        justify-content: flex-start;
        box-shadow: 0 16px 36px rgba(20, 42, 52, .22);
    }
}
/* Report designer */
.report-designer-heading {
    position: sticky;
    top: var(--topbar-offset, 48px);
    z-index: 45;
    width: 100%;
    margin: -.25rem 0 .55rem;
    padding: .35rem 0 .45rem;
    border-bottom: 1px solid #d9e7eb;
    background: color-mix(in srgb, var(--app-bg, #f5f7f8) 92%, #ffffff);
}

.report-designer-heading .eyebrow {
    margin: 0;
    color: #087887;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: 0;
}

.report-designer-heading h1 {
    display: none;
}

.report-designer-heading > .button-row {
    gap: .24rem;
}

.report-designer-heading .icon-button,
.report-designer-heading .icon-only-action,
.report-designer-heading .report-zoom-edit {
    min-height: 34px;
    height: 34px;
}

.report-designer-heading .icon-button {
    width: 34px;
}

.report-designer-shell {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(260px, 320px);
    gap: 12px;
    align-items: start;
}

.report-designer-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid #d7e4e8;
    border-radius: 8px;
    background: #fff;
    position: sticky;
    top: calc(var(--topbar-offset, 48px) + .5rem);
    max-height: calc(100vh - var(--topbar-offset, 48px) - 1rem);
    overflow: auto;
    scrollbar-width: none;
}

.report-designer-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.report-designer-panel * {
    scrollbar-width: none;
}

.report-designer-panel *::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.report-designer-panel label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #284250;
    font-size: 12px;
    font-weight: 700;
}

.report-designer-panel input,
.report-designer-panel select,
.report-designer-panel textarea {
    min-height: 32px;
    border: 1px solid #cbdde3;
    border-radius: 6px;
    padding: 6px 8px;
    font: inherit;
}

.report-toolbox,
.report-field-list,
.property-grid {
    display: grid;
    gap: 8px;
}

.report-toolbox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-toolbox button,
.report-field-list button {
    min-height: 34px;
    border: 1px solid #cbdde3;
    border-radius: 6px;
    background: #f7fbfc;
    color: #12313d;
    font-weight: 700;
}

.report-field-list {
    max-height: 220px;
    overflow: auto;
}

.report-field-list button.selected {
    border-color: #0f6f7c;
    background: #e6f6f8;
    color: #0c5660;
}

.report-parameter-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.1fr) 110px minmax(150px, 1fr) minmax(180px, 1fr) auto;
    gap: 6px;
    align-items: center;
}

.subreport-editor {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #d7e4e8;
    border-radius: 8px;
    background: #f7fbfc;
}

.query-summary {
    display: grid;
    gap: 3px;
    padding: 8px;
    border: 1px solid #d7e4e8;
    border-radius: 6px;
    background: #f7fbfc;
    color: #284250;
    font-size: 12px;
}

.query-summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-preview-modal {
    display: grid;
    grid-template-rows: auto auto auto minmax(220px, 1fr);
    width: min(1120px, calc(100vw - 28px));
    height: min(780px, calc(100vh - 28px));
    border: 1px solid #cbdde3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(22, 48, 59, .24);
}

.report-query-modal {
    display: grid;
    grid-template-rows: auto minmax(320px, 1fr) auto auto auto;
    width: min(1180px, calc(100vw - 28px));
    height: min(840px, calc(100vh - 28px));
    border: 1px solid #cbdde3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(22, 48, 59, .24);
    overflow: hidden;
}

.report-preview-window {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: block;
    background: #eef5f7;
}

.report-preview-modal.fullscreen {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.report-preview-category {
    display: block;
    margin-top: .15rem;
    color: #56717b;
    font-size: .78rem;
    font-weight: 600;
}

.report-preview-toolbar,
.report-preview-data-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .55rem .75rem;
    border-bottom: 1px solid #d8e2e7;
    background: #f8fbfc;
}

.report-preview-data-bar {
    justify-content: flex-start;
    flex-wrap: wrap;
    background: #ffffff;
}

.report-preview-data-bar select {
    min-width: min(420px, 100%);
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    white-space: nowrap;
}

.report-query-editor {
    box-sizing: border-box;
    width: calc(100% - 24px);
    min-height: 0;
    height: auto;
    margin: 12px 12px 0;
    resize: vertical;
    border: 1px solid #b9d0d8;
    border-radius: 8px;
    padding: 12px;
    font: 13px/1.45 Consolas, "Courier New", monospace;
}

.report-query-parameters {
    display: grid;
    gap: 8px;
    max-height: 210px;
    margin: 10px 12px 0;
    padding: 10px;
    border: 1px solid #d7e4e8;
    border-radius: 8px;
    background: #f7fbfc;
    overflow: auto;
}

.report-query-validation {
    margin: 8px 12px 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: .86rem;
    font-weight: 700;
}

.report-query-validation.success {
    border: 1px solid #b7e3c4;
    background: #eefaf1;
    color: #166534;
}

.report-query-validation.error {
    border: 1px solid #f3b8b8;
    background: #fff1f1;
    color: #991b1b;
}

.report-query-actions {
    justify-content: flex-end;
    gap: .5rem;
    padding: 10px 12px 12px;
}

.report-query-actions .primary-action,
.report-query-actions .secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 34px;
    height: auto;
    padding: .5rem .8rem;
    line-height: 1.2;
}

.report-query-results-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1180px, calc(100vw - 28px));
    height: min(780px, calc(100vh - 28px));
    border: 1px solid #cbdde3;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(15, 44, 56, .28);
    overflow: hidden;
}

.report-query-result-message {
    display: block;
    margin-top: .2rem;
    font-size: .78rem;
    font-weight: 700;
}

.report-query-result-message.success {
    color: #166534;
}

.report-query-result-message.error {
    color: #991b1b;
}

.report-query-results-grid {
    overflow: auto;
    padding: 10px 12px 12px;
}

.report-query-results-grid table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.report-query-results-grid th,
.report-query-results-grid td {
    max-width: 340px;
    padding: 7px 9px;
    border: 1px solid #dbe8ed;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.report-query-results-grid th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #edf6f8;
    color: #244354;
    font-size: .75rem;
    text-transform: uppercase;
}

.chart-series-color-list {
    display: grid;
    gap: .45rem;
    margin-top: .65rem;
}

.chart-series-color-list label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px minmax(72px, auto);
    align-items: center;
    gap: .45rem;
    min-width: 0;
    padding: .35rem .45rem;
    border: 1px solid #d8e5e9;
    border-radius: 6px;
    background: #fbfdfe;
}

.chart-series-color-list span {
    overflow: hidden;
    color: #284250;
    font-size: .82rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-series-color-list input[type="color"] {
    width: 36px;
    height: 30px;
    padding: 2px;
}

.chart-series-color-list code {
    color: #5b707b;
    font-size: .72rem;
}

.workflow-modal-header.compact {
    padding: 0 0 4px;
}

.report-designer-workspace {
    min-width: 0;
    overflow: auto;
    padding: 14px;
    border: 1px solid #d7e4e8;
    border-radius: 8px;
    background: #edf3f5;
}

.report-page-editor {
    position: relative;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 10px 34px rgba(24, 55, 68, .16);
    transform-origin: top left;
}

.report-band-editor {
    position: relative;
    border-bottom: 1px dashed #d5e2e7;
}

.report-band-editor.show-grid {
    background-image:
        linear-gradient(to right, rgba(15, 111, 124, .11) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 111, 124, .11) 1px, transparent 1px);
    background-size: 10px 10px;
}

.report-band-editor > strong {
    position: absolute;
    right: 8px;
    top: 0;
    z-index: 2;
    display: inline-block;
    margin: 4px;
    padding: 2px 6px;
    border-radius: 6px;
    background: #eef7f9;
    color: #365565;
    font-size: 11px;
}

.report-band-editor > small {
    position: absolute;
    right: 8px;
    top: 23px;
    z-index: 2;
    display: block;
    margin: 0 4px 4px;
    padding: 0 6px;
    color: #60717d;
    font-size: 10px;
    text-align: right;
}

.section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.report-section-config {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .45rem;
    margin: .5rem 0;
    padding: .55rem;
    border: 1px solid #d7e4e8;
    border-radius: 7px;
    background: #f8fbfc;
}

.report-section-config .property-grid.two {
    grid-template-columns: minmax(0, 1fr);
}

.report-section-config label:has(input[type="text"]),
.report-section-config label:has(select) {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.report-section-config label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.report-section-config input,
.report-section-config select {
    min-width: 0;
}

.check-grid {
    display: grid;
    gap: .22rem;
    align-content: start;
}

.report-band-resizer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    z-index: 8;
    height: 10px;
    cursor: ns-resize;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

.report-band-resizer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 4px;
    height: 1px;
    background: #90b9c4;
}

.report-band-resizer:hover::after {
    top: 3px;
    height: 3px;
    background: #0f6f7c;
}

.report-canvas-element {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    white-space: pre-wrap;
    border-radius: 0;
    cursor: move;
    touch-action: none;
    user-select: none;
}

.report-canvas-element.subreport-element {
    display: grid;
    align-content: center;
    padding: .55rem;
    border: 1px dashed #0f6f7c;
    background: #f4fafb;
    color: #274c5a;
}

.report-subreport-placeholder {
    display: grid;
    gap: .2rem;
}

.report-subreport-placeholder span {
    color: #60717d;
    font-size: .78rem;
}

.subreport-editor-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.subreport-editor-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: .75rem;
    min-height: 0;
    padding: .75rem;
    background: #edf3f5;
}

.subreport-editor-side {
    overflow: auto;
}

.subreport-editor-document {
    overflow: auto;
    display: grid;
    place-items: start center;
    padding: 1rem;
}

.subreport-document-page {
    width: min(760px, 100%);
    min-height: 640px;
    background: #fff;
    box-shadow: 0 10px 34px rgba(24, 55, 68, .16);
    padding: 28px;
}

.subreport-document-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.subreport-document-body {
    display: grid;
    gap: .55rem;
}

.subreport-document-body pre {
    margin: 0 0 .65rem;
    padding: .6rem;
    border: 1px solid #d7e4e8;
    border-radius: 6px;
    background: #f8fbfc;
    white-space: pre-wrap;
}

.report-canvas-element.selected {
    outline: 2px solid #0f6f7c;
    outline-offset: 2px;
    overflow: visible;
}

.report-canvas-element.selected::before {
    content: "";
    position: absolute;
    left: -8px;
    top: -8px;
    z-index: 14;
    width: 10px;
    height: 10px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #0f6f7c;
    box-shadow: 0 1px 5px rgba(15, 111, 124, .28);
    pointer-events: none;
}

.report-canvas-element.table-element {
    overflow: visible;
    white-space: normal;
    font-size: 0;
    line-height: 0;
}

.report-canvas-element.table-element.selected::before {
    display: none;
}

.report-table-select-button {
    position: absolute;
    left: -28px;
    top: -24px;
    z-index: 15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #0f6f7c;
    border-radius: 6px;
    background: #ffffff;
    color: #0f6f7c;
    box-shadow: 0 2px 7px rgba(15, 111, 124, .22);
    cursor: pointer;
}

.report-table-select-button svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.report-selection-box {
    position: fixed;
    z-index: 9998;
    border: 1px dashed #0f6f7c;
    background: rgba(15, 111, 124, .08);
    pointer-events: none;
}

.report-design-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font: inherit;
    font-size: var(--report-table-font-size, 12px);
    line-height: 1.2;
    color: inherit;
    background: #ffffff;
}

.report-design-table td {
    position: relative;
    min-width: 28px;
    min-height: 20px;
    padding: 4px 6px;
    border: 1px solid #1d2430;
    background: #ffffff;
    vertical-align: top;
    overflow: hidden;
    cursor: cell;
    text-overflow: ellipsis;
}

.report-design-table td.has-content {
    background: #f7fbfc;
    color: #12313a;
}

.report-design-table td.selected {
    position: relative;
    z-index: 2;
    box-shadow: inset 0 0 0 3px #0f6f7c, 0 0 0 1px #0f6f7c;
    color: #082f36;
}

.report-table-resize-handle {
    position: absolute;
    z-index: 4;
    background: transparent;
    user-select: none;
}

.report-table-resize-handle.column {
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
}

.report-table-resize-handle.row {
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 6px;
    cursor: row-resize;
}

.report-design-table td.selected .report-table-resize-handle.column {
    border-right: 2px solid #0f6f7c;
}

.report-design-table td.selected .report-table-resize-handle.row {
    border-bottom: 2px solid #0f6f7c;
}

.report-element-resize-handle {
    position: absolute;
    z-index: 12;
    box-sizing: border-box;
    width: 9px;
    height: 9px;
    border: 2px solid #0f6f7c;
    border-radius: 2px;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(15, 111, 124, .24);
    pointer-events: auto;
    touch-action: none;
}

.report-element-resize-handle.nw {
    left: -6px;
    top: -6px;
    cursor: nwse-resize;
}

.report-element-resize-handle.ne {
    right: -6px;
    top: -6px;
    cursor: nesw-resize;
}

.report-element-resize-handle.sw {
    left: -6px;
    bottom: -6px;
    cursor: nesw-resize;
}

.report-element-resize-handle.se {
    right: -6px;
    bottom: -6px;
    cursor: nwse-resize;
}

.report-element-resize-handle.n,
.report-element-resize-handle.s {
    left: 50%;
    width: 18px;
    height: 7px;
    transform: translateX(-50%);
    cursor: ns-resize;
}

.report-element-resize-handle.n {
    top: -5px;
}

.report-element-resize-handle.s {
    bottom: -5px;
}

.report-element-resize-handle.e,
.report-element-resize-handle.w {
    top: 50%;
    width: 7px;
    height: 18px;
    transform: translateY(-50%);
    cursor: ew-resize;
}

.report-element-resize-handle.e {
    right: -5px;
}

.report-element-resize-handle.w {
    left: -5px;
}

.report-resize-guide {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    border-color: #0f6f7c;
}

.report-resize-guide.vertical {
    width: 0;
    border-left: 2px solid #0f6f7c;
}

.report-resize-guide.horizontal {
    height: 0;
    border-top: 2px solid #0f6f7c;
}

.report-resize-guide.box {
    border: 2px dashed #0f6f7c;
    background: rgba(15, 111, 124, .08);
}

.topbar-icon-button.active,
.icon-button.active {
    border-color: #0f6f7c;
    background: #e6f6f8;
    color: #0c5660;
}

.icon-button.primary-icon {
    border-color: #0f6f7c;
    background: #0f7b85;
    color: #ffffff;
}

.icon-button.primary-icon svg {
    stroke: #ffffff;
}

.icon-set-contrast .topbar-icon-button,
.icon-set-contrast .topbar-icon-button.active,
.icon-set-contrast .tree-actions button,
.icon-set-contrast .doc-tree-node span,
.icon-set-contrast .doc-tree-toggle span,
.icon-set-contrast .tree-node-icon,
.icon-set-contrast .document-icon-action,
.icon-set-contrast .icon-button,
.icon-set-contrast .icon-button.active,
.icon-set-contrast .secondary-action.icon-only-action,
.icon-set-contrast .icon-action {
    border-color: var(--app-primary, #0f6f7c) !important;
    color: #ffffff !important;
    background: var(--app-primary, #0f6f7c) !important;
}

.icon-set-contrast .topbar-icon-button svg,
.icon-set-contrast .tree-actions button svg,
.icon-set-contrast .doc-tree svg,
.icon-set-contrast .doc-tree button svg,
.icon-set-contrast .document-icon-action svg,
.icon-set-contrast .icon-button svg,
.icon-set-contrast .secondary-action.icon-only-action::before,
.icon-set-contrast .icon-action svg {
    color: #ffffff !important;
    stroke: currentColor;
}

.icon-button.danger-icon {
    border-color: #f0b8b8;
    color: #b32121;
    background: #fff5f5;
}

.report-zoom-label {
    min-width: 44px;
    text-align: center;
    color: #284250;
    font-size: 12px;
    font-weight: 800;
}

.report-zoom-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 116px;
    height: 34px;
    box-sizing: border-box;
    padding: 0 6px;
    border: 1px solid #c9d8de;
    border-radius: 6px;
    background: #fff;
    color: #284250;
    font-size: 12px;
    font-weight: 800;
}

.report-zoom-edit input {
    width: 82px;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: right;
}

.report-zoom-edit input::-webkit-outer-spin-button,
.report-zoom-edit input::-webkit-inner-spin-button {
    margin: 0;
}

.report-page-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 78px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid #c9d8de;
    border-radius: 8px;
    background: #fff;
    color: #284250;
    font-size: 12px;
    font-weight: 800;
}

.report-page-edit input {
    width: 34px;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: right;
}

.property-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-preview-frame {
    width: 100%;
    height: 360px;
    border: 1px solid #d7e4e8;
    border-radius: 6px;
    background: #fff;
}

.report-preview-frame.large {
    width: calc(100% - 24px);
    height: calc(100% - 12px);
    margin: 0 12px 12px;
}

@media (max-width: 720px) {
    .report-preview-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-preview-toolbar .inline-actions,
    .report-preview-data-bar {
        width: 100%;
    }
}

.generated-report-viewer {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: .45rem;
    height: calc(100dvh - 128px);
    min-height: 420px;
    overflow: hidden;
}

.generated-report-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 1px solid #d7e4e8;
    border-radius: 8px;
    background: #fff;
}

.generated-report-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.generated-report-body.with-thumbnails {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: .5rem;
}

.generated-report-thumbnails {
    display: grid;
    align-content: start;
    gap: .45rem;
    min-height: 0;
    padding: .45rem;
    border: 1px solid #d7e4e8;
    border-radius: 8px;
    background: #f8fbfc;
    overflow: auto;
}

.report-thumbnail {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .38rem;
    border: 1px solid #cbdbe1;
    border-radius: 7px;
    background: #fff;
    color: #284250;
    text-align: left;
}

.report-thumbnail.active {
    border-color: #0f6f7c;
    background: #e6f6f8;
    color: #0c5660;
}

.report-thumbnail-sheet {
    display: block;
    width: 34px;
    height: 46px;
    border: 1px solid #aebfc7;
    border-radius: 3px;
    background:
        linear-gradient(#d9e7eb 0 0) 6px 9px / 20px 2px no-repeat,
        linear-gradient(#d9e7eb 0 0) 6px 17px / 24px 2px no-repeat,
        linear-gradient(#d9e7eb 0 0) 6px 25px / 18px 2px no-repeat,
        #ffffff;
    box-shadow: 0 2px 6px rgb(15 23 42 / .08);
}

.report-thumbnail strong {
    font-size: .78rem;
}

.generated-report-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 0;
    padding: .35rem .45rem;
    border: 1px solid #d7e4e8;
    border-radius: 8px;
    background: #f8fbfc;
}

.generated-report-title {
    display: grid;
    gap: .08rem;
    min-width: 0;
}

.generated-report-title strong {
    overflow: hidden;
    color: #10232f;
    font-size: .95rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.generated-report-title span {
    overflow: hidden;
    color: #58707c;
    font-size: .72rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.generated-report-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    flex-wrap: wrap;
}

.generated-report-actions .secondary-action {
    padding: .42rem .6rem;
    font-size: .78rem;
}

@media (max-width: 980px) {
    .generated-report-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .generated-report-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .report-designer-shell {
        grid-template-columns: 1fr;
    }

    .report-designer-workspace {
        max-height: 70vh;
    }

    .property-panel {
        position: sticky;
        bottom: 0;
        z-index: 5;
    }
}

.index-layout-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(760px, calc(100vw - 1.5rem));
    height: min(760px, 92vh);
    max-height: min(760px, 92vh);
    border: 1px solid #cbd8de;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgb(15 23 42 / .25);
    overflow: hidden;
}

.index-layout-modal-body {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 1rem;
    padding: 1rem;
    overflow: auto;
}

.index-layout-modal-body > section {
    min-width: 0;
}

.index-layout-modal-body > section + section {
    padding-top: .8rem;
    border-top: 1px solid #d8e5e9;
}

.index-layout-modal h3 {
    margin: 0 0 .65rem;
    color: #10232f;
    font-size: .9rem;
}

.index-column-choice-list,
.index-sort-choice-list {
    display: grid;
    gap: .18rem;
}

.index-layout-drop-zone {
    display: flex;
    min-height: 8px;
    align-items: center;
    justify-content: center;
    border: 1px dashed transparent;
    border-radius: 6px;
    color: transparent;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    transition: min-height .12s ease, border-color .12s ease, background-color .12s ease, color .12s ease;
}

.index-column-choice-list:has(.is-dragging) .index-layout-drop-zone,
.index-sort-choice-list:has(.is-dragging) .index-layout-drop-zone {
    min-height: 24px;
    border-color: #b7d4dc;
    color: #60717d;
    background: #f5fbfc;
}

.index-column-choice-list:has(.is-dragging) .index-layout-drop-zone.active,
.index-sort-choice-list:has(.is-dragging) .index-layout-drop-zone.active,
.index-column-choice-list:has(.is-dragging) .index-layout-drop-zone:hover,
.index-sort-choice-list:has(.is-dragging) .index-layout-drop-zone:hover {
    min-height: 30px;
    border-color: #0f6f7c;
    color: #0f6f7c;
    background: #e3f5f8;
}

.index-column-choice {
    display: grid;
    grid-template-columns: 26px 62px minmax(0, 1fr);
    align-items: center;
    gap: .45rem;
    padding: .42rem .5rem;
    border: 1px solid #d8e5e9;
    border-radius: 6px;
    background: #f8fbfc;
    color: #12303d;
    font-size: .86rem;
}

.index-column-choice.is-dragging,
.index-sort-choice.is-dragging {
    opacity: .55;
    outline: 2px dashed #7fb3c3;
    outline-offset: 2px;
}

.index-column-choice.is-drop-target,
.index-sort-choice.is-drop-target {
    border-color: #0f6f7c;
    background: #eaf7fa;
    box-shadow: inset 4px 0 0 #0f6f7c, 0 0 0 2px rgba(15, 111, 124, .14);
}

.index-column-choice label {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.index-column-choice label span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drag-handle {
    display: inline-flex;
    width: 24px;
    height: 28px;
    align-items: center;
    justify-content: center;
    color: #60717d;
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

.drag-handle svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.index-layout-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem;
}

.index-layout-section-title h3 {
    margin: 0;
}

.index-sort-choice {
    display: grid;
    grid-template-columns: 26px 26px minmax(160px, 1fr) minmax(130px, .55fr) repeat(3, minmax(var(--app-icon-button-size, 34px), auto));
    align-items: center;
    gap: .35rem;
}

.index-sort-choice > span {
    color: #59717d;
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
}

.index-sort-choice select {
    min-width: 0;
    height: 34px;
    border: 1px solid #c8d8de;
    border-radius: 6px;
    background: #ffffff;
    color: #132f3c;
}

@media (max-width: 720px) {
    .index-layout-modal-body {
        grid-template-columns: 1fr;
    }

    .index-sort-choice {
        grid-template-columns: 24px 24px minmax(0, 1fr);
    }

    .index-sort-choice select,
    .index-sort-choice .icon-button {
        grid-column: auto;
    }
}

.api-token-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.api-token-new {
    max-width: 760px;
}

.api-token-new label {
    display: grid;
    grid-template-columns: 150px minmax(360px, 1fr) auto;
    align-items: center;
    gap: .55rem;
}

.api-token-note-input {
    min-width: 420px;
    width: min(58vw, 720px);
}

.api-token-created {
    position: relative;
    display: grid;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .9rem 3rem .9rem 1rem;
    border: 1px solid #9ed3b3;
    border-radius: 7px;
    background: #effaf3;
    color: #174e2b;
}

.api-token-created .icon-button {
    position: absolute;
    top: .45rem;
    right: .45rem;
}

.api-token-created code {
    display: block;
    padding: .6rem;
    border: 1px solid #bdd7c6;
    border-radius: 5px;
    background: #ffffff;
    color: #0f2630;
    word-break: break-all;
}

.api-token-inline-secret {
    display: block;
    width: min(100%, 820px);
    margin-top: .35rem;
    padding: .45rem .55rem;
    border: 1px solid #c7d9df;
    border-radius: 5px;
    background: #f7fbfc;
    color: #102b34;
    word-break: break-all;
}

.api-token-list {
    display: grid;
    gap: .65rem;
}

.api-token-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid #cfdde3;
    border-radius: 7px;
    background: #ffffff;
}

.api-token-row div {
    display: grid;
    gap: .2rem;
}

.api-token-row span {
    color: #5d727c;
    font-size: .82rem;
}

.api-token-row.revoked {
    opacity: .62;
    background: #f4f6f7;
}

.action-link-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.action-link-new {
    max-width: 760px;
}

.action-link-list {
    align-content: start;
    gap: .6rem;
}

.action-link-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .65rem;
    border: 1px solid #cfdde3;
    border-radius: 7px;
    background: #fff;
    color: #12313a;
    text-align: left;
    cursor: pointer;
}

.action-link-row-main {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.action-link-row-main strong,
.action-link-row-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-link-row-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}

.action-link-row-meta small {
    padding: .15rem .45rem;
    border: 1px solid #cfdde3;
    border-radius: 999px;
    background: #f7fbfc;
    color: #425c66;
}

.action-link-list-row.active {
    border-color: #0f7b85;
    box-shadow: inset 3px 0 0 #0f7b85;
}

.action-link-list-row span {
    color: #607680;
    font-size: .8rem;
}

.action-link-editor {
    gap: .85rem;
}

.action-link-backdrop {
    align-items: flex-start;
    justify-content: center;
    inset: 48px 0 0 0;
    padding: .75rem 1rem 1rem;
    overflow: auto;
    z-index: 6200;
}

.action-link-floating-editor {
    width: min(1120px, calc(100vw - 2rem));
    min-width: min(720px, calc(100vw - 2rem));
    min-height: min(520px, calc(100vh - 80px));
    max-height: calc(100vh - 80px);
    overflow: auto;
    resize: both;
    margin-top: 0;
}

.action-link-editor-body {
    display: grid;
    gap: .85rem;
    grid-template-rows: auto minmax(320px, 1fr);
}

.action-link-options {
    display: grid;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid #d6e3e8;
    border-radius: 7px;
    background: #f8fbfc;
}

.action-link-checks {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.action-link-floating-editor .property-grid.two {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.action-link-floating-editor input,
.action-link-floating-editor select,
.action-link-floating-editor textarea {
    max-width: 100%;
}

.action-link-floating-editor .advanced-code-editor {
    min-height: 320px;
}

.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) {
    align-self: stretch;
    width: auto;
    min-height: 78px;
    grid-template-columns: 18px 1fr;
    justify-items: stretch;
    text-align: left;
    padding: .42rem .5rem .42rem;
    border-radius: 7px;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--workflow-phase-color, #0f6f7c) 48%, transparent);
}

.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) .workflow-status-icon,
.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) .workflow-completion-indicator,
.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) .workflow-signers {
    display: inline-flex;
}

.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) strong,
.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) .workflow-phase-id,
.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) .workflow-branches,
.document-index-shell .workflow-phase-chip.is-gateway:not(.is-simple) .workflow-phase-indicators {
    grid-column: 2;
    padding-right: 5.7rem;
}

.document-index-shell .workflow-assignee-editor {
    width: min(260px, 100%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
}

.document-index-shell .workflow-assignee-list {
    grid-template-columns: 1fr;
    max-height: 120px;
    width: 100%;
}

.document-index-shell .workflow-assignee-editor-actions {
    justify-content: flex-end;
    width: 100%;
    margin-top: .2rem;
}

.document-index-shell .workflow-assignee-editor > strong {
    display: block;
    text-align: left;
    margin: .1rem 0 0;
    line-height: 1.1;
}

.document-index-shell .workflow-signers {
    padding-left: 0;
}

.document-index-shell .workflow-signers::before,
.document-index-shell .workflow-signer::before {
    display: none;
}

.workflow-modal.draggable-modal,
.action-link-floating-editor.draggable-modal {
    resize: both;
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - 64px);
}

.workflow-modal.draggable-modal:has(.workflow-graph-preview) {
    transform: none;
}

.draggable-modal-handle {
    cursor: move;
    user-select: none;
}

.draggable-modal.is-dragging {
    user-select: none;
}

.readonly-copy-row input {
    width: 100%;
    min-width: 0;
    font-family: Consolas, "Courier New", monospace;
}

@media (max-width: 760px) {
    .api-token-row,
    .action-link-list-row {
        align-items: stretch;
        flex-direction: column;
    }

    .action-link-row-meta {
        justify-content: flex-start;
    }

    .action-link-floating-editor {
        min-width: 0;
        min-height: 0;
        resize: none;
    }
}

.designer-validation-messages {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.designer-validation-message {
    display: block;
    width: 100%;
}

.runtime-rich-text-field {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.runtime-rich-text-preview {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: .55rem .7rem;
    border: 1px solid var(--border-color, #c7d5dd);
    border-radius: 7px 0 0 7px;
    background: var(--surface-color, #fff);
    color: var(--text-color, #172536);
    line-height: 1.45;
    white-space: normal;
}

.render-control .runtime-rich-text-reduced-editor {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 7px 0 0 7px;
    cursor: text;
    outline: none;
    user-select: text;
}

.render-control .runtime-rich-text-reduced-editor[contenteditable="true"]:focus {
    border-color: var(--primary-color, #0f7f8b);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color, #0f7f8b) 18%, transparent);
}

.runtime-rich-text-preview:empty::before {
    content: attr(data-placeholder);
    color: var(--muted-text, #607487);
}

.runtime-rich-text-preview p,
.runtime-rich-text-preview h2,
.runtime-rich-text-preview h3,
.runtime-rich-text-preview h4,
.runtime-rich-text-preview blockquote,
.runtime-rich-text-preview ul,
.runtime-rich-text-preview ol {
    margin-top: 0;
    margin-bottom: .55rem;
}

.runtime-rich-text-preview :last-child {
    margin-bottom: 0;
}

.runtime-rich-text-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 100%;
    min-height: 0;
    border: 1px solid var(--border-color, #c7d5dd);
    border-left: 0;
    border-radius: 0 7px 7px 0;
    background: var(--panel-color, #f7fafc);
    color: var(--accent-color, #0f7f8a);
    cursor: pointer;
}

.runtime-rich-text-expand svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.runtime-rich-text-expand:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.rich-text-editor-backdrop {
    z-index: 1200;
}

.rich-text-editor-modal {
    display: flex;
    flex-direction: column;
    width: min(1180px, 96vw);
    height: min(820px, 92vh);
    max-height: 92vh;
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #c7d5dd);
    border-radius: 10px;
    box-shadow: 0 22px 60px rgba(15, 35, 52, .28);
    overflow: hidden;
}

.rich-text-editor-modal > header,
.rich-text-editor-modal > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--border-color, #d7e1e7);
}

.rich-text-editor-modal > header span {
    display: block;
    margin-top: .1rem;
    color: var(--muted-text, #607487);
    font-size: .82rem;
}

.rich-text-editor-modal > footer {
    border-top: 1px solid var(--border-color, #d7e1e7);
    border-bottom: 0;
    justify-content: flex-end;
}

.rich-text-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--border-color, #d7e1e7);
    background: var(--panel-color, #f4f8fa);
}

.rich-text-editor-toolbar button,
.rich-text-editor-toolbar select,
.rich-text-editor-toolbar label {
    min-height: 32px;
    border: 1px solid var(--border-color, #c7d5dd);
    border-radius: 6px;
    background: var(--surface-color, #fff);
    color: var(--text-color, #172536);
}

.rich-text-editor-toolbar button {
    min-width: 34px;
    padding: .25rem .45rem;
    cursor: pointer;
}

.rich-text-editor-toolbar select {
    padding: .25rem .45rem;
}

.rich-text-editor-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .4rem;
    font-size: .78rem;
}

.rich-text-editor-toolbar input[type="color"] {
    width: 28px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
}

.rich-text-toolbar-separator {
    width: 1px;
    height: 24px;
    background: var(--border-color, #d7e1e7);
    margin: 0 .15rem;
}

.rich-text-editor-surface {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 1rem 1.1rem;
    background: var(--surface-color, #fff);
    color: var(--text-color, #172536);
    line-height: 1.5;
    outline: none;
}

.rich-text-editor-surface:focus {
    box-shadow: inset 0 0 0 2px rgba(15, 127, 138, .22);
}

.signature-pad {
    display: grid;
    gap: .45rem;
    width: 100%;
}

.signature-pad canvas {
    width: 100%;
    min-height: 160px;
    border: 1px solid var(--border-color, #c7d5dd);
    border-radius: 8px;
    background:
        linear-gradient(transparent calc(100% - 36px), rgba(15, 127, 138, .12) calc(100% - 35px), transparent calc(100% - 34px)),
        var(--surface-color, #fff);
    touch-action: none;
}

.checklist-attachments {
    display: grid;
    gap: .35rem;
    margin-top: .55rem;
}

.checklist-attachment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem .45rem;
    border: 1px solid var(--border-color, #d7e1e7);
    border-radius: 6px;
    background: var(--panel-color, #f7fafc);
}

.checklist-attachment-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-menu-designer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.custom-menu-editor,
.custom-menu-configured-list {
    min-width: 0;
}

.custom-menu-permissions {
    display: grid;
    gap: .8rem;
}

.permission-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.custom-menu-dual-list {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    min-width: 0;
}

.custom-menu-dual-list .dual-list-box {
    max-height: 170px;
    overflow: auto;
}

.custom-menu-dual-list .check-row {
    align-items: flex-start;
    gap: .4rem;
    padding: .18rem 0;
    font-size: .82rem;
    line-height: 1.25;
}

.custom-menu-items-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 .75rem;
}

.custom-menu-item-list {
    display: grid;
    gap: .65rem;
}

.custom-menu-item-editor {
    border: 1px solid var(--border-color, #cbd8df);
    border-radius: 8px;
    background: var(--surface-color, #fff);
    padding: .7rem;
}

.custom-menu-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
}

.dense-grid {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.custom-menu-configured-list {
    display: grid;
    gap: .6rem;
}

.custom-menu-table {
    display: grid;
    gap: .35rem;
}

.custom-menu-table-header,
.custom-menu-table-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) 90px minmax(180px, .7fr) minmax(320px, auto);
    gap: .75rem;
    align-items: center;
}

.custom-menu-table-header {
    padding: .35rem .65rem;
    color: var(--muted-text, #536a78);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.custom-menu-table-row {
    border: 1px solid var(--border-color, #cbd8df);
    border-radius: 8px;
    background: var(--surface-color, #fff);
    padding: .7rem;
    color: var(--text-color, #172536);
}

.custom-menu-table-row.active {
    border-color: var(--primary-color, #0f7f8a);
    box-shadow: inset 3px 0 0 var(--primary-color, #0f7f8a);
}

.custom-menu-table-row span,
.custom-menu-table-row small {
    color: var(--muted-text, #5c7180);
    font-size: .82rem;
}

.file-action {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.file-action input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.top-custom-menu-host {
    position: relative;
}

.top-custom-menu-panel {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    z-index: 60;
    min-width: 260px;
    max-width: min(420px, calc(100vw - 2rem));
    max-height: calc(100vh - 5rem);
    overflow: auto;
    padding: .35rem;
    border: 1px solid var(--border-color, #cbd8df);
    border-radius: 8px;
    background: var(--surface-color, #fff);
    box-shadow: 0 16px 38px rgba(15, 36, 48, .18);
}

.top-custom-menu-panel a,
.top-custom-menu-panel button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .55rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-color, #172536);
    padding: .48rem .55rem;
    text-align: left;
    text-decoration: none;
    font: inherit;
}

.top-custom-menu-panel a:hover,
.top-custom-menu-panel button:hover {
    background: var(--hover-color, #eef6f7);
}

.top-custom-menu-panel span,
.top-custom-menu-subtitle span {
    color: var(--text-color, #172536);
    opacity: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-custom-menu-panel svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.top-custom-menu-separator {
    height: 1px;
    margin: .35rem .25rem;
    background: var(--border-color, #cbd8df);
}

.top-custom-menu-spacer {
    height: .65rem;
}

.top-custom-menu-children {
    margin-left: .7rem;
    padding-left: .45rem;
    border-left: 1px solid var(--border-color, #d7e1e7);
}

.top-custom-menu-subtitle {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .48rem .55rem;
    color: var(--text-color, #172536);
    font-weight: 700;
}

@media (max-width: 980px) {
    .custom-menu-designer-layout {
        grid-template-columns: 1fr;
    }

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

    .custom-menu-table-header {
        display: none;
    }

    .custom-menu-table-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .permission-pair,
    .dense-grid {
        grid-template-columns: 1fr;
    }
}