/*
 * Cross-page compatibility layer for the CTP industrial workbench.
 * Feature layouts remain in site.css and scoped CSS; shared controls and
 * interaction states are normalized here while legacy pages migrate.
 */

html,
body {
    background: var(--ctp-color-page);
    color: var(--ctp-color-text);
    font-family: var(--ctp-font-sans);
    font-weight: var(--ctp-font-weight-body);
}

button,
input,
select,
textarea,
table {
    font-family: inherit;
}

:where(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--ctp-color-primary);
    outline-offset: 2px;
    box-shadow: var(--ctp-focus-ring);
}

button:not(.btn-close) {
    font-weight: var(--ctp-font-weight-control);
}

:is(.btn, .ant-btn, .modern-btn-primary, .modern-btn-secondary, .modern-btn-warning, .modern-btn-danger) {
    border-radius: var(--ctp-radius-control);
    font-weight: var(--ctp-font-weight-control);
    transition: var(--ctp-transition-interactive);
}

:is(.modern-btn-primary, .btn-primary) {
    border-color: var(--ctp-color-primary-deep);
    background: var(--ctp-color-primary);
    color: var(--ctp-color-on-primary);
    box-shadow: none;
}

:is(.modern-btn-primary, .btn-primary):hover,
:is(.modern-btn-primary, .btn-primary):active {
    border-color: var(--ctp-color-primary-deep);
    background: var(--ctp-color-primary-deep);
    color: var(--ctp-color-on-primary);
    box-shadow: none;
}

:is(.modern-btn-secondary, .ant-btn, .btn-outline-secondary, .btn-light) {
    border-color: var(--ctp-color-line);
    background: var(--ctp-color-surface);
    color: var(--ctp-color-helper-strong);
    box-shadow: none;
}

:is(.modern-btn-secondary, .ant-btn, .btn-outline-secondary, .btn-light):hover,
:is(.modern-btn-secondary, .ant-btn, .btn-outline-secondary, .btn-light):active {
    border-color: #a9cbd8;
    background: var(--ctp-color-action-soft);
    color: var(--ctp-color-primary-deep);
    box-shadow: none;
}

:is(.modern-btn-warning, .btn-warning, .btn-outline-warning) {
    border-color: var(--ctp-color-warning-border);
    background: var(--ctp-color-warning-bg);
    color: var(--ctp-color-warning-text);
    box-shadow: none;
}

:is(.modern-btn-warning, .btn-warning, .btn-outline-warning):hover,
:is(.modern-btn-warning, .btn-warning, .btn-outline-warning):active {
    border-color: var(--ctp-color-warning);
    background: var(--ctp-color-warning);
    color: #fff;
    box-shadow: none;
}

:is(.modern-btn-danger, .btn-danger, .btn-outline-danger) {
    border-color: var(--ctp-color-danger);
    background: var(--ctp-color-danger-bg);
    color: var(--ctp-color-danger-text);
    box-shadow: none;
}

:is(.modern-btn-danger, .btn-danger, .btn-outline-danger):hover,
:is(.modern-btn-danger, .btn-danger, .btn-outline-danger):active {
    border-color: var(--ctp-color-danger);
    background: var(--ctp-color-danger);
    color: #fff;
}

:where(.btn, .ant-btn, .modern-btn-primary, .modern-btn-secondary, .modern-btn-warning, .modern-btn-danger):disabled,
:where(.btn, .ant-btn, .modern-btn-primary, .modern-btn-secondary, .modern-btn-warning, .modern-btn-danger).disabled,
[aria-busy="true"] {
    cursor: not-allowed;
}

:where(.btn, .ant-btn, .modern-btn-primary, .modern-btn-secondary, .modern-btn-warning, .modern-btn-danger):disabled,
:where(.btn, .ant-btn, .modern-btn-primary, .modern-btn-secondary, .modern-btn-warning, .modern-btn-danger).disabled {
    border-color: var(--ctp-color-line);
    background: var(--ctp-color-page-subtle);
    color: #6d7f8c;
    box-shadow: none;
    opacity: .72;
}

:is(.form-control, .form-select, .searchable-select-trigger, .editable-searchable-select-control, .editable-searchable-select-input) {
    min-height: var(--app-control-height);
    border-color: var(--ctp-color-line);
    border-radius: var(--ctp-radius-control);
    background-color: var(--ctp-color-surface);
    color: var(--ctp-color-control-text);
    font-size: var(--ctp-font-size-control);
    font-weight: var(--ctp-font-weight-control);
    box-shadow: none;
}

