/* Navigator base styles. The HELM design tokens (helm-tokens.css) + fonts are loaded ahead of this
   file in App.razor; everything here resolves the HELM custom properties so the launcher tracks the
   platform brand + light/dark automatically. */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    background: var(--bg-app);
    color: var(--text-default);
}

a {
    color: var(--color-primary);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-danger);
}

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

.blazor-error-boundary {
    background: var(--color-danger);
    padding: 1rem 1rem 1rem 1rem;
    color: #fff;
}

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

/* Platform-operations panes (hygiene / notifications) — shared shell + grid-cell helpers. Global (not
   scoped) because both panes share them and the cells render inside kit grid templates. */
.pane {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--space-8) var(--gutter);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.pane__cell-main {
    color: var(--text-strong);
}

.pane__cell-sub {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.pane__footnote {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin: 0;
}

/* Fixed-tenant scope line (tenant.admin persona, access Phase 3) — the "Your tenant" chip + ids the
   members / invitations / settings consoles show in place of the platform tenant picker. */
.pane__tenant-scope {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.pane__footnote--error {
    color: var(--color-danger);
}

/* Members & roles console (/platform/members) — cells render inside kit grid templates, so these are
   global like the other pane helpers. */
.members__mono {
    font-family: var(--font-mono);
}

.members__tenant-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}

.members__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.members__chip {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-2);
    white-space: nowrap;
}

.members__grant-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

    .members__grant-form .helm-field {
        min-width: 220px;
    }

/* Platform-settings console (/platform/settings) — cells render inside kit grid templates, so these are
   global like the members helpers. */
.settings__mono {
    font-family: var(--font-mono);
}

.settings__scopes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.settings__editor {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

    .settings__editor .helm-input {
        min-width: 200px;
        flex: 1 1 200px;
    }

/* Invitations console (/platform/invitations) — cells render inside kit grid templates, so these are
   global like the members/settings helpers. */
.invitations__mono {
    font-family: var(--font-mono);
}

.invitations__create-form {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

    .invitations__create-form .helm-field {
        min-width: 260px;
    }

/* Directory type-ahead: candidate suggestions under the email field (a prefilter, not a gate). */
.invitations__candidates {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-1);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-sunken);
    overflow: hidden;
}

.invitations__candidate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

    .invitations__candidate:last-child {
        border-bottom: 0;
    }

    .invitations__candidate:hover {
        background: var(--bg-hover, rgba(0, 0, 0, 0.04));
    }

.invitations__roles {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.invitations__role-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.invitations__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.invitations__chip {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0 var(--space-2);
    white-space: nowrap;
}

.invitations__row-actions {
    display: flex;
    gap: var(--space-2);
}