/* Form Layout and Styling */

/* Reusable Form Layout Classes */
.form-group-with-gap {
    display: inline-block;
    margin-right: calc(var(--pico-spacing) * 2);
}

.form-group-item {
    display: inline-block;
}

.form-field-with-gap {
    margin-right: var(--pico-spacing);
}

.auto-width-select {
    width: auto;
}

/* Constrain form width for better ergonomics - opt-in approach */
/* OLD complex selector (kept for reference/rollback if needed):
   form:not(.button-grid-12 form):not(.actions-tier form):not(.full-width-form) {
       max-width: 600px;
   }
*/
.constrained-form {
    max-width: 600px;
}

/* Reduce spacing between forms for compact layout */
form + form {
    margin-top: calc(var(--pico-spacing) * 0.5);
}

/* Ensure buttons in role="group" have appropriate sizing */
fieldset[role="group"] button {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Refresh button styling to match form buttons */
button.refresh-button {
    margin-left: calc(var(--pico-spacing) * 0.5);
    white-space: nowrap;
}

/* Responsive form adjustments */
@media (max-width: 768px) {
    /* Tablet breakpoint */
    /* Stack form elements on mobile */
    fieldset[role="group"] {
        flex-direction: column;
    }

    fieldset[role="group"] > * {
        width: 100%;
        margin-bottom: calc(var(--pico-spacing) * 0.5);
    }

    fieldset[role="group"] > *:last-child {
        margin-bottom: 0;
    }

    button.refresh-button {
        margin-left: 0;
        margin-top: calc(var(--pico-spacing) * 0.5);
        width: 100%;
    }
}

/* Search input with clear button */
.search-input-wrapper {
    position: relative;
    flex: 1 1 100%; /* Takes full available space, grow and shrink */
    display: flex;
    align-items: center;
    min-width: 0; /* Allow shrinking below content size */
}

/* Search form specific styling */
.forms-row form:nth-child(2) fieldset[role="group"] {
    display: flex;
    gap: calc(var(--pico-spacing) * 0.5);
}

/* Make search button narrower */
.forms-row form:nth-child(2) button[type="submit"] {
    flex: 0 0 auto; /* Don't grow, just fit content */
    min-width: auto; /* Override any default min-width */
    padding-left: calc(var(--pico-form-element-spacing-horizontal) * 0.75);
    padding-right: calc(var(--pico-form-element-spacing-horizontal) * 0.75);
    white-space: nowrap; /* Prevent button text wrapping */
    width: auto; /* Override any width settings */
}

.search-input-wrapper input {
    width: 100%;
    padding-right: calc(var(--pico-spacing) * 2.5); /* Make room for clear button */
}

.search-clear-button {
    position: absolute;
    right: calc(var(--pico-spacing) * 0.5);
    background: none;
    border: none;
    font-size: 1.25em;
    color: var(--pico-muted-color);
    cursor: pointer;
    padding: calc(var(--pico-spacing) * 0.25);
    line-height: 1;
    opacity: 0.6;
    transition: opacity var(--pico-transition);
}

.search-clear-button:hover {
    opacity: 1;
    color: var(--pico-primary);
}

/* Hide clear button when using x-show */
[x-show="false"] {
    display: none;
}

/* Ensure search input has proper padding for clear button */
input.with-clear {
    padding-right: calc(var(--pico-spacing) * 2.5);
}

/* Grid-based search form specific styling */
.actions-tier .span-4 fieldset[role="group"] {
    display: flex;
    gap: calc(var(--pico-spacing) * 0.5);
}

/* Make Search buttons narrower (they share space with input field) */
.actions-tier .span-4 .search-input-wrapper ~ button[type="submit"] {
    flex: 0 0 auto; /* Don't grow, just fit content */
    min-width: fit-content; /* Only as wide as needed */
    padding-left: calc(var(--pico-form-element-spacing-horizontal) * 0.75);
    padding-right: calc(var(--pico-form-element-spacing-horizontal) * 0.75);
    width: auto;
}

/* Error display areas - base styles */
#create-error,
#update-error,
#delete-error {
    /* Remove ALL space when empty */
    min-height: 0;
    margin-bottom: 0;
    margin-top: 0;
    display: none; /* Hide by default */
}

/* Error display areas - when containing content */
/* Only show spacing when error content exists using :not(:empty) pseudo-class
   This prevents empty error divs from affecting form alignment */
#create-error:not(:empty),
#update-error:not(:empty),
#delete-error:not(:empty) {
    display: block; /* Show when not empty */
    min-height: calc(var(--pico-spacing) * 2);
    margin-bottom: var(--pico-spacing);
}

/* Forms row for side-by-side layout */
.forms-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr; /* Create: 40%, Search: 35%, Delete: 25% */
    gap: calc(var(--pico-spacing) * 1.5);
    align-items: start; /* Align items to the top */
}

/* Inactive community info banner */
.inactive-info-banner {
    background-color: var(--pico-ins-color);
    color: var(--pico-background-color);
    padding: calc(var(--pico-form-element-spacing-vertical)) var(--pico-form-element-spacing-horizontal);
    border-radius: var(--pico-border-radius);
    margin-bottom: var(--pico-spacing);
    font-size: 0.875em;
    display: flex;
    align-items: center;
    gap: calc(var(--pico-spacing) * 0.5);
}

/* Light mode specific styling for info banner */
[data-theme="light"] .inactive-info-banner,
:root:not([data-theme="dark"]) .inactive-info-banner {
    background-color: var(--pico-mark-background-color);
    color: var(--pico-mark-color);
    border: var(--pico-border-width) solid var(--pico-mark-background-color);
}

