/* 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;
}

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

:root {
    --form-field-row-gap: 1rem;
    --field-grid-column-gap: 1rem;
    --form-field-control-min-height: calc(1.5em + 1.2rem + 2px);
}

@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-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) {
        grid-column: 1 / -1;
    }

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

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

    .field-value {
        grid-column: 2;
        min-width: 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: subtle asterisk in warm grey */
.form-group label.required::after,
[id^="form-group-"] label.required::after,
.field-label.required::after,
.form-selection-field-spacer.required::after {
    content: " *";
    color: var(--warm-grey-dark);
}

@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 */
    }
}

.edit-form input,
.edit-form select,
.edit-form textarea,
.form-group input,
.form-group select,
.form-group textarea,
.field-value input,
.field-value select,
.field-value textarea,
.external-links-input,
.upload-form-with-spinner input[type="file"] {
    border: 0.5px solid var(--chamois-medium) !important;
    border-radius: var(--border-radius-sm) !important;
    background-color: var(--chamois-lightest);
    padding: 0.6rem 1rem;
    font-size: inherit;
    color: inherit;
    text-align: left;
}

/* 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;
}

/* 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;
}

.edit-form input:focus,
.edit-form select:focus,
.edit-form textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.field-value input:focus,
.field-value select:focus,
.field-value textarea:focus,
.external-links-input:focus,
.upload-form-with-spinner input[type="file"]:focus {
    border-color: var(--strawberry) !important;
    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: calc((var(--form-field-control-min-height) - 1.5em) / 2);
    }

    .field-grid .field-row:has(.form-selection-field-content > .d-flex.flex-column > .d-flex + .d-flex) .form-selection-field-spacer {
        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 pages */
/* Two-column layout matching form fields (icon left, text right) */
.form-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 576px) {
    .form-info {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: 1rem;
    }
}

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

.form-info-content {
    flex: 1;
    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);
}