/* ================================= Variabeles ================================= */
:root {
    --color-main-background: #ffffff;
    --color-float-background: #ffffff;
    --color-white: #ffffff;
    --color-black: #222222;
    --color-gray-50: #F7F8F9;
    --color-gray-100: #F4F6F7;
    --color-gray-200: #F1F3F4;
    --color-gray-300: #E3E6EC;
    --color-gray-400: #C1CBD6;
    --color-gray-500: #A1AEBD;
    --color-gray-600: #909FB0;
    --color-gray-800: #596064;
    --color-gray-900: #444444;
    --color-blurple-100: #F4F5FF;
    --color-blurple-200: #C8CEFF;
    --color-blurple-300: #9b9bFF;
    --color-blurple-400: #6A5CF1;
    --color-blurple-500: #2F1ED6;
    --color-blurple-800: #0E009A;
    --color-primary-light: #ECECFF;
    --color-red-50: #FFF3F3;
    --color-red-100: #FFD6D7;
    --color-red-500: #F51929;
    --color-red-600: #E50011;
    --color-red-700: #AC0814;
    --font-default: Roboto, sans-serif;
    --font-size: 0.75rem;
    --font-color: var(--color-black);
    --border-radius: 4px;
    --border-width: 1px;
    --border-style: solid;
    --border-color: var(--color-blurple-500);
    --button-border: var(--border-width) var(--border-style) var(--border-color);
}

/* ======================== Dark theme overrides ======================== */
/* Colors sourced from the Accounting4U website theme (Website/assets/css/theme.css) */
[data-bs-theme="dark"] {
    --color-main-background: #050414;
    --color-float-background: #0f0e24;
    --color-white: #0f0e24;
    --color-black: #f6f5ff;
    --color-gray-50: #18153a;
    --color-gray-100: #18153a;
    --color-gray-200: #1e1b47;
    --color-gray-300: #2b2a4a;
    --color-gray-400: #3d3a66;
    --color-gray-500: #8a86b0;
    --color-gray-600: #b3afd7;
    --color-gray-800: #d0cde8;
    --color-gray-900: #f6f5ff;
    --color-blurple-100: #18153a;
    --color-blurple-200: #2b2a5e;
    --color-blurple-300: #8b7bff;
    --color-blurple-400: #8b7bff;
    --color-blurple-500: #5b4cff;
    --color-blurple-800: #8b7bff;
    --color-primary-light: #2b2a5e;
    --color-red-50: #2a0a0f;
    --color-red-100: #3d1018;
    --font-color: #f6f5ff;
    --border-color: var(--color-blurple-500);
}

/* Dark theme: page-wrapper and content area backgrounds */
[data-bs-theme="dark"] .page-wrapper {
    background-color: var(--color-main-background) !important;
}

[data-bs-theme="dark"] .page-wrapper .container-fluid {
    background-color: var(--color-float-background) !important;
    color: var(--font-color);
}

/* Dark theme: cards, modals, popovers */
[data-bs-theme="dark"] .card {
    background-color: var(--color-float-background);
    color: var(--font-color);
    border-color: var(--color-gray-300);
}

[data-bs-theme="dark"] .card-footer {
    border-color: var(--color-gray-300);
}

/* Dark theme: input fields */
[data-bs-theme="dark"] .a4u_input-field {
    background-color: #18153a;
    color: var(--font-color);
    border-color: var(--color-gray-400);
}

[data-bs-theme="dark"] .a4u_input-field:disabled {
    background-color: #1e1b47;
    color: var(--color-gray-600);
}

[data-bs-theme="dark"] .a4u_input-field-label {
    color: var(--color-gray-600) !important;
    background-color: var(--color-float-background) !important;
}

[data-bs-theme="dark"] .a4u_input-field:disabled ~ .a4u_input-field-label {
    background-color: transparent !important;
}

/* Dark theme: buttons */
[data-bs-theme="dark"] .a4u-filled-button {
    background-color: var(--color-blurple-500);
    color: #f6f5ff;
}

[data-bs-theme="dark"] .a4u-filled-button:hover {
    background-color: var(--color-float-background);
    color: var(--color-blurple-300);
}

[data-bs-theme="dark"] .a4u-empty-button {
    background-color: var(--color-float-background);
    color: var(--color-blurple-300);
    border-color: var(--color-blurple-500);
}

[data-bs-theme="dark"] .a4u-empty-button:hover {
    background-color: var(--color-blurple-500);
    color: #f6f5ff;
}

[data-bs-theme="dark"] .a4u-icon-button {
    background-color: var(--color-float-background);
    color: var(--color-blurple-300);
}

[data-bs-theme="dark"] .a4u-icon-button:hover {
    background-color: var(--color-blurple-500);
    color: #f6f5ff;
}

/* Dark theme: login / background container */
[data-bs-theme="dark"] .background-container {
    background: url('_content/Tabler.Docs/img/veryfuckingdark.png') no-repeat center !important;
    background-size: cover !important;
}

[data-bs-theme="dark"] .login-container {
    background-color: var(--color-float-background);
    border-color: var(--color-gray-300);
    color: var(--font-color);
}

[data-bs-theme="dark"] .login-header {
    color: var(--font-color);
}

[data-bs-theme="dark"] .header {
    background-color: var(--color-main-background) !important;
    color: var(--font-color);
}

[data-bs-theme="dark"] .line-label {
    background-color: var(--color-float-background) !important;
    color: var(--color-gray-600) !important;
}

[data-bs-theme="dark"] .form-separator {
    background-color: var(--color-gray-400) !important;
}