:is(.form-control, .editable-searchable-select-input)::placeholder {
    color: var(--ctp-color-helper);
    font-weight: var(--ctp-font-weight-control);
    opacity: 1;
}

:where(.form-control, .form-select, .searchable-select-trigger):focus,
.editable-searchable-select-control:focus-within {
    border-color: var(--ctp-color-primary);
    box-shadow: var(--ctp-focus-ring);
}

:where(.form-control, .form-select)[readonly] {
    border-color: var(--ctp-color-line);
    background: var(--ctp-color-surface-muted);
    color: var(--ctp-color-helper-strong);
}

:where(.form-control, .form-select):disabled {
    border-color: var(--ctp-color-line);
    background: var(--ctp-color-page-subtle);
    color: #6d7f8c;
    opacity: 1;
}

/*
 * MacroHighlightField renders a visual text layer over a transparent native
 * input. Both layers must use identical font metrics, otherwise the native
 * caret drifts away from the text that is visible underneath it.
 */
.macro-highlight-editor > :is(.macro-highlight-layer, .macro-highlight-input) {
    box-sizing: border-box;
    font-family: var(--ctp-font-sans);
    font-size: var(--ctp-font-size-control);
    font-weight: var(--ctp-font-weight-control);
    letter-spacing: 0;
}

.macro-highlight-editor.is-input > :is(.macro-highlight-layer, .macro-highlight-input) {
    padding-top: 0;
    padding-bottom: 0;
    line-height: calc(var(--app-control-height) - 2px);
}

.macro-highlight-editor .macro-highlight-layer :is(.macro-var, .macro-ctx, .macro-token, .macro-data, .macro-date, .macro-unknown) {
    font-weight: inherit;
}

input.ctp-datetime-input {
    width: 100%;
    min-width: 0;
    color-scheme: light;
    font-family: var(--ctp-font-sans);
    font-weight: var(--ctp-font-weight-control);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

input.ctp-datetime-input::-webkit-datetime-edit {
    min-width: 0;
    padding: 0;
}

input.ctp-datetime-input::-webkit-calendar-picker-indicator {
    width: 18px;
    height: 18px;
    margin: 0 0 0 var(--ctp-space-2);
    padding: 0;
    cursor: pointer;
    opacity: .82;
}

input.ctp-datetime-input:disabled::-webkit-calendar-picker-indicator {
    cursor: not-allowed;
    opacity: .5;
}

:is(.form-label, .col-form-label) {
    color: var(--ctp-color-helper-strong);
    font-size: var(--ctp-font-size-control);
    font-weight: var(--ctp-font-weight-control);
}

.value-assistant-title-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--ctp-space-1);
    width: fit-content;
    max-width: 100%;
    min-height: var(--ctp-icon-size-md);
    height: auto;
    margin-bottom: var(--ctp-space-1);
    font-size: var(--ctp-font-size-control);
    line-height: 1;
    white-space: nowrap;
}

.value-assistant-title-inline > :is(.value-assistant-inline-label, .text-secondary, .value-assistant-link) {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    height: auto;
    min-height: 0;
    margin-bottom: 0;
    line-height: 1;
}

.value-assistant-title-inline > .value-assistant-link {
    font-family: var(--ctp-font-sans);
}

:is(.form-text, .app-page-header-subtitle, .app-page-header-stats, .empty-state-detail) {
    color: var(--ctp-color-helper);
    font-size: var(--ctp-font-size-helper);
    font-weight: var(--ctp-font-weight-helper);
}

.empty-state-message {
    font-size: var(--ctp-font-size-body);
}

.top-row .account-menu-avatar {
    font-size: var(--ctp-font-size-helper);
}

.panel-content {
    font-size: var(--ctp-font-size-body);
}

:is(.small, small) {
    font-size: var(--ctp-font-size-helper);
}

.local-serial-bridge-kicker {
    font-size: var(--ctp-font-size-helper);
}

code.text-break {
    font-size: var(--ctp-font-size-body);
}

