html, body {
    margin: 0;
    color: var(--rz-text-color);
    background: var(--rz-body-background-color);
}

/* Muted copy — not rz-color-secondary (that is the brand secondary color). */
.om-text-muted {
    color: var(--rz-text-secondary-color) !important;
}

/* Rows navigate via RowSelect instead of a dedicated "Open" button/column —
   give them a pointer cursor and a hover highlight so that's obvious. */
.om-clickable-grid .rz-data-row {
    cursor: pointer;
}
.om-clickable-grid .rz-data-row:hover {
    background-color: color-mix(in srgb, var(--rz-primary) 6%, transparent);
}

/* Shared "stacked card" list-row look, used as the small/medium-screen fallback
   for dense data grids (AR Aging, Quotes, Invoices, Catalog Items, etc.) instead
   of forcing a horizontal scrollbar. Each page controls its own breakpoint for
   when to swap its table for this card list. */
.om-resp-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.om-resp-card {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    border: var(--rz-border-normal);
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
    text-decoration: none;
    color: inherit;
    background: var(--rz-card-background-color);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--rz-text-color) 6%, transparent);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    font: inherit;
}
.om-resp-card.is-clickable {
    cursor: pointer;
    padding-right: 1.75rem;
}
.om-resp-card.is-clickable:hover {
    border-color: color-mix(in srgb, var(--rz-primary) 40%, var(--rz-border-color, transparent));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--rz-text-color) 10%, transparent);
}
/* Chevron affordance — signals "tap to open" without a dedicated button/column. */
.om-resp-card.is-clickable::after {
    content: "\203A";
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--rz-text-secondary-color);
}
.om-resp-card.is-clickable:hover::after {
    color: var(--rz-primary);
}
.om-resp-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}
.om-resp-card-title {
    font-weight: 600;
    color: var(--rz-text-title-color);
    font-size: 0.92rem;
    min-width: 0;
    word-break: break-word;
}
.om-resp-card-total {
    font-weight: 700;
    color: var(--rz-text-title-color);
    font-size: 0.92rem;
    flex-shrink: 0;
    white-space: nowrap;
}
.om-resp-card-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    margin-top: 0.3rem;
}
.om-resp-card-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* Prefer Radzen link tokens over Bootstrap's fixed blue. */
a:not(.rz-button):not(.rz-navigation-item-link) {
    color: var(--rz-link-color, var(--rz-primary));
}
a:not(.rz-button):not(.rz-navigation-item-link):hover {
    color: var(--rz-link-hover-color, var(--rz-primary));
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: var(--rz-danger, #e50000);
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

.user-select-all {
    user-select: all;
    word-break: break-all;
}

/*
 * Identity / Bootstrap auth forms must follow the active Radzen theme.
 * Without this, form-control / form-floating keep light Bootstrap colors
 * and become unreadable on dark (or other) themes.
 */
.public-layout,
.om-account-layout {
    --bs-body-color: var(--rz-text-color);
    --bs-body-color-rgb: unset;
    --bs-body-bg: var(--rz-body-background-color);
    --bs-secondary-color: var(--rz-text-secondary-color);
    --bs-border-color: var(--rz-base-300, color-mix(in srgb, var(--rz-text-color) 16%, transparent));
    --bs-primary: var(--rz-primary);
    --bs-link-color: var(--rz-link-color, var(--rz-primary));
    --bs-link-hover-color: var(--rz-link-hover-color, var(--rz-primary));
}

.public-layout .form-control,
.public-layout .form-select,
.public-layout .form-floating > .form-control,
.public-layout .form-floating > .form-select,
.om-account-layout .form-control,
.om-account-layout .form-select,
.om-account-layout .form-floating > .form-control,
.om-account-layout .form-floating > .form-select {
    color: var(--rz-text-color) !important;
    background-color: var(--rz-input-background-color, var(--rz-base-100, var(--rz-card-background-color))) !important;
    border-color: var(--rz-input-border, var(--rz-base-300, color-mix(in srgb, var(--rz-text-color) 18%, transparent))) !important;
    caret-color: var(--rz-text-color);
}

.public-layout .form-control:focus,
.public-layout .form-select:focus,
.om-account-layout .form-control:focus,
.om-account-layout .form-select:focus {
    color: var(--rz-text-color) !important;
    background-color: var(--rz-input-background-color, var(--rz-base-100, var(--rz-card-background-color))) !important;
    border-color: var(--rz-primary) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--rz-primary) 28%, transparent);
}

.public-layout .form-control::placeholder,
.om-account-layout .form-control::placeholder {
    color: var(--rz-text-secondary-color);
    opacity: 0.85;
}