/* Dark theme: floating form (user menu popup) */
[data-bs-theme="dark"] .floating-form {
    background-color: var(--color-float-background);
    border-color: var(--color-gray-300);
}

/* Dark theme: drawer */
[data-bs-theme="dark"] .overlay-drawer {
    background: var(--color-float-background);
}

[data-bs-theme="dark"] .drawer-header {
    background: #18153a;
    border-color: var(--color-gray-300);
}

[data-bs-theme="dark"] .drawer-title {
    color: var(--font-color);
}

[data-bs-theme="dark"] .drawer-close-button {
    color: var(--color-gray-600);
}

/* Dark theme: tables */
[data-bs-theme="dark"] .table {
    color: var(--font-color);
}

/* Dark theme: MudBlazor overrides */
[data-bs-theme="dark"] .mud-table-root {
    background-color: var(--color-float-background) !important;
    color: var(--font-color);
}

[data-bs-theme="dark"] .mud-table-container {
    background-color: var(--color-float-background) !important;
}

[data-bs-theme="dark"] {
    --mud-palette-surface: var(--color-float-background);
    --mud-palette-background: var(--color-main-background);
    --mud-palette-text-primary: var(--font-color);
    --mud-palette-text-secondary: var(--color-gray-600);
    --mud-palette-action-default: var(--font-color);
    --mud-palette-divider: var(--color-gray-300);
    --mud-palette-table-hover: var(--color-gray-100);
    --mud-palette-table-striped: var(--color-gray-50);
}

[data-bs-theme="dark"] .mud-input,
[data-bs-theme="dark"] .mud-input-control .mud-input-root {
    color: var(--font-color);
}

/* Dark theme: checkbox/switch field labels */
[data-bs-theme="dark"] .a4u_checkbox-field {
    color: var(--font-color);
}

/* Dark theme: status chips, panels */
[data-bs-theme="dark"] .a4u-status-chip {
    background-color: #18153a;
    border-color: var(--color-gray-300);
}

[data-bs-theme="dark"] .a4u-status-chip strong {
    color: var(--font-color);
}

/* Dark theme: loading overlay */
[data-bs-theme="dark"] .loading-overlay {
    background-color: rgba(5, 4, 20, 0.6);
}

/* Dark theme: scrollbar */
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: #18153a;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3d3a66;
}

/* ======================= Dark theme: Bootstrap components ======================= */

/* Navbar / sidebar navigation */
[data-bs-theme="dark"] .navbar {
    background-color: var(--color-main-background) !important;
    color: var(--font-color);
}

[data-bs-theme="dark"] .navbar .nav-link,
[data-bs-theme="dark"] .navbar .navbar-menu-item {
    color: var(--font-color) !important;
}

[data-bs-theme="dark"] .navbar .nav-link:hover,
[data-bs-theme="dark"] .navbar .dropdown-toggle:hover {
    color: var(--color-blurple-300) !important;
}

[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--color-float-background);
    border-color: var(--color-gray-300);
    color: var(--font-color);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--font-color);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--color-gray-100);
    color: var(--font-color);
}

[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--color-gray-300);
}

/* Bootstrap tabs */
[data-bs-theme="dark"] .nav-tabs {
    border-color: var(--color-gray-300);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--color-gray-600);
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--color-gray-400);
    color: var(--font-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--color-float-background);
    border-color: var(--color-gray-300);
    color: var(--font-color);
}

/* Bootstrap form controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #18153a;
    color: var(--font-color);
    border-color: var(--color-gray-400);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #18153a;
    color: var(--font-color);
    border-color: var(--color-blurple-500);
    box-shadow: 0 0 0 0.2rem rgba(91, 76, 255, 0.25);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
    background-color: #1e1b47;
    color: var(--color-gray-600);
}

/* Bootstrap pagination */
[data-bs-theme="dark"] .page-link {
    background-color: var(--color-float-background);
    border-color: var(--color-gray-300);
    color: var(--font-color);
}

[data-bs-theme="dark"] .page-link:hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-400);
    color: var(--font-color);
}

[data-bs-theme="dark"] .page-item.active .page-link {
    background-color: var(--color-blurple-500);
    border-color: var(--color-blurple-500);
}

[data-bs-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--color-gray-50);
    border-color: var(--color-gray-300);
    color: var(--color-gray-500);
}

/* Bootstrap modal */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--color-float-background);
    color: var(--font-color);
    border-color: var(--color-gray-300);
}

[data-bs-theme="dark"] .modal-header {
    border-color: var(--color-gray-300);
}

[data-bs-theme="dark"] .modal-footer {
    border-color: var(--color-gray-300);
}

/* Bootstrap table */
[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--color-float-background);
    --bs-table-color: var(--font-color);
    --bs-table-border-color: var(--color-gray-300);
    --bs-table-striped-bg: var(--color-gray-50);
    --bs-table-hover-bg: var(--color-gray-100);
}

[data-bs-theme="dark"] .table thead th {
    background-color: var(--color-gray-50);
    color: var(--font-color);
    border-color: var(--color-gray-300);
}

[data-bs-theme="dark"] .table td {
    border-color: var(--color-gray-300);
}

/* Bootstrap badges, alerts, list-group */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--color-float-background);
    color: var(--font-color);
    border-color: var(--color-gray-300);
}

