/* Forms - extracted from layout.css. Loaded after layout.css, before buttons.css/components.css.
   All selectors here are form-namespaced (.form-*, [id^=form-group-], .input-width-*, .custom-radio*,
   .edit-form*, .upload-form-*, .external-links*, input[type=checkbox]); cross-cutting focus and
   .bi-check icon-colour rules intentionally remain in layout.css. */

.custom-radio {
    display: none; /* Hide the default radio button */
}

.custom-radio-label {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--chamois-light);
    margin-right: 5px;
    cursor: pointer;
}

.custom-radio:checked + .custom-radio-label {
    background-color: var(--brown-medium);
    color: white;
    border-color: var(--brown-medium);
}

/* External links header: input takes half remaining space between h2 and button */
.external-links-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.external-links-form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}

.external-links-control-row,
.external-links-form .feedback-surface {
    width: min(100%, 800px);
}

.external-links-control-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.external-links-input {
    flex: 1 1 auto;
    max-width: none;
    min-width: 150px;
    width: auto;
}

/* ##########################################################################
   Semantic Input Field Widths
   Inputs sized to match expected data length for better UX and visual clarity
   ########################################################################## */

/* Name fields: Match readable text width (same as paragraph max-width)
   Ensures names don't wrap and align with text content */
.input-width-name {
    max-width: 85ch !important;
}

/* Email fields: Fixed width for typical email lengths */
.input-width-email {
    max-width: 400px !important;
}

/* Short fields: For dates, numbers, short codes
   Sized appropriately for compact data */
.input-width-short {
    max-width: 200px !important;
}

/* Notes/textarea: Full width for long-form content */
.input-width-full {
    max-width: 100% !important;
}

/* Default form-control width follows the standard readable field width. Narrower
   semantic classes override this; long-form controls can opt into full width. */
.form-control,
.form-select {
    max-width: 85ch;
}

/* Form group layout: labels on top for mobile, to the left for larger screens */

:root {
    --form-field-row-gap: 1.5rem;
    --field-grid-column-gap: 1rem;
    --form-field-control-border-width: 0.5px;
    --form-field-control-padding-y: 0.6rem;
    --form-field-control-padding-x: 1rem;
    --form-field-control-min-height: calc(1.5em + 2 * var(--form-field-control-padding-y) + 2 * var(--form-field-control-border-width));
    --field-grid-control-text-offset: calc(var(--form-field-control-border-width) + var(--form-field-control-padding-y));
    --field-grid-button-text-offset: calc(var(--field-grid-control-text-offset) + 0.10rem);
    --field-grid-body-text-offset: 0px;
}

@media (min-width: 992px) {
    :root {
        --field-grid-column-gap: 2rem;
    }
}

/* ##########################################################################
   Auth forms - compact label-less forms with explicit accessible names
   ########################################################################## */
.auth-form {
    max-width: 400px;
}

.auth-field + .auth-field {
    margin-top: 0.5rem;
}

.auth-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    width: 100%;
}

.auth-actions-secondary,
.auth-actions-primary {
    min-width: 0;
}

.auth-actions-primary {
    display: flex;
    justify-content: flex-end;
}

.form-action-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: var(--h1-margin-top);
    margin-bottom: var(--h1-margin-bottom);
    width: 100%;
}

@media (max-width: 575.98px) {
    .auth-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .auth-actions-primary .btn {
        width: 100%;
    }
}

/* ##########################################################################
   FORMS - inputs, labels, checkboxes, placeholders
   ########################################################################## */
.form-group,
[id^="form-group-"]:not(.field-row) {
    display: flex !important;
    flex-direction: column;
}

.form-group label,
[id^="form-group-"]:not(.field-row) label {
    margin-bottom: 0.5rem;
}

.field-grid {
    display: flex;
    flex-direction: column;
    gap: var(--form-field-row-gap);
}

.field-grid > .field-grid-fragment {
    display: contents;
}

.field-row {
    display: flex;
    flex-direction: column;
}

.field-label {
    margin-bottom: 0.5rem;
}

.field-value {
    min-width: 0;
}