/*
 * Bootstrap form-floating keeps the placeholder transparent so only the
 * floating label shows. Our theme placeholder color above must not win.
 */
.public-layout .form-floating > .form-control::placeholder,
.public-layout .form-floating > .form-control-plaintext::placeholder,
.om-account-layout .form-floating > .form-control::placeholder,
.om-account-layout .form-floating > .form-control-plaintext::placeholder {
    color: transparent !important;
    opacity: 1;
}

.public-layout .form-floating > .form-control::-moz-placeholder,
.public-layout .form-floating > .form-control-plaintext::-moz-placeholder,
.om-account-layout .form-floating > .form-control::-moz-placeholder,
.om-account-layout .form-floating > .form-control-plaintext::-moz-placeholder {
    color: transparent !important;
    opacity: 1;
}

/*
 * Radzen Material FormField already shows Text as the empty-state label.
 * A Placeholder on the inner input stacks on top of that label.
 */
.rz-form-field:not(:focus-within) .rz-form-field-content input::placeholder,
.rz-form-field:not(:focus-within) .rz-form-field-content textarea::placeholder {
    color: transparent !important;
}

.public-layout .form-control:disabled,
.om-account-layout .form-control:disabled {
    background-color: color-mix(in srgb, var(--rz-text-color) 6%, var(--rz-body-background-color)) !important;
    color: var(--rz-text-secondary-color) !important;
}

.public-layout .form-floating > label,
.om-account-layout .form-floating > label {
    color: var(--rz-text-secondary-color) !important;
}

.public-layout .form-floating > .form-control:focus ~ label,
.public-layout .form-floating > .form-control:not(:placeholder-shown) ~ label,
.om-account-layout .form-floating > .form-control:focus ~ label,
.om-account-layout .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--rz-text-secondary-color) !important;
}

/* Kill Bootstrap's light “notch” fill behind floating labels. */
.public-layout .form-floating > label::after,
.om-account-layout .form-floating > label::after {
    background-color: transparent !important;
}

