/* /Editors/FunExpress/SeatPlanEditor.razor.rz.scp.css */
/* Layout of the seat allocation view; the list of persons without a seat, the wagons,
   the status area and the settings dialog bring their own styles (CSS isolation is per
   component).
   The colors come from the DevExpress Fluent theme tokens (--dxds-*), with the Bootstrap
   variables of the classic themes as fallback, so the editor follows the theme switcher.
   They are defined once here as --fx-* and inherited by the child components. */
.fx-editor[b-9crj3sb3vx] {
    --fx-surface: var(--dxds-color-surface-neutral-default-rest, var(--bs-body-bg, #fff));
    --fx-surface-subdued: var(--dxds-color-surface-neutral-subdued-rest, var(--bs-tertiary-bg, #f4f4f3));
    --fx-surface-deep: var(--dxds-color-surface-neutral-deep-rest, var(--bs-secondary-bg, #e9e9e8));
    --fx-surface-hover: var(--dxds-color-surface-neutral-default-hovered, rgba(128, 128, 128, 0.12));
    --fx-border: var(--dxds-color-border-neutral-default-rest, var(--bs-border-color, #d3d3d2));
    --fx-border-subdued: var(--dxds-color-border-neutral-subdued-rest, var(--bs-border-color-translucent, #dededd));
    --fx-text: var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #161616));
    --fx-text-subdued: var(--dxds-color-content-neutral-subdued-rest, var(--bs-secondary-color, #3f3f3e));
    --fx-text-muted: var(--dxds-color-content-neutral-deep-rest, var(--bs-secondary-color, #767676));
    --fx-primary: var(--dxds-color-surface-primary-default-rest, var(--bs-primary, #0f6cbd));
    --fx-primary-soft: var(--dxds-color-surface-primary-deep-rest, rgba(15, 108, 189, 0.1));
    --fx-primary-border: var(--dxds-color-border-primary-default-rest, rgba(15, 108, 189, 0.5));
    --fx-warning: var(--dxds-color-content-warning-default-rest, var(--bs-warning, #f7630c));
    --fx-warning-soft: var(--dxds-color-surface-warning-deep-rest, #fbebe4);
    --fx-warning-border: var(--dxds-color-border-warning-default-rest, #f78e62);
    --fx-danger: var(--dxds-color-content-danger-default-rest, var(--bs-danger, #c50f1f));
    --fx-danger-soft: var(--dxds-color-surface-danger-deep-rest, #fceae8);
    --fx-danger-border: var(--dxds-color-border-danger-default-rest, #e97970);
    --fx-shadow: var(--dxds-box-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12));
    --fx-shadow-raised: var(--dxds-box-shadow-md, 0 4px 8px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12));
    --fx-radius: 8px;
    --fx-radius-sm: 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 480px;
    /* Fills the tab below the XAF header, toolbar and tab strip without a page scrollbar. */
    height: calc(100vh - 255px);
    color: var(--fx-text);
}

/* Run selection and view options */
.fx-toolbar[b-9crj3sb3vx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.fx-field[b-9crj3sb3vx] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.fx-field-label[b-9crj3sb3vx] {
    color: var(--fx-text-subdued);
    font-weight: 600;
}

.fx-editor[b-9crj3sb3vx]  .fx-hotel {
    width: 240px;
}

.fx-editor[b-9crj3sb3vx]  .fx-date {
    width: 170px;
}

.fx-toolbar-right[b-9crj3sb3vx] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.fx-changed[b-9crj3sb3vx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--fx-warning-soft);
    border: 1px solid var(--fx-warning-border);
    font-size: 0.875em;
    font-weight: 600;
    white-space: nowrap;
}

.fx-changed-dot[b-9crj3sb3vx] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fx-warning);
}

/* Segmented zoom control */
.fx-zoom[b-9crj3sb3vx] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius-sm);
    background: var(--fx-surface);
}

.fx-zoom-value[b-9crj3sb3vx] {
    min-width: 52px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 0.875em;
    border-left: 1px solid var(--fx-border-subdued);
    border-right: 1px solid var(--fx-border-subdued);
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icons of the DevExpress buttons: the icon span is rendered by DxButton. */
.fx-editor[b-9crj3sb3vx]  .fx-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--fx-icon) center / contain no-repeat;
    mask: var(--fx-icon) center / contain no-repeat;
}

.fx-editor[b-9crj3sb3vx]  .fx-icon-minus {
    --fx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.fx-editor[b-9crj3sb3vx]  .fx-icon-plus {
    --fx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

.fx-editor[b-9crj3sb3vx]  .fx-icon-settings {
    --fx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
}

.fx-editor[b-9crj3sb3vx]  .fx-icon-clock {
    --fx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* Message bars */
.fx-banner[b-9crj3sb3vx] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--fx-radius);
    border: 1px solid;
}

.fx-banner-text[b-9crj3sb3vx] {
    flex: 1;
    padding-top: 1px;
}

.fx-banner svg[b-9crj3sb3vx] {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.fx-error[b-9crj3sb3vx] {
    background: var(--fx-danger-soft);
    border-color: var(--fx-danger-border);
}

    .fx-error .fx-banner-icon[b-9crj3sb3vx] {
        color: var(--fx-danger);
    }

.fx-info[b-9crj3sb3vx] {
    background: var(--fx-warning-soft);
    border-color: var(--fx-warning-border);
}

    .fx-info .fx-banner-icon[b-9crj3sb3vx] {
        color: var(--fx-warning);
    }

.fx-banner-close[b-9crj3sb3vx] {
    display: inline-flex;
    padding: 2px;
    border: 0;
    border-radius: var(--fx-radius-sm);
    background: none;
    color: inherit;
    cursor: pointer;
}

    .fx-banner-close:hover[b-9crj3sb3vx] {
        background: rgba(128, 128, 128, 0.18);
    }

    .fx-banner-close svg[b-9crj3sb3vx] {
        width: 16px;
        height: 16px;
    }

/* Person list | wagons, status area below both */
.fx-body[b-9crj3sb3vx] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
}

.fx-empty[b-9crj3sb3vx] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px dashed var(--fx-border);
    border-radius: var(--fx-radius);
    background: var(--fx-surface-subdued);
    text-align: center;
    padding: 24px;
}

.fx-empty-icon[b-9crj3sb3vx] {
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
    fill: none;
    stroke: var(--fx-text-muted);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fx-empty-title[b-9crj3sb3vx] {
    font-size: 1.15em;
    font-weight: 600;
}

.fx-empty-text[b-9crj3sb3vx] {
    color: var(--fx-text-muted);
}

/* Wagon area; the wagons themselves are styled by SeatPlanWagonView. */
.fx-canvas[b-9crj3sb3vx] {
    overflow: auto;
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius);
    padding: 12px;
    background: var(--fx-surface-subdued);
}

.fx-wagons[b-9crj3sb3vx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: max-content;
}

/* Busy overlay */
.fx-busy[b-9crj3sb3vx] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fx-radius);
    background: color-mix(in srgb, var(--fx-surface) 55%, transparent);
    backdrop-filter: blur(2px);
    z-index: 5;
}

.fx-busy-box[b-9crj3sb3vx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: var(--fx-radius);
    border: 1px solid var(--fx-border-subdued);
    background: var(--fx-surface);
    box-shadow: var(--fx-shadow-raised);
}

.fx-spinner[b-9crj3sb3vx] {
    width: 20px;
    height: 20px;
    border: 3px solid var(--fx-primary-soft);
    border-top-color: var(--fx-primary);
    border-radius: 50%;
    animation: fx-spin-b-9crj3sb3vx 0.8s linear infinite;
}

@keyframes fx-spin-b-9crj3sb3vx {
    to {
        transform: rotate(360deg);
    }
}
/* /Editors/FunExpress/SeatPlanReservationTree.razor.rz.scp.css */
/* The list of persons without a seat, grouped by boarding station and reservation.
   The --fx-* colors are defined by SeatPlanEditor. */
.fx-tree[b-3ybfcln035] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius);
    background: var(--fx-surface);
    box-shadow: var(--fx-shadow);
    user-select: none;
    overflow: hidden;
}

.fx-tree-header[b-3ybfcln035] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--fx-border-subdued);
}

.fx-tree-title[b-3ybfcln035] {
    font-weight: 600;
    font-size: 1.05em;
}

.fx-tree-list[b-3ybfcln035] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 4px 6px 8px;
}

.fx-tree-empty[b-3ybfcln035] {
    padding: 12px 8px;
    color: var(--fx-text-muted);
}

.fx-badge[b-3ybfcln035] {
    flex: none;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--fx-surface-deep);
    color: var(--fx-text-subdued);
    font-size: 0.8em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.fx-badge-strong[b-3ybfcln035] {
    background: var(--fx-primary);
    color: #fff;
}

/* Station header: sticks to the top while its reservations scroll by. */
.fx-station-row[b-3ybfcln035] {
    position: sticky;
    top: -4px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 6px;
    border-radius: var(--fx-radius-sm);
    background: var(--fx-surface);
    color: var(--fx-text-subdued);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

    .fx-station-row:hover[b-3ybfcln035] {
        background: var(--fx-surface-hover);
    }

.fx-station-name[b-3ybfcln035] {
    flex: 1;
}

.fx-reservation-row[b-3ybfcln035],
.fx-person-row[b-3ybfcln035] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: var(--fx-radius-sm);
    cursor: grab;
}

.fx-reservation-row[b-3ybfcln035] {
    padding-left: 18px;
}

/* The dot sits below the color swatch of the reservation. */
.fx-person-row[b-3ybfcln035] {
    padding-left: 44px;
    color: var(--fx-text-subdued);
    font-size: 0.9em;
}

    .fx-reservation-row:hover[b-3ybfcln035],
    .fx-person-row:hover[b-3ybfcln035] {
        background: var(--fx-surface-hover);
    }

    .fx-reservation-row:active[b-3ybfcln035],
    .fx-person-row:active[b-3ybfcln035] {
        cursor: grabbing;
    }

.fx-moving[b-3ybfcln035] {
    opacity: 0.4;
}

.fx-reservation-name[b-3ybfcln035] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fx-reservation-number[b-3ybfcln035] {
    flex: 1;
    color: var(--fx-text-muted);
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fx-chevron[b-3ybfcln035] {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.7;
    cursor: pointer;
    transition: transform 0.15s ease;
}

    .fx-chevron.fx-expanded[b-3ybfcln035] {
        transform: rotate(90deg);
    }

/* Drag handle, shown on hover only. */
.fx-grip[b-3ybfcln035] {
    width: 14px;
    height: 14px;
    flex: none;
    fill: var(--fx-text-muted);
    visibility: hidden;
}

.fx-reservation-row:hover .fx-grip[b-3ybfcln035] {
    visibility: visible;
}

.fx-swatch[b-3ybfcln035] {
    width: 12px;
    height: 12px;
    flex: none;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.fx-person-dot[b-3ybfcln035] {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
/* /Editors/FunExpress/SeatPlanSettingsPopup.razor.rz.scp.css */
/* Train-settings dialog. The popup is rendered outside of the editor's element, so it uses
   the theme tokens directly instead of the --fx-* colors of SeatPlanEditor. */
.fx-settings[b-edi27hqgjp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fx-settings-label[b-edi27hqgjp] {
    font-weight: 600;
}

.fx-settings-compartments[b-edi27hqgjp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
}

.fx-settings[b-edi27hqgjp]  .fx-settings-spin {
    width: 120px;
}

.fx-settings-section[b-edi27hqgjp] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--dxds-color-border-neutral-subdued-rest, var(--bs-border-color, #dededd));
}

.fx-settings-count[b-edi27hqgjp] {
    padding: 0 7px;
    border-radius: 999px;
    background: var(--dxds-color-surface-neutral-deep-rest, var(--bs-secondary-bg, #e9e9e8));
    font-size: 0.8em;
    font-weight: 600;
}

.fx-settings-list[b-edi27hqgjp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow: auto;
}

.fx-settings-row[b-edi27hqgjp] {
    display: grid;
    grid-template-columns: 1fr 140px auto;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 10px;
    border-radius: 6px;
}

    .fx-settings-row:hover[b-edi27hqgjp] {
        background: var(--dxds-color-surface-neutral-subdued-rest, rgba(128, 128, 128, 0.1));
    }

.fx-settings[b-edi27hqgjp]  .fx-settings-add {
    align-self: flex-start;
}

.fx-settings-note[b-edi27hqgjp] {
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--dxds-color-surface-neutral-subdued-rest, var(--bs-tertiary-bg, #f4f4f3));
    color: var(--dxds-color-content-neutral-deep-rest, var(--bs-secondary-color, #767676));
    font-size: 0.85em;
}

/* Icons of the DevExpress buttons: the icon span is rendered by DxButton. */
.fx-settings[b-edi27hqgjp]  .fx-settings-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--fx-icon) center / contain no-repeat;
    mask: var(--fx-icon) center / contain no-repeat;
}

.fx-settings[b-edi27hqgjp]  .fx-settings-icon-add {
    --fx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

.fx-settings[b-edi27hqgjp]  .fx-settings-icon-remove {
    --fx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E");
}
/* /Editors/FunExpress/SeatPlanStationTimesPopup.razor.rz.scp.css */
/* "Fahrzeiten" dialog. Like the train settings, the popup is rendered outside of the editor's
   element and uses the theme tokens directly. */
.fx-times[b-i0xtb9ta7j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fx-times-list[b-i0xtb9ta7j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 360px;
    overflow: auto;
}

.fx-times-row[b-i0xtb9ta7j] {
    display: grid;
    grid-template-columns: 1fr 140px 140px;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 10px;
    border-radius: 6px;
}

    .fx-times-row:not(.fx-times-head):hover[b-i0xtb9ta7j] {
        background: var(--dxds-color-surface-neutral-subdued-rest, rgba(128, 128, 128, 0.1));
    }

.fx-times-head[b-i0xtb9ta7j] {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--dxds-color-content-neutral-subdued-rest, var(--bs-secondary-color, #6c757d));
}

.fx-times-station[b-i0xtb9ta7j] {
    font-weight: 600;
}

.fx-times-empty[b-i0xtb9ta7j],
.fx-times-note[b-i0xtb9ta7j] {
    font-size: 0.85em;
    color: var(--dxds-color-content-neutral-subdued-rest, var(--bs-secondary-color, #6c757d));
}

.fx-times-note[b-i0xtb9ta7j] {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--dxds-color-border-neutral-subdued-rest, var(--bs-border-color, #dededd));
}
/* /Editors/FunExpress/SeatPlanStatusBar.razor.rz.scp.css */
/* Status area: spans the list and the wagons in the grid of the editor. The --fx-* colors
   are defined by SeatPlanEditor; the seat samples repeat the seat tiles of SeatPlanWagonView. */
.fx-footer[b-kio8nvamj8] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fx-status[b-kio8nvamj8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 24px;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius);
    background: var(--fx-surface);
    font-size: 0.9em;
}

.fx-status-reservation[b-kio8nvamj8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 380px;
}

.fx-status-name[b-kio8nvamj8] {
    font-weight: 600;
}

.fx-status-placeholder[b-kio8nvamj8] {
    color: var(--fx-text-muted);
}

.fx-chip[b-kio8nvamj8] {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--fx-surface-deep);
    color: var(--fx-text-subdued);
    font-size: 0.9em;
}

.fx-status-counts[b-kio8nvamj8] {
    display: inline-flex;
    gap: 16px;
    font-variant-numeric: tabular-nums;
}

.fx-count[b-kio8nvamj8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fx-text-subdued);
}

    .fx-count strong[b-kio8nvamj8] {
        color: var(--fx-text);
    }

.fx-seat-sample[b-kio8nvamj8] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

/* Neutral: the seated persons have the color of their group type. */
.fx-sample-occupied[b-kio8nvamj8] {
    background: var(--fx-text-muted);
}

.fx-sample-free[b-kio8nvamj8] {
    background: var(--fx-surface);
    box-shadow: inset 0 0 0 1px var(--fx-border);
}

.fx-sample-blocked[b-kio8nvamj8] {
    background: repeating-linear-gradient(-45deg,
        var(--fx-danger-soft) 0 2px,
        color-mix(in srgb, var(--fx-danger) 30%, var(--fx-danger-soft)) 2px 4px);
    box-shadow: inset 0 0 0 1px var(--fx-danger-border);
}

.fx-legend[b-kio8nvamj8] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-left: auto;
}

.fx-legend-item[b-kio8nvamj8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fx-swatch[b-kio8nvamj8] {
    width: 12px;
    height: 12px;
    flex: none;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.fx-hint[b-kio8nvamj8] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 20px;
    padding: 0 4px;
    color: var(--fx-text-muted);
    font-size: 0.82em;
}

    .fx-hint b[b-kio8nvamj8] {
        color: var(--fx-text-subdued);
        font-weight: 600;
        margin-right: 4px;
    }

    .fx-hint kbd[b-kio8nvamj8] {
        padding: 0 5px;
        border: 1px solid var(--fx-border);
        border-bottom-width: 2px;
        border-radius: 4px;
        background: var(--fx-surface);
        color: var(--fx-text-subdued);
        font-family: inherit;
        font-size: 0.95em;
    }
/* /Editors/FunExpress/SeatPlanWagonView.razor.rz.scp.css */
/* One wagon as a card: header with occupancy, the wagon body with its compartments and seats.
   Seats and compartments are positioned in world units of the seat plan; a seat element
   covers its whole cell (so drop targets have no gaps), the visible tile is its ::before,
   inset from the cell. The group color arrives per seat as --fx-group / --fx-group-text,
   the theme colors (--fx-*) are defined by SeatPlanEditor. */
.fx-wagon-card[b-wgtkqzqu2c] {
    width: max-content;
    padding: 10px 12px 12px;
    border: 1px solid var(--fx-border);
    border-radius: 12px;
    background: var(--fx-surface);
    box-shadow: var(--fx-shadow);
}

.fx-wagon-header[b-wgtkqzqu2c] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 0 4px;
}

.fx-wagon-title[b-wgtkqzqu2c] {
    font-size: 20px;
    font-weight: 600;
}

.fx-wagon-type[b-wgtkqzqu2c] {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--fx-primary-soft);
    color: var(--fx-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.fx-wagon-occupancy[b-wgtkqzqu2c] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    color: var(--fx-text-muted);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

    .fx-wagon-occupancy strong[b-wgtkqzqu2c] {
        color: var(--fx-text);
    }

.fx-meter[b-wgtkqzqu2c] {
    width: 120px;
    height: 8px;
    border-radius: 999px;
    background: var(--fx-surface-deep);
    overflow: hidden;
}

.fx-meter-fill[b-wgtkqzqu2c] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--fx-primary);
    transition: width 0.2s ease;
}

/* The car: rounded ends around the seat area. */
.fx-wagon-body[b-wgtkqzqu2c] {
    padding: 8px 10px;
    border: 2px solid var(--fx-border);
    border-radius: 28px;
    background: var(--fx-surface);
}

.fx-wagon[b-wgtkqzqu2c] {
    position: relative;
}

.fx-compartment[b-wgtkqzqu2c] {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    border: 1px solid var(--fx-border-subdued);
    border-radius: 10px;
    background: var(--fx-surface-subdued);
}

.fx-place[b-wgtkqzqu2c] {
    position: absolute;
    box-sizing: border-box;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    user-select: none;
    color: var(--fx-text-muted);
    transition: opacity 0.12s ease;
}

    .fx-place[b-wgtkqzqu2c]::before {
        content: "";
        position: absolute;
        inset: 4px;
        z-index: -1;
        border-radius: 6px;
    }

.fx-free[b-wgtkqzqu2c]::before {
    background: var(--fx-surface);
    box-shadow: inset 0 0 0 1px var(--fx-border);
}

.fx-occupied[b-wgtkqzqu2c] {
    color: var(--fx-group-text);
    font-weight: 600;
    cursor: grab;
}

    .fx-occupied[b-wgtkqzqu2c]::before {
        background: var(--fx-group);
        box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    }

    .fx-occupied:active[b-wgtkqzqu2c] {
        cursor: grabbing;
    }

/* Drop preview: where the persons being dragged would sit. */
.fx-reserved[b-wgtkqzqu2c] {
    color: var(--fx-text);
    font-weight: 600;
}

    .fx-reserved[b-wgtkqzqu2c]::before {
        background: color-mix(in srgb, var(--fx-group) 35%, var(--fx-surface));
        border: 2px dashed var(--fx-group);
    }

.fx-blocked[b-wgtkqzqu2c] {
    color: var(--fx-danger);
    text-decoration: line-through;
}

    .fx-blocked[b-wgtkqzqu2c]::before {
        background: repeating-linear-gradient(-45deg,
            var(--fx-danger-soft) 0 5px,
            color-mix(in srgb, var(--fx-danger) 18%, var(--fx-danger-soft)) 5px 9px);
        box-shadow: inset 0 0 0 1px var(--fx-danger-border);
    }

/* The reservation under the mouse pointer: its seats get a ring, the other seated
   reservations step back. */
.fx-highlight[b-wgtkqzqu2c] {
    z-index: 1;
}

    .fx-highlight[b-wgtkqzqu2c]::before {
        box-shadow: 0 0 0 2px var(--fx-surface), 0 0 0 5px #ffb900;
    }

.fx-has-highlight .fx-occupied:not(.fx-highlight)[b-wgtkqzqu2c] {
    opacity: 0.45;
}