[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ======================= Dark theme: MudBlazor components ======================= */

[data-bs-theme="dark"] .mud-table-head .mud-table-cell {
    background-color: var(--color-gray-50) !important;
    color: var(--font-color) !important;
    border-color: var(--color-gray-300) !important;
}

[data-bs-theme="dark"] .mud-table-body .mud-table-cell {
    color: var(--font-color) !important;
    border-color: var(--color-gray-300) !important;
}

[data-bs-theme="dark"] .mud-table-body .mud-table-row:hover .mud-table-cell {
    color: var(--color-blurple-300) !important;
}

[data-bs-theme="dark"] .mud-table-foot .mud-table-cell {
    background-color: var(--color-gray-50) !important;
    color: var(--font-color) !important;
}

[data-bs-theme="dark"] .mud-table-toolbar {
    background-color: var(--color-float-background);
    color: var(--font-color);
}

[data-bs-theme="dark"] .mud-table-pagination {
    background-color: var(--color-float-background) !important;
    color: var(--font-color) !important;
}

[data-bs-theme="dark"] .mud-table-pagination .mud-select,
[data-bs-theme="dark"] .mud-table-pagination .mud-select-input {
    color: var(--font-color) !important;
}

[data-bs-theme="dark"] .mud-table-pagination .mud-button-root {
    color: var(--font-color) !important;
}

[data-bs-theme="dark"] .mud-dialog {
    background-color: var(--color-float-background);
    color: var(--font-color);
}

[data-bs-theme="dark"] .mud-dialog .mud-dialog-title {
    color: var(--font-color);
}

[data-bs-theme="dark"] .mud-paper {
    background-color: var(--color-float-background);
    color: var(--font-color);
}

[data-bs-theme="dark"] .mud-select,
[data-bs-theme="dark"] .mud-select .mud-input {
    color: var(--font-color);
}

[data-bs-theme="dark"] .mud-popover {
    background-color: var(--color-float-background);
    color: var(--font-color);
}

[data-bs-theme="dark"] .mud-list-item:hover {
    background-color: var(--color-gray-100);
}

[data-bs-theme="dark"] .mud-nav-link {
    color: var(--font-color);
}

[data-bs-theme="dark"] .mud-chip {
    color: var(--font-color);
}

[data-bs-theme="dark"] .mud-overlay {
    background-color: rgba(5, 4, 20, 0.5);
}

[data-bs-theme="dark"] .mud-switch .mud-switch-base {
    color: var(--color-blurple-300);
}

/* ======================= Dark theme: Radzen components ======================= */

[data-bs-theme="dark"] .rz-datatable {
    background-color: var(--color-float-background);
    color: var(--font-color);
}

[data-bs-theme="dark"] .rz-datatable-thead > tr > th {
    background-color: var(--color-gray-50);
    color: var(--font-color);
    border-color: var(--color-gray-300);
}

[data-bs-theme="dark"] .rz-datatable-tbody > tr > td {
    border-color: var(--color-gray-300);
}

[data-bs-theme="dark"] .rz-datatable-data > tr:hover > td {
    background-color: var(--color-gray-100);
}

[data-bs-theme="dark"] .rz-panel-menu,
[data-bs-theme="dark"] .rz-sidebar {
    background-color: var(--color-main-background);
    color: var(--font-color);
}

[data-bs-theme="dark"] .rz-navigation-item-text {
    color: var(--font-color);
}

[data-bs-theme="dark"] .rz-textbox,
[data-bs-theme="dark"] .rz-dropdown {
    background-color: #18153a;
    color: var(--font-color);
    border-color: var(--color-gray-400);
}

[data-bs-theme="dark"] .rz-dialog-content {
    background-color: var(--color-float-background);
    color: var(--font-color);
}

[data-bs-theme="dark"] .rz-dialog-titlebar {
    background-color: var(--color-gray-50);
    color: var(--font-color);
}

/* ======================= Dark theme: Tabler framework ======================= */

[data-bs-theme="dark"] .page-title {
    color: var(--font-color);
}

[data-bs-theme="dark"] .page-pretitle {
    color: var(--color-gray-600);
}

[data-bs-theme="dark"] .card-header {
    background-color: var(--color-float-background);
    border-color: var(--color-gray-300);
    color: var(--font-color);
}

[data-bs-theme="dark"] .card-body {
    color: var(--font-color);
}

[data-bs-theme="dark"] .card-title {
    color: var(--font-color);
}

/* ======================= Dark theme: payroll / misc sections ======================= */

[data-bs-theme="dark"] .payroll-meta-row {
    background: var(--color-gray-50);
    color: var(--font-color);
}

[data-bs-theme="dark"] .payroll-section {
    background: var(--color-float-background);
    border-color: var(--color-gray-300);
    color: var(--font-color);
}

/* ======================= Dark theme: context menu (tree view) ======================= */

[data-bs-theme="dark"] .context-menu {
    background: var(--color-float-background);
    border-color: var(--color-gray-300);
    color: var(--font-color);
}

[data-bs-theme="dark"] .context-menu ul li:hover {
    background-color: var(--color-gray-100);
}

/* ======================= Dark theme: selection modal ======================= */

[data-bs-theme="dark"] .a4u-selection-modal .modal-content {
    background-color: var(--color-float-background);
    color: var(--font-color);
}

/* ======================= Dark theme: form table (BTW grid) ======================= */

[data-bs-theme="dark"] .form-table th {
    background-color: var(--color-gray-100);
    color: var(--font-color);
}

[data-bs-theme="dark"] .form-table td {
    border-color: var(--color-gray-300);
    color: var(--font-color);
}

[data-bs-theme="dark"] .form-table .section-header {
    background-color: var(--color-gray-50);
}

[data-bs-theme="dark"] .form-table input {
    background-color: #18153a;
    color: var(--font-color);
    border-color: var(--color-gray-400);
}

/* ======================= Dark theme: Accordion / Collapse ======================= */

[data-bs-theme="dark"] .accordion-item {
    background-color: var(--color-float-background);
    border-color: var(--color-gray-300);
    color: var(--font-color);
}

[data-bs-theme="dark"] .accordion-button {
    background-color: var(--color-float-background);
    color: var(--font-color);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--color-gray-100);
    color: var(--font-color);
}

