/* Properties settings page (_properties.html + _property_drawer.html).

   Runs on the global system (.global-card, .global-tabs, .global-icon-btn,
   .global-drawer-*, .settings-section) + Bootstrap utilities; only the dense
   group/row list, the inline forms and the drawer's own bits live here.
   Bottom-up: the list, its rows, the inline forms, then the drawer. The
   Naming drawer's rules sit with the Templates page it lives on (templates.css). */

/* ── Groups ─────────────────────────────────────────────────────────── */

.settings-prop-groups {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-smd);
}

.settings-prop-group__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-height: 2.75rem;
    padding: var(--spacing-xs) var(--spacing-smd) var(--spacing-xs) var(--spacing-md);
}

/* The group's name is a button (click to rename) that looks like a heading.
   A system group's button is disabled: same look, no hand cursor. */
.settings-prop-group__name {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.settings-prop-group__name:disabled {
    cursor: default;
    color: var(--color-text);
    opacity: 1;
}

.settings-prop-group__name > span:first-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.settings-prop-group__rename {
    flex: 1 1 auto;
    max-width: 20rem;
}

.settings-prop-group__count {
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

/* "System" beside a group or row name: a quiet word, never a chip. */
.settings-prop-group__note,
.settings-prop-row__note {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ── Rows ───────────────────────────────────────────────────────────── */

.settings-prop-list {
    border-top: 1px solid var(--color-border-hairline);
}

/* One dense line per property: name, type, and — on hover or focus — the
   settings that are on, right-aligned. Grid, not flex, so the summary gets
   whatever room the name and type leave and never pushes them. */
.settings-prop-row {
    display: grid;
    grid-template-columns: auto minmax(0, max-content) max-content max-content minmax(0, 1fr);
    align-items: center;
    column-gap: var(--spacing-sm);
    min-height: 2.5rem;
    padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.settings-prop-row + .settings-prop-row {
    border-top: 1px solid var(--color-border-hairline);
}

.settings-prop-row:hover,
.settings-prop-row:focus-visible {
    background: var(--color-surface-subtle);
}

.settings-prop-row:focus-visible {
    outline: none;
    box-shadow: var(--shadow-inset-ring-strong);
}

.settings-prop-row__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-text);
}

.settings-prop-row.is-hidden .settings-prop-row__label {
    color: var(--color-text-secondary);
}

.settings-prop-row__type {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* The settings summary rides at the row's right and shows on hover or
   keyboard focus; a device with no hover always shows it. Opacity, not
   display, so the row's height never jumps. */
.settings-prop-row__summary {
    justify-self: end;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.settings-prop-row:hover .settings-prop-row__summary,
.settings-prop-row:focus-visible .settings-prop-row__summary {
    opacity: 1;
}

@media (hover: none) {
    .settings-prop-row__summary {
        opacity: 1;
    }
}

/* Every grip in the list — a group's or a row's — shows on hover only.
   Opacity, never display/visibility, so the handle keeps its hit target
   (SortableJS still grabs it mid-fade, and touch devices, which never hover,
   can still start a drag on the blank cell). The grip column stays in the
   grid even when reordering is off, so names line up across groups. */
.settings-prop-group__grip,
.settings-prop-row__grip {
    width: 1rem;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.settings-prop-group__head:hover .settings-prop-group__grip,
.settings-prop-row:hover .settings-prop-row__grip {
    opacity: 1;
}

/* While a search narrows the list there is nothing to drag: the grip goes
   invisible but keeps its column, so the names do not shift as you type. */
.settings-prop-group__grip.is-off,
.settings-prop-row__grip.is-off {
    visibility: hidden;
}

.settings-prop-row.is-sortable-ghost {
    background: var(--color-action-tint);
}

/* Archived rows: no drawer behind them, so no hand cursor; the meta line and
   the two buttons take the summary's place. */
.settings-prop-row--archived {
    grid-template-columns: minmax(0, max-content) max-content max-content minmax(0, 1fr) auto;
    cursor: default;
}

.settings-prop-row--archived:hover {
    background: none;
}

.settings-prop-row__meta {
    justify-self: end;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.settings-prop-row__actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* ── Inline forms ───────────────────────────────────────────────────── */

.settings-prop-newgroup {
    margin-top: var(--spacing-md);
}

.settings-prop-newgroup__form {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    max-width: 26rem;
}

/* ── Drawer ─────────────────────────────────────────────────────────── */

/* The def drawer is a persistent dock panel: closed, it sits translateX'd
   off-screen but stays in the DOM, so without this its ~20 form fields remain
   in the page's tab order (the Bootstrap offcanvas it replaced hid them with
   visibility). Same discrete-visibility recipe as .global-drawer-panel--overlay:
   visibility rides the transition, so the slide-out still paints and the
   panel only goes hidden once it has left the screen. Scoped to this page's
   class — .drawer-panel--dock itself is a documented styles-nothing marker. */
.settings-prop-def-drawer {
    transition: transform .2s ease, visibility .2s ease;
}

.settings-prop-def-drawer:not(.is-open) {
    visibility: hidden;
}

/* Dropdown options: one box per option, a grip to drag, an x to drop. */
.settings-prop-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.settings-prop-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.settings-prop-option > .form-control {
    flex: 1 1 auto;
}

.settings-prop-option__grip {
    width: 1rem;
    color: var(--color-text-muted);
}

.settings-prop-option.is-sortable-ghost {
    opacity: 0.4;
}

.settings-prop-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* What the property looks like on a form, in a quiet box. */
.settings-prop-preview {
    padding: var(--spacing-smd) var(--spacing-md);
    border: 1px solid var(--color-border-hairline);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}