/* =============================================================================
   DEX Portal - Fields and Layout

   The shape of a record as a board: three columns of collapsed cards, one per
   section. Collapsed is the resting state - the point of this screen is the
   arrangement, and an arrangement is only visible when the cards are small
   enough to see all of them at once. One card opens at a time to be worked on.

   Sections drag between columns with a mouse; the up and down buttons inside
   an open card do the same job for a finger or a keyboard, because a phone has
   no drag events to offer and this screen has to work there too.
   ============================================================================= */

.field-registry {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--gutter);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    align-content: start;
}

.field-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 140px;
    padding: 4px;
    margin: -4px;
    border-radius: var(--radius-medium);
}

/* Lit while a drag is over it, so the drop has an obvious landing place. */
.field-column--target {
    outline: 2px dashed var(--accent-border);
    outline-offset: 2px;
    background: var(--accent-tint);
}

.field-column__empty {
    margin: 0;
    padding: 22px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-medium);
    color: var(--text-muted);
    font-size: var(--font-size-small);
    text-align: center;
}


/* -----------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */

.field-section {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-panel);
    min-width: 0;
    overflow: hidden;
}

.field-section--dragging {
    opacity: 0.45;
}

/* The whole header is the toggle, so the card opens wherever it is grabbed. */
.field-section__header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.field-section__header:hover {
    background: var(--surface-subtle);
}

.field-section__glyph {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-small);
    background: var(--surface-subtle);
    color: var(--text-secondary);
}

.field-section__heading {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.field-section__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.field-section__count {
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}

.field-section__chevron {
    flex: none;
    display: inline-flex;
    color: var(--text-muted);
    transition: transform var(--duration-quick) var(--easing-standard);
}

.field-section--expanded .field-section__chevron {
    transform: rotate(180deg);
}

.field-section__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-top: 1px solid var(--border-subtle);
}

/* -----------------------------------------------------------------------------
   APPEARANCE ON THE SECTION

   Style and corners sit in the section's own action row rather than behind
   Rename: they are the kind of thing somebody changes, looks at, and changes
   back, and a round trip through a panel for each attempt is three clicks of
   friction on a one-click decision. They save the moment they are picked.
   -------------------------------------------------------------------------- */
.field-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}

.field-select__label {
    white-space: nowrap;
}

.field-select__control {
    padding: 4px 8px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-small);
    background: var(--surface-panel);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-tiny);
    font-weight: 600;
}

.field-select__control:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Corners are a number of pixels, so the box is only as wide as three digits
   and carries its unit beside it. Without the unit a bare "5" beside a word
   like Card reads as a count of something. */
.field-number {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.field-number .field-select__control {
    width: 58px;
    border-radius: var(--radius-button);
}

.field-number__unit {
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
}


/* -----------------------------------------------------------------------------
   A DIVIDER IN THE ARRANGEMENT

   It holds nothing, so it is shown as what it will be on the record - a line -
   with only the handles that apply to it. Drawn shorter than a section card so
   the column reads as "something, a break, something" at a glance.
   -------------------------------------------------------------------------- */
.field-section--divider {
    border-style: dashed;
    background: none;
    box-shadow: none;
}

.field-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.field-divider__line {
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-default);
}

.field-divider__label {
    flex: none;
    font-size: var(--font-size-tiny);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.field-divider__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.field-section__empty {
    margin: 0;
    padding: 14px;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: var(--font-size-small);
}


/* -----------------------------------------------------------------------------
   FIELDS INSIDE AN OPEN CARD
   -------------------------------------------------------------------------- */

.field-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-subtle);
}

.field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    min-width: 0;
}

.field-row + .field-row {
    border-top: 1px solid var(--border-subtle);
}

.field-row:hover {
    background: var(--surface-subtle);
}

.field-row__detail {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.field-row__label {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.field-row__meta {
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}

.field-row__badges {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.field-row__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* A draggable row says so with the cursor before anybody commits to a grab. */
.field-row[draggable="true"] {
    cursor: grab;
}

.field-row--dragging {
    opacity: 0.45;
}

/* The card a dragged field would join, lit while the pointer is over it. */
.field-section--field-target {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    background: var(--accent-tint);
}

/* Delete keeps to an icon: this list is scanned, and a row of worded buttons
   would out-shout the field names the screen exists to show. */
.field-row__delete {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--duration-instant) var(--easing-standard),
                color var(--duration-instant) var(--easing-standard);
}

.field-row__delete:hover {
    background: var(--status-danger-tint);
    border-color: var(--status-danger-tint);
    color: var(--status-danger);
}


/* -----------------------------------------------------------------------------
   BADGES

   Three states worth calling out on a list somebody scans: it came with the
   product, it is switched off, or not everyone can see it. Anything else is
   detail for the panel.
   -------------------------------------------------------------------------- */

.field-badge {
    padding: 1px 7px;
    border-radius: var(--radius-small);
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
    white-space: nowrap;
}

.field-badge--muted {
    background: var(--status-neutral-tint);
    color: var(--status-neutral);
}

.field-badge--restricted {
    background: var(--status-warning-tint);
    color: var(--status-warning);
}


/* -----------------------------------------------------------------------------
   MOVE BUTTONS
   -------------------------------------------------------------------------- */

.field-move {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.field-move__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--duration-instant) var(--easing-standard);
}

.field-move__button:hover:not(:disabled) {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.field-move__button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}


/* -----------------------------------------------------------------------------
   ROLE PICKER
   -------------------------------------------------------------------------- */

.role-choice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-small);
}

.form-field__note {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-small);
}


/* -----------------------------------------------------------------------------
   NARROWER SCREENS

   The three columns become two, then one. The column a section belongs to is
   unchanged underneath - the stacks just queue up in reading order until there
   is room to stand side by side again.
   -------------------------------------------------------------------------- */

@media (max-width: 1400px) {
    .field-registry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .field-registry {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--gutter-tight);
    }

    .field-row {
        flex-wrap: wrap;
    }

    .field-row__detail {
        flex-basis: 100%;
    }
}