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, #082042 0%, #214b5b 55%, #f5f7f8 55%);
}

.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);
}

.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;
}

.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;
}

.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-message {
    margin: 0;
    padding: .65rem .75rem;
    border: 1px solid #b8dce4;
    border-radius: 8px;
    color: #144e5a;
    background: #eef8fa;
}

.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-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;
    }
}

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

.app-topbar {
    position: sticky;
    top: 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;
    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-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;
}

.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);
}

.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);
}

.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: #0f6f7c;
    color: #ffffff;
    background: #0f6f7c;
}

.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-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-config-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;
}

.document-shell {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    min-height: calc(100vh - 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 {
    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: hidden;
}

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

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

.document-main {
    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 span {
    font-weight: 700;
}

.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;
}

.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: 5000;
    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 {
    border: 0;
    border-radius: 5px;
    padding: .45rem;
    color: #263740;
    background: #f5f7f8;
    text-align: left;
    text-decoration: none;
}

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;
}

.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 {
    min-height: 0;
    margin-bottom: .45rem;
    padding: .15rem 0 .25rem;
    align-items: center;
}

.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-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;
}

.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;
    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 div {
    min-width: 0;
    flex: 1;
}

.tree-row small {
    display: block;
    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;
    gap: .6rem;
    margin: .35rem 0 .7rem 2.75rem;
    font-size: .85rem;
}

.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;
    min-height: 520px;
    max-height: 72vh;
    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-visual-surface {
    position: relative;
    min-width: 1200px;
    min-height: 700px;
}

.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;
}

.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;
}

.workflow-properties-panel {
    position: sticky;
    top: .75rem;
    display: grid;
    gap: .6rem;
}

.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;
    min-width: 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-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;
}

.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;
}

.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 {
    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-column-sort:hover,
.index-column-filter-toggle:hover {
    border-color: #c9d5d8;
    background: #ffffff;
}

.index-column-filter-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;
}

.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: 190px minmax(640px, 1fr) 300px;
    gap: .8rem;
    align-items: start;
}

.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;
}

.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-bottom: 1px solid #e2e8ea;
}

.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.primary {
    color: #ffffff;
    border-color: #087887;
    background: #087887;
}

.designer-validation {
    position: relative;
    display: grid;
    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.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-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 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 {
    padding: .16rem .25rem;
    border: 1px solid #d5e3e8;
    border-radius: 6px;
    background: #f8fbfc;
    min-height: 32px;
    flex-wrap: nowrap;
}

.dashboard-export-group span {
    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;
}

.secondary-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-grid-wrap {
    height: 100%;
    overflow: auto;
}

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

.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 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;
}

.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-field-bank,
.dashboard-pivot-area {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid #c8dce4;
    border-radius: 8px;
    background: #f8fbfc;
}

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

.dashboard-pivot-area-row {
    grid-template-columns: auto 1fr 1fr auto;
}

.dashboard-pivot-area-row label {
    margin: 0;
}

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

.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: .85rem .75rem 3rem 2.15rem;
    border-left: 1px solid #d7e4e9;
    border-bottom: 1px solid #d7e4e9;
    overflow: hidden;
}

.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 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    min-height: 8px;
    border: 0;
    border-radius: 3px 3px 0 0;
    opacity: .9;
    cursor: pointer;
}

.dashboard-bar-group button strong {
    display: block;
    max-width: 100%;
    margin-top: -1.35rem;
    color: #12313a;
    font-size: .65rem;
    white-space: nowrap;
    transform: rotate(-20deg);
}

.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;
}

.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: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 {
    display: grid;
    place-items: center;
    align-content: center;
    gap: .25rem;
    height: 100%;
    border-radius: 50%;
    max-width: 180px;
    aspect-ratio: 1;
    margin: auto;
    background: conic-gradient(var(--accent) 0 var(--percent), #dfeaed var(--percent) 100%);
    color: #12313a;
}

.dashboard-pie strong,
.dashboard-pie span {
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    padding: .18rem .5rem;
}

.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: 92vh;
}

