/* ============================================
   WebEdify Form Layout System
   webedify.forms.css
   Scope    : .weform  (all rules namespaced)
   Purpose  : Layout only.
              No colors, borders, or appearance.
              Everything inherits from the active theme.
   ============================================ */


/* --------------------------------------------
   Form Container
   Fields flow left-to-right and wrap naturally.
   -------------------------------------------- */
.weform {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;      /* baseline-align fields of different heights */
    gap: 0.75rem 1.5rem;
}


/* --------------------------------------------
   Field Wrapper  (.we-field)
   Default: label sits beside the input.
   Containers are auto-sized — they never grow
   to fill space; they hug their content.
   -------------------------------------------- */
.weform .we-field {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;             /* NEVER stretch to fill available space */
    max-width: 100%;            /* cap at parent so xlarge can't escape viewport */
    gap: 0.6rem;
}

.weform .we-field label {
    white-space: nowrap;
    flex-shrink: 0;
}

.weform .we-field input:not([type="checkbox"]):not([type="radio"]),
.weform .we-field select,
.weform .we-field textarea {
    flex: 0 0 auto;             /* field itself never stretches either */
    box-sizing: border-box;
    max-width: 100%;            /* safety: can't overflow a narrow container */
    padding: 0.625rem 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.5;
}

/* --------------------------------------------
   Textarea layout normalization
   Appearance (background, border, color) is
   controlled by site.css alongside inputs.
   -------------------------------------------- */
.weform .we-field textarea {
    outline: none;
    resize: vertical;
    vertical-align: top;        /* suppress baseline gap below textarea */
}

/* Auto-align label to the top when a textarea is present so it
   doesn't float vertically centered next to a tall field. */
.weform .we-field:has(textarea) {
    align-items: flex-start;
}

/* Nudge label down slightly so its baseline sits with the first
   line of the textarea rather than the very top edge. */
.weform .we-field:has(textarea) > label {
    padding-top: 0.5rem;
}

.weform.compact .we-field:has(textarea) > label  { padding-top: 0.25rem; }
.weform.minimal .we-field:has(textarea) > label  { padding-top: 0.35rem; }


/* --------------------------------------------
   Field Sizes  (class on .we-field container)
   Default (no size class) = medium
   -------------------------------------------- */
.weform .we-field input:not([type="checkbox"]):not([type="radio"]),
.weform .we-field select {
    width: 14rem;
}

.weform .we-field textarea {
    width: 20rem;
    height: 6rem;
}

/* tiny — size class on .we-field container OR directly on the input/select/textarea */
.weform .we-field.tiny  input:not([type="checkbox"]):not([type="radio"]),
.weform .we-field.tiny  select,
.weform .we-field       input.tiny:not([type="checkbox"]):not([type="radio"]),
.weform .we-field       select.tiny   { width: 4rem; }
.weform .we-field.tiny  textarea,
.weform .we-field       textarea.tiny { width: 10rem; height: 4rem; }

/* small */
.weform .we-field.small  input:not([type="checkbox"]):not([type="radio"]),
.weform .we-field.small  select,
.weform .we-field        input.small:not([type="checkbox"]):not([type="radio"]),
.weform .we-field        select.small   { width: 8rem; }
.weform .we-field.small  textarea,
.weform .we-field        textarea.small { width: 14rem; height: 4.5rem; }

/* medium (explicit override of default) */
.weform .we-field.medium  input:not([type="checkbox"]):not([type="radio"]),
.weform .we-field.medium  select,
.weform .we-field         input.medium:not([type="checkbox"]):not([type="radio"]),
.weform .we-field         select.medium   { width: 14rem; }
.weform .we-field.medium  textarea,
.weform .we-field         textarea.medium { width: 20rem; height: 6rem; }

/* large */
.weform .we-field.large  input:not([type="checkbox"]):not([type="radio"]),
.weform .we-field.large  select,
.weform .we-field        input.large:not([type="checkbox"]):not([type="radio"]),
.weform .we-field        select.large   { width: 22rem; }
.weform .we-field.large  textarea,
.weform .we-field        textarea.large { width: 28rem; height: 8rem; }

/* xlarge */
.weform .we-field.xlarge  input:not([type="checkbox"]):not([type="radio"]),
.weform .we-field.xlarge  select,
.weform .we-field         input.xlarge:not([type="checkbox"]):not([type="radio"]),
.weform .we-field         select.xlarge   { width: 32rem; }
.weform .we-field.xlarge  textarea,
.weform .we-field         textarea.xlarge { width: 36rem; height: 10rem; }