@media (min-width: 576px) {
    .form-group,
    [id^="form-group-"]:not(.field-row) {
        flex-direction: row !important;
        align-items: center;
    }

    .form-group label,
    [id^="form-group-"]:not(.field-row) label {
        flex: 0 0 auto;
        width: 200px;
        margin-bottom: 0;
        margin-right: 1rem;
        text-align: left;
    }

    .field-grid {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: var(--field-grid-column-gap);
        row-gap: var(--form-field-row-gap);
        align-items: center;
    }

    .field-grid > :not(.field-row),
    .field-grid > .field-grid-fragment > :not(.field-row) {
        grid-column: 1 / -1;
    }

    .field-grid > .field-row,
    .field-grid > .field-grid-fragment > .field-row {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        column-gap: var(--field-grid-column-gap);
        align-items: start;
        margin-bottom: 0 !important;
    }

    .field-label {
        grid-column: 1;
        margin-bottom: 0;
        text-align: left;
        white-space: nowrap;
    }

    .field-row:not(.form-selection-field-with-info):has(
        > .field-value input,
        > .field-value select,
        > .field-value textarea,
        > .field-value .search-input-with-indicator,
        > .field-value.form-control-plaintext,
        > .field-inline-action-value
    ) > .field-label {
        padding-top: var(--field-grid-control-text-offset);
    }

    .field-row.form-selection-field-with-info:has(> .form-selection-field-content > .form-selection-info-text:first-child) > .field-label,
    .field-row:has(> .field-value > [role="group"] > .form-selection-info-text:first-child) > .field-label,
    .field-row:has(> .field-value > [role="group"] > [hidden]:first-child + .form-selection-info-text) > .field-label {
        padding-top: var(--field-grid-body-text-offset);
    }

    .field-row.form-selection-field-with-info:has(> .form-selection-field-content > .d-flex:first-child) > .field-label {
        padding-top: var(--field-grid-button-text-offset);
    }

    .field-value {
        grid-column: 2;
        min-width: 0;
    }
}

.field-inline-action-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.field-inline-action-value > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.field-inline-action-value > .btn {
    flex-shrink: 0;
}

/* Checkbox value column aligns with input text padding */
@media (min-width: 576px) {
    .form-checkbox-value {
        display: flex;
        align-items: center;
        padding-left: 0;
    }
}

/* Match checkbox alignment with input text padding */
.form-checkbox-value .form-check {
    padding-left: 1rem;
    margin-left: 0;
}

/* Required field indicator: rendered as markup by field helpers. */
.required-field-marker {
    color: inherit;
}

@media (min-width: 992px) {
    .form-group input,
    .form-group select,
    .form-group textarea,
    [id^="form-group-"] input,
    [id^="form-group-"] select,
    [id^="form-group-"] textarea {
        flex: 1 1 auto;
        max-width: 100%; /* Allow semantic classes to override */
    }
}

.form-control,
.form-select,
.external-links-input,
.upload-form-with-spinner input[type="file"] {
    border: var(--form-field-control-border-width) solid var(--chamois-medium) !important;
    border-radius: var(--border-radius-sm) !important;
    background-color: var(--chamois-lightest);
    padding: var(--form-field-control-padding-y) var(--form-field-control-padding-x);
    font-size: inherit;
    color: inherit;
    text-align: left;
}

.field-value.form-control-plaintext {
    padding: var(--form-field-control-padding-y) 0;
}

/* Text-only validation feedback uses the same adjacent rhythm as search empty
   states: normal body size, no surface, and enough air below the control. */
.invalid-feedback {
    font-size: inherit !important;
    line-height: inherit;
    margin-top: 1em !important;
}

/* Checkboxes should keep their custom square styling in forms */
.edit-form input[type="checkbox"],
.form-group input[type="checkbox"] {
    width: 1.1em;
    height: 1.1em;
    padding: 0 !important;
    margin: 0;
    background-color: var(--white);
    border: 0.12em solid var(--chamois-deep) !important;
    border-radius: 0.15em;
    display: inline-block;
    float: none;
    flex: 0 0 auto;
}

.form-check-input {
    margin-left: 0;
    margin-top: 0;
}

/* Inline scalar edit inputs replace read-only text in entry fields. Keep the
   input quiet: same text size/colour, chamois surface, and no Bootstrap-blue
   focus chrome. */
.inline-scalar-edit-form {
    display: inline-flex;
    flex-direction: column;
    margin: 0;
}

.inline-scalar-edit-input.form-control {
    background-color: var(--chamois-lightest);
    border: 0.5px solid var(--chamois-medium) !important;
    border-radius: var(--border-radius-sm) !important;
    box-shadow: none !important;
    color: inherit;
    display: inline-block;
    font-size: inherit;
    line-height: 1.2;
    max-width: 8rem;
    padding: 0.08rem 0.35rem;
    width: 8rem;
}

.inline-scalar-edit-input.form-control:focus,
.inline-scalar-edit-input.form-control:focus-visible {
    background-color: var(--chamois-lightest) !important;
    border-color: var(--chamois-deep) !important;
    box-shadow: 0 0 0 0.12rem rgba(213, 199, 171, 0.35) !important;
    color: inherit;
}

/* File inputs need reduced padding to match button height */
.upload-form-with-spinner input[type="file"] {
    padding: 0.375rem 0.75rem !important;
    line-height: 1.5;
}

/* Style the native file input button with chamois color matching original grey luminance */
.upload-form-with-spinner input[type="file"]::file-selector-button {
    background-color: var(--chamois-light) !important;
    border: 0.5px solid var(--chamois-medium) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 0.375rem 0.75rem;
    margin-right: 0.75rem;
    cursor: pointer;
    font-size: inherit;
    color: var(--black);
}

