/* ==========================================================================
   SkySuite form fields — one wrapper, one alignment rule.   SSC.000250
   --------------------------------------------------------------------------
   Eric B. reported that rows look uneven wherever some controls carry a
   visible label and their neighbours rely on placeholder text: the labelled
   control starts one label-height lower than the bare one, and every form
   grew its own margin nudge to paper over it.

   The rule here is the one he asked for: a field is a WRAPPER — label area,
   control, optional helper/error — and a row aligns by the TOP OF THE
   WRAPPERS, never by pushing individual controls around.

   Colours, radii, control padding and typography all come from the existing
   --sky-* token set in the module stylesheet; nothing here re-invents them.
   The only new tokens are the vertical rhythm values the old markup never
   had a name for.
   ========================================================================== */

:root {
    /* Reserved height of the label row. Tuned to .sky-label (0.8rem / 600)
       so a labelled and an unlabelled field agree to the pixel. */
    --sky-field-label-h: 20px;
    /* Label -> control. */
    --sky-field-label-gap: 8px;
    /* Field -> field inside a row, and row -> row. */
    --sky-field-gap: 20px;
    /* Helper / error line. Only reserved when a row asks for it. */
    --sky-field-help-h: 16px;
}

/* --- the wrapper ------------------------------------------------------- */
/* Works standalone or dropped onto a Bootstrap .col-*, so an existing form
   can adopt the structure without being rebuilt around a new grid. */
.sky-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;               /* so a long value cannot blow out a grid cell */
}

.sky-field__label {
    display: block;
    min-height: var(--sky-field-label-h);
    margin: 0 0 var(--sky-field-label-gap);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: var(--sky-field-label-h);
    color: var(--sky-text-muted);
}

/* A field with no visible label still owns the same label box, so its
   control starts on the same line as its labelled neighbours. Kept in the
   accessibility tree only when it actually says something. */
.sky-field__label:empty,
.sky-field__label[aria-hidden="true"] {
    color: transparent;
}

/* The control slot is optional -- a single control can be a direct child of
   the wrapper. Use it when a field holds more than one element. */
.sky-field__control {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Every control in a wrapper is full-bleed; width belongs to the grid cell,
   not to the input. */
.sky-field > .form-control,
.sky-field > .form-select,
.sky-field > .sky-input,
.sky-field > .sky-select,
.sky-field > .sky-textarea,
.sky-field > .input-group,
.sky-field__control > .form-control,
.sky-field__control > .form-select,
.sky-field__control > .sky-input,
.sky-field__control > .sky-select,
.sky-field__control > .sky-textarea,
.sky-field__control > .input-group {
    width: 100%;
}

/* The wrapper owns the vertical rhythm, so a control inside one must not
   carry its own bottom margin. */
.sky-field > .form-control,
.sky-field > .form-select,
.sky-field > .sky-textarea {
    margin-bottom: 0;
}

.sky-field__help {
    margin-top: 6px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--sky-text-muted);
}

.sky-field__help--error {
    color: var(--ss-danger, #ef4444);
}

/* --- the row ------------------------------------------------------------ */
/* Aligns by the top of the wrappers. There is deliberately no vertical
   centring and no per-control margin here: that is the whole ticket.
   Two entry points:
     .sky-field-row  -- a standalone grid row
     .sky-fields     -- alignment only, for an existing Bootstrap .row that
                        already owns its responsive column widths. */
.sky-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--sky-field-gap);
}

.sky-field-row,
.sky-fields {
    align-items: flex-start;
}

.sky-field-row > * {
    min-width: 0;
}

/* Mixed rows fix themselves. When at least one field on the row shows a
   label, every field on that row with no label area is pushed down by
   exactly one label box -- so a new form gets the alignment without anyone
   remembering a modifier class. */
.sky-field-row:has(.sky-field__label) .sky-field:not(:has(> .sky-field__label)),
.sky-fields:has(.sky-field__label) .sky-field:not(:has(> .sky-field__label)),
.sky-field-row:has(> .sky-field > .sky-field__label) > .sky-field-affix {
    padding-top: calc(var(--sky-field-label-h) + var(--sky-field-label-gap));
}

/* Explicit escape hatch for anything built before :has() or outside a
   .sky-field-row (e.g. a control dropped straight into a Bootstrap .row). */
.sky-field--reserve-label {
    padding-top: calc(var(--sky-field-label-h) + var(--sky-field-label-gap));
}

/* A non-field that sits in a field row -- a star toggle, a remove button --
   lines up with the CONTROL, not with the label and not with a guess. It
   stretches to the row and centres inside it, so it stays on the control at
   any control height: the module renders these inputs 40px wide-screen and
   45px under mobile.css, and the old "padding-top: 0.35rem" could only ever
   have been right for one of them. */
.sky-field-affix {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 0.25rem;
    white-space: nowrap;
}

/* Rows whose field is taller than one control -- the structured address
   block -- keep their affixes on the first line rather than floating to the
   middle of the block. */
.sky-field-row--multiline > .sky-field-affix {
    align-items: flex-start;
}

/* --- explicit widths inside a row --------------------------------------- */
.sky-field-row--auto {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

.sky-field--narrow { max-width: 140px; }

@media (max-width: 576px) {
    :root { --sky-field-gap: 12px; }
}