/* ======================= Dark theme: tooltip and popover ======================= */

[data-bs-theme="dark"] .popover {
    background-color: var(--color-float-background);
    border-color: var(--color-gray-300);
    color: var(--font-color);
}

[data-bs-theme="dark"] .popover-body {
    color: var(--font-color);
}

/* ======================= Dark theme: global text/icon helpers ======================= */

[data-bs-theme="dark"] .text-muted {
    color: var(--color-gray-600) !important;
}

.a4u-generalerror-message {
    color: var(--color-red-700);
    font-size: var(--font-size);
    font-weight: bold;
    padding-left: 5px;
    margin-top: 2px;
    white-space: pre-line;
}

.a4u-default-font {
    color: var(--font-color);
    background-color: transparent;
    font-style: normal;
    font-weight: normal;
    font-size: var(--font-size);
    font-family: var(--font-default);
}

.a4u-error-message {
    color: var(--color-red-700);
    font-size: var(--font-size);
    padding-left: 5px;
    margin-top: 2px;
}

.a4u-selection-modal {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
}

    .a4u-selection-modal .modal-content {
        max-width: 550px;
    }

    .a4u-selection-modal > :first-child {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

.a4u-floating-form-wrapper {
    display: block;
    padding: 0;
    height: 100%;
    width: 100%;
    max-width: 405px;
    margin: 0 auto;
    box-sizing: border-box;
}

.a4u-floating-form-card {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.a4u-floating-form-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.a4u-floating-form-footer {
    padding: 12px 24px 24px 24px;
    border-top: 1px solid var(--color-gray-200);
}

.a4u-floating-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.a4u-status-chip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 6px;
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    min-width: 160px;
}

    .a4u-status-chip span {
        font-size: 0.75rem;
        text-transform: uppercase;
        color: var(--color-gray-600);
    }

    .a4u-status-chip strong {
        font-size: 1rem;
        color: var(--color-black);
    }

.a4u-filled-button {
    background-color: var(--color-blurple-500);
    color: var(--color-white);
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-family: var(--font-default);
    height: 28px;
    border-radius: var(--border-radius);
    border: var(--button-border);
    cursor: pointer;
    box-sizing: border-box;
}

    .a4u-filled-button:hover {
        border: var(--button-border);
        background-color: var(--color-white);
        color: var(--color-blurple-500);
    }

    .a4u-filled-button:active {
        background-color: var(--color-white);
        border-color: var(--color-blurple-500);
    }

.a4u-empty-button {
    background-color: var(--color-white);
    color: var(--color-blurple-500);
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-family: var(--font-default);
    height: 28px;
    border-radius: var(--border-radius);
    border: var(--button-border);
    cursor: pointer;
    box-sizing: border-box;
}

    .a4u-empty-button:hover {
        border: var(--button-border);
        background-color: var(--color-blurple-500);
        color: var(--color-white);
    }

    .a4u-empty-button:active {
        background-color: var(--color-blurple-500);
        border-color: var(--color-blurple-500);
    }

.a4u-icon-button {
    background-color: var(--color-white);
    color: var(--color-blurple-500);
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    height: 28px;
    width: 28px;
    margin-top: 3px;
    border-radius: var(--border-radius);
    border: var(--button-border);
    cursor: pointer;
    box-sizing: border-box;
}

    .a4u-icon-button:hover {
        border: var(--button-border);
        background-color: var(--color-blurple-500);
        color: var(--color-white);
    }

    .a4u-icon-button:active {
        background-color: var(--color-blurple-500);
        border-color: var(--color-blurple-500);
    }

.required-asterisk {
    color: var(--color-gray-800);
    margin-left: 2px;
}

.a4u_input-field-label {
    position: relative;
    left: 5px;
    display: inline-block;
    color: var(--color-gray-800) !important;
    padding: 0 5px;
    background-color: var(--color-white) !important;
    font-family: var(--font-default);
    font-style: normal;
    font-size: var(--font-size);
    font-weight: normal;
    z-index: 5;
}

.a4u_input-field {
    display: block;
    width: 100%;
    padding: 0.5rem;
    line-height: 1.42857143;
    position: relative;
    border: 1px solid var(--color-gray-400);
    border-radius: var(--border-radius);
    height: 35px;
    z-index: 1;
    color: var(--color-black);
    background-color: var(--color-white);
    font-style: normal;
    font-weight: normal;
    font-size: var(--font-size);
    font-family: var(--font-default);
}

    .a4u_input-field:disabled {
        border: none;
        background-color: var(--color-gray-200);
        color: var(--color-gray-600);
    }

        .a4u_input-field:disabled:hover {
            border: none;
            background-color: var(--color-gray-200);
            color: var(--color-gray-600);
        }

        .a4u_input-field:disabled ~ .a4u_input-field-label {
            background-color: transparent;
        }

    .a4u_input-field.invalid {
        border-color: var(--color-red-600) !important;
    }

    .a4u_input-field.invalid {
        color: var(--color-red-700);
    }

    .a4u_input-field:hover {
        color: var(--color-black);
        border-color: var(--color-blurple-500);
    }

    .a4u_input-field:focus {
        border-color: var(--color-gray-900);
        color: var(--color-black);
        outline: none;
        box-shadow: 0 0 5px 1px rgba(47, 30, 214, 0.6);
    }

/* Ensure textarea input fields respect their rows attribute and render taller by default */
textarea.a4u_input-field {
    height: auto;
    min-height: 200px;
    resize: vertical;
}

.a4u_checkbox-field {
    display: inline-block;
    width: 100%;
    padding: 0.5rem 0.5rem 0.5rem 0;
    line-height: 1.42857143;
    position: relative;
    height: 35px;
    z-index: 1;
    color: var(--color-black);
    background-color: transparent;
    font-style: normal;
    font-weight: normal;
    font-size: var(--font-size);
    font-family: var(--font-default);
    margin-left: -10px;
}

    .a4u_checkbox-field:hover {
        color: var(--color-blurple-500);
    }

    .a4u_checkbox-field:disabled {
        border: none;
        background-color: var(--color-gray-200);
        color: var(--color-gray-600);
    }

        .a4u_checkbox-field:disabled:hover {
            border: none;
            background-color: var(--color-gray-200);
            color: var(--color-gray-600);
        }

        .a4u_checkbox-field:disabled ~ .a4u_checkbox-field-label {
            background-color: transparent;
        }

    .a4u_checkbox-field.invalid {
        color: var(--color-red-700);
    }

    .a4u_checkbox-field:focus {
        color: var(--color-black);
        outline: none;
    }

.a4u-info-icon {
    cursor: pointer;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

/* ============================= Timesheet layout ============================= */
.timesheet-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    background-color: var(--color-white);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.timesheet-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.timesheet-toolbar-block {
    display: flex;
    flex-direction: column;
    min-width: 140px;
}

.toolbar-label {
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--color-gray-600);
    letter-spacing: 0.05em;
}

.toolbar-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-black);
}

