/*
 * User create/edit form (Components/Users/UserForm.razor). Third-party (e.g. Mud) unlayered rules can
 * override Tailwind @layer components. These rules are unlayered, load after tailwind (see index.html),
 * and mirror tailwind.input.css + former utilities.
 */
@keyframes cc-user-form-spin {
    to {
        transform: rotate(360deg);
    }
}

/* User form shell + white card: width/padding/card visuals are Tailwind utilities on the Razor root (cc-user-form-scope / cc-user-form-card). */

.cc-user-form-scope .cc-user-form-required {
    color: #b91c1c !important;
    font-weight: 700 !important;
}

.cc-user-form-scope .cc-user-form-division-requirement {
    display: block !important;
    margin-top: 0.4rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

.cc-user-form-scope section {
    display: block;
    margin: 0;
    padding: 0;
}

.cc-user-form-scope .cc-user-form-section-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    font-weight: 600 !important;
    color: #111827 !important;
    font-family: inherit !important;
}

.cc-user-form-scope .cc-user-form-section-desc {
    margin: 0.25rem 0 0 !important;
    padding: 0 !important;
    max-width: 42rem;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #4b5563 !important;
}

.cc-user-form-scope .cc-user-form-fields {
    margin-top: 2.5rem !important;
    padding-bottom: 3rem !important;
    border-bottom: 1px solid rgba(17, 24, 39, 0.1) !important;
    box-sizing: border-box !important;
}

.cc-user-form-scope .cc-user-form-fields > * + * {
    margin-top: 2rem !important;
}

@media (min-width: 640px) {
    .cc-user-form-scope .cc-user-form-fields {
        border-top: 1px solid rgba(17, 24, 39, 0.1) !important;
        padding-bottom: 0 !important;
    }

    .cc-user-form-scope .cc-user-form-fields > * + * {
        margin-top: 0 !important;
        border-top: 1px solid rgba(17, 24, 39, 0.1) !important;
    }
}

