/* ==========================================================================
   Access-control surfaces — Roles & Permissions + Feature Entitlements
   --------------------------------------------------------------------------
   Domain layer over the Tansi UI grammar (ui.css). Components:
   AccessModelExplainer (Components/Shared/), RolesPermissions + RoleEditor
   (Components/Pages/Admin/Access/).

   Everything derives from the app.css design tokens (--card-*, --text-*,
   --radius-*) and MudBlazor palette vars; dark mode via the .mud-theme-dark
   ancestor, never media queries. Accent colors NON-TEXT signals only
   (fills, borders, icons) — running text stays neutral.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Accent derivation (same recipe as ui.css §0; the explainer also renders
      on pages without a TansiPage ancestor, so it falls back to primary).
   -------------------------------------------------------------------------- */
.access-explainer,
.perm-matrix {
    --ax-accent: var(--page-accent, var(--mud-palette-primary));
    --ax-accent-ink: var(--ax-accent);
    --ax-accent-soft: color-mix(in srgb, var(--ax-accent) 11%, transparent);
}

.mud-theme-dark .access-explainer,
.mud-theme-dark .perm-matrix {
    --ax-accent-ink: color-mix(in srgb, var(--ax-accent) 58%, #ffffff);
    --ax-accent-soft: color-mix(in srgb, var(--ax-accent) 16%, transparent);
}

/* --------------------------------------------------------------------------
   1. "How access works" explainer strip  (AccessModelExplainer.razor)
   -------------------------------------------------------------------------- */
.access-explainer {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 14px 20px 16px;
    margin-bottom: 24px;
}

.access-explainer__kicker {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-caption);
    margin-bottom: 10px;
}

.access-explainer__tiers {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.access-explainer__tier {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 240px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm, 10px);
    border-left: 3px solid transparent;
}

/* The tiers are a pipeline; draw the flow arrow between adjacent tiers. */
.access-explainer__tier + .access-explainer__tier::before {
    content: "\2192" / "";
    align-self: center;
    margin: 0 2px 0 -8px;
    color: var(--text-caption);
    font-size: 0.875rem;
}

.access-explainer__tier--current {
    border-left-color: var(--ax-accent-ink);
    background: var(--ax-accent-soft);
}

.access-explainer__tier-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--ax-accent-ink);
    background: var(--ax-accent-soft);
}

.access-explainer__tier--current .access-explainer__tier-icon {
    color: var(--mud-palette-primary-text, #fff);
    background: var(--ax-accent);
}

.mud-theme-dark .access-explainer__tier--current .access-explainer__tier-icon {
    /* Lifted accents get too pale for white glyphs — keep the raw hue as fill
       and let the glyph go dark-canvas text. */
    color: var(--mud-palette-surface);
    background: var(--ax-accent-ink);
}

.access-explainer__tier-text {
    min-width: 0;
}

.access-explainer__tier-name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.3;
}

.access-explainer__tier-copy {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-caption);
    margin-top: 1px;
}

/* --------------------------------------------------------------------------
   2. Permission ladder — the ordinal level control (RoleEditor.razor).
      Real <button>s (keyboard rule 1); every step at or below the chosen
      level fills, making "higher includes lower" visible.
   -------------------------------------------------------------------------- */
