:root {
    color-scheme: dark;
    --brand-red: #ee1b24;
    --app-action: #e5e5e5;
    --app-action-hover: #d4d4d4;
    --app-action-active: #a3a3a3;
    --app-action-text: #0a0a0a;
    --app-background: #0a0a0a;
    --app-surface: #171717;
    --app-control: #212121;
    --app-border: #303030;
    --app-border-subtle: #222222;
    --app-hover: #262626;
    --app-focus: #a3a3a3;
    --app-error: #ff7875;
    --app-warning: #e3b341;
    --app-text: #fafafa;
    --app-text-secondary: #a3a3a3;
}

:root[data-theme="light"] {
    color-scheme: light;
    --brand-red: #c51420;
    --app-action: #262626;
    --app-action-hover: #404040;
    --app-action-active: #525252;
    --app-action-text: #fafafa;
    --app-background: #f5f5f5;
    --app-surface: #ffffff;
    --app-control: #f5f5f5;
    --app-border: #d4d4d4;
    --app-border-subtle: #e5e5e5;
    --app-hover: #ededed;
    --app-focus: #737373;
    --app-error: #b91c1c;
    --app-warning: #854d0e;
    --app-text: #171717;
    --app-text-secondary: #525252;
}

.app-body {
    background: var(--app-background);
    color: var(--app-text);
}

.app-body .ant-modal-mask {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* the modal mounts under body, outside its component's isolated CSS scope */
.account-password-modal .ant-modal-content,
.staff-details-modal .ant-modal-content,
.customer-details-modal .ant-modal-content {
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: var(--app-surface);
}

.account-password-modal .ant-modal-header,
.staff-details-modal .ant-modal-header,
.customer-details-modal .ant-modal-header {
    border-bottom-color: var(--app-border-subtle);
    background: var(--app-surface);
}

.account-password-modal .ant-modal-title,
.staff-details-modal .ant-modal-title,
.customer-details-modal .ant-modal-title {
    color: var(--app-text);
}

.validation-message {
    color: var(--brand-red);
}

.invalid {
    outline: 1px solid var(--brand-red);
}

.blazor-error-boundary {
    border: 1px solid var(--brand-red);
    background: var(--app-surface);
    padding: 1rem;
    color: var(--app-text);
}

.blazor-error-boundary::after {
    content: "Something went wrong. Reload the page to try again.";
}