/*
 * Feature and component rules that must remain global because MudBlazor
 * renders the target DOM outside reliable Blazor CSS-isolation boundaries.
 * All selectors are constrained by app-owned, feature-specific class names.
 */

/* Account registration */
.jexion-registration-card {
    container-type: inline-size;
}

.jexion-registration-actions,
.jexion-registration-secondary-actions {
    align-items: center;
    display: flex;
}

.jexion-registration-actions {
    gap: var(--jexion-space-4);
    justify-content: space-between;
}

.jexion-registration-secondary-actions {
    gap: var(--jexion-space-3);
}

.jexion-registration-checkout-action {
    margin-left: auto;
}

@container (max-width: 32rem) {
    .jexion-registration-actions,
    .jexion-registration-secondary-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .jexion-registration-secondary-actions {
        width: 100%;
    }

    .jexion-registration-actions .mud-button-root,
    .jexion-registration-checkout-action {
        margin-left: 0;
        width: 100%;
    }
}

/* Billing */
.jexion-plan-card {
    border-radius: var(--jexion-radius-control);
}

.jexion-plan-card--featured {
    background-color: var(--mud-palette-surface);
    outline: var(--jexion-border-width) solid var(--mud-palette-primary);
}

.jexion-plan-card--standard {
    background-color: var(--mud-palette-background-gray);
    outline: none;
}

.jexion-plan-card--currently-selected {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    outline: var(--jexion-border-width) solid var(--mud-palette-primary);
}

.jexion-pricing-plan-grid {
    align-items: stretch;
}

.jexion-pricing-plan-item > .jexion-plan-card {
    height: 100%;
}

.jexion-plan-selection-dialog {
    max-width: calc(100vw - var(--jexion-space-8));
    min-width: 21.5rem;
    width: min(72rem, calc(100vw - var(--jexion-space-8)));
}

.jexion-plan-selection-dialog .mud-dialog-content {
    overflow-x: hidden;
}

.jexion-plan-selection-dialog .mud-dialog-actions {
    padding: 0 var(--jexion-space-6) var(--jexion-space-6);
}

.jexion-plan-selection-dialog__cancel {
    padding: var(--jexion-space-2) var(--jexion-space-6);
}

@media (min-width: 960px) {
    .jexion-plan-selection-dialog {
        min-width: min(72rem, calc(100vw - var(--jexion-space-16)));
    }
}

/* Form assignment */
.jexion-create-forms-step {
    border: var(--jexion-border-width) solid var(--mud-palette-divider);
    border-radius: var(--jexion-radius-control);
    gap: var(--jexion-space-3);
    height: var(--jexion-page-scroll-height);
    overflow-y: auto;
}

.jexion-create-forms-user-step {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.jexion-create-forms-user-paper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--jexion-space-3);
    min-height: 0;
}