.perm-ladder {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

:where(button.perm-step) {
    appearance: none;
    font: inherit;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 9px;
    color: var(--mud-palette-text-secondary);
    min-height: 40px;
    padding: 4px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    line-height: 1.2;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.perm-step:hover {
    background: var(--ax-accent-soft);
}

.perm-step:focus-visible {
    outline: 2px solid var(--ax-accent-ink);
    outline-offset: 2px;
}

/* Steps included by the current selection — the filled track. */
.perm-step--on {
    background: var(--ax-accent-soft);
    border-color: color-mix(in srgb, var(--ax-accent) 38%, transparent);
    color: var(--mud-palette-text-primary);
}

/* The selected step itself. */
.perm-step--active {
    border: 2px solid var(--ax-accent-ink);
    padding: 3px 11px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Sensitive-data steps carry a risk tint instead of the module accent. */
.perm-step--sens.perm-step--on {
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
}

.perm-step--sens.perm-step--active {
    border-color: var(--mud-palette-warning);
}

.perm-step__icon {
    display: grid;
    place-items: center;
}

.perm-step__icon .mud-icon-root {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

/* --------------------------------------------------------------------------
   3. Permission matrix rows (RoleEditor.razor)
   -------------------------------------------------------------------------- */
.perm-matrix {
    display: flex;
    flex-direction: column;
}

.perm-module {
    padding: 14px 0;
}

.perm-module + .perm-module {
    border-top: 1px solid var(--card-border);
}

.perm-module__row {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: 10px 18px;
    align-items: start;
}

@media (max-width: 760px) {
    .perm-module__row {
        grid-template-columns: 1fr;
    }
}

.perm-module__name {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-heading);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.perm-module__desc {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-caption);
}

/* Feature-override disclosure — a real button under the module ladder. */
:where(button.perm-features-toggle) {
    appearance: none;
    font: inherit;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 6px 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ax-accent-ink);
}

.perm-features-toggle:hover {
    background: var(--ax-accent-soft);
}

.perm-features-toggle:focus-visible {
    outline: 2px solid var(--ax-accent-ink);
    outline-offset: 2px;
}

.perm-features-toggle .mud-icon-root {
    transition: transform 150ms ease;
}

.perm-features-toggle[aria-expanded="true"] .mud-icon-root {
    transform: rotate(180deg);
}

/* Feature rows hang off the module row on a hairline rail. */
.perm-features {
    margin: 6px 0 0 10px;
    padding-left: 16px;
    border-left: 2px solid var(--card-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.perm-feature__name {
    margin: 0 0 2px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-heading);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.perm-feature__desc {
    margin: 0 0 6px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-caption);
}

/* --------------------------------------------------------------------------
   4. Role detail panel (RoleDetailPanel + assign/remove dialogs)
   -------------------------------------------------------------------------- */

/* About tab: label/value facts list. */
.role-facts {
    margin: 0;
}

.role-facts > div {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    min-width: 0;
}

.role-facts > div:last-child {
    border-bottom: 0;
}

.role-facts dt {
    flex: none;
    width: 130px;
    font-size: 0.8125rem;
    color: var(--text-caption);
}

.role-facts dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.role-facts__note {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-caption);
}

/* People tab: horizontal scroll stays inside the table region, keyboard-reachable. */
.role-people-scroll {
    overflow-x: auto;
}

.role-people-scroll:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

.role-person__name {
    display: block;
    font-weight: 600;
}

.role-person__other {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-caption);
}

.role-person__never {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

/* Permissions tab: one row per opened module. */
.role-perm-list {
    display: flex;
    flex-direction: column;
}

.role-perm-row {
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.role-perm-row:last-child {
    border-bottom: 0;
}

.role-perm-row--sens {
    box-shadow: inset 3px 0 0 var(--mud-palette-warning);
    padding-left: 10px;
}

.role-perm-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.role-perm-row__name {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.role-perm-row__meaning {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-caption);
    margin-top: 2px;
}

/* Remove dialog: consequences list. */
.role-consequences {
    margin: 6px 0 0;
    padding-left: 18px;
}

.role-consequences li + li {
    margin-top: 4px;
}

/* Levels key dialog: mark the two sensitive steps beyond colour. */
.levels-key-table th[scope="row"] {
    white-space: nowrap;
}

.levels-key-sens {
    box-shadow: inset 3px 0 0 var(--mud-palette-warning);
}

/* --------------------------------------------------------------------------
   5. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .perm-step,
    .perm-features-toggle .mud-icon-root {
        transition: none;
    }
}