:where(.card, .modern-card, .comm-log-card, .app-filter-card) {
    border-color: var(--ctp-color-line);
    border-radius: var(--ctp-radius-card);
    background: var(--ctp-color-surface);
    box-shadow: var(--ctp-shadow-subtle);
}

.card.app-filter-card,
.modern-card.app-filter-card {
    overflow: visible;
}

:where(.table, .modern-table) {
    --bs-table-bg: var(--ctp-color-surface);
    --bs-table-striped-bg: var(--ctp-color-surface-muted);
    --bs-table-hover-bg: var(--ctp-color-action-soft);
    --bs-table-active-bg: var(--ctp-color-selected);
    border-color: var(--ctp-color-line);
    color: var(--ctp-color-text);
}

:is(.table, .modern-table) thead th {
    border-color: var(--ctp-color-line);
    background: var(--ctp-color-page-subtle);
    color: var(--ctp-color-helper-strong);
    font-size: var(--ctp-font-size-control);
    font-weight: var(--ctp-font-weight-control);
}

:where(.table, .modern-table) tbody td {
    border-color: var(--ctp-color-line);
    vertical-align: middle;
    font-size: var(--ctp-font-size-body);
}

:where(.table, .modern-table) tbody tr[role="button"],
:where(.table, .modern-table) tbody tr[tabindex] {
    cursor: pointer;
}

:where(.table, .modern-table) tbody tr[aria-selected="true"] {
    background: var(--ctp-color-selected);
    box-shadow: inset 3px 0 0 var(--ctp-color-primary);
}

:where(.page-header-bar, .app-page-header) {
    gap: var(--ctp-space-3);
    border-color: var(--ctp-color-line);
    border-radius: var(--ctp-radius-card);
    background: var(--ctp-color-surface);
    box-shadow: var(--ctp-shadow-subtle);
}

:is(.page-title, .app-page-header h1) {
    color: var(--ctp-color-text);
    font-size: var(--ctp-font-size-page-title);
    font-weight: var(--ctp-font-weight-title);
}

:where(.dropdown-menu, .searchable-select-panel) {
    z-index: var(--ctp-z-dropdown);
    border-color: var(--ctp-color-line);
    border-radius: var(--ctp-radius-control);
    background: var(--ctp-color-surface);
    box-shadow: var(--ctp-shadow-floating);
}

:is(.dropdown-item, .searchable-select-option) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ctp-color-helper-strong);
    font-size: var(--ctp-font-size-control);
    font-weight: var(--ctp-font-weight-control);
    line-height: 1.25;
}

:where(.dropdown-item, .searchable-select-option):hover,
:where(.dropdown-item, .searchable-select-option):focus,
:where(.dropdown-item.active, .searchable-select-option.active, .searchable-select-option.selected) {
    background: var(--ctp-color-selected);
    color: var(--ctp-color-primary-deep);
}

.modal-overlay,
.modal.fade.show.d-block,
[data-ctp-modal-shell="true"],
[data-ctp-legacy-modal-active="true"] {
    z-index: calc(var(--ctp-z-modal) + var(--ctp-modal-stack-order, 0));
}

.modal-dialog {
    max-width: min(720px, calc(100vw - 32px));
}

.modal-dialog.modal-sm,
.modal-dialog.ctp-modal-sm {
    max-width: min(480px, calc(100vw - 32px));
}

.modal-dialog.modal-lg,
.modal-dialog.ctp-modal-lg {
    max-width: min(960px, calc(100vw - 32px));
}

.modal-dialog.modal-xl,
.modal-dialog.ctp-modal-xl {
    max-width: min(1200px, calc(100vw - 32px));
}

.modal-content {
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    border: 1px solid var(--ctp-color-line);
    border-radius: var(--ctp-radius-dialog);
    background: var(--ctp-color-surface);
    box-shadow: var(--ctp-shadow-dialog);
}

.modal-header,
.modal-footer {
    flex: 0 0 auto;
    border-color: var(--ctp-color-line);
    background: var(--ctp-color-surface);
}

.modal-body {
    min-height: 0;
    overflow: auto;
    background: var(--ctp-color-surface-muted);
}

.modal-footer {
    gap: var(--ctp-space-2);
}

.ctp-export-dropdown {
    position: relative;
    display: inline-flex;
}

.ctp-export-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--ctp-z-dropdown) - 1);
    border: 0;
    background: transparent;
}

