/* Group-tree administration presentation (M-108, three-column since M-202a): column 1 the create form +
   nested tree, column 2 the selected group's members, column 3 the searchable pool. Content-only (renders
   inside the shell content frame). Every colour/space/radius is a design token (tokens.css), so light↔dark
   and host re-skins are a token-scope switch, not per-component CSS (coding-standards §4, §12). Mobile-first:
   the three columns stack on narrow screens (and stay button-operable — drag is not a phone gesture) and
   sit side by side once there is room. No inline styles. */

/* `.platform-group-admin__head` is gone — it was a margin wrapper around a title + explainer, which is now
   <x-platform::page-header>'s job (the explainer carries that spacing itself). */

.platform-group-admin__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--platform-space-lg);
    align-items: start;
}

@media (min-width: 60rem) {
    .platform-group-admin__columns {
        grid-template-columns: 1.6fr 1fr 1fr;
    }
}

/* Each column stacks its cards vertically (column 1 holds the create form above the tree). */
.platform-group-admin__col {
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-lg);
}

.platform-group-admin__hint,
.platform-group-tree__empty,
.platform-group-pool__empty {
    margin: 0;
    color: var(--platform-color-text-muted);
    font-size: var(--platform-font-size-sm);
}

/* --- The tree --- */

.platform-group-tree__root,
.platform-group-tree__children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.platform-group-tree__children {
    /* Indent each nesting level and keep a guide rail, so the DAG depth reads at a glance. A SMALL
       per-level step (one space unit, no extra margin) so 4+ levels of nesting still read as nested without
       starving the row of width — the guide rail carries the depth, not a large indent (M-202a). */
    margin-left: 0;
    padding-left: var(--platform-space-sm);
    border-left: 1px solid var(--platform-color-border);
    min-height: var(--platform-space-md); /* keep an empty group a visible drop target */
}

.platform-group-tree__node {
    margin-top: var(--platform-space-xs);
}

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

.platform-group-tree__row--selected {
    border-color: var(--platform-color-accent);
    box-shadow: inset 0 0 0 1px var(--platform-color-accent);
}

/* The virtual "All users" root reads as a SECTION HEADER, not a selectable group row: no card border/
   fill, no pointer affordance — so it never invites a click that only shows column 2's hint (M-202a). It
   stays the make-top-level drop target (that lives on the __children list below it, unaffected). */
.platform-group-tree__row--root {
    padding-left: 0;
    border-color: transparent;
    background: transparent;
    cursor: default;
}

/* Drag-drop clarity (M-164). SortableJS applies this class (via the SortableHelper facade's
   `dropIndicatorClass`) to the placeholder it inserts at the future drop location — a pool item or a
   dragged node sitting inside the hovered group's children list. Token-driven accent so it reads clearly
   in both light and dark; the fill is a translucent accent, the dashed outline the "here it lands" cue. */
.platform-group-tree__drop-ghost {
    outline: 2px dashed var(--platform-color-accent);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--platform-color-accent) 12%, transparent);
}

/* While an item hovers a group's children list (the live drop-ghost is a direct child of that list),
   outline that group's own header row so the parent-to-be is unmistakable. Just the outer border line
   plus a crisp 1px ring — a clear accent, not a loud fill. Also matches the virtual "All users" root row.
   Pure CSS via :has(), keyed on the ghost, so it clears automatically the moment the drag leaves or ends. */
.platform-group-tree__node:has(> .platform-group-tree__children > .platform-group-tree__drop-ghost)
    > .platform-group-tree__row {
    border-color: var(--platform-color-accent);
    box-shadow: 0 0 0 1px var(--platform-color-accent);
}

/* The drag grip that makes a node a re-parent source (M-113). The container is the Sortable source; the
   inner grip is the moved item — grab cursor, muted until the row is hovered so it stays unobtrusive. */
.platform-group-tree__drag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.platform-group-tree__drag-handle {
    cursor: grab;
    padding: 0 var(--platform-space-xs);
    color: var(--platform-color-text-muted);
    line-height: 1;
    user-select: none;
    opacity: 0.5;
}

.platform-group-tree__row:hover .platform-group-tree__drag-handle {
    opacity: 1;
}

.platform-group-tree__label {
    display: inline-flex;
    align-items: center;
    gap: var(--platform-space-xs);
    flex: 1 1 auto;
    min-width: 0;
    color: var(--platform-color-text);
    text-decoration: none;
    font-weight: 600;
}