.timesheet-toolbar-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.timesheet-grid {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.timesheet-grid .table-container {
    flex: 1;
}

.timesheet-empty {
    padding: 12px;
    text-align: center;
    color: var(--color-gray-600);
    font-style: italic;
}

.timesheet-row-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.timesheet-summary,
.timesheet-editor {
    background-color: var(--color-white);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.summary-subtitle {
    font-size: 0.85rem;
    color: var(--color-gray-600);
}

.summary-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.summary-grid dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--color-gray-600);
    margin-bottom: 2px;
}

.summary-grid dd {
    margin: 0;
    font-weight: 600;
    color: var(--color-black);
}

.totals-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.totals-list li {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--color-black);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.status-draft {
    background-color: rgba(34, 139, 230, 0.12);
    color: #1d4ed8;
}

.status-submitted {
    background-color: rgba(245, 151, 0, 0.15);
    color: #b45309;
}

.status-approved {
    background-color: rgba(16, 185, 129, 0.15);
    color: #047857;
}

.status-rejected {
    background-color: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
}

.status-invoiced {
    background-color: rgba(79, 70, 229, 0.15);
    color: #4338ca;
}

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.editor-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.editor-placeholder {
    padding: 12px;
    border: 1px dashed var(--color-gray-300);
    border-radius: 6px;
    color: var(--color-gray-600);
    font-style: italic;
}

.editor-description {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.editor-description textarea {
    width: 100%;
    min-height: 100px;
    resize: vertical;
}

.timesheet-editor-footer,
.timesheet-footer-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.payroll-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.payroll-meta-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    border-radius: 6px;
    background: #f8f9fb;
}

.payroll-section {
    margin-top: 16px;
    padding: 10px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
}

.payroll-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.payroll-sepa-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.payroll-status {
    font-weight: 600;
}