.public-layout .btn-primary,
.om-account-layout .btn-primary {
    color: var(--rz-text-contrast-color, #fff) !important;
    background-color: var(--rz-primary) !important;
    border-color: var(--rz-primary) !important;
}

.public-layout .btn-primary:hover,
.om-account-layout .btn-primary:hover {
    filter: brightness(1.05);
}

/*
 * btn-danger (e.g. the Personal Data "Delete" link) is an <a class="btn btn-danger">
 * on Account pages. Without this, the global "a" link-color rule below (higher
 * specificity than Bootstrap's own .btn color rule) repaints its label with the
 * theme link color, leaving low/no-contrast text on the red background.
 */
.public-layout .btn-danger,
.om-account-layout .btn-danger {
    color: var(--rz-text-contrast-color, #fff) !important;
    background-color: var(--rz-danger) !important;
    border-color: var(--rz-danger) !important;
}

.public-layout .btn-danger:hover,
.om-account-layout .btn-danger:hover {
    filter: brightness(1.05);
}

.public-layout .btn-outline-secondary,
.om-account-layout .btn-outline-secondary {
    color: var(--rz-text-color) !important;
    background-color: transparent !important;
    border-color: var(--rz-base-300, color-mix(in srgb, var(--rz-text-color) 38%, transparent)) !important;
}

.public-layout .btn-outline-secondary:hover,
.om-account-layout .btn-outline-secondary:hover {
    background-color: color-mix(in srgb, var(--rz-text-color) 8%, transparent) !important;
}

.public-layout .btn-link,
.om-account-layout .btn-link {
    color: var(--rz-link-color, var(--rz-primary)) !important;
}

.public-layout .text-danger,
.om-account-layout .text-danger,
.public-layout .validation-message,
.om-account-layout .validation-message {
    color: var(--rz-danger, #e11d48) !important;
}

.public-layout .text-muted,
.public-layout .text-secondary,
.om-account-layout .text-muted,
.om-account-layout .text-secondary {
    color: var(--rz-text-secondary-color) !important;
}

.public-layout .alert-danger,
.om-account-layout .alert-danger {
    color: var(--rz-danger, #e11d48);
    background: color-mix(in srgb, var(--rz-danger, #e11d48) 12%, var(--rz-body-background-color));
    border-color: color-mix(in srgb, var(--rz-danger, #e11d48) 35%, transparent);
}

.public-layout .alert-warning,
.om-account-layout .alert-warning {
    color: var(--rz-text-color);
    background: color-mix(in srgb, var(--rz-warning, #f59e0b) 22%, var(--rz-body-background-color));
    border-color: color-mix(in srgb, var(--rz-warning, #f59e0b) 45%, transparent);
}

.public-layout .alert-info,
.om-account-layout .alert-info {
    color: var(--rz-text-color);
    background: color-mix(in srgb, var(--rz-info, #0dcaf0) 18%, var(--rz-body-background-color));
    border-color: color-mix(in srgb, var(--rz-info, #0dcaf0) 40%, transparent);
}

.public-layout .alert-success,
.om-account-layout .alert-success {
    color: var(--rz-text-color);
    background: color-mix(in srgb, var(--rz-success, #198754) 18%, var(--rz-body-background-color));
    border-color: color-mix(in srgb, var(--rz-success, #198754) 40%, transparent);
}

.public-layout table.table,
.om-account-layout table.table {
    color: var(--rz-text-color);
    --bs-table-color: var(--rz-text-color);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: color-mix(in srgb, var(--rz-text-color) 4%, transparent);
    --bs-table-border-color: var(--rz-base-300, color-mix(in srgb, var(--rz-text-color) 16%, transparent));
}

.public-layout hr,
.om-account-layout hr {
    border-color: color-mix(in srgb, var(--rz-text-color) 14%, transparent);
    opacity: 1;
}

.public-layout .form-check-input,
.om-account-layout .form-check-input {
    background-color: var(--rz-input-background-color, var(--rz-base-100));
    border-color: var(--rz-base-300, color-mix(in srgb, var(--rz-text-color) 25%, transparent));
}

.public-layout .form-check-input:checked,
.om-account-layout .form-check-input:checked {
    background-color: var(--rz-primary);
    border-color: var(--rz-primary);
}

/*
 * Light / low-contrast Radzen buttons
 * Material theme paints outlined+text "Light" buttons with --rz-base-200 (#eee)
 * for both border and label — nearly invisible on light surfaces. Disabled
 * opacity defaults to 0.2, which makes blocked actions (e.g. Revert) vanish.
 * Do NOT override --rz-primary here — hamburger, FABs, and chrome follow the theme.
 */
:root, .rz-material, body {
    --rz-button-disabled-opacity: 0.58;
}

.om-catalog-html-preview {
    font-size: 0.9rem;
    line-height: 1.45;
    max-height: 6rem;
    overflow: auto;
}

.rz-button.rz-light:not(.rz-variant-text):not(.rz-variant-outlined) {
    background-color: color-mix(in srgb, var(--rz-text-color) 14%, var(--rz-base-100, #fff)) !important;
    color: var(--rz-text-color) !important;
}

.rz-button.rz-variant-outlined.rz-light,
.rz-button.rz-variant-outlined.rz-light.rz-shade-default {
    color: var(--rz-text-color) !important;
    box-shadow: inset 0 0 0 var(--rz-border-width, 1px)
        color-mix(in srgb, var(--rz-text-color) 38%, transparent) !important;
    background-color: transparent !important;
}

.rz-button.rz-variant-text.rz-light {
    color: var(--rz-text-secondary-color) !important;
}

.rz-button.rz-variant-text.rz-light:not(.rz-state-disabled):hover {
    color: var(--rz-text-color) !important;
}

.rz-button.rz-state-disabled.rz-light,
.rz-button.rz-state-disabled.rz-variant-outlined.rz-light {
    color: var(--rz-text-secondary-color) !important;
    opacity: var(--rz-button-disabled-opacity) !important;
}

/* OverflowTabList is the nav; hide Radzen's own headers (scoped CSS cannot
   pierce the RadzenTabs child component, and Radzen uses display:!important). */
.om-overflow-tabs-host .rz-tabview-nav {
    display: none !important;
}

/* Keep the off-screen measure clone invisible even before scoped CSS arrives
   (otherwise prerender flashes every tab, then snaps to the overflow layout). */
.om-overflow-tabs-measure {
    position: absolute !important;
    left: -9999px !important;
    top: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
}

.om-overflow-tabs-bar.is-pending {
    min-height: 2.6rem;
}

.om-overflow-tabs:has(.om-overflow-tabs-bar.is-pending) {
    overflow: hidden;
}

.om-billing {
    max-width: 72rem;
}

.om-plan-compare-wrap {
    overflow-x: auto;
    margin: 0 -0.25rem;
}

.om-plan-compare {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.om-plan-compare th,
.om-plan-compare td {
    padding: 0.55rem 0.7rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--rz-base-300, #e5e5e5);
}

.om-plan-compare thead th {
    font-weight: 600;
    min-width: 8.5rem;
}

.om-plan-compare-label {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 10.5rem;
    background: var(--rz-card-background-color, #fff);
    color: var(--rz-text-secondary-color);
    font-weight: 600;
}

.om-plan-compare tbody th.om-plan-compare-label {
    font-weight: 500;
}

.om-plan-compare-name {
    font-size: 1.05rem;
}

.om-plan-compare-tagline {
    margin: 0.2rem 0 0.35rem;
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--rz-text-secondary-color);
}

.om-plan-compare-price {
    font-weight: 700;
}

.om-plan-compare-current {
    background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
}

.om-plan-compare tfoot td {
    border-bottom: none;
    padding-top: 0.85rem;
}

.om-plan-compare-block {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--rz-text-secondary-color);
}

.om-plan-compare-suggest {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rz-primary) 45%, transparent);
}

.om-plan-chip-host {
    display: inline-flex;
    align-items: center;
}

.om-plan-chip,
.om-plan-chip-near {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--rz-base-400, #d0d5dd);
    background: transparent;
    color: var(--rz-text-color);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

button.om-plan-chip,
.om-plan-chip-status,
.om-plan-chip-upgrade {
    cursor: pointer;
    font: inherit;
    color: inherit;
}

button.om-plan-chip,
.om-plan-chip-status {
    background: transparent;
}

.om-plan-chip-status {
    border: none;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.om-plan-chip-upgrade {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    text-decoration: underline;
    text-underline-offset: 0.14em;
}

.om-plan-chip:hover,
.om-plan-chip-status:hover,
.om-plan-chip-upgrade:hover {
    background: color-mix(in srgb, var(--rz-text-color) 6%, transparent);
}

.om-plan-chip-upgrade:hover {
    background: transparent;
    color: var(--rz-text-color);
}

.om-plan-chip-limit {
    border-color: color-mix(in srgb, var(--rz-warning, #c9a227) 55%, var(--rz-base-400, #d0d5dd));
    background: color-mix(in srgb, var(--rz-warning, #c9a227) 14%, transparent);
}

.om-plan-chip-narrow { display: none; }
.om-plan-chip-wide { display: inline-flex; }

@media (max-width: 720px) {
    .om-plan-chip-narrow { display: inline-flex; }
    .om-plan-chip-wide { display: none; }
}

.om-usage {
    max-width: 40rem;
}

.om-usage-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.om-usage-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.om-usage-label {
    font-weight: 500;
}

.om-usage-count {
    color: var(--rz-text-secondary-color);
    font-size: 0.9rem;
    white-space: nowrap;
}

.om-usage-track {
    height: 0.4rem;
    border-radius: 999px;
    background: var(--rz-base-200, #eee);
    overflow: hidden;
}

.om-usage-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--rz-primary);
}

.om-usage-row-near .om-usage-fill {
    background: var(--rz-warning, #c9a227);
}

.om-usage-row-limit .om-usage-fill {
    background: var(--rz-danger, #b42318);
}

.om-usage-row-near .om-usage-count,
.om-usage-row-limit .om-usage-count {
    color: inherit;
    font-weight: 600;
}

/* Knowledge Base article markup — the reader, the print route and the editor all use it. */
.kb-article-link { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--rz-primary) 50%, transparent); }
.kb-article-archived::after { content: " (archived)"; font-size: 0.8em; color: var(--rz-text-secondary-color); }
.kb-article-missing { text-decoration: line-through; color: var(--rz-text-secondary-color); cursor: help; }
.callout-must {
    border-left: 4px solid var(--rz-danger, #b42318);
    background: color-mix(in srgb, var(--rz-danger, #b42318) 8%, transparent);
    padding: 0.5rem 0.9rem; margin: 0.75rem 0; border-radius: 4px;
}
.callout-must > p:first-child { margin-top: 0; }
.callout-must > p:last-child { margin-bottom: 0; }
.email-template {
    border: 1px solid color-mix(in srgb, var(--rz-text-color) 20%, transparent);
    background: color-mix(in srgb, var(--rz-text-color) 4%, transparent);
    padding: 0.6rem 0.9rem; margin: 0.75rem 0; border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em;
}
.email-template .email-header {
    font-weight: 600; padding-bottom: 0.35rem; margin-bottom: 0.5rem;
    border-bottom: 1px dashed color-mix(in srgb, var(--rz-text-color) 25%, transparent);
}
@media print {
    .callout-must { background: #fbeae8; border-left-color: #b42318; }
    .email-template { background: #f7f7f7; }
}