.dashboard-sql-editor-toolbar {
    display: flex;
    align-items: end;
    gap: .45rem;
    flex-wrap: wrap;
    margin-bottom: .55rem;
}

.dashboard-sql-editor-toolbar label {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 260px;
    font-size: .78rem;
    font-weight: 700;
}

.dashboard-sql-editor-toolbar input {
    border: 1px solid #c9d8df;
    border-radius: 5px;
    padding: .4rem .5rem;
}

.dashboard-sql-editor {
    height: min(58vh, 620px);
    min-height: 360px;
    border: 1px solid #c9d8df;
    border-radius: 6px;
    overflow: hidden;
}

.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;
}

.dashboard-column-editor-modal {
    width: min(1120px, calc(100vw - 48px));
    max-height: calc(100vh - 70px);
    overflow: auto;
}

.dashboard-grid-column-list.popup {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: .75rem 0;
}

.dashboard-grid-column-list.popup .dashboard-grid-column-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 170px;
    align-items: center;
    gap: .65rem;
    border: 1px solid #cfdde3;
    border-radius: 8px;
    padding: .7rem;
    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: minmax(160px, 1.1fr) minmax(160px, 1.1fr) 92px 130px;
    gap: .55rem;
    align-items: end;
}

.dashboard-grid-column-options {
    grid-template-columns: minmax(260px, 1fr) 100px 118px 150px 90px;
    margin-top: .45rem;
    padding-top: .45rem;
    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-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: .3rem;
    align-self: center;
}

.dashboard-grid-column-actions .danger-action {
    grid-column: 1 / -1;
}

.dashboard-grid-column-dropzone {
    display: grid;
    place-items: center;
    min-height: 24px;
    border: 1px dashed transparent;
    border-radius: 6px;
    color: transparent;
    font-size: .72rem;
    font-weight: 800;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.dashboard-grid-column-dropzone:hover,
.dashboard-grid-column-dropzone.active {
    background: #0f7b85;
    border-color: #0a6971;
    color: #fff;
}

.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-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 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 {
    min-height: calc(100vh - 18px);
}

.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;
    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.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;
    left: 2px;
    bottom: 2px;
    max-width: calc(100% - 8px);
    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;
}

.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: #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: #eef3f4;
}

.tab-preview {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    border: 1px solid #b7c5ca;
    background: #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;
    color: #7a8a92;
    font-size: .78rem;
}

.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;
}

.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;
}

.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;
}

.primary-action {
    border: 0;
    border-radius: 6px;
    padding: .55rem .75rem;
    color: #ffffff;
    background: 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);
}

.danger-action {
    color: #8a1f17;
    border-color: #e1b8b4;
    background: #fff7f6;
}

.inline-actions {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
}

.sql-query-editor-section {
    display: grid;
    gap: .7rem;
    min-width: 0;
}

.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-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-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;
}

.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);
}

.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;
}

.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;
}

.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;
}

@media (max-width: 900px) {
    .virtual-group-row {
        grid-template-columns: 1fr;
    }

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

.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);
}

.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: grid;
    gap: .2rem;
    margin-top: .85rem;
    max-height: min(520px, calc(100vh - 230px));
    overflow: auto;
    padding-right: .25rem;
}

.grid-column-drop-zone {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border: 1px dashed #8fb4bd;
    border-radius: 6px;
    color: #087887;
    background: #edf7f9;
    font-size: .76rem;
    font-weight: 700;
}

.grid-column-list:has(.grid-column-editor.dragging) .grid-column-drop-zone {
    display: flex;
}

.grid-column-drop-zone.active {
    min-height: 40px;
    border-color: #087887;
    background: #dff2f5;
}

.grid-columns-floating {
    width: min(1120px, 100%);
}

.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 {
    min-width: 0;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .5rem .6rem;
    color: #1d2430;
    background: #ffffff;
    font-weight: 400;
}

.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;
}

.event-editor-main {
    display: grid;
    gap: .8rem;
    padding: .9rem;
}