.platform-group-tree__label--root {
    color: var(--platform-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: var(--platform-font-size-sm);
}

/* The name takes the flexible space and truncates with an ellipsis rather than wrapping, so a long name
   never pushes the action cluster onto a second line at depth (M-202a). min-width:0 lets it shrink inside
   the flex label; the count badge beside it stays intact. */
.platform-group-tree__name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.platform-group-tree__count {
    flex: 0 0 auto;
    padding: 0 var(--platform-space-xs);
    border-radius: var(--platform-radius-sm);
    background: var(--platform-color-surface);
    border: 1px solid var(--platform-color-border);
    font-size: var(--platform-font-size-xs);
    color: var(--platform-color-text-muted);
}

/* The transitive (incl.-subgroups) total sits in the same badge as the direct count, e.g. "1 / 3", and
   is only rendered when it exceeds the direct count. Emphasized against the muted direct number so the
   two-number reading is instant. */
.platform-group-tree__count-total {
    color: var(--platform-color-text);
    font-weight: 600;
}

/* The action cluster stays together as ONE unit to the right: it never shrinks (so its buttons keep their
   size) and, when the row runs out of room, the whole cluster wraps to a second line rather than the
   buttons scattering. `max-width` (not a flex-basis) caps it to the row so a very narrow column wraps the
   buttons WITHIN the cluster instead of overflowing — the repo's shared-flex-item lesson (M-202a). */
.platform-group-tree__actions {
    display: flex;
    flex: 0 0 auto;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--platform-space-xs);
}

.platform-group-tree__rename,
.platform-group-tree__move {
    position: relative;
}

.platform-group-tree__rename > summary,
.platform-group-tree__move > summary {
    list-style: none;
    cursor: pointer;
}

.platform-group-tree__rename > summary::-webkit-details-marker,
.platform-group-tree__move > summary::-webkit-details-marker {
    display: none;
}

/* The inline Rename/Move… forms open as a POPOVER anchored below their summary — taken out of the row's
   flow (absolute) so opening one never reflows or scatters the sibling action buttons (M-202a). Stacked
   fields, a card surface + shadow so it reads above the rows beneath it. `right:0` anchors it under the
   action cluster; on a stacked mobile column the cluster is full width, so it fits. */
.platform-group-tree__rename-form,
.platform-group-tree__move-form {
    position: absolute;
    top: calc(100% + var(--platform-space-xs));
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--platform-space-xs);
    min-width: 12rem;
    padding: var(--platform-space-sm);
    border: 1px solid var(--platform-color-border);
    border-radius: var(--platform-radius-md);
    background: var(--platform-color-surface);
    box-shadow: var(--platform-shadow-md);
}

.platform-group-tree__move-form .platform-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-xs);
}

/* The "Show in tree" reveal (M-202a): an unmistakable, clearly-visible flash so the admin can tell it
   worked even when the target row was already on screen (no scroll needed). Longer than a blink and a
   token-driven accent FILL plus ring; the controller toggles this class and clears it after the run. */
.platform-group-tree__row--flash {
    animation: platform-group-tree-flash 2s ease-out;
}

@keyframes platform-group-tree-flash {
    0%,
    50% {
        border-color: var(--platform-color-accent);
        background: color-mix(in srgb, var(--platform-color-accent) 22%, var(--platform-color-surface-muted));
        box-shadow: 0 0 0 3px var(--platform-color-accent);
    }

    100% {
        background: var(--platform-color-surface-muted);
        box-shadow: 0 0 0 0 transparent;
    }
}

/* --- Columns 2 & 3: members and the pool --- */

.platform-group-pool__search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--platform-space-sm);
    margin-bottom: var(--platform-space-md);
}

.platform-group-pool__search .platform-form__field {
    flex: 1 1 12rem;
}

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

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

.platform-group-pool__item {
    display: flex;
    align-items: center;
    gap: var(--platform-space-sm);
    padding: var(--platform-space-xs) var(--platform-space-sm);
    border: 1px solid var(--platform-color-border);
    border-radius: var(--platform-radius-md);
    background: var(--platform-color-surface-muted);
    cursor: grab;
}

/* Column 3's Groups rows are find-and-reveal ("Show in tree"), not drag sources — so no grab cursor. */
.platform-group-pool__item--static {
    cursor: default;
}

.platform-group-pool__item-label {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

/* Column 2's members list keeps a minimum height so an empty selected group is still a visible
   `group-users` drop target for a user dragged in from the pool. */
.platform-group-members__list {
    min-height: var(--platform-space-lg);
}

/* A direct-member row (the semantic hook column 2 marks each member with). Shares the pool row's layout;
   this rule keeps the marker a real element class rather than a bare selector. */
.platform-group-members__item {
    width: 100%;
}

/* A compact button size used only for the dense row actions in this manager. */
.platform-btn--sm {
    padding: var(--platform-space-xs) var(--platform-space-sm);
    font-size: var(--platform-font-size-xs);
}