/* --------------------------------------------
   .we-check / .we-radio  — group wrappers for
   multicheck and radio/multicheck option sets.
   Default: horizontal, wrapping.
   Add 'stack' class for vertical layout.
   -------------------------------------------- */
.weform .we-check,
.weform .we-check-group,
.weform .we-radio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 1rem;
}

.weform .we-check.stack,
.weform .we-check-group.stack,
.weform .we-radio.stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

/* Each paired input+label within a group */
.weform .we-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.weform .we-option label {
    cursor: pointer;
    margin: 0;
}

.weform .we-check label,
.weform .we-check-group label,
.weform .we-radio label {
    cursor: pointer;
    margin: 0;
}

/* Size classes on .we-check control label min-width */
.weform .we-check.tiny   label { min-width: 4rem; }
.weform .we-check.small  label { min-width: 8rem; }
.weform .we-check.medium label { min-width: 14rem; }
.weform .we-check.large  label { min-width: 22rem; }
.weform .we-check.xlarge label { min-width: 32rem; }

/* Multi-option groups: align the field label to the top option, not centered */
.weform .we-field.we-field-top {
    align-items: flex-start;
}

/* field-aligned: push standalone checkbox to the input column */
/* we-check-group and we-radio already have a field label from Wrap() — no indent needed */
.weform.field-aligned .we-field .we-check {
    margin-left: calc(var(--we-label-width, 8rem) + 0.6rem);
}

/* field-aligned label rules must NOT clip the we-check caption */
.weform.field-aligned .we-field .we-check label {
    width: auto;
    min-width: unset;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
}

/* re-apply size classes on top */
.weform.field-aligned .we-check.tiny   label { min-width: 4rem; }
.weform.field-aligned .we-check.small  label { min-width: 8rem; }
.weform.field-aligned .we-check.medium label { min-width: 14rem; }
.weform.field-aligned .we-check.large  label { min-width: 22rem; }
.weform.field-aligned .we-check.xlarge label { min-width: 32rem; }


/* --------------------------------------------
   .newline  — forces this field to occupy a full
   row (field + remaining space), next field starts
   below it alone.
   -------------------------------------------- */
.weform .we-field.newline {
    flex-basis: 100%;
}

/* --------------------------------------------
   hr.we-field  — full-width divider rule.
   Resets display so inline-flex from .we-field
   does not apply.
   -------------------------------------------- */
.weform hr.we-field {
    display: block;
    flex-basis: 100%;
    margin: 0.25rem 0;
    opacity: 0.15;
}


/* --------------------------------------------
   .break  — zero-height row break element.
   Place a <div class="break"></div> before a
   group of fields to force them all to a new row
   while keeping them flowing side-by-side.
   Suppress with display:none to let fields flow
   freely (e.g. in wide widget overrides).
   -------------------------------------------- */
.weform .break {
    flex-basis: 100%;
    height: 0;
    overflow: hidden;
}


/* ============================================
   Form-Level Modifier Classes
   Applied to .weform itself to broadly control
   layout of all child fields.
   ============================================ */

/* --------------------------------------------
   .label-above
   Labels stack above their input.
   -------------------------------------------- */
.weform.label-above .we-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.weform.label-above .we-actions {
    margin-left: auto;
    margin-top: 0.8rem;
}


/* --------------------------------------------
   .vertical
   Every field occupies its own row.
   Equivalent to giving every field .newline.
   -------------------------------------------- */
.weform.vertical .we-field {
    flex-basis: 100%;
}


/* --------------------------------------------
   .field-aligned
   Labels share a common fixed width so that
   inputs share a left edge regardless of label
   length.  Override --we-label-width on the
   form element to adjust for longer labels.
   -------------------------------------------- */
.weform.field-aligned {
    --we-label-width: 8rem;
}

.weform.field-aligned .we-field {
    flex-direction: row;
    align-items: center;
}

.weform.field-aligned .we-field.we-field-top {
    align-items: flex-start;
}