.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;
    min-height: 520px;
    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-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-modal {
    position: fixed;
    inset: 1rem;
    z-index: 99991;
    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-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: .8rem;
    padding: .9rem;
}

.advanced-code-event-toolbar {
    grid-template-columns: minmax(180px, 1fr) minmax(140px, 180px) minmax(0, 1fr) auto;
}

.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);
}

.advanced-code-editor-pane {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

.advanced-code-editor-host {
    min-height: 0;
    width: 100%;
}

.advanced-runtime-code-editor {
    min-height: 0;
    height: 100%;
}

.advanced-code-fallback {
    width: 100%;
    height: 100%;
    min-height: 24rem;
    resize: none;
    border: 0;
    border-top: 1px solid #dbe7ea;
    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));
    }
}

.event-editor-shell.fullscreen .runtime-code-editor {
    min-height: calc(100vh - 300px);
}

.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;
}

.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;
}

.render-control {
    position: absolute;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    padding: .25rem;
    background: transparent !important;
}

.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 textarea {
    width: 100%;
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .55rem .65rem;
    color: #1d2430;
    background: #f8fafb;
    font-weight: 400;
}

.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-label {
    display: flex;
    align-items: center;
    color: #31444e;
    font-weight: 700;
}

.render-tab-container {
    border: 1px solid #d4dee2;
    background: #fbfcfc !important;
}

.render-tabs {
    display: flex;
    align-items: flex-end;
    height: 100%;
    border-radius: 6px;
    background: #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-grid-container {
    border: 1px solid #d4dee2;
    background: #ffffff !important;
    overflow: visible;
}

.render-grid-container.auto-height {
    overflow: visible;
    height: auto !important;
    min-height: max-content;
}

.render-grid {
    min-height: 100%;
    overflow: visible;
}

.render-grid-container.auto-height .render-grid {
    height: auto;
}

.render-grid strong {
    color: #31444e;
}

.render-grid-title {
    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 {
    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;
}

.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 {
    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%;
    border-collapse: collapse;
}

.render-grid-body {
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid #d9e1e4;
}

.render-grid th, .render-grid td {
    padding: .55rem .5rem;
    vertical-align: top;
}

.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 {
    width: 100%;
    min-width: 120px;
    height: 32px;
    border: 1px solid #c9d5d8;
    border-radius: 5px;
    padding: .45rem .5rem;
    background: #ffffff;
}

.render-grid-pager {
    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;
}

.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: grid;
    grid-template-columns: 62px minmax(92px, 1fr) minmax(140px, 1.35fr) minmax(150px, 1.45fr) 76px 118px 72px 36px;
    align-items: end;
    gap: .4rem;
    border: 1px solid #d9e1e4;
    border-radius: 6px;
    padding: .45rem;
    background: #fbfcfc;
    cursor: grab;
}

.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-editor label.tiny {
    max-width: 62px;
}

.grid-column-editor label.small {
    max-width: 118px;
}

.grid-column-actions {
    display: flex;
    justify-content: flex-end;
    gap: .25rem;
}

.grid-column-actions button {
    border: 1px solid #c9d5d8;
    border-radius: 6px;
    padding: .25rem .45rem;
    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: #263740;
    background: #ffffff;
}

.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-primary, #0f6f7c);
    color: #ffffff;
    background: var(--app-primary, #0f6f7c);
}

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

.icon-button:disabled {
    opacity: .45;
}

.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;
}

.workflow-inline-header {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .35rem;
}

.workflow-inline-header span {
    color: #536773;
    font-size: .68rem;
    margin-right: auto;
}

.workflow-phase-strip {
    display: grid;
    grid-auto-columns: minmax(210px, 250px);
    grid-auto-flow: row;
    gap: .45rem;
    overflow-x: auto;
    padding: .15rem .05rem .28rem;
}

.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 {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: .12rem .42rem;
    min-width: 0;
    min-height: 78px;
    grid-column: var(--workflow-phase-column, auto);
    border: 1px solid #d8e2e7;
    border-radius: 7px;
    padding: .42rem .5rem;
    background: #ffffff;
}