.cc-user-form-scope .cc-user-form-row,
.cc-user-form-scope .cc-user-form-row-align-center,
.cc-user-form-scope .cc-user-form-row--top {
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 640px) {
    .cc-user-form-scope .cc-user-form-row,
    .cc-user-form-scope .cc-user-form-row-align-center,
    .cc-user-form-scope .cc-user-form-row--top {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 1rem !important;
        align-items: start !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .cc-user-form-scope .cc-user-form-row-align-center {
        align-items: center !important;
    }

    .cc-user-form-scope .cc-user-form-row--top {
        align-items: flex-start !important;
    }

    .cc-user-form-scope .cc-user-form-control {
        grid-column: span 2 / span 2 !important;
        margin-top: 0 !important;
    }

    .cc-user-form-scope label.cc-user-form-label,
    .cc-user-form-scope span.cc-user-form-label {
        padding-top: 0.375rem !important;
    }
}

.cc-user-form-scope label.cc-user-form-label,
.cc-user-form-scope span.cc-user-form-label {
    display: block !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    color: #111827 !important;
}

.cc-user-form-scope .cc-user-form-label-inline {
    display: block !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    color: #111827 !important;
}

.cc-user-form-scope .cc-user-form-control {
    margin-top: 0.5rem !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.cc-user-form-scope input.cc-user-form-input,
.cc-user-form-scope textarea.cc-user-form-input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0.375rem 0.75rem !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #111827 !important;
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 0.375rem !important;
    outline: 1px solid #d1d5db !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

@media (min-width: 640px) {
    .cc-user-form-scope input.cc-user-form-input,
    .cc-user-form-scope textarea.cc-user-form-input {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }
}

.cc-user-form-scope input.cc-user-form-input:focus,
.cc-user-form-scope textarea.cc-user-form-input:focus {
    outline: 2px solid #004795 !important;
    outline-offset: -2px !important;
}

.cc-user-form-scope input.cc-user-form-input::placeholder,
.cc-user-form-scope textarea.cc-user-form-input::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

.cc-user-form-scope input.cc-user-form-input::-webkit-input-placeholder,
.cc-user-form-scope textarea.cc-user-form-input::-webkit-input-placeholder {
    color: #9ca3af !important;
}

.cc-user-form-scope input.cc-user-form-input::-moz-placeholder,
.cc-user-form-scope textarea.cc-user-form-input::-moz-placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

.cc-user-form-scope label.cc-user-form-inline-label {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #111827 !important;
    cursor: pointer !important;
    font-weight: 400 !important;
}

.cc-user-form-scope .cc-user-form-inline-label-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-top: 0.125rem !important;
    color: #111827 !important;
}

/* Tailwind UI–style checkbox: hidden native appearance + white tick overlay (BRS blue when checked) */
.cc-user-form-scope .cc-user-form-checkbox-slot {
    display: flex !important;
    height: 1.5rem !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cc-user-form-scope .cc-user-form-checkbox-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    width: 1rem !important;
    height: 1rem !important;
    align-items: center !important;
    justify-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.cc-user-form-scope input.cc-user-form-checkbox-native[type='checkbox'] {
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 0.125rem !important;
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.cc-user-form-scope input.cc-user-form-checkbox-native[type='checkbox']:checked {
    background-color: #004795 !important;
    border-color: #004795 !important;
}

.cc-user-form-scope input.cc-user-form-checkbox-native[type='checkbox']:focus-visible {
    outline: 2px solid #004795 !important;
    outline-offset: 2px !important;
}

.cc-user-form-scope input.cc-user-form-checkbox-native[type='checkbox']:disabled {
    border-color: #d1d5db !important;
    background-color: #f3f4f6 !important;
    cursor: not-allowed !important;
}

.cc-user-form-scope input.cc-user-form-checkbox-native[type='checkbox']:disabled:checked {
    background-color: #e5e7eb !important;
    border-color: #d1d5db !important;
}

/* Read-only / table display: keep BRS blue tick when checked (e.g. admin user directory status). */
.cc-user-form-scope input.cc-user-form-checkbox-native--readonly-display[type='checkbox']:disabled {
    opacity: 1 !important;
    cursor: default !important;
}

.cc-user-form-scope input.cc-user-form-checkbox-native--readonly-display[type='checkbox']:disabled:checked {
    background-color: #004795 !important;
    border-color: #004795 !important;
}

.cc-user-form-scope input.cc-user-form-checkbox-native--readonly-display[type='checkbox']:disabled:not(:checked) {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
}

.cc-user-form-scope .cc-user-form-checkbox-tick {
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    pointer-events: none !important;
    width: 0.875rem !important;
    height: 0.875rem !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    box-sizing: border-box !important;
}

.cc-user-form-scope .cc-user-form-checkbox-grid:has(.cc-user-form-checkbox-native:checked) .cc-user-form-checkbox-tick {
    opacity: 1 !important;
}

@media (forced-colors: active) {
    .cc-user-form-scope input.cc-user-form-checkbox-native[type='checkbox'] {
        -webkit-appearance: auto !important;
        appearance: auto !important;
    }

    .cc-user-form-scope .cc-user-form-checkbox-tick {
        display: none !important;
    }
}

.cc-user-form-scope label.cc-user-form-choice .cc-user-form-checkbox-slot {
    margin-top: 0.125rem !important;
}

.cc-user-form-scope .cc-user-form-choice-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.cc-user-form-scope .cc-user-form-choice-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    max-width: 42rem !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

@media (min-width: 640px) {
    .cc-user-form-scope .cc-user-form-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.cc-user-form-scope label.cc-user-form-choice {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin: 0 !important;
    padding: 0.625rem 0.75rem !important;
    border-radius: 0.375rem !important;
    border: 1px solid rgba(229, 231, 235, 0.95) !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #111827 !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.cc-user-form-scope label.cc-user-form-choice:hover {
    border-color: #d1d5db !important;
}

.cc-user-form-scope .cc-user-form-loading {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    margin: 0 !important;
}

@media (min-width: 640px) {
    .cc-user-form-scope .cc-user-form-loading {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

.cc-user-form-scope .cc-user-form-loading > span {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #4b5563 !important;
}

.cc-user-form-scope p.cc-user-form-empty {
    margin: 0 !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #4b5563 !important;
}

@media (min-width: 640px) {
    .cc-user-form-scope p.cc-user-form-empty {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

.cc-user-form-scope .cc-user-form-spinner {
    width: 2rem !important;
    height: 2rem !important;
    flex-shrink: 0 !important;
    border-radius: 9999px !important;
    border: 2px solid #e5e7eb !important;
    border-top-color: #004795 !important;
    animation: cc-user-form-spin 0.9s linear infinite !important;
    box-sizing: border-box !important;
}

/* User add/edit page top spacing + loading row: use Tailwind on Razor (pt-5 sm:pt-7, cc-user-crud-loading). */

.cc-user-crud-loading {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    box-sizing: border-box !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #4b5563 !important;
}

.cc-user-crud-spinner {
    width: 2rem !important;
    height: 2rem !important;
    flex-shrink: 0 !important;
    border-radius: 9999px !important;
    border: 2px solid #e5e7eb !important;
    border-top-color: #004795 !important;
    animation: cc-user-form-spin 0.9s linear infinite !important;
    box-sizing: border-box !important;
}

.cc-primary-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    min-height: 2.25rem !important;
    min-width: 7.5rem !important;
    padding: 0.5rem 0.875rem !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    text-align: center !important;
    background-color: #004795 !important;
    border: none !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.cc-primary-action-btn:hover:not(:disabled) {
    filter: brightness(1.08) !important;
}

.cc-primary-action-btn:focus-visible {
    outline: 2px solid #004795 !important;
    outline-offset: 2px !important;
}

.cc-primary-action-btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

.cc-primary-action-btn-spinner {
    width: 1.125rem !important;
    height: 1.125rem !important;
    flex-shrink: 0 !important;
    border-radius: 9999px !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    border-top-color: #ffffff !important;
    animation: cc-user-form-spin 0.75s linear infinite !important;
    box-sizing: border-box !important;
}

/*
 * /users — PowerUser directory. Tailwind utilities are layered; Mud/Radzen are not — mirror layout
 * and table chrome here (same approach as .cc-ofb-panel-card / orders overview).
 */
.cc-users-directory-page {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 80rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0.5rem 1rem 2.5rem !important;
    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        'Helvetica Neue',
        Arial,
        'Noto Sans',
        sans-serif !important;
}

@media (min-width: 640px) {
    .cc-users-directory-page {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .cc-users-directory-page {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* /admin/user-management — filter row + directory card stack */
.cc-users-directory-page--admin-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.cc-users-directory-card {
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.875rem !important;
    box-shadow:
        0 4px 6px -1px rgb(15 23 42 / 0.08),
        0 2px 4px -2px rgb(15 23 42 / 0.06) !important;
}

.cc-users-directory-card__header {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 1.25rem 1.25rem 1rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

@media (min-width: 640px) {
    .cc-users-directory-card__header {
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        padding: 1.25rem 1.5rem 1rem !important;
    }
}

.cc-users-directory-card__title {
    box-sizing: border-box !important;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.5rem !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #111827 !important;
}

.cc-users-directory-card__lede {
    box-sizing: border-box !important;
    margin: 0.5rem 0 0 !important;
    max-width: 42rem !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.375rem !important;
    color: #374151 !important;
}

.cc-users-directory-card__actions {
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    width: 100% !important;
}

@media (min-width: 640px) {
    .cc-users-directory-card__actions {
        width: auto !important;
        margin-top: 0 !important;
        margin-left: 2rem !important;
    }
}

.cc-users-directory-card__add-btn.cc-primary-action-btn {
    width: 100% !important;
}

@media (min-width: 640px) {
    .cc-users-directory-card__add-btn.cc-primary-action-btn {
        width: auto !important;
    }
}

.cc-users-directory-card__body {
    box-sizing: border-box !important;
    padding: 0 !important;
}

.cc-users-directory-card__body--pagination {
    box-sizing: border-box !important;
    padding: 1rem 1.25rem 1.25rem !important;
}

@media (min-width: 640px) {
    .cc-users-directory-card__body--pagination {
        padding: 1rem 1.5rem 1.25rem !important;
    }
}

.cc-users-directory-card__body .cc-user-crud-loading {
    padding: 2rem 1.5rem 2.5rem !important;
}

.cc-users-directory-card__error {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 1.25rem 1.5rem 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.25rem !important;
    color: #b91c1c !important;
}

/* Empty state inside card */
.cc-users-directory-empty {
    box-sizing: border-box !important;
    margin: 1.5rem !important;
    padding: 3rem 1.25rem !important;
    text-align: center !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    background-color: #f9fafb !important;
}

.cc-users-directory-empty__title {
    margin: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #111827 !important;
}

.cc-users-directory-empty__text {
    margin: 0.25rem 0 0 !important;
    font-size: 0.875rem !important;
    color: #4b5563 !important;
}

/* Table shell + horizontal scroll (padding only — avoids clipping when card uses rounded corners) */
.cc-users-directory-table-shell {
    box-sizing: border-box !important;
    margin-top: 0 !important;
}

.cc-users-directory-table-scroll {
    box-sizing: border-box !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.cc-users-directory-table-scroll-inner {
    box-sizing: border-box !important;
    display: block !important;
    min-width: 100% !important;
    padding: 0.5rem 1.25rem 1.5rem !important;
}

@media (min-width: 640px) {
    .cc-users-directory-table-scroll-inner {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

.cc-users-directory-table {
    box-sizing: border-box !important;
    position: relative !important;
    width: 100% !important;
    min-width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    background-color: #ffffff !important;
}

.cc-users-directory-table thead {
    background-color: #ffffff !important;
}

.cc-users-directory-table tbody {
    background-color: #ffffff !important;
}

.cc-users-directory-table__th {
    box-sizing: border-box !important;
    padding: 0.875rem 0.75rem !important;
    text-align: left !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.25rem !important;
    color: #111827 !important;
    vertical-align: bottom !important;
    border-bottom: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
}

.cc-users-directory-table__th--right {
    text-align: right !important;
}

.cc-users-directory-table__th--flush-start {
    padding-left: 1rem !important;
}

@media (min-width: 640px) {
    .cc-users-directory-table__th--flush-start {
        padding-left: 0 !important;
    }
}

.cc-users-directory-table__th--flush-end {
    padding-right: 1rem !important;
}

@media (min-width: 640px) {
    .cc-users-directory-table__th--flush-end {
        padding-right: 0 !important;
    }
}

.cc-users-directory-table__tr {
    background-color: #ffffff !important;
}

.cc-users-directory-table__td {
    box-sizing: border-box !important;
    padding: 1rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: #4b5563 !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #e5e7eb !important;
    background-color: inherit !important;
}

.cc-users-directory-table__td--strong {
    font-weight: 500 !important;
    color: #111827 !important;
    white-space: nowrap !important;
}

.cc-users-directory-table__td--flush-start {
    padding-left: 1rem !important;
}

@media (min-width: 640px) {
    .cc-users-directory-table__td--flush-start {
        padding-left: 0 !important;
    }
}

.cc-users-directory-table__td--flush-end {
    padding-right: 1rem !important;
}

@media (min-width: 640px) {
    .cc-users-directory-table__td--flush-end {
        padding-right: 0 !important;
    }
}

.cc-users-directory-table__td--right {
    text-align: right !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.cc-users-directory-table__td--divisions {
    max-width: 24rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    vertical-align: middle !important;
}

.cc-users-directory-table__inactive-tag {
    margin-left: 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
}

.cc-users-directory-table__link {
    color: #004795 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.cc-users-directory-table__link:hover {
    text-decoration: underline !important;
}

.cc-users-directory-table__td--nowrap {
    white-space: nowrap !important;
}

/* User / admin directories: stack each row as a labeled card on narrow viewports */
@media (max-width: 639px) {
    .cc-users-directory-table-shell .cc-users-directory-table-scroll {
        overflow-x: visible !important;
    }

    .cc-users-directory-table--admin {
        min-width: 0 !important;
    }

    .cc-users-directory-table thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .cc-users-directory-table,
    .cc-users-directory-table tbody,
    .cc-users-directory-table tr,
    .cc-users-directory-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .cc-users-directory-table__tr {
        margin-bottom: 0.75rem !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 0.5rem !important;
        overflow: hidden !important;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.04) !important;
    }

    .cc-users-directory-table__tr:last-child {
        margin-bottom: 0 !important;
    }

    .cc-users-directory-table__td {
        border-bottom: 1px solid #f3f4f6 !important;
        padding: 0.625rem 1rem !important;
        text-align: left !important;
    }

    .cc-users-directory-table__td:last-child {
        border-bottom: none !important;
    }

    .cc-users-directory-table__td::before {
        content: attr(data-label) !important;
        display: block !important;
        margin-bottom: 0.25rem !important;
        font-size: 0.6875rem !important;
        font-weight: 600 !important;
        line-height: 1rem !important;
        letter-spacing: 0.02em !important;
        text-transform: uppercase !important;
        color: #64748b !important;
    }

    .cc-users-directory-table__td:not([data-label])::before,
    .cc-users-directory-table__td[data-label=""]::before {
        display: none !important;
        content: none !important;
    }

    .cc-users-directory-table__td--nowrap {
        white-space: normal !important;
        word-break: break-word !important;
    }

    .cc-users-directory-table__td--strong {
        white-space: normal !important;
    }

    .cc-users-directory-table__td--right {
        text-align: left !important;
        white-space: normal !important;
    }

    .cc-users-directory-table td .cc-admin-user-table-actions {
        justify-content: flex-start !important;
    }
}

/* Screen-reader-only helper (Tailwind .sr-only is layered and may lose to Mud). */
.cc-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* Admin user directory: wide table only from sm up — mobile stacked layout must not inherit 46rem (later rule was overriding the max-width mobile block). */
@media (min-width: 640px) {
    .cc-users-directory-table--admin {
        min-width: 46rem !important;
    }
}

.cc-admin-user-account-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0.125rem 0.5rem !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: 9999px !important;
}

.cc-admin-user-account-chip--brs {
    color: #ffffff !important;
    background-color: #004795 !important;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.12) !important;
}

.cc-admin-user-account-chip--external {
    color: #1e293b !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}

.cc-admin-user-table-filters {
    box-sizing: border-box !important;
    margin: 1rem 1.25rem 1rem !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    background-color: #f8fafc !important;
    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        'Helvetica Neue',
        Arial,
        sans-serif !important;
}

@media (min-width: 640px) {
    .cc-admin-user-table-filters {
        margin: 1rem 1.5rem 1rem !important;
    }
}

.cc-admin-user-table-filters__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

@media (min-width: 768px) {
    .cc-admin-user-table-filters__grid {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-end !important;
        gap: 1rem !important;
    }
}

.cc-admin-user-table-filters__field {
    flex: 0 1 11rem !important;
    min-width: 0 !important;
}

.cc-admin-user-table-filters__field--grow {
    flex: 1 1 14rem !important;
}

.cc-admin-user-table-filters__label {
    display: block !important;
    margin-bottom: 0.25rem !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.cc-admin-user-table-filters__search,
.cc-admin-user-table-filters__select {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.5rem 0.625rem !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04) !important;
}

.cc-admin-user-table-filters__search::placeholder {
    color: #94a3b8 !important;
}

.cc-admin-user-table-filters__search:focus,
.cc-admin-user-table-filters__select:focus {
    outline: 2px solid #004795 !important;
    outline-offset: 1px !important;
    border-color: #94a3b8 !important;
}

.cc-admin-user-table-filters__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem 0.75rem !important;
    margin-top: 0.625rem !important;
    padding-top: 0.625rem !important;
    border-top: 1px solid #e2e8f0 !important;
}

.cc-admin-user-table-filters__counts {
    font-size: 0.8125rem !important;
    line-height: 1.25 !important;
    color: #64748b !important;
}

.cc-admin-user-table-filters__clear {
    appearance: none !important;
    -webkit-appearance: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #004795 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

.cc-admin-user-table-filters__clear:hover {
    color: #003066 !important;
}

.cc-admin-user-filter-empty {
    box-sizing: border-box !important;
    margin: 0 1.25rem 1.5rem !important;
    padding: 2rem 1.25rem !important;
    text-align: center !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 0.5rem !important;
    background-color: #f8fafc !important;
}

@media (min-width: 640px) {
    .cc-admin-user-filter-empty {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important;
    }
}

.cc-admin-user-filter-empty__title {
    margin: 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

.cc-admin-user-filter-empty__text {
    margin: 0.375rem 0 0 !important;
    font-size: 0.875rem !important;
    color: #64748b !important;
}

.cc-admin-user-filter-empty__btn {
    margin-top: 1rem !important;
}

/* Admin user edit/new — administrative options use same .cc-user-form-card as UserForm; add gap before main form. */
.cc-user-crud-page > .cc-user-form-scope:first-of-type {
    margin-bottom: 1.5rem !important;
}

@media (min-width: 640px) {
    .cc-user-crud-page > .cc-user-form-scope:first-of-type {
        margin-bottom: 2rem !important;
    }
}

/* Tailwind Plus el-autocomplete (customer) — layout fallbacks; primary styles in tailwind.input.css */
.cc-tp-customer-autocomplete-root {
    box-sizing: border-box !important;
    width: 100% !important;
}

.cc-tp-customer-autocomplete__label {
    display: block !important;
    margin: 0 0 0.35rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #374151 !important;
}

.cc-tp-customer-autocomplete__required {
    color: #b91c1c !important;
    font-weight: 700 !important;
}

.cc-tp-customer-autocomplete {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

.cc-tp-customer-autocomplete__input {
    box-sizing: border-box !important;
    width: 100% !important;
    padding-right: 5rem !important;
}

.cc-tp-customer-autocomplete__actions {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

.cc-tp-customer-autocomplete__clear {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #64748b !important;
    cursor: pointer !important;
}

.cc-tp-customer-autocomplete__clear:hover:not(:disabled):not(.cc-tp-customer-autocomplete__clear--inactive) {
    color: #0f172a !important;
}

.cc-tp-customer-autocomplete__clear:disabled {
    cursor: not-allowed !important;
    opacity: 0.45 !important;
}

.cc-tp-customer-autocomplete__clear--inactive {
    opacity: 0 !important;
    pointer-events: none !important;
}

.cc-tp-customer-autocomplete__clear-icon {
    width: 1.125rem !important;
    height: 1.125rem !important;
}

.cc-tp-customer-autocomplete__toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #64748b !important;
    cursor: pointer !important;
}

.cc-tp-customer-autocomplete__toggle:hover:not(:disabled) {
    color: #0f172a !important;
}

.cc-tp-customer-autocomplete__toggle:disabled {
    cursor: not-allowed !important;
    opacity: 0.45 !important;
}

.cc-tp-customer-autocomplete__chevron {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

.cc-tp-customer-autocomplete__options {
    box-sizing: border-box !important;
    min-width: 100% !important;
}

.cc-tp-customer-autocomplete__loading {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0.25rem 0 0 !important;
    font-size: 0.875rem !important;
    color: #64748b !important;
}

.cc-tp-customer-autocomplete__error {
    margin: 0.35rem 0 0 !important;
    font-size: 0.8125rem !important;
    color: #b91c1c !important;
}

.cc-admin-registration-actions {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
}

button.cc-admin-registration-action {
    appearance: none !important;
    -webkit-appearance: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    font: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.25rem !important;
}

button.cc-admin-registration-action--approve {
    color: #004795 !important;
}

button.cc-admin-registration-action--approve:hover {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

button.cc-admin-registration-action--reject {
    color: #b91c1c !important;
}

button.cc-admin-registration-action--reject:hover {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

.cc-users-directory-table__td--company {
    max-width: 14rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    color: #374151 !important;
}

.cc-admin-user-table-banner {
    box-sizing: border-box !important;
    margin: 0 1.25rem 1rem !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.875rem !important;
    line-height: 1.35 !important;
    border-radius: 0.375rem !important;
}

@media (min-width: 640px) {
    .cc-admin-user-table-banner {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important;
    }
}

.cc-admin-user-table-banner--success {
    color: #166534 !important;
    background-color: #ecfdf5 !important;
    border: 1px solid #bbf7d0 !important;
}

.cc-admin-user-table-banner--error {
    font-weight: 500 !important;
    color: #991b1b !important;
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
}

.cc-admin-user-table-status {
    display: inline-block !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.cc-admin-user-table-status--active {
    color: #166534 !important;
    background-color: #dcfce7 !important;
}

.cc-admin-user-table-status--inactive {
    color: #92400e !important;
    background-color: #fef3c7 !important;
}

.cc-admin-user-table-actions {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
}

.cc-admin-user-table-action-link,
a.cc-admin-user-table-action-link,
button.cc-admin-user-table-action-link {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    font: inherit !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.25rem !important;
    color: #004795 !important;
    text-decoration: none !important;
    text-align: inherit !important;
}

a.cc-admin-user-table-action-link:visited {
    color: #004795 !important;
}

.cc-admin-user-table-action-link:hover:not(:disabled) {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

button.cc-admin-user-table-action-link:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    text-decoration: none !important;
}

/* Page header / hero: Tailwind + Web PageHeader markup (see Layout/PageHeader.razor). Mud overrides: tailwind.input.css .cc-hero-shell / .cc-hero-title */

.orders-overview-page .orders-overview-card__header {
    padding-bottom: 0.5rem;
}

/*
 * Tailwind v4 puts utilities in @layer utilities; Mud/Radzen CSS is unlayered. Unlayered rules can
 * beat layered utilities, so .p-5 / .sm:p-6 may not apply in computed styles even though the
 * classes are on the element. Mirror p-5 (1.25rem) and sm:p-6 (1.5rem) here (unlayered, last).
 */
.orders-overview-page .cc-order-line-panel {
    padding: 1.25rem !important;
}

@media (min-width: 640px) {
    .orders-overview-page .cc-order-line-panel {
        padding: 1.5rem !important;
    }
}

/* PO pill — extra padding on orders overview (unlayered; Mud can squash Tailwind px/py) */
.orders-overview-page .cc-order-card__po {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    box-sizing: border-box !important;
}

/*
 * Stage chips — padding + layout everywhere they render (home recent orders, order cards, coils).
 * Global so table cells match card chips; unlayered for Mud.
 */
.cc-order-card__status {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    column-gap: 0.5rem !important;
}

.cc-order-card__status-label {
    margin: 0 !important;
    padding: 0 !important;
}

.orders-overview-page .cc-order-card__status-stack.cc-order-card__status-stack--toolbar-end {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.375rem !important;
    row-gap: 0.375rem !important;
    column-gap: 0.375rem !important;
}

.orders-overview-page .cc-order-card__status-detail {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    font-size: 0.625rem !important;
    line-height: 1.35 !important;
    color: #64748b !important;
    text-align: right !important;
    font-family: inherit !important;
}

/*
 * Stage chips — global (home recent orders + orders overview + order detail coils).
 * Palette aligned with dashboard buckets (scheduling sky, shipping green, etc.).
 */
.cc-order-card__status--neutral {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
}

.cc-order-card__status--neutral .cc-order-card__status-dot {
    background-color: #0284c7 !important;
}

/* In Scheduling chip — same sky palette as legacy neutral. */
.cc-order-card__status--in_scheduling {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
}

.cc-order-card__status--in_scheduling .cc-order-card__status-dot {
    background-color: #0284c7 !important;
}

/* Pending chip — slightly deeper blue than In Scheduling. */
.cc-order-card__status--pending {
    background-color: #dbeafe !important;
    color: #1e40af !important;
}

.cc-order-card__status--pending .cc-order-card__status-dot {
    background-color: #2563eb !important;
}

.cc-order-card__status--hot {
    background-color: #ffedd5 !important;
    color: #9a3412 !important;
}

.cc-order-card__status--hot .cc-order-card__status-dot {
    background-color: #ea580c !important;
}

.cc-order-card__status--cold {
    background-color: #dbeafe !important;
    color: #1e40af !important;
}

.cc-order-card__status--cold .cc-order-card__status-dot {
    background-color: #004795 !important;
}

.cc-order-card__status--processing {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}

.cc-order-card__status--processing .cc-order-card__status-dot {
    background-color: #f5a623 !important;
}

.cc-order-card__status--outside {
    background-color: #ede9fe !important;
    color: #5b21b6 !important;
}

.cc-order-card__status--outside .cc-order-card__status-dot {
    background-color: #7c3aed !important;
}

.cc-order-card__status--shipping {
    background-color: #dcfce7 !important;
    color: #166534 !important;
}

.cc-order-card__status--shipping .cc-order-card__status-dot {
    background-color: #4caf50 !important;
}

.cc-order-card__status--hold {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
}

.cc-order-card__status--hold .cc-order-card__status-dot {
    background-color: #dc2626 !important;
}

.cc-order-card__status--paint {
    background-color: #ccfbf1 !important;
    color: #0f766e !important;
}

.cc-order-card__status--paint .cc-order-card__status-dot {
    background-color: #0d9488 !important;
}

/*
 * Product row: one horizontal strip on md+; below md — 3+2 grid (two rows) instead of horizontal scroll.
 */
.orders-overview-page .cc-order-card__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #f1f5f9 !important;
    column-gap: 0.75rem !important;
    row-gap: 0.875rem !important;
    overflow-x: visible !important;
}

.orders-overview-page .cc-order-card__field {
    flex: unset !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: none !important;
    box-sizing: border-box !important;
}

@media (max-width: 767.98px) {
    /* Narrow: column dividers (3 cols row 1; 2 cols row 2). */
    .orders-overview-page .cc-order-card__field:nth-child(2),
    .orders-overview-page .cc-order-card__field:nth-child(3),
    .orders-overview-page .cc-order-card__field:nth-child(5) {
        border-left: 1px solid #e2e8f0 !important;
        padding-left: 0.75rem !important;
    }
}

@media (min-width: 768px) {
    .orders-overview-page .cc-order-card__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .orders-overview-page .cc-order-card__field {
        flex: 1 1 0 !important;
        min-width: 5.5rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        border-left: 1px solid #e2e8f0 !important;
    }

    .orders-overview-page .cc-order-card__field:first-child {
        border-left: none !important;
        padding-left: 0 !important;
    }
}

.orders-overview-page .cc-order-card__field-label {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    font-family: inherit !important;
}

.orders-overview-page .cc-order-card__field-value {
    margin: 0.25rem 0 0 !important;
    padding: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #0f172a !important;
    word-break: break-word !important;
    font-family: inherit !important;
}

/* Order list pagination: Tailwind-only in ListPaginationNav.razor */

h1:focus {
    outline: none;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

/* Blazor WASM host sets --blazor-load-percentage* on the document while downloading */
.cc-wasm-boot-status::after {
    content: var(--blazor-load-percentage-text, "Loading…");
}

.cc-wasm-boot-bar {
    transition: width 0.1s ease-out;
}

/* Repeating BRS marks — WASM boot splash only (.cc-wasm-boot-root; never use on in-app loaders) */
.cc-wasm-boot-watermark {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    opacity: 0.055;
    background-image: url("/images/svg/brs-watermark-pattern.svg");
    background-repeat: repeat;
    background-position: center top;
    /* Scales the whole pattern tile (300×170 design); larger = fewer, more spread marks */
    background-size: min(380px, 52vw) auto;
}

/* Repeating BRS marks on app shell surfaces (same asset as WASM boot; ::before so it shows over bg-cc-shell) */
.cc-surface-brs-watermark {
    position: relative;
    isolation: isolate;
}

.cc-surface-brs-watermark::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.06;
    background-image: url("/images/svg/brs-watermark-pattern.svg");
    background-repeat: repeat;
    background-position: center top;
    background-size: min(380px, 52vw) auto;
}

.cc-surface-brs-watermark:has(.auth-page-root)::before,
.cc-surface-brs-watermark:has(.welcome-page-root)::before {
    opacity: 0;
}

code {
    color: #c02d76;
}

@media (max-width: 600px) {
    .mud-table-container {
        width: auto !important;
    }
}

.order-status-dashboard .summary-card,
.order-status-dashboard .stage-card {
    height: 100%;
}

.order-status-dashboard .summary-card .mud-icon-root {
    opacity: 0.8;
}

.order-status-dashboard .stage-card .metric-label {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-left: 0.25rem;
}

.order-status-dashboard .stage-card .mud-progress-linear {
    height: 8px;
    border-radius: 4px;
}

.order-status-cards .order-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.order-status-cards .order-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.order-status-cards .order-card__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: center;
}

.order-status-cards .order-card__stats>div {
    text-align: left;
}

.order-status-cards .stage-section {
    margin-bottom: 32px;
}

.order-status-cards .stage-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.order-status-cards .stage-highlight {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-status-cards .stage-highlight:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 4px;
}

.order-status-details .summary-card {
    height: 100%;
}

.order-status-details .timeline-item+.timeline-item {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.order-status-details .timeline-item__meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.order-status-details .timeline-item__meta>.mud-chip {
    margin-left: auto;
}

.order-status-details .coil-card {
    height: 100%;
}

.order-status-details .coil-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.order-status-details .coil-card__stats {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.order-status-cards .stage-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.order-status-cards .order-card .mud-card-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.order-details-modern .stage-pipeline__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.order-details-modern .stage-pipeline__grid {
    margin-top: 1rem;
}

.order-details-modern .stage-step {
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}

.order-details-modern .stage-step--complete {
    background: rgba(76, 175, 80, 0.08);
}

.order-details-modern .stage-step--current {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.order-details-modern .stage-step--upcoming {
    opacity: 0.8;
}

.order-details-modern .coil-card .coil-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*
 * Orders filter bar (Tailwind Plus–style). Mud/Radzen are unlayered; Tailwind v4 utilities sit in
 * @layer utilities — mirror critical layout and control styles here so they always win.
 */
.orders-overview-page .cc-orders-filter-bar,
.cc-orders-filter-bar {
    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        'Helvetica Neue',
        Arial,
        'Noto Sans',
        sans-serif !important;
}

/*
 * Orders filter panel — all layout from unlayered CSS (Tailwind @layer loses to Mud/Radzen).
 * Scoped to .cc-orders-filter-bar so it works without relying on .orders-overview-page.
 */
.orders-overview-page .cc-ofb-panel-card,
.cc-orders-filter-bar .cc-ofb-panel-card {
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.875rem !important;
    box-shadow:
        0 4px 6px -1px rgb(15 23 42 / 0.08),
        0 2px 4px -2px rgb(15 23 42 / 0.06) !important;
}

/* Orders empty state: same width + chrome as filter panel; reset = white pill (mockup). */
.orders-overview-page .cc-empty-filter-state {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.875rem !important;
    box-shadow:
        0 4px 6px -1px rgb(15 23 42 / 0.08),
        0 2px 4px -2px rgb(15 23 42 / 0.06) !important;
}

/*
 * Empty-state reset (mockup pill). Unlayered + high specificity so legacy/Radzen button rules do not win.
 * Scoped under .cc-empty-filter-state (not only .orders-overview-page) so the component always picks these up.
 */
.cc-empty-filter-state button.cc-empty-filter-state__reset,
.orders-overview-page .cc-empty-filter-state__reset {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.625rem !important;
    margin: 0 !important;
    padding: 0.625rem 1.5rem !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.25rem !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9999px !important;
    box-shadow:
        0 1px 2px rgb(15 23 42 / 0.06),
        0 2px 4px rgb(15 23 42 / 0.06) !important;
    cursor: pointer !important;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

.cc-empty-filter-state button.cc-empty-filter-state__reset:hover,
.orders-overview-page .cc-empty-filter-state__reset:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

.cc-empty-filter-state button.cc-empty-filter-state__reset:focus-visible,
.orders-overview-page .cc-empty-filter-state__reset:focus-visible {
    outline: 2px solid #004795 !important;
    outline-offset: 2px !important;
}

.cc-empty-filter-state .cc-empty-filter-state__reset-label,
.orders-overview-page .cc-empty-filter-state__reset-label {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-weight: 600 !important;
    font-size: inherit !important;
}

.cc-empty-filter-state .cc-empty-filter-state__reset-funnel,
.orders-overview-page .cc-empty-filter-state__reset-funnel {
    flex-shrink: 0 !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    color: #475569 !important;
    stroke: #475569 !important;
    fill: none !important;
}

.cc-empty-filter-state .cc-empty-filter-state__reset-funnel path,
.orders-overview-page .cc-empty-filter-state__reset-funnel path {
    stroke: #475569 !important;
    stroke-width: 1.75 !important;
    fill: none !important;
}

.cc-empty-filter-state .cc-empty-filter-state__reset-chevron,
.orders-overview-page .cc-empty-filter-state__reset-chevron {
    flex-shrink: 0 !important;
    width: 1rem !important;
    height: 1rem !important;
    color: #94a3b8 !important;
    fill: #94a3b8 !important;
}

.cc-empty-filter-state .cc-empty-filter-state__reset-chevron path,
.orders-overview-page .cc-empty-filter-state__reset-chevron path {
    fill: #94a3b8 !important;
}

.orders-overview-page .cc-ofb-toolbar-row,
.cc-orders-filter-bar .cc-ofb-toolbar-row {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: 100% !important;
    padding: 1rem !important;
}

@media (min-width: 640px) {
    .orders-overview-page .cc-ofb-toolbar-row,
    .cc-orders-filter-bar .cc-ofb-toolbar-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 1rem !important;
        padding: 1rem 1.25rem !important;
    }
}

.orders-overview-page .cc-ofb-toolbar-lead,
.cc-orders-filter-bar .cc-ofb-toolbar-lead {
    display: flex !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
}

@media (min-width: 640px) {
    .orders-overview-page .cc-ofb-toolbar-lead,
    .cc-orders-filter-bar .cc-ofb-toolbar-lead {
        justify-content: flex-start !important;
    }
}

.orders-overview-page .cc-ofb-toolbar-controls,
.cc-orders-filter-bar .cc-ofb-toolbar-controls {
    box-sizing: border-box !important;
    display: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
}

@media (min-width: 640px) {
    .orders-overview-page .cc-ofb-toolbar-controls,
    .cc-orders-filter-bar .cc-ofb-toolbar-controls {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.75rem !important;
    }

    .orders-overview-page .cc-ofb-search-desktop,
    .cc-orders-filter-bar .cc-ofb-search-desktop {
        position: relative !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        max-width: 28rem !important;
        width: auto !important;
    }
}

@media (min-width: 1024px) {
    .orders-overview-page .cc-ofb-search-desktop,
    .cc-orders-filter-bar .cc-ofb-search-desktop {
        max-width: 36rem !important;
    }
}

.orders-overview-page .cc-ofb-count,
.cc-orders-filter-bar .cc-ofb-count {
    margin: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.35rem !important;
    font-variant-numeric: tabular-nums !important;
    color: #475569 !important;
    font-weight: 500 !important;
}

/* Mobile-only; must not use display:inline-flex at sm+ or it overrides Tailwind sm:hidden */
.orders-overview-page .cc-ofb-mobile-trigger,
.cc-orders-filter-bar .cc-ofb-mobile-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.375rem !important;
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.25rem !important;
    color: #374151 !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
}

@media (min-width: 640px) {
    .orders-overview-page .cc-ofb-mobile-trigger,
    .cc-orders-filter-bar .cc-ofb-mobile-trigger {
        display: none !important;
    }
}

.orders-overview-page .cc-ofb-mobile-trigger:hover:not(:disabled),
.cc-orders-filter-bar .cc-ofb-mobile-trigger:hover:not(:disabled) {
    background-color: #f9fafb !important;
}

.orders-overview-page .cc-ofb-mobile-trigger:disabled,
.cc-orders-filter-bar .cc-ofb-mobile-trigger:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Search inputs — Radzen/Mud global input rules often zero padding/font. */
.cc-orders-filter-bar .cc-ofb-search-desktop {
    position: relative !important;
}

.cc-orders-filter-bar input.cc-tp-input[type='search'] {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    color: #111827 !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.cc-orders-filter-bar .cc-ofb-search-desktop input.cc-tp-input[type='search'] {
    padding: 0.5rem 0.75rem 0.5rem 2.5rem !important;
}

.cc-orders-filter-bar .mt-4 input.cc-tp-input[type='search'] {
    padding: 0.625rem 0.75rem 0.625rem 2.5rem !important;
}

.cc-orders-filter-bar input.cc-tp-input[type='search']:focus {
    outline: none !important;
    border-color: rgb(0 71 149 / 0.5) !important;
    box-shadow:
        0 1px 2px 0 rgb(0 0 0 / 0.05),
        0 0 0 2px rgb(0 71 149 / 0.2) !important;
}

.cc-orders-filter-bar input.cc-tp-input[type='search']::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

.cc-orders-filter-bar input.cc-tp-input[type='search']:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.cc-orders-filter-bar button[type='button'] {
    -webkit-appearance: none !important;
    appearance: none !important;
    font-family: inherit !important;
}

/* Division trigger — looks like a bordered control (not a plain text link). */
.cc-orders-filter-bar button.cc-tp-popover-trigger[popovertarget] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    min-height: 2.25rem !important;
    padding: 0.375rem 0.75rem !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.25rem !important;
    color: #1f2937 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
}

.cc-orders-filter-bar button.cc-tp-popover-trigger[popovertarget]:hover {
    background-color: #f9fafb !important;
    border-color: #9ca3af !important;
}

/* Division list rows */
.orders-overview-page .cc-ofb-division-option,
.cc-orders-filter-bar .cc-ofb-division-option {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border: none !important;
    background-color: transparent !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    text-align: left !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    font-weight: 400 !important;
    color: #374151 !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.orders-overview-page .cc-ofb-division-option:hover,
.cc-orders-filter-bar .cc-ofb-division-option:hover {
    background-color: #f9fafb !important;
}

.orders-overview-page .cc-ofb-division-option--active,
.cc-orders-filter-bar .cc-ofb-division-option--active {
    background-color: rgb(0 71 149 / 0.1) !important;
    font-weight: 500 !important;
    color: #004795 !important;
}

/* Popover panel */
.orders-overview-page el-popover.cc-ofb-division-popover,
.cc-orders-filter-bar el-popover.cc-ofb-division-popover {
    background-color: #ffffff !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem !important;
    box-shadow:
        0 25px 50px -12px rgb(0 0 0 / 0.25),
        0 0 0 1px rgb(0 0 0 / 0.05) !important;
}

/* Active filter chips (inside panel, below main row) */
.orders-overview-page .cc-ofb-active-strip,
.cc-orders-filter-bar .cc-ofb-active-strip {
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: none !important;
    background-color: #f8fafc !important;
}

.orders-overview-page .cc-ofb-active-inner,
.cc-orders-filter-bar .cc-ofb-active-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 0.5rem 1rem 0.625rem !important;
}

@media (min-width: 640px) {
    .orders-overview-page .cc-ofb-active-inner,
    .cc-orders-filter-bar .cc-ofb-active-inner {
        gap: 0.75rem !important;
        justify-content: flex-end !important;
    }
}

.orders-overview-page .cc-ofb-chip,
.cc-orders-filter-bar .cc-ofb-chip,
.cc-users-directory-table .cc-ofb-chip {
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 9999px !important;
    border: 1px solid #e5e7eb !important;
    background-color: #ffffff !important;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.25rem !important;
    color: #111827 !important;
}

/* Read-only division pills on /users (no remove control; same look as Orders active filter chips). */
.cc-users-directory-division-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.375rem 0.5rem !important;
    max-width: 22rem !important;
}

.cc-users-directory-division-empty {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
}

.orders-overview-page .cc-ofb-chip-remove,
.cc-orders-filter-bar .cc-ofb-chip-remove {
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    padding: 0.25rem !important;
    border-radius: 9999px !important;
    color: #9ca3af !important;
}

.orders-overview-page .cc-ofb-chip-remove:hover,
.cc-orders-filter-bar .cc-ofb-chip-remove:hover {
    background-color: #e5e7eb !important;
    color: #6b7280 !important;
}

/* Mobile slide-over panel */
.orders-overview-page .cc-ofb-mobile-panel,
.cc-orders-filter-bar .cc-ofb-mobile-panel {
    background-color: #ffffff !important;
}

.orders-overview-page .cc-ofb-loading {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    padding: 4rem 1rem !important;
}

.orders-overview-page .cc-ofb-loading__spinner {
    box-sizing: border-box !important;
    border-width: 2px !important;
}

.orders-overview-page .cc-ofb-error {
    box-sizing: border-box !important;
    border: 1px solid #fecaca !important;
    background-color: #fef2f2 !important;
    color: #7f1d1d !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.orders-overview-page .cc-ofb-empty {
    box-sizing: border-box !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.orders-overview-page .cc-ofb-updated {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    color: #64748b !important;
    margin: 0 !important;
}