.jexion-create-forms-user-grid {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.mud-table.jexion-create-forms-user-grid > .mud-table-container {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    overflow-y: auto !important;
    padding-bottom: var(--jexion-space-2);
}

/* Detailed alerts */
.jexion-detailed-alert {
    display: flex;
    flex-direction: column;
    gap: var(--jexion-space-2);
    width: 100%;
}

.jexion-detailed-alert-header,
.jexion-detailed-alert-header .mud-alert-icon,
.jexion-detailed-alert-header .mud-typography,
.jexion-detailed-alert-header .mud-button-root {
    color: var(--jexion-color-on-strong) !important;
}

.jexion-detailed-alert-detail {
    background-color: rgba(var(--jexion-detailed-alert-color-rgb), 0.08);
    border: var(--jexion-border-width) solid var(--jexion-detailed-alert-color);
    border-radius: var(--jexion-radius-control);
    color: var(--mud-palette-text-primary);
    padding: var(--jexion-space-4);
}

.jexion-detailed-alert-detail-dense {
    padding: var(--jexion-space-3);
}

.jexion-detailed-alert-detail-square {
    border-radius: 0;
}

.jexion-detailed-alert-normal {
    --jexion-detailed-alert-color: var(--mud-palette-text-primary);
    --jexion-detailed-alert-color-rgb: var(--mud-palette-text-primary-rgb);
}

.jexion-detailed-alert-info {
    --jexion-detailed-alert-color: var(--mud-palette-info);
    --jexion-detailed-alert-color-rgb: var(--mud-palette-info-rgb);
}

.jexion-detailed-alert-success {
    --jexion-detailed-alert-color: var(--mud-palette-success);
    --jexion-detailed-alert-color-rgb: var(--mud-palette-success-rgb);
}

.jexion-detailed-alert-warning {
    --jexion-detailed-alert-color: var(--mud-palette-warning);
    --jexion-detailed-alert-color-rgb: var(--mud-palette-warning-rgb);
}

.jexion-detailed-alert-error {
    --jexion-detailed-alert-color: var(--mud-palette-error);
    --jexion-detailed-alert-color-rgb: var(--mud-palette-error-rgb);
}

/* Public header and landing page */
.jexion-public-header-actions {
    min-width: 0;
}

.jexion-public-header-actions .mud-button-root,
.jexion-public-contact {
    white-space: nowrap;
}

.jexion-public-header-get-started.mud-button-root {
    background-color: var(--jexion-color-on-strong) !important;
    border-color: transparent !important;
    color: var(--mud-palette-primary) !important;
}

.jexion-public-header-get-started .mud-button-label,
.jexion-public-header-get-started .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

.jexion-public-landing-hero-panel {
    border-radius: var(--jexion-radius-control);
}

.jexion-public-landing-hero-panel--intro {
    background-color: var(--mud-palette-surface);
}

.jexion-public-landing-hero-panel--featured {
    background-color: var(--mud-palette-info-hover);
}

.jexion-public-landing-hero-actions {
    margin-top: auto;
}

.jexion-public-landing-feature-list .mud-list-item {
    padding-inline: 0;
}

.jexion-public-landing-security-card,
.jexion-public-landing-final-card {
    background-color: var(--mud-palette-background-gray);
}

.jexion-public-landing-security-chip-set {
    gap: var(--jexion-space-2);
}

.jexion-public-landing-section-divider {
    margin-inline: auto;
    width: calc(100% - var(--jexion-space-16));
}

.jexion-public-landing-final-actions {
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 476px) {
    .jexion-public-header {
        padding-inline: var(--jexion-space-2) !important;
    }

    .jexion-public-header-brand .mud-typography {
        font-size: 1.5rem;
        line-height: 1.25;
    }

    .jexion-public-header-actions {
        flex-wrap: nowrap !important;
        gap: var(--jexion-space-1) !important;
    }

    .jexion-public-header-actions .mud-button-root {
        min-width: auto;
        padding-inline: var(--jexion-space-2);
    }

    .jexion-public-header-actions .mud-button-label {
        font-size: 0.8125rem;
    }

    .jexion-public-header-get-started .mud-button-icon-end {
        margin-left: var(--jexion-space-1);
    }
}

@media (max-width: 600px) {
    .jexion-public-landing-final-card {
        padding-inline: 0 !important;
    }

    .jexion-public-landing-final-card-content {
        padding: var(--jexion-space-6) !important;
    }

    .jexion-public-landing-final-actions {
        align-items: stretch;
        flex-direction: column !important;
    }

    .jexion-public-landing-final-actions .mud-button-root {
        width: 100%;
    }

    .jexion-public-contact .jexion-public-contact__text {
        display: none;
    }
}

/* Home dashboard */
.jexion-home-setup-card {
    height: 100%;
}

.jexion-home-setup-task {
    border: var(--jexion-border-width) solid transparent;
    border-radius: var(--jexion-radius-control);
    margin-bottom: 0.1rem;
    transition: border-color var(--jexion-transition-fast),
        outline-color var(--jexion-transition-fast),
        opacity var(--jexion-transition-fast);
}

.jexion-home-setup-task--next {
    border-color: var(--mud-palette-primary);
    outline: var(--jexion-focus-width) solid var(--mud-palette-primary);
    outline-offset: var(--jexion-focus-offset);
}

.jexion-home-setup-task--completed {
    opacity: 0.82;
}

.jexion-home-setup-task--future {
    cursor: not-allowed;
    opacity: 0.55;
}

.jexion-recent-activity-scroll {
    max-height: 15.625rem;
    overflow-y: auto;
}

/* Templates */
.jexion-template-editor-table {
    flex: 1;
    min-height: 0;
}

.jexion-template-editor-table > .mud-table-container {
    height: 100%;
}

/* Application extract installation guide */
.jexion-app-extract-guide {
    overflow: hidden;
}

.jexion-app-extract-guide__figure {
    margin: 0;
}

.jexion-app-extract-guide__image-frame {
    align-items: center;
    background: var(--mud-palette-background-gray);
    display: grid;
    justify-content: center;
    min-height: 20rem;
    padding: var(--jexion-space-2);
}

.jexion-app-extract-guide__image {
    display: block;
    grid-area: 1 / 1;
    justify-self: center;
    max-height: min(68vh, 48rem);
    max-width: 100%;
    object-fit: contain;
    opacity: 0;
    visibility: hidden;
    width: auto;
}

.jexion-app-extract-guide__image--active {
    opacity: 1;
    visibility: visible;
}

.jexion-app-extract-guide__controls {
    align-items: center;
    border-top: var(--jexion-border-width) solid var(--mud-palette-divider);
    display: grid;
    gap: var(--jexion-space-3);
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--jexion-space-3);
}