.workflow-phase-chip strong {
    font-size: .88rem;
    line-height: 1.12;
}

.workflow-phase-chip strong,
.workflow-phase-chip .workflow-phase-id,
.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-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 {
    border: 1px solid #d7e4ea;
    border-left: 4px solid #0f6f7c;
    border-radius: 7px;
    background: #f8fbfc;
    padding: .55rem .65rem;
}

.workflow-log-entry.error {
    border-left-color: #b42318;
    background: #fff4f2;
}

.workflow-log-entry header {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .75rem;
    align-items: center;
    color: #244653;
    font-size: .8rem;
}

.workflow-log-entry.error header {
    color: #7a271a;
}

.workflow-log-entry p {
    margin: .35rem 0 0;
    color: #1e3540;
    font-size: .82rem;
    line-height: 1.35;
    white-space: pre-wrap;
}

.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;
    background: #fffbea;
}

.workflow-phase-chip.is-closed .workflow-status-icon {
    color: #166534;
    background: #cdeed8;
}

.workflow-phase-chip.is-closed {
    border-color: #1f8a45;
    background: #f0fbf4;
}

.workflow-phase-chip.is-pending .workflow-status-icon {
    color: #71808a;
    background: #ffffff;
}

.workflow-phase-chip.is-pending {
    background: #ffffff;
}

.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;
    width: fit-content;
    border-radius: 999px;
    padding: .08rem .34rem;
    font-size: .68rem;
    line-height: 1.25;
    background: #eef4f6;
}

.workflow-signer b {
    font-size: .62rem;
    font-weight: 700;
    margin-left: .08rem;
    opacity: .82;
}

.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-sign-actions {
    display: flex;
    align-items: center;
    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;
}

.workflow-phase-menu {
    z-index: 5100;
}

.workflow-phase-menu strong {
    padding: .35rem .5rem .2rem;
    color: #31444e;
    font-size: .82rem;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    background: rgb(15 23 42 / .28);
}

.workflow-modal {
    width: min(1380px, 96vw);
    height: min(820px, 90vh);
    border: 1px solid #cbd8de;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgb(15 23 42 / .25);
    overflow: hidden;
}

.workflow-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .85rem;
    border-bottom: 1px solid #d8e2e7;
}

.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;
}

.workflow-readonly-node.is-closed {
    color: #14532d;
    border-color: #1f8a45;
    background: #c7efd5;
}

.workflow-readonly-node.is-pending {
    color: #263740;
    border-color: var(--workflow-node-color, #bcc8cc);
    background: #ffffff;
}

.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-editor {
        grid-template-columns: 56px minmax(140px, 1fr) minmax(150px, 1fr) minmax(150px, 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-editor {
        grid-template-columns: 1fr 1fr;
    }

    .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 .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-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;
}

.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-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: 32px;
    padding: 0 6px;
    border: 1px solid #c9d8de;
    border-radius: 8px;
    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));
    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: minmax(220px, .85fr) minmax(280px, 1.15fr);
    gap: 1rem;
    padding: 1rem;
    overflow: auto;
}

.index-layout-modal h3 {
    margin: 0 0 .65rem;
    color: #10232f;
    font-size: .9rem;
}

.index-column-choice-list,
.index-sort-choice-list {
    display: grid;
    gap: .45rem;
}

.index-column-choice-list label {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .5rem;
    border: 1px solid #d8e5e9;
    border-radius: 6px;
    background: #f8fbfc;
    color: #12303d;
    font-size: .86rem;
}

.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 minmax(140px, 1fr) minmax(110px, .7fr) repeat(3, 34px);
    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 minmax(0, 1fr) minmax(96px, .7fr) repeat(3, 32px);
    }
}

.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;
    padding: 4vh 3vw;
    overflow: auto;
}

.action-link-floating-editor {
    width: min(1320px, 96vw);
    max-height: 92vh;
    overflow: auto;
}

.action-link-editor-body {
    display: grid;
    gap: .85rem;
}

.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;
}

.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;
    }
}