/* ============================= Document Designer layout ============================= */
.document-designer-root.designer-studio {
    height: calc(100vh - var(--document-designer-header-offset, 0px));
    max-height: calc(100vh - var(--document-designer-header-offset, 0px));
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.document-designer-root .designer-content,
.document-designer-root .designer-scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.document-designer-root .studio-body {
    flex: 1;
    min-height: 0;
    max-height: 100%;
}

.document-designer-root .studio-sidebar,
.document-designer-root .studio-properties {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.document-designer-root .studio-sidebar .sidebar-content,
.document-designer-root .studio-properties .sidebar-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.document-designer-root .studio-canvas-area {
    min-height: 0;
    overflow: hidden;
}

.document-designer-root .workspace-scroll {
    min-height: 0;
    overflow: auto;
}

.document-designer-root .propertygrid-container,
.document-designer-root .document-fields-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.document-designer-root .document-fields-controls,
.document-designer-root .document-fields-tree {
    flex: 1;
    min-height: 0;
}

.document-designer-root .document-fields-tree {
    overflow-y: auto;
}

.a4u-timeline {
    position: relative;
    padding-left: 32px; /* ruimte voor lijn + bol */
}

    .a4u-timeline::before {
        content: "";
        position: absolute;
        left: 12px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--a4u-timeline-line, #d8d5f0);
    }

.a4u-timeline__item {
    position: relative;
    padding: 10px 0;
}

    .a4u-timeline__item::before {
        content: "";
        position: absolute;
        left: -18px;
        transform: translateX(-50%); /* bolletje centreren op die lijn */
        top: 18px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--a4u-timeline-dot, #2f1ed6);
        box-shadow: 0 0 0 3px var(--a4u-timeline-dot-ring, #edeafd);
    }

.a4u-timeline__row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.a4u-timeline__date {
    min-width: 160px;
    font-size: 0.9rem;
    color: var(--a4u-timeline-muted, #5c5881);
    padding-top: 1px;
    white-space: nowrap;
}

.a4u-timeline__title {
    font-weight: 600;
    color: var(--a4u-timeline-text, #1c1a33);
}

.a4u-timeline__meta {
    font-size: 0.9rem;
    color: var(--a4u-timeline-muted, #5c5881);
    margin-top: 2px;
}

.a4u-timeline__message {
    margin-top: 6px;
    color: var(--a4u-timeline-text, #1c1a33);
}

.a4u-timeline__empty {
    color: var(--a4u-timeline-muted, #5c5881);
    padding: 8px 0;
}

/* ============================= Workflow Designer ============================= */
.workflow-designer-root .card {
    border-radius: 10px;
}

.workflow-designer-frame {
    height: calc(100vh - var(--workflow-designer-header-offset, 180px));
    min-height: 520px;
    display: flex;
    flex-direction: column;
}

.workflow-designer-body {
    flex: 1;
    min-height: 0;
    position: relative;
}

.workflow-canvas-shell {
    position: relative;
    height: 100%;
    width: 100%;
}

.workflow-canvas {
    border: 1px solid var(--color-gray-300);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.workflow-canvas-body {
    flex: 1;
    min-height: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-gutter: stable;
}

.workflow-canvas-zoom-surface {
    min-height: 100%;
    height: 100%;
    position: relative;
}

.workflow-canvas-zoom-root {
    min-height: 100%;
    background-color: var(--color-white);
    background-image: radial-gradient(var(--color-gray-300) 1px, transparent 1px);
    background-size: 18px 18px;
    background-position: 0 0;
}

.workflow-canvas-track {
    padding: 24px 16px;
    align-items: center;
    width: max-content;
    min-height: 100%;
}

.workflow-canvas-actions {
    display: flex;
    gap: 6px;
}

.workflow-canvas-action {
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-white);
    color: var(--color-gray-800);
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: default;
}

.workflow-canvas-zoom {
    display: flex;
    align-items: center;
    gap: 6px;
}

.workflow-canvas-shapes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.workflow-shape-button {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 86px;
    height: 44px;
    border: 1px solid var(--color-gray-300);
    border-radius: 10px;
    background-color: var(--color-white);
    font-size: 0.65rem;
    color: var(--color-gray-800);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.workflow-shape-button:hover {
    border-color: var(--color-blurple-400);
}

.workflow-shape-icon {
    font-size: 1rem;
    color: var(--color-gray-800);
}

.workflow-shape-label {
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
    padding: 0 4px;
}

.workflow-icon-button {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-700);
}

.workflow-icon-button:hover {
    border-color: var(--color-blurple-400);
}

.wf-step-properties {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background-color: transparent;
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.wf-step-properties:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.wf-step-properties-inline {
    margin-left: 8px;
    margin-right: 6px;
}

.wf-step-delete {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    color: var(--color-red-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.wf-step-delete:hover {
    background-color: rgba(245, 25, 41, 0.12);
    color: var(--color-red-700);
}

.wf-step-delete:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.wf-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wf-step-header-actions-left,
.wf-step-header-actions-right {
    display: flex;
    align-items: center;
}

.wf-step-header-actions-left {
    gap: 6px;
}

.wf-step-header-actions-right {
    gap: 6px;
}

.wf-step-header-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.workflow-option-icon-button {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-700);
}

.workflow-canvas-zoom-label {
    font-size: 0.7rem;
    color: var(--color-gray-700);
    min-width: 48px;
    text-align: center;
}

.workflow-connector {
    font-weight: 600;
    color: var(--color-gray-600);
}

.workflow-overlay {
    position: absolute;
    top: 72px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 5;
}

.workflow-overlay-left {
    left: 16px;
}

.workflow-overlay-right {
    right: 16px;
    align-items: flex-end;
}

.workflow-overlay-toggle {
    display: flex;
}

.workflow-overlay-content {
    width: 280px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.workflow-properties-float {
    position: absolute;
    top: 72px;
    right: 16px;
    bottom: 16px;
    width: 380px;
    display: flex;
    z-index: 900;
    pointer-events: auto;
}

.wf-properties-shell {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.wf-properties-shell-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    min-height: 0;
    background-color: transparent;
}

.wf-properties-shell-footer {
    padding: 10px 16px 14px 16px;
    border-top: 1px solid var(--color-gray-200);
    background-color: transparent;
}

.wf-properties-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    height: 100%;
}

.wf-properties-header {
    display: flex;
    padding-top: 20px;
    align-items: center;
    justify-content: space-between;
}

.wf-properties-header-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.wf-properties-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-white);
    color: var(--color-gray-700);
    padding: 0;
    font-size: 16px;
    line-height: 1;
    margin-top: -4px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.wf-properties-back:hover {
    color: var(--color-black);
    border-color: var(--color-blurple-300);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.wf-properties-back:focus-visible {
    outline: 2px solid var(--color-blurple-400);
    outline-offset: 2px;
}

.wf-properties-title {
    padding-bottom:10px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-black);
}

.wf-properties-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wf-properties-tab {
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-white);
    color: var(--color-gray-800);
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.wf-properties-tab--active {
    border-color: var(--color-blurple-400);
    background-color: var(--color-blurple-100);
    color: var(--color-black);
}

.wf-properties-shell-body .card {
    border: none;
    box-shadow: none;
    background-color: transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.wf-properties-shell-body .card-header {
    padding: 0 0 6px 0;
    border-bottom: 0;
    background-color: transparent;
}

.wf-properties-shell-body .card-body {
    flex: 1;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.wf-properties-shell-body .tab-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.wf-properties-shell-body .tab-pane {
    flex: 1;
    min-height: 0;
}

.wf-properties-shell-body .nav-tabs {
    border-bottom: 0;
    gap: 6px;
    flex-wrap: wrap;
}

.wf-properties-shell-body .nav-tabs .nav-link {
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-white);
    color: var(--color-gray-800);
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 6px;
}

.wf-properties-shell-body .nav-tabs .nav-link.active {
    border-color: var(--color-blurple-400);
    background-color: var(--color-blurple-100);
    color: var(--color-black);
}

.wf-properties-tab-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.f-properties-section-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-properties-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wf-properties-json {
    min-height: 300px;
}

.wf-validation-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wf-validation-item {
    text-align: left;
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-white);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 0.72rem;
    color: var(--color-gray-800);
    cursor: pointer;
}

.wf-validation-item:hover {
    border-color: var(--color-blurple-300);
    background-color: var(--color-gray-100);
}

.wf-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 10px;
    min-height: 0;
}

.wf-field-options-actions {
    margin-top: 8px;
}

.wf-export-body {
    width: 100%;
    max-width: 100%;
}

.wf-export-textarea {
    width: 100%;
    max-width: 100%;
    min-height: 400px;
    height: 400px;
    box-sizing: border-box;
}

.wf-load-body {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wf-propertybox {
    display: flex;
    flex-direction: column;
    max-height: none;
    min-height: 0;
}

.wf-propertybox-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
    min-height: 0;
}

.wf-propertybox-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-step {
    position: relative;
    width: 260px;
    height: 140px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wf-step-surface {
    position: relative;
    width: 260px;
    height: 140px;
    border-radius: 14px;
    overflow: hidden;
    box-sizing: border-box;
    color: var(--color-black);
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.2;
}

.wf-step-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background-color: var(--color-white);
    border: 2px solid var(--color-gray-300);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.wf-step-surface--selected::before {
    border-color: var(--color-blurple-400);
    box-shadow: 0 0 0 3px rgba(47, 30, 214, 0.35);
}

.wf-step:focus-within .wf-step-surface::before {
    box-shadow: 0 0 0 3px rgba(47, 30, 214, 0.25);
}

.wf-step-header,
.wf-step-body {
    box-sizing: border-box;
}

.wf-step-header {
    position: relative;
    z-index: 1;
    height: 44px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wf-step-header-actions-left,
.wf-step-header-actions-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.wf-step-header-actions-left {
    gap: 6px;
}

.wf-step-header-actions-right {
    gap: 6px;
}

.wf-step-header-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.wf-step-header-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    justify-content: center;
}

.wf-step-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-step-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.65rem;
    background-color: var(--color-gray-100);
    color: var(--color-gray-800);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-step-type-pill {
    align-self: center;
    margin-top: auto;
    width: 33%;
    min-width: 72px;
    max-width: 120px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background-color: rgba(255, 255, 255, 0.75);
    color: var(--color-gray-800);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.wf-step-body {
    position: relative;
    z-index: 1;
    height: 96px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.wf-step-meta {
    font-size: 12px;
    line-height: 1.2;
}

.wf-step-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    overflow: hidden;
}

.wf-step-fields-preview {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.82);
    font-size: 10px;
    line-height: 1.2;
    text-align: left;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.wf-step-fields-title {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-step-field-row,
.wf-step-fields-more {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.wf-step-field-row {
    font-size: 10px;
    opacity: 0.85;
}

.wf-step-fields-more {
    font-size: 10px;
    opacity: 0.7;
}

.wf-step-action-preview {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    line-height: 1.2;
    text-align: left;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.wf-step-action-row {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.wf-step-action-row--warning {
    color: var(--color-red-100);
    font-weight: 600;
}

.wf-step-move {
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-white);
    font-size: 12px;
    font-weight: 600;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 6px;
    color: var(--color-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
}

.wf-step-move:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wf-step-connector {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background-color: var(--color-blurple-200);
    color: var(--color-black);
    font-size: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: 2px solid var(--color-white);
    text-transform: lowercase;
    top: 50%;
    transform: translateY(-50%);
}

.wf-step-connector-in {
    left: -11px;
}

.wf-step-connector-out {
    right: -11px;
}

.wf-step--decision .wf-step-surface::before {
    background-color: #f4b23a;
    border-color: #e3a12f;
}

.wf-step--decision .wf-step-surface::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 8px;
    border: 2px solid #e3a12f;
    background-color: #f4b23a;
    opacity: 0.9;
    z-index: 0;
}

.wf-step--decision .wf-step-surface {
    color: #2b2b2b;
}

.wf-step--action .wf-step-surface::before {
    background-color: #1f6fa8;
    border-color: #185b8c;
}

.wf-step--action .wf-step-surface {
    color: var(--color-white);
}

.wf-step--form .wf-step-surface::before {
    background-color: #256f9f;
    border-color: #1a5c83;
}

.wf-step--form .wf-step-surface {
    color: var(--color-white);
}

.wf-step--approval .wf-step-surface::before {
    background-color: #6a4fb1;
    border-color: #5a4196;
}

.wf-step--approval .wf-step-surface {
    color: var(--color-white);
}

.wf-step--completed .wf-step-surface::before {
    border-radius: 999px;
    background-color: #c23a5b;
    border-color: #a22f4b;
}

.wf-step--completed .wf-step-surface {
    color: var(--color-white);
}

.wf-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.wf-options-label {
    font-size: 12px;
    color: var(--color-gray-600);
    line-height: 1.2;
}

.wf-options-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.wf-option-row {
    height: 28px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.wf-option-row:hover {
    border-color: var(--color-blurple-300);
    background-color: var(--color-gray-100);
}

.wf-option-row--selected {
    border-color: var(--color-blurple-400);
    box-shadow: 0 0 0 2px rgba(47, 30, 214, 0.25);
    background-color: rgba(47, 30, 214, 0.08);
}

.wf-option-row--more {
    cursor: default;
    border-style: dashed;
    color: var(--color-gray-600);
    background-color: var(--color-gray-100);
}

.wf-option-label {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wf-option-display {
    font-size: 0.7rem;
    color: var(--color-gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-option-badges {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    height: 16px;
    max-width: 140px;
    overflow: hidden;
}

.wf-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background-color: #f7b500;
    color: var(--color-black);
    font-size: 11px;
    font-weight: 700;
}

.wf-warning--option {
    width: 14px;
    height: 14px;
    font-size: 10px;
}

.wf-badge {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 10px;
    background-color: var(--color-gray-100);
    color: var(--color-gray-800);
    border: 1px solid var(--color-gray-200);
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workflow-toolbox {
    border: 1px solid var(--color-gray-300);
}

.workflow-toolbox-section {
    margin-bottom: 16px;
}

.workflow-toolbox-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.workflow-toolbox-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.workflow-toolbox-item {
    border: 1px solid var(--color-gray-300);
    border-radius: 8px;
    background-color: var(--color-white);
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.workflow-toolbox-item-title {
    font-weight: 600;
    color: var(--color-black);
}

.workflow-toolbox-item-description {
    font-size: 0.7rem;
    color: var(--color-gray-600);
}

.wf-fields-section {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-action-section {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-action-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wf-action-actions {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.wf-action-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.wf-action-httpcall {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-action-businessrule {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-action-businessrule-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.wf-action-businessrule-summary .wf-action-businessrule-name {
    flex: 1;
}

.wf-action-businessrule-name {
    font-size: 0.75rem;
    color: var(--color-gray-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-action-businessrule-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 0;
}

.wf-action-businessrule-description {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wf-action-businessrule-description-text {
    border: 1px solid var(--color-gray-300);
    border-radius: 6px;
    background-color: var(--color-white);
    padding: 6px 8px;
    font-size: 0.7rem;
    color: var(--color-gray-800);
    white-space: pre-wrap;
    min-height: 54px;
}

.wf-action-businessrule-params {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wf-action-businessrule-params-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-gray-700);
}

.wf-action-businessrule-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-gray-300);
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--color-white);
}

.wf-action-businessrule-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 0.6fr;
    gap: 8px;
    padding: 4px 8px;
    font-size: 0.7rem;
    color: var(--color-gray-800);
}

.wf-action-businessrule-header {
    background-color: var(--color-gray-100);
    font-weight: 600;
}

.wf-action-businessrule-cell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-action-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-action-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wf-action-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.wf-action-filter-source {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.wf-action-mapping,
.wf-action-outputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-action-mapping-header,
.wf-action-outputs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wf-action-mapping-actions,
.wf-action-outputs-actions {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.wf-action-mapping-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 0;
}

.wf-action-mapping-field-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.wf-action-mapping-sources {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-action-mapping-field-actions {
    display: flex;
    justify-content: flex-end;
}

.wf-action-source-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.wf-action-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-gray-100);
    font-size: 0.65rem;
    color: var(--color-gray-800);
    box-sizing: border-box;
}

.wf-action-source-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.wf-action-source-remove {
    border: none;
    background: none;
    color: var(--color-gray-600);
    font-size: 0.65rem;
    cursor: pointer;
    padding: 0 2px;
}

.wf-action-output-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.wf-action-output-warning {
    font-size: 0.7rem;
    color: var(--color-red-700);
}

.wf-action-output-source {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.wf-fields-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wf-fields-actions {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.wf-fields-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.wf-fields-list {
    width: 38%;
    min-width: 140px;
    border: 1px solid var(--color-gray-300);
    border-radius: 8px;
    padding: 8px;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 360px;
    overflow-y: auto;
}

.wf-fields-editor {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-field-item {
    width: 100%;
    border: 1px solid var(--color-gray-300);
    border-radius: 8px;
    padding: 6px 8px;
    background-color: var(--color-white);
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wf-field-item:hover {
    border-color: var(--color-blurple-300);
    background-color: var(--color-gray-100);
}

.wf-field-item--selected {
    border-color: var(--color-blurple-400);
    background-color: rgba(47, 30, 214, 0.08);
    box-shadow: 0 0 0 2px rgba(47, 30, 214, 0.2);
}

.wf-field-item-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-field-item-name {
    font-size: 0.65rem;
    color: var(--color-gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-field-empty {
    font-size: 0.7rem;
    color: var(--color-gray-600);
}

.wf-field-required {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wf-field-required-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 140px;
    overflow-y: auto;
    padding-right: 4px;
}

.wf-field-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wf-field-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 4px;
}

.wf-field-option-row {
    border: 1px solid var(--color-gray-300);
    border-radius: 8px;
    padding: 8px;
    background-color: var(--color-gray-50);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wf-field-option-row-inputs {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}