.jexion-app-extract-guide__caption {
    min-width: 0;
    text-align: center;
}

@media (max-width: 600px) {
    .jexion-app-extract-guide__image-frame {
        min-height: 12rem;
        padding: var(--jexion-space-1);
    }

    .jexion-app-extract-guide__controls {
        gap: var(--jexion-space-1);
        padding: var(--jexion-space-2);
    }
}

/* User management */
.add-users-bulk-manager-email-autocomplete {
    min-width: 18rem;
    width: 100%;
}

.mgmt-tree-view {
    max-height: 70vh;
    overflow: auto;
}

.mgmt-tree-view .mud-treeview-group {
    border-left: 1px solid var(--mud-palette-lines-default);
    margin-left: var(--jexion-space-4);
    padding-left: var(--jexion-space-2);
}

.mgmt-tree-view > .mud-treeview-group {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
}

.mgmt-tree-view .mud-treeview-item-content {
    min-height: auto;
    padding-block: var(--jexion-space-1);
}

.mgmt-tree-item-body {
    align-items: center;
    display: flex;
    min-width: 0;
    position: relative;
    width: 100%;
}

.mgmt-tree-branch-connector {
    border-top: 1px solid var(--mud-palette-lines-default);
    position: absolute;
    right: 100%;
    top: 50%;
    width: calc(3rem + var(--jexion-space-2));
}

.mgmt-tree-card {
    cursor: pointer;
    flex: 0 0 13.75rem;
    width: 13.75rem;
}

.mgmt-tree-card .truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mgmt-tree-card--focused {
    border: var(--jexion-focus-width) solid var(--mud-palette-primary) !important;
}

.mgmt-tree-card--match {
    outline: var(--jexion-focus-width) dashed var(--mud-palette-warning) !important;
}

.mgmt-tree-direct-reports {
    display: flex;
    flex-wrap: wrap;
    gap: var(--jexion-space-3);
    justify-content: center;
    width: 100%;
}

/* Shared behavior-specific elements */
.jexion-nav-sign-out {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    width: 100%;
}

.jexion-one-time-value-copy-target {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

/* Metadata union hierarchy table */
.metadata-hierarchy-dimension-cell {
    background-color: var(--mud-palette-background-gray);
    font-weight: 500;
    min-width: 10rem;
}

.metadata-hierarchy-dimension-divider {
    background-color: var(--mud-palette-background-gray);
    border-right: 3px double var(--mud-palette-divider) !important;
    font-weight: 500;
    min-width: 10rem;
}

.metadata-hierarchy-table td,
.metadata-hierarchy-table th {
    white-space: nowrap;
}

.metadata-hierarchy-table > .mud-table-container > table,
.metadata-flat-member-table > .mud-table-container > table {
    min-width: 100%;
    width: max-content;
}

.metadata-union-sized-header::after {
    content: attr(data-column-sizing-value);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    white-space: nowrap;
}

.metadata-hierarchy-context-cell {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    min-height: 37px;
    top: 37px !important;
    z-index: 2;
}

.metadata-hierarchy-context-row {
    box-shadow: 0 1px 0 var(--mud-palette-divider);
}

.metadata-union-controls-layout {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: max-content minmax(100px, 1fr) max-content;
}

.metadata-union-view-mode {
    justify-self: start;
    width: max-content;
}

.metadata-union-quick-filter {
    justify-self: center;
    max-width: 400px;
    min-width: 100px;
    width: 100%;
}

.metadata-union-quick-filter-tooltip {
    display: block;
    width: 100%;
}

.metadata-union-settings-button {
    justify-self: end;
}

@media (max-width: 700px) {
    .metadata-union-controls-layout {
        grid-template-columns: 1fr;
    }

    .metadata-union-quick-filter {
        grid-row: 2;
    }

    .metadata-union-settings-button {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
    }
}

.metadata-flat-member-table td,
.metadata-flat-member-table th {
    white-space: nowrap;
}

.metadata-diff-line {
    align-items: center;
    border-radius: var(--mud-default-borderradius);
    display: flex;
    gap: 0.5rem;
    min-height: 2rem;
    padding: 0.25rem 0.75rem;
}

.metadata-diff-line--addition {
    background-color: rgba(var(--mud-palette-success-rgb), 0.14);
    color: var(--mud-palette-success);
}

.metadata-diff-line--removal {
    background-color: rgba(var(--mud-palette-error-rgb), 0.14);
    color: var(--mud-palette-error);
}

.metadata-diff-symbol {
    flex: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}