.weform.field-aligned .we-field label {
    min-width: var(--we-label-width);
    width: var(--we-label-width);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* --------------------------------------------
   .compact
   Tighter spacing and smaller text, matching
   the density of table-compact.
   -------------------------------------------- */
.weform.compact {
    gap: 0.4rem 0.8rem;
}

.weform.compact .we-field label {
    font-size: 0.8rem;
}

.weform.compact .we-field input:not([type="checkbox"]):not([type="radio"]),
.weform.compact .we-field select,
.weform.compact .we-field textarea {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 0.25rem;
}

.weform.compact .we-field input:not([type="checkbox"]):not([type="radio"]),
.weform.compact .we-field select { width: 12rem; }
.weform.compact .we-field textarea { width: 17rem; height: 5rem; }

.weform.compact .we-field.tiny input:not([type="checkbox"]):not([type="radio"]), .weform.compact .we-field.tiny select,
.weform.compact .we-field input.tiny:not([type="checkbox"]):not([type="radio"]), .weform.compact .we-field select.tiny { width: 3.5rem; }
.weform.compact .we-field.tiny textarea, .weform.compact .we-field textarea.tiny { width: 8rem; height: 3rem; }

.weform.compact .we-field.small input:not([type="checkbox"]):not([type="radio"]), .weform.compact .we-field.small select,
.weform.compact .we-field input.small:not([type="checkbox"]):not([type="radio"]), .weform.compact .we-field select.small { width: 7rem; }
.weform.compact .we-field.small textarea, .weform.compact .we-field textarea.small { width: 12rem; height: 3.5rem; }

.weform.compact .we-field.medium input:not([type="checkbox"]):not([type="radio"]), .weform.compact .we-field.medium select,
.weform.compact .we-field input.medium:not([type="checkbox"]):not([type="radio"]), .weform.compact .we-field select.medium { width: 12rem; }
.weform.compact .we-field.medium textarea, .weform.compact .we-field textarea.medium { width: 17rem; height: 5rem; }

.weform.compact .we-field.large input:not([type="checkbox"]):not([type="radio"]), .weform.compact .we-field.large select,
.weform.compact .we-field input.large:not([type="checkbox"]):not([type="radio"]), .weform.compact .we-field select.large { width: 18rem; }
.weform.compact .we-field.large textarea, .weform.compact .we-field textarea.large { width: 24rem; height: 6.5rem; }

.weform.compact .we-field.xlarge input:not([type="checkbox"]):not([type="radio"]), .weform.compact .we-field.xlarge select,
.weform.compact .we-field input.xlarge:not([type="checkbox"]):not([type="radio"]), .weform.compact .we-field select.xlarge { width: 26rem; }
.weform.compact .we-field.xlarge textarea, .weform.compact .we-field textarea.xlarge { width: 30rem; height: 8rem; }


/* --------------------------------------------
   .minimal
   Slightly reduced spacing and text, matching
   the density of table-minimal.
   -------------------------------------------- */
.weform.minimal {
    gap: 0.5rem 1rem;
}

/* --------------------------------------------
   Elements tab navigation
   Generated by @elements when tab column used.
   -------------------------------------------- */
.weform ul[role="tablist"] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
    width: 100%;
}

.weform ul[role="tablist"] li[role="tab"] {
    margin-bottom: -2px;
}

.weform ul[role="tablist"] li[role="tab"] a {
    display: block;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bs-secondary, #6c757d);
    text-decoration: none;
    border: 2px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    transition: color 0.15s;
}