/* Dark mode specific styling for info banner */
[data-theme="dark"] .inactive-info-banner {
    background-color: var(--pico-card-sectioning-background-color);
    color: var(--pico-primary);
    border: var(--pico-border-width) solid var(--pico-muted-border-color);
}

/* Helper text for disabled controls */
.helper-text {
    display: block;
    margin-top: calc(var(--pico-spacing) * 0.25);
    font-size: 0.875em;
    color: var(--pico-muted-color);
    line-height: 1.2;
}

/* Placeholder section for unimplemented features */
.placeholder-section {
    padding: var(--pico-spacing);
    border: var(--pico-border-width) dashed var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    text-align: center;
    font-style: italic;
    color: var(--pico-muted-color);
    margin-bottom: var(--pico-spacing);
    background-color: var(--pico-card-sectioning-background-color);
}

.placeholder-section p {
    margin: 0;
    margin-bottom: calc(var(--pico-spacing) * 0.25);
}

.placeholder-section p:last-child {
    margin-bottom: 0;
}

.placeholder-section small {
    color: var(--pico-muted-color);
    opacity: 0.8;
}

/* Align standalone buttons with input fields in other columns */
.forms-row form > a[role="button"],
.forms-row form > button:not([type="submit"]) {
    margin-bottom: 0; /* Remove default margin */
    margin-top: 0; /* Remove top margin - let grid handle alignment */
    display: block; /* Full width block element */
}

/* Bulk actions styling for third column */
.forms-row .bulk-actions,
.forms-row form.bulk-actions {
    margin-bottom: 0; /* Remove default margin */
    max-width: none; /* Override form max-width */
}

.forms-row .bulk-actions button,
.forms-row form.bulk-actions button {
    width: 100%;
}

/* Ensure buttons in grid cells expand to full width */
.button-grid-12 > div > button,
.button-grid-12 > .span-3 > button,
.button-grid-12 > .span-4 > button,
.button-grid-12 > .span-6 > button,
.button-grid-12 > form > button,
.button-grid-12 > form.span-3 > button,
.button-grid-12 > form.span-4 > button,
.button-grid-12 > form.span-6 > button {
    width: 100%;
}

/* Aligned form fields using CSS Grid for consistent label/input alignment */
.aligned-form-fields {
    display: grid;
    grid-template-columns: 180px 1fr; /* Fixed label width increased to accommodate "1st/2nd Patronal Feast", flexible input */
    gap: calc(var(--pico-form-element-spacing-vertical)) var(--pico-form-element-spacing-horizontal); /* Vertical and horizontal gaps */
    align-items: center;
}

.aligned-form-fields label {
    text-align: right;
    margin-bottom: 0;
    font-weight: normal;
    white-space: nowrap;
}

.aligned-form-fields input {
    margin-bottom: 0;
    width: 100%;
}

/* On mobile, stack labels above inputs */
@media (max-width: 576px) {
    .aligned-form-fields {
        grid-template-columns: 1fr;
        gap: calc(var(--pico-spacing) * 0.5);
    }

    .aligned-form-fields label {
        text-align: left;
        margin-bottom: calc(var(--pico-spacing) * 0.25);
    }
}

@media (max-width: 768px) {
    /* Tablet breakpoint */
    .forms-row {
        grid-template-columns: 1fr;
        gap: var(--pico-spacing);
    }

    /* On mobile, bulk actions appear full width below other forms */
    .forms-row .bulk-actions {
        order: 3; /* Place after Create and Search forms */
    }
}

/* Hide cloak elements until Alpine.js loads */
[x-cloak] {
    display: none;
}

/* Field error highlighting */
.field-error,
input.field-error,
select.field-error,
textarea.field-error {
    border-color: var(--pico-form-element-invalid-border-color);
    box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color);
}

/* Add subtle animation to draw attention */
.field-error {
    animation: field-error-pulse 0.5s ease-in-out;
}

@keyframes field-error-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--pico-form-element-invalid-focus-color);
    }
    50% {
        box-shadow: 0 0 0 calc(var(--pico-outline-width) * 2) var(--pico-form-element-invalid-focus-color);
    }
    100% {
        box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color);
    }
}

/* Accessibility: Ensure error fields are announced */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--pico-form-element-invalid-border-color);
}

/* ============================================================================
 * Community Form Grid Layouts
 * ============================================================================ */

/* Address field row: 2-column equal width grid for address input pairs */
.address-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    grid-column: 1 / -1;
}

/* Patronal feast field row: 2-column grid with 2:1 ratio (name:date) */
.feast-field-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.5rem;
}

/* Contact field row: 3-column equal width grid for phone/email/website */
.contact-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    grid-column: 1 / -1;
}

/* Contact field row with top spacing for visual separation */
.contact-field-row-spaced {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    grid-column: 1 / -1;
    margin-top: 1.5rem;
}

/* Definition list for read-only community information display */
.community-info-dl {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0.5rem;
    align-items: baseline;
}

/* ============================================================================
 * Statistics Grid and Cards
 * ============================================================================ */

/* Statistics container grid with 3 equal columns */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 1rem;
}

/* Individual statistic card with centered content */
.stat-item {
    text-align: center;
}

/* Statistic number display - large, bold, primary color */
.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: var(--pico-primary);
}

/* Statistic label text - muted color with top spacing */
.stat-label {
    color: var(--pico-muted-color);
    margin-top: 0.5rem;
}

/* ============================================================================
 * Responsive Adjustments for Community Components
 * ============================================================================ */

/* Tablet breakpoint: Stack multi-column grids */
@media (max-width: 768px) {
    .address-field-row,
    .feast-field-row,
    .contact-field-row,
    .contact-field-row-spaced {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile breakpoint: Single column for all community grids */
@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}