.ctp-export-menu {
    top: calc(100% + var(--ctp-space-1));
    right: 0;
    left: auto;
    z-index: var(--ctp-z-dropdown);
    min-width: 148px;
    padding: var(--ctp-space-1);
}

.ctp-export-menu .dropdown-item {
    min-height: 30px;
    border: 0;
    border-radius: var(--ctp-radius-control);
}

.structured-value-dialog {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    height: calc(100dvh - 32px);
    margin: 16px auto;
}

.structured-value-dialog .modal-content {
    width: 100%;
    height: 100%;
}

.structured-value-summary {
    margin-top: var(--ctp-space-1);
    color: var(--ctp-color-helper);
    font-size: var(--ctp-font-size-helper);
    font-weight: var(--ctp-font-weight-helper);
}

.structured-value-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.structured-value-table-wrap {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow: auto;
    border: 1px solid var(--ctp-color-line);
    border-radius: var(--ctp-radius-control);
}

.structured-value-table {
    width: max-content;
    min-width: 100%;
}

.structured-value-table th,
.structured-value-table td {
    min-width: 120px;
    max-width: 360px;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.structured-value-table .structured-value-index,
.structured-value-table td:first-child {
    min-width: 56px;
    width: 56px;
}

.structured-value-table .structured-script-id {
    min-width: 88px;
    background: var(--ctp-color-surface-muted);
    color: var(--ctp-color-text-strong);
    font-weight: var(--ctp-font-weight-control);
    vertical-align: middle;
}

.structured-value-raw {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.structured-day-layout {
    display: grid;
    grid-template-columns: minmax(180px, 24%) minmax(0, 1fr);
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--ctp-color-line);
    border-radius: var(--ctp-radius-control);
    background: var(--ctp-color-surface);
}

.structured-day-list {
    display: grid;
    align-content: start;
    gap: var(--ctp-space-1);
    min-height: 0;
    padding: var(--ctp-space-2);
    overflow: auto;
    border-right: 1px solid var(--ctp-color-line);
    background: var(--ctp-color-surface-muted);
}

.structured-day-option {
    display: grid;
    gap: var(--ctp-space-1);
    min-height: var(--ctp-control-height);
    padding: var(--ctp-space-2);
    border: 1px solid transparent;
    border-radius: var(--ctp-radius-control);
    background: transparent;
    color: var(--ctp-color-text-strong);
    font-size: var(--ctp-font-size-control);
    font-weight: var(--ctp-font-weight-control);
    line-height: 1.25;
    text-align: left;
    transition: var(--ctp-transition-interactive);
}

.structured-day-option:hover,
.structured-day-option:focus-visible,
.structured-day-option.active {
    border-color: var(--ctp-color-primary);
    background: var(--ctp-color-selected);
    color: var(--ctp-color-primary-deep);
}

.structured-day-option small {
    color: var(--ctp-color-helper);
    font-size: var(--ctp-font-size-helper);
    font-weight: var(--ctp-font-weight-helper);
}

.structured-day-detail {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    gap: var(--ctp-space-2);
    min-width: 0;
    min-height: 0;
    padding: var(--ctp-space-2);
}

.structured-day-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ctp-space-2);
    color: var(--ctp-color-text-strong);
    font-size: var(--ctp-font-size-section-title);
    font-weight: var(--ctp-font-weight-title);
}

.structured-day-empty {
    padding: var(--ctp-space-3);
    border: 1px dashed var(--ctp-color-line);
    border-radius: var(--ctp-radius-control);
    background: var(--ctp-color-surface-muted);
    color: var(--ctp-color-helper);
    font-size: var(--ctp-font-size-helper);
    font-weight: var(--ctp-font-weight-helper);
}

.structured-value-trigger,
.structured-value-log-trigger {
    border: 1px solid var(--ctp-color-success-border);
    border-radius: var(--ctp-radius-control);
    background: var(--ctp-color-success-bg);
    color: var(--ctp-color-success-text);
    font-weight: var(--ctp-font-weight-control);
}

.structured-value-trigger {
    cursor: pointer;
}

.structured-value-log-trigger {
    margin-left: var(--ctp-space-2);
    padding: 2px var(--ctp-space-2);
    font-size: var(--ctp-font-size-helper);
}

.comm-log-structured-values {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ctp-space-2);
    margin-top: var(--ctp-space-2);
}

