/* Per-resource access panel presentation (M-063c, coding-standards §3/§4/§12). Backs the one
   <x-platform::access-panel> component both the contract and the směrnice detail pages host, so there is
   no per-module access-panel styling to drift. All values are design tokens (tokens.css), so light↔dark
   is a token-scope switch, not per-component CSS. Mobile-first: rows and the add form stack on narrow
   screens and lay out horizontally once there is room. No inline styles. */

.platform-access-panel__intro {
    margin: 0 0 var(--platform-space-md);
    color: var(--platform-color-text-muted);
    font-size: var(--platform-font-size-sm);
}

.platform-access-panel__list {
    list-style: none;
    margin: 0 0 var(--platform-space-lg);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-xs);
}

.platform-access-panel__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--platform-space-sm);
    padding: var(--platform-space-sm) var(--platform-space-md);
    border: 1px solid var(--platform-color-border);
    border-radius: var(--platform-radius-md);
    background: var(--platform-color-surface-muted);
}

.platform-access-panel__subject {
    /* Take the free space so the level badge and remove control sit at the row's end. */
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--platform-color-text);
    word-break: break-word;
}

.platform-access-panel__level {
    flex: 0 0 auto;
    padding: var(--platform-space-xs) var(--platform-space-sm);
    border-radius: var(--platform-radius-sm);
    font-size: var(--platform-font-size-xs);
    font-weight: 600;
    white-space: nowrap;
}

.platform-access-panel__level--see {
    background: var(--platform-color-surface);
    border: 1px solid var(--platform-color-border);
    color: var(--platform-color-text-muted);
}

.platform-access-panel__level--edit {
    background: var(--platform-color-accent-surface);
    color: var(--platform-color-accent-strong);
}

.platform-access-panel__revoke {
    flex: 0 0 auto;
    margin: 0;
}

.platform-access-panel__empty {
    margin: 0 0 var(--platform-space-lg);
    color: var(--platform-color-text-muted);
    font-size: var(--platform-font-size-sm);
}

/* The add form: stacks on mobile, then flows into a row that keeps the pickers roomy and the button
   snug once there is width. The subject picker grows the most (it holds the longest labels). */
.platform-access-panel__add {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--platform-space-md);
    padding-top: var(--platform-space-md);
    border-top: 1px solid var(--platform-color-border);
}

.platform-access-panel__field {
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-xs);
}

.platform-access-panel__field:first-of-type {
    /* The user/group picker gets the lion's share of the row. */
    flex: 1 1 16rem;
    min-width: 0;
}

.platform-access-panel__submit {
    flex: 0 0 auto;
}