.upload-form-with-spinner input[type="file"]::file-selector-button:hover {
    background-color: var(--chamois-medium) !important;
}

.upload-form-with-spinner.htmx-request .upload-button-text {
    visibility: hidden;
}

.upload-submit-indicator {
    left: calc(50% - 0.5rem);
    top: calc(50% - 0.5rem);
    margin-top: 0 !important;
}

.upload-feedback {
    margin-top: 0.5rem;
}

.form-control:focus,
.form-select:focus,
.external-links-input:focus,
.upload-form-with-spinner input[type="file"]:focus {
    background-color: var(--chamois-lightest) !important;
    border-color: var(--strawberry) !important;
    color: inherit;
    outline: none !important;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4) !important;
}


.edit-form input::placeholder,
.edit-form textarea::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder,
.field-value input::placeholder,
.field-value textarea::placeholder,
.external-links-input::placeholder {
    color: var(--warm-grey-dark) !important;
    opacity: 1;
}

/* Select button container: add vertical margin to match form control row height exactly (47px) */
/* Form controls: padding 0.6rem top/bottom + line-height ≈ 47px total height */
/* Buttons: padding 0.125rem top/bottom + line-height ≈ ~1.75rem */
/* Adjust margin to match exactly: ~0.5rem top/bottom to reach 47px total */
.form-group .d-flex:has(.btn-select) {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Form selection field with info text: 2-row layout */
/* Single row: label (left) + info text and buttons (right, stacked) */
.form-selection-field-with-info-row {
    display: flex;
    flex-direction: column;
}

@media (min-width: 576px) {
    .field-grid > .form-selection-field-with-info {
        margin-bottom: 0;
    }

    .field-grid .form-selection-field-spacer {
        align-self: start;
        padding-top: 0;
    }

    .field-grid .form-selection-field-content {
        min-height: var(--form-field-control-min-height);
        justify-content: center;
    }

    .field-grid .form-selection-field-content > .d-flex.flex-column > .d-flex.flex-lg-row.flex-column {
        flex-direction: row !important;
        flex-wrap: wrap;
    }
}

.form-selection-field-spacer {
    white-space: nowrap;
}

.form-selection-field-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem; /* Comfortable spacing between info text and buttons */
}

.form-selection-info-text {
    color: var(--black);
    max-width: 85ch; /* Match paragraph/text readable width */
}

/* Large spacing between field groups to clearly separate them */
.form-selection-field-with-info {
    margin-bottom: 2.5rem;
}

/* Form info: contextual information for Edit/New FieldGrid pages.
   Preferred markup is a normal FieldGrid row. The sibling form-info + field-grid
   shape is kept aligned by lifting both into one parent grid so the "***" info
   label participates in the same max-content label track as the real fields. */
.form-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 576px) {
    .new-form:has(> .form-info + .field-grid) {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: var(--field-grid-column-gap);
        row-gap: var(--form-field-row-gap);
    }

    .new-form:has(> .form-info + .field-grid) > .form-info,
    .new-form:has(> .form-info + .field-grid) > .field-grid {
        display: contents;
    }

    .new-form:has(> .form-info + .field-grid) > :not(.form-info):not(.field-grid) {
        grid-column: 1 / -1;
    }
}

.form-info-icon {
    color: var(--black);
    font-family: 'RealScore Script', serif;
    font-size: 1.1rem;
    white-space: nowrap;
}

.form-info-content {
    line-height: 1.6;
    max-width: 85ch; /* Match paragraph/text readable width */
}

.form-selection-field-label-row {
    align-items: center;
}

/* Custom styling for native checkbox inputs */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 1.1em;
    height: 1.1em;
    border: 0.12em solid var(--chamois-deep);
    border-radius: 0.15em;
    display: inline-block;
    position: relative;
    background-color: var(--white);
    vertical-align: middle;
}

/* Ensure Bootstrap .form-check-input doesn't stretch checkboxes */
.form-check-input {
    width: 1.1em;
    height: 1.1em;
    padding: 0;
    margin: 0;
    float: none;
    display: inline-block;
    flex: 0 0 auto;
    background-image: none !important;
    background-size: auto !important;
    aspect-ratio: 1 / 1;
}

input[type="checkbox"]:checked,
.form-check-input:checked {
    background-color: var(--white);
    border-color: var(--chamois-deep);
}

/* Focus ring: chamois instead of Bootstrap primary (blue) */
input[type="checkbox"]:focus,
.form-check-input:focus {
    border-color: var(--chamois-deep);
    box-shadow: 0 0 0 0.2rem rgba(156, 131, 92, 0.25); /* chamois-deep #9C835C */
}

/* Draw a checkmark when checked */
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 0.30em;
    top: 0.12em;
    width: 0.26em;
    height: 0.56em;
    border-right: 0.16em solid var(--chamois-deep);
    border-bottom: 0.16em solid var(--chamois-deep);
    transform: rotate(45deg);
}