.comm-log-structured-values .structured-value-log-trigger {
    margin-left: 0;
}

.structured-value-trigger:hover,
.structured-value-log-trigger:hover {
    border-color: var(--ctp-color-primary);
    background: var(--ctp-color-action-soft);
    color: var(--ctp-color-primary-deep);
}

.app-toast-container {
    z-index: var(--ctp-z-toast);
}

.modern-toast {
    border-color: var(--ctp-color-line);
    border-radius: var(--ctp-radius-card);
    background: var(--ctp-color-surface);
    box-shadow: var(--ctp-shadow-floating);
}

.modern-toast.toast-success {
    border-left: 3px solid var(--ctp-color-success);
}

.modern-toast.toast-warning {
    border-left: 3px solid var(--ctp-color-warning);
}

.modern-toast.toast-danger {
    border-left: 3px solid var(--ctp-color-danger);
}

.modern-toast.toast-info {
    border-left: 3px solid var(--ctp-color-info);
}

.ctp-status-toast .ctp-status-toast-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--ctp-space-2);
    padding: var(--ctp-space-2) var(--ctp-space-3);
}

.ctp-status-toast-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--ctp-color-info);
}

.toast-success .ctp-status-toast-mark {
    color: var(--ctp-color-success);
}

.toast-warning .ctp-status-toast-mark {
    color: var(--ctp-color-warning);
}

.toast-danger .ctp-status-toast-mark {
    color: var(--ctp-color-danger);
}

.ctp-status-toast-mark svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.ctp-status-toast-content {
    min-width: 0;
}

.ctp-status-toast-message {
    font-size: var(--ctp-font-size-control);
    font-weight: var(--ctp-font-weight-control);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ctp-status-toast .btn-close {
    flex: 0 0 auto;
    margin: 0;
}

.toast-message-success,
.text-success {
    color: var(--ctp-color-success-text) !important;
}

.toast-message-warning,
.text-warning {
    color: var(--ctp-color-warning-text) !important;
}

.toast-message-danger,
.text-danger {
    color: var(--ctp-color-danger-text) !important;
}

.toast-message-info,
.text-info {
    color: var(--ctp-color-info) !important;
}

:where(.ant-tag, .badge, .status-badge, .dlms-wb-status, .dlms-wb-recorder-status) {
    border-radius: var(--ctp-radius-pill);
    font-size: var(--ctp-font-size-control);
    font-weight: var(--ctp-font-weight-control);
}

.app-header-tools {
    gap: var(--ctp-space-2);
}

.ant-layout-header .app-header-icon-button,
.ant-layout-header .display-size-trigger,
.ant-layout-header .review-message-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-control-height);
    min-width: var(--app-control-height) !important;
    height: var(--app-control-height);
    min-height: var(--app-control-height);
    padding: 0;
    border-color: var(--ctp-color-line);
    border-radius: var(--ctp-radius-control);
    background: var(--ctp-color-surface);
    color: var(--ctp-color-helper-strong);
    box-shadow: none;
    transition: var(--ctp-transition-interactive);
}

.ant-layout-header .app-header-icon-button:hover,
.ant-layout-header .display-size-trigger:hover,
.ant-layout-header .review-message-trigger:hover {
    border-color: var(--ctp-color-success-border);
    background: var(--ctp-color-action-soft);
    color: var(--ctp-color-primary-deep);
    box-shadow: var(--ctp-focus-ring);
}

.app-filter-body {
    gap: var(--ctp-space-3);
}

.app-filter-quick-actions {
    padding-top: var(--ctp-space-2);
    border-color: var(--ctp-color-line);
}

.paged-result-footer {
    min-height: calc(var(--app-control-height) + var(--ctp-space-3));
    border-color: var(--ctp-color-line);
    background: var(--ctp-color-surface-muted);
}

.comm-log-list > .paged-result-footer {
    background: var(--ctp-color-surface);
    box-shadow: var(--ctp-shadow-subtle);
}

.scheme-publish-selected-actions .btn,
.task-editor-footer .btn,
.serial-tools-header-actions .btn,
.serial-tool-action-row .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--app-control-height);
}

.serial-tool-action-row {
    align-items: center;
    flex-wrap: wrap;
}


