@layer components {
    .primary-line,
    .primary-button,
    .secondary-button,
    .send-button,
    .icon-button,
    .session-item {
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text);
    }

    .primary-line,
    .primary-button,
    .secondary-button,
    .send-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 38px;
        padding: 0 12px;
        font-size: 13px;
        font-weight: 700;
    }

    .primary-line span,
    .primary-button span,
    .secondary-button span,
    .send-button span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .primary-line,
    .primary-button,
    .send-button {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--text-on-accent);
    }

    /* The global button:disabled fade dims the label together with the fill, and on a filled button
       that leaves light-on-light: legible as a shape, unreadable as a word, which reads as broken
       rather than inactive. Filled buttons therefore get explicit inactive colours instead. */
    .primary-line:disabled,
    .primary-button:disabled,
    .send-button:disabled {
        opacity: 1;
        background: var(--surface-muted);
        border-color: var(--border);
        color: var(--text-muted);
    }

    .secondary-button {
        background: var(--surface);
    }

    .secondary-button.approve {
        color: var(--success-fg);
        border-color: var(--success-border);
    }

    .secondary-button.deny {
        color: var(--danger-fg);
        border-color: var(--danger-border);
    }

    .icon-button {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        flex: none;
        text-decoration: none;
    }

    .icon {
        width: 17px;
        height: 17px;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex: none;
    }

    .section-label {
        color: var(--text-label);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    /* The Blazor runtime toggles this banner with an inline display value, so the layout has to work
       as a plain block — never set display here with !important or dismissing it would stop working. */

    #blazor-error-ui {
        display: none;
        position: fixed;
        inset: auto 16px 16px 16px;
        z-index: 1000;
        padding: 12px 16px;
        border-radius: 8px;
        background: var(--danger-fg);
        color: var(--text-on-accent);
        font-size: 14px;
        box-shadow: var(--shadow);
    }

    #blazor-error-ui .reload {
        margin-left: 10px;
        color: var(--text-on-accent);
        font-weight: 700;
    }

    #blazor-error-ui .dismiss {
        float: right;
        width: 26px;
        height: 26px;
        margin: -3px -6px 0 10px;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--text-on-accent);
        font-size: 18px;
        line-height: 1;
    }

    #blazor-error-ui .dismiss:hover {
        background: rgba(255, 255, 255, 0.18);
    }

    #blazor-error-ui :focus-visible {
        outline-color: var(--text-on-accent);
    }

    .status-detail {
        display: grid;
        gap: 4px;
        margin: 0;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-muted);
        text-align: left;
    }

    .status-detail span {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .status-detail code {
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .field-group {
        display: grid;
        gap: 7px;
    }

    .field-group > span {
        color: var(--text-label);
        font-size: 12px;
        font-weight: 800;
    }

    .field-group input,
    .field-group select {
        width: 100%;
        height: 42px;
        padding: 0 11px;
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text);
    }

    .field-group input:focus,
    .field-group select:focus {
        border-color: var(--accent-border);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
    }

    .check-row {
        display: flex;
        align-items: center;
        gap: 9px;
        color: var(--text-muted);
        font-size: 13px;
    }

    .check-row input {
        width: 16px;
        height: 16px;
    }

    .auth-submit {
        width: 100%;
        min-height: 42px;
        text-decoration: none;
    }

    .form-alert,
    .validation-summary {
        margin: 0;
        padding: 11px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        font-size: 13px;
        line-height: 1.45;
    }

    .form-alert.error,
    .validation-summary {
        border-color: var(--danger-border);
        background: var(--danger-bg);
        color: var(--danger-fg);
    }

    .form-alert.success {
        border-color: var(--success-border);
        background: var(--success-bg);
        color: var(--success-fg);
    }

    .validation-summary:empty {
        display: none;
    }

    .validation-summary ul {
        margin: 0;
        padding-left: 18px;
    }

    .empty-table-cell {
        color: var(--text-muted);
        text-align: center !important;
    }

    .icon-button.deny:not(:disabled) {
        color: var(--danger-fg);
    }

    .panel-heading {
        display: grid;
        gap: 5px;
        margin-bottom: 20px;
    }

    .panel-heading h2 {
        font-size: 18px;
    }

    .compact-form {
        gap: 13px;
    }

    .count-badge,
    .role-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 24px;
        padding: 0 8px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 800;
    }

    .count-badge {
        background: var(--surface-muted);
        color: var(--text-muted);
    }

    .role-badge.admin {
        background: var(--warning-bg);
        color: var(--warning-fg);
    }

    .role-badge.customer {
        background: var(--accent-bg);
        color: var(--accent);
    }

    .access-badge {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 0 8px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 800;
    }

    .access-badge.allowed {
        background: var(--success-bg);
        color: var(--success-fg);
    }

    .access-badge.blocked {
        background: var(--surface-muted);
        color: var(--text-muted);
    }

    .access-badge.pending {
        background: var(--warning-bg);
        color: var(--warning-fg);
    }

    .user-table td small {
        display: block;
        margin-top: 3px;
        color: var(--text-muted);
    }

    .check-row > span {
        display: grid;
        gap: 2px;
    }

    .check-row small {
        color: var(--text-muted);
        line-height: 1.35;
    }

    .check-row.compact {
        align-items: flex-start;
        color: var(--text);
    }

    .policy-select {
        width: 100%;
        height: 42px;
        padding: 0 11px;
        border: 1px solid var(--border-strong);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text);
    }

    .icon-button.ghost {
        width: 28px;
        height: 28px;
        border: 0;
        background: none;
        color: var(--text-muted);
    }

    .icon-button.ghost:hover:not(:disabled) {
        color: var(--text);
    }

    .icon-button.ghost.deny:hover:not(:disabled) {
        color: var(--danger-fg);
    }

    .popover-backdrop {
        position: fixed;
        inset: 0;
        z-index: 40;
    }

    .pill {
        padding: 1px 6px;
        border-radius: 999px;
        background: var(--accent-bg);
        color: var(--accent);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .user-table-wrap {
        overflow-x: auto;
    }

    .user-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    .user-table th,
    .user-table td {
        padding: 12px 10px;
        border-bottom: 1px solid var(--border);
        text-align: left;
    }

    .user-table th {
        color: var(--text-muted);
        font-size: 11px;
        text-transform: uppercase;
    }
}