.weform ul[role="tablist"] li[role="tab"] a:hover {
    color: var(--bs-primary, #0d6efd);
}

.weform ul[role="tablist"] li[role="tab"].active a {
    color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-border-color, #dee2e6);
    border-bottom-color: var(--surface-bg, #fff);
    background: var(--surface-bg, #fff);
}


/* --------------------------------------------
   Validation Errors
   Applied by webedify.forms.js on any form,
   regardless of whether it uses .weform layout.
   -------------------------------------------- */
.error-message {
    display: block;
    color: var(--bs-danger, #dc3545);
    font-size: 0.8rem;
    margin-top: 0.15rem;
    margin-bottom: 0.25rem;
}

input.webedify-error,
select.webedify-error,
textarea.webedify-error {
    border-color: var(--bs-danger, #dc3545) !important;
    outline-color: var(--bs-danger, #dc3545);
}

/* --------------------------------------------
   .minimal
   Slightly reduced spacing and text, matching
   the density of table-minimal.
   -------------------------------------------- */
.weform.minimal .we-field label {
    font-size: 0.875rem;
}

.weform.minimal .we-field input:not([type="checkbox"]):not([type="radio"]),
.weform.minimal .we-field select,
.weform.minimal .we-field textarea {
    padding: 0.45rem 0.65rem;
    font-size: 0.875rem;
    border-radius: 0.3rem;
}

.weform.minimal .we-field input:not([type="checkbox"]):not([type="radio"]),
.weform.minimal .we-field select { width: 13rem; }
.weform.minimal .we-field textarea { width: 18rem; height: 5.5rem; }

.weform.minimal .we-field.tiny input:not([type="checkbox"]):not([type="radio"]), .weform.minimal .we-field.tiny select,
.weform.minimal .we-field input.tiny:not([type="checkbox"]):not([type="radio"]), .weform.minimal .we-field select.tiny { width: 3.5rem; }
.weform.minimal .we-field.tiny textarea, .weform.minimal .we-field textarea.tiny { width: 9rem; height: 3.5rem; }

.weform.minimal .we-field.small input:not([type="checkbox"]):not([type="radio"]), .weform.minimal .we-field.small select,
.weform.minimal .we-field input.small:not([type="checkbox"]):not([type="radio"]), .weform.minimal .we-field select.small { width: 7.5rem; }
.weform.minimal .we-field.small textarea, .weform.minimal .we-field textarea.small { width: 13rem; height: 4rem; }

.weform.minimal .we-field.medium input:not([type="checkbox"]):not([type="radio"]), .weform.minimal .we-field.medium select,
.weform.minimal .we-field input.medium:not([type="checkbox"]):not([type="radio"]), .weform.minimal .we-field select.medium { width: 13rem; }
.weform.minimal .we-field.medium textarea, .weform.minimal .we-field textarea.medium { width: 18rem; height: 5.5rem; }

.weform.minimal .we-field.large input:not([type="checkbox"]):not([type="radio"]), .weform.minimal .we-field.large select,
.weform.minimal .we-field input.large:not([type="checkbox"]):not([type="radio"]), .weform.minimal .we-field select.large { width: 20rem; }
.weform.minimal .we-field.large textarea, .weform.minimal .we-field textarea.large { width: 26rem; height: 7rem; }

.weform.minimal .we-field.xlarge input:not([type="checkbox"]):not([type="radio"]), .weform.minimal .we-field.xlarge select,
.weform.minimal .we-field input.xlarge:not([type="checkbox"]):not([type="radio"]), .weform.minimal .we-field select.xlarge { width: 29rem; }
.weform.minimal .we-field.xlarge textarea, .weform.minimal .we-field textarea.xlarge { width: 33rem; height: 9rem; }


/* ============================================
   Actions Row
   Buttons float right of the last field.
   If they don't fit, they wrap to the next row
   and remain right-aligned.
   Buttons inherit all appearance from theme.
   ============================================ */
.weform .we-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;      /* push buttons to the right edge */
    flex: 0 0 auto;         /* never stretch */
}


/* ============================================
   Responsive — narrow screens
   Stack all fields and let inputs fill the row.
   ============================================ */
@media (max-width: 480px) {
    .weform .we-field {
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .weform .we-field input,
    .weform .we-field select,
    .weform .we-field textarea {
        width: 100%;
    }
}

/* Prose blocks inside a weform span the full row */
.weform > p {
    flex: 0 0 100%;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

/* Headings always occupy a full row — nothing should sit beside an h1-h6 */
.weform > h1, .weform > h2, .weform > h3,
.weform > h4, .weform > h5, .weform > h6 {
    flex: 0 0 100%;
    margin-bottom: 0.25rem;
}

/* Headings inside a weform also span the full row */
.weform > h1, .weform > h2, .weform > h3,
.weform > h4, .weform > h5, .weform > h6 {
    flex: 0 0 100%;
}

/* Hidden fields must stay hidden even inside the weform flex context */
.weform .we-field.hidden {
    display: none !important;
}

/* .we-inline — keep a field horizontal even in label-above mode (e.g. single agree checkbox) */
.weform.label-above .we-field.we-inline {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

/* In we-inline (checkbox) rows, error is absolutely positioned below the
   full row so it doesn't push the label out of place */
.weform.label-above .we-field.we-inline .error-message {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: -0.2rem;
    white-space: normal;
}

/* In label-above mode, error messages are absolutely positioned so they
   don't affect we-field height or cause row misalignment */
.weform.label-above .we-field {
    position: relative;
}

/* Neutralise any site-level margin-bottom on inputs/selects so the
   we-field height matches its visible content and top:100% lands correctly */
.weform.label-above .we-field input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.weform.label-above .we-field select,
.weform.label-above .we-field textarea {
    margin-bottom: 0;
}

.weform.label-above .we-field .error-message {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: -0.2rem;
    white-space: nowrap;
    z-index: 1;
}