@media (max-width: 768px) {
    .modal-dialog.structured-value-dialog,
    .modal-dialog.structured-value-dialog.structured-value-dialog-max {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
        margin: 8px;
    }

    .structured-day-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .structured-day-list {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        max-height: 160px;
        border-right: 0;
        border-bottom: 1px solid var(--ctp-color-line);
    }

    .ant-layout-header .account-menu-name {
        display: none;
    }

    .ant-layout-header .account-menu-trigger {
        min-width: var(--app-control-height);
        padding-inline: var(--ctp-space-1);
    }
}

:where(.ant-tag-success) {
    border-color: var(--ctp-color-success-border) !important;
    background-color: var(--ctp-color-success-bg) !important;
    color: var(--ctp-color-success-text) !important;
}

:where(.ant-tag-warning) {
    border-color: var(--ctp-color-warning-border) !important;
    background-color: var(--ctp-color-warning-bg) !important;
    color: var(--ctp-color-warning-text) !important;
}

:where(.ant-tag-error) {
    border-color: var(--ctp-color-danger-border) !important;
    background-color: var(--ctp-color-danger-bg) !important;
    color: var(--ctp-color-danger-text) !important;
}

:where(.ant-tag-info) {
    border-color: var(--ctp-color-info-border) !important;
    background-color: var(--ctp-color-info-bg) !important;
    color: var(--ctp-color-info-text) !important;
}

:is(.text-bg-primary, .bg-primary) {
    border-color: var(--ctp-color-primary-deep) !important;
    background-color: var(--ctp-color-primary) !important;
    color: var(--ctp-color-on-status-solid) !important;
}

:is(.text-bg-success, .bg-success) {
    border-color: var(--ctp-color-success) !important;
    background-color: var(--ctp-color-success) !important;
    color: var(--ctp-color-on-status-solid) !important;
}

:is(.text-bg-info, .bg-info) {
    border-color: var(--ctp-color-info) !important;
    background-color: var(--ctp-color-info) !important;
    color: var(--ctp-color-on-status-solid) !important;
}

:is(.text-bg-warning, .bg-warning) {
    border-color: var(--ctp-color-warning) !important;
    background-color: var(--ctp-color-warning) !important;
    color: var(--ctp-color-on-status-solid) !important;
}

:is(.text-bg-danger, .bg-danger) {
    border-color: var(--ctp-color-danger) !important;
    background-color: var(--ctp-color-danger) !important;
    color: var(--ctp-color-on-status-solid) !important;
}

.form-error-text,
.validation-message {
    color: var(--ctp-color-danger-text);
    font-size: var(--ctp-font-size-helper);
    font-weight: var(--ctp-font-weight-control);
}

.inline-feedback-actions {
    display: flex;
    gap: var(--ctp-space-2);
    margin-top: var(--ctp-space-2);
}

.ctp-mono,
.dlms-wb-mono,
.dlms-wb-log-payload,
code,
pre {
    font-family: var(--ctp-font-mono);
    font-variant-numeric: tabular-nums;
}

.ctp-numeric,
.paged-result-count,
.paged-result-page,
time {
    font-variant-numeric: tabular-nums;
}

/* Precision enterprise workbench primitives shared by Web and DLMS. */
.ctp-surface {
    min-width: 0;
    border: 1px solid var(--ctp-color-line);
    border-radius: var(--ctp-radius-card);
    background: var(--ctp-color-surface-raised);
}

.ctp-surface-muted {
    background: var(--ctp-color-surface-muted);
    box-shadow: none;
}

.ctp-surface-inset {
    background: var(--ctp-color-surface-inset);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.ctp-surface-raised {
    box-shadow: var(--ctp-shadow-card);
}

.ctp-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ctp-space-3);
    min-width: 0;
    padding-bottom: var(--ctp-space-3);
    border-bottom: 1px solid var(--ctp-color-line);
}

.ctp-section-header-copy {
    min-width: 0;
}

.ctp-section-title {
    margin: 0;
    color: var(--ctp-color-text-strong);
    font-size: var(--ctp-font-size-section-title);
    font-weight: var(--ctp-font-weight-title);
    line-height: 1.25;
}

.ctp-section-description {
    margin: var(--ctp-space-1) 0 0;
    color: var(--ctp-color-helper);
    font-size: var(--ctp-font-size-helper);
    font-weight: var(--ctp-font-weight-helper);
    line-height: 1.4;
}

.ctp-section-actions,
.ctp-command-bar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ctp-space-2);
    flex-wrap: wrap;
}

.ctp-command-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ctp-space-3);
    min-width: 0;
    padding: var(--ctp-space-2) var(--ctp-space-3);
    border: 1px solid var(--ctp-color-line);
    border-radius: var(--ctp-radius-card);
    background: var(--ctp-color-surface-muted);
}

.ctp-command-bar-main {
    display: flex;
    align-items: center;
    gap: var(--ctp-space-2);
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.ctp-icon-button {
    width: var(--ctp-control-height);
    min-width: var(--ctp-control-height);
    height: var(--ctp-control-height);
    min-height: var(--ctp-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--ctp-color-line);
    border-radius: var(--ctp-radius-control);
    background: var(--ctp-color-surface);
    color: var(--ctp-color-helper-strong);
    box-shadow: none;
    transition: var(--ctp-transition-interactive);
}

.ctp-icon-button:hover,
.ctp-icon-button:active {
    border-color: var(--ctp-color-line-interactive);
    background: var(--ctp-color-action-soft);
    color: var(--ctp-color-primary-deep);
}

.ctp-icon-button:disabled {
    border-color: var(--ctp-color-line);
    background: var(--ctp-color-page-subtle);
    color: var(--ctp-color-helper);
}

:where(.card, .modern-card, .comm-log-card):not(.login-card) {
    box-shadow: none;
}

:where(.card, .modern-card, .comm-log-card) > :is(.card-header, .modern-card-header) {
    background: var(--ctp-color-surface-muted);
    border-bottom-color: var(--ctp-color-line);
}

.app-filter-card {
    margin-bottom: var(--ctp-space-3);
    padding: var(--ctp-space-3);
    border-color: var(--ctp-color-line);
    background: var(--ctp-color-surface-muted);
    box-shadow: none;
}

.app-filter-card .card-body {
    padding: 0;
}

.app-filter-body,
.app-filter-grid {
    gap: var(--ctp-space-3);
}

:where(.page-header-bar, .app-page-header) {
    min-height: 0;
    padding: var(--ctp-space-1) 0 var(--ctp-space-3);
    border: 0;
    border-bottom: 1px solid var(--ctp-color-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

:where(.page-header-bar, .app-page-header)::before {
    top: var(--ctp-space-1);
    bottom: var(--ctp-space-3);
    width: 3px;
    border-radius: var(--ctp-radius-pill);
}

.app-page-header-main {
    flex: 1 1 24rem;
    min-width: 0;
    max-width: 100%;
    padding-left: var(--ctp-space-3);
}

.app-page-header-actions {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

:is(.app-page-header-subtitle, .app-page-header-stats) {
    min-width: 0;
    max-width: 100%;
    font-size: var(--ctp-font-size-helper);
    font-weight: var(--ctp-font-weight-helper);
}

:where(.dropdown-menu, .searchable-select-panel) {
    transform-origin: top right;
    animation: ctp-float-in var(--ctp-motion-standard) var(--ctp-ease-standard);
}

:where(.table-responsive, .app-table-container, .dlms-wb-tablewrap, .dlms-wb-maintenance-table-wrap, .dlms-wb-rule-table-wrap) :is(thead th) {
    position: sticky;
    top: 0;
    z-index: 1;
}

:where(.table, .modern-table) tbody tr {
    transition: background-color var(--ctp-motion-fast) var(--ctp-ease-standard);
}

@keyframes ctp-float-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .ctp-section-header,
    .ctp-command-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .ctp-section-actions,
    .ctp-command-bar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .modal-dialog,
    .modal-dialog.modal-sm,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl,
    .modal-dialog.ctp-modal-sm,
    .modal-dialog.ctp-modal-lg,
    .modal-dialog.ctp-modal-xl {
        width: auto;
        max-width: calc(100vw - 16px);
        margin: 8px;
    }

    .modal-content {
        max-height: calc(100dvh - 16px);
    }
}

/* The step manager is a data-dense workbench and needs nearly the full viewport. */
.scheme-step-manager-dialog {
    width: calc(100vw - var(--ctp-space-6));
    max-width: none;
    height: calc(100dvh - var(--ctp-space-6));
    margin: var(--ctp-space-3) auto;
}

.scheme-step-manager-content {
    max-height: none;
}

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