@import url("/static/colors/colors.css");

/* Shared button feedback used by every page. */
button:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
input[type="reset"]:hover:not(:disabled) {
    opacity: 0.8;
}

/*
 * Shared responsive overrides.
 *
 * The original page styles target a wide, full-screen workstation and use
 * fixed pixel offsets for the shared navigation and several work areas. This
 * file is loaded last so those layouts become fluid when the browser is used
 * in a smaller window without changing their full-screen appearance.
 */

/* Login and center-selection pages also benefit from a genuinely centered card. */
.login-container {
    box-sizing: border-box;
}

.login-container {
    width: min(475px, calc(100% - 40px));
    margin: auto;
    padding: 36px;
    border-radius: 20px;
    background: var(--color-surface);
    box-shadow: 0 2px 10px var(--color-shadow-default);
}

.login-container #logo {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.login-container form,
.login-container select,
.login-container button {
    width: 100%;
}

.login-container button {
    margin: 12px 0;
    padding: 12px;
    border: 0;
    border-radius: 5px;
    background: var(--color-brand-primary);
    color: var(--color-text-on-accent);
    cursor: pointer;
}

/* Smooth visual changes while the window is being resized. */
#logo,
#currentPageTitle,
#currentPageTitle .title-text,
#currentPageTitle .center-label-inline,
#logoutButton,
#centerButton,
#recordsButton,
#managerButton,
#searchChildForm,
#childSearch,
#searchButton,
#familyCon,
#editFamilyCon {
    transition: width 320ms ease,
                max-width 320ms ease,
                margin 320ms ease,
                left 320ms ease,
                right 320ms ease,
                opacity 320ms ease,
                font-size 320ms ease;
}

@media (max-width: 1500px) {
    /* Keep the original navigation positions, but constrain the page title and
       center name to the space between Manager and Logout. */
    body:not(:has(#reservationsTab)) > #currentPageTitle {
        left: 800px;
        right: 100px;
        width: auto;
        min-width: 0;
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        overflow: hidden;
        white-space: nowrap;
        z-index: 2;
    }

    body:not(:has(#reservationsTab)) > #currentPageTitle .title-text,
    body:not(:has(#reservationsTab)) > #currentPageTitle .center-label-inline {
        min-width: 0;
        margin-left: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.15;
    }

    body:not(:has(#reservationsTab)) > #currentPageTitle .title-text {
        flex: 0 1 auto;
    }

    body:not(:has(#reservationsTab)) > #currentPageTitle .center-label-inline {
        flex: 1 1 auto;
        max-width: 280px;
    }

    body:not(:has(#reservationsTab)) > #logoutButton {
        z-index: 3;
    }

    #login-container {
        left: 50%;
        width: min(375px, calc(100% - 140px));
        transform: translateX(-50%);
    }

    /* Center the fixed-width family search/edit panels in the usable area. */
    #purchaseFamilyCon,
    #editFamilyCon,
    #editContainer,
    #edit-reservation-container,
    #edit-reservation-container.reservations-expanded {
        box-sizing: border-box;
        left: 80px;
        right: 30px;
        width: auto;
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }

    #purchaseFamilyCon {
        max-width: 800px;
    }

    #checked-in-con {
        box-sizing: border-box;
        left: 80px;
        right: 30px;
        width: auto;
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    #checked-in-children-table {
        width: 100%;
    }

    /* Keep already-centered pages in place; only cap their width so content
       cannot disappear beyond the right edge. */
    .page-wrap,
    .edit-wrap,
    .reports-wrap,
    .preschool-page-wrap,
    #mainContent,
    body:has(#familyHistoryCon) > .container,
    body:has(.page-wrapper) .page-wrapper > .container {
        width: auto;
        max-width: calc(100% - 100px);
    }

    main#content {
        margin-left: 70px;
        margin-right: 20px;
        max-width: none;
    }

    /* Check-in/out uses two 600px panels. Keep both fluid and aligned. */
    body:has(.checkout-container) > .container {
        box-sizing: border-box;
        left: 80px;
        width: calc(50% - 105px);
        max-width: none;
        margin-left: 0;
    }

    .checkout-container {
        box-sizing: border-box;
        left: auto;
        right: 30px;
        width: calc(50% - 55px);
        max-width: none;
        margin-left: 0;
    }

    #checkout-children-table,
    .checkout-container table {
        width: 100%;
    }

    /* Reservation search/result page: fluid two-column desktop layout. */
    body:has(#recurringForm) #childResultsTable,
    body:has(#recurringForm) .select-child-title-row {
        left: 80px;
        width: calc(38% - 55px);
    }

    body:has(#recurringForm) #reservationManagementColumn {
        box-sizing: border-box;
        left: 42%;
        right: 30px;
        width: auto;
    }

    body:has(#recurringForm) #reservationForm,
    body:has(#recurringForm) #recurringForm,
    body:has(#recurringForm) .standing-summary,
    body:has(#recurringForm) #futureReservationsSection {
        box-sizing: border-box;
        left: 42%;
        right: 30px;
        width: auto;
    }

    body:has(#recurringForm) h4,
    body:has(#recurringForm) #standingReservationsHeading,
    body:has(#recurringForm) #recurringForm + hr + h3,
    body:has(#recurringForm) hr + h3 {
        left: 42%;
    }

    /* Time clock panels stay paired until the window is genuinely narrow. */
    body:has(#clock-form) #clock-form {
        left: 80px;
        width: calc(50% - 105px);
        max-width: 440px;
    }

    body:has(#clock-form) > .container {
        left: auto;
        right: 30px;
        width: calc(50% - 55px);
        max-width: 520px;
    }

    /* Allow toolbars and controls to wrap as one unit. */
    .report-toolbar,
    .results-toolbar,
    .history-toolbar,
    .history-filter-row,
    .history-export-row,
    .detail-header,
    .detail-actions,
    .hours-toolbar,
    .filters,
    .preschool-form-actions {
        flex-wrap: wrap;
    }

    .table-wrap,
    .ed-roster-table-scroll,
    .breakdown-scroll {
        max-width: 100%;
        overflow-x: auto;
    }
}

@media (max-width: 1050px) {
    body:not(:has(#reservationsTab)) > #currentPageTitle {
        gap: 6px;
        padding: 0 8px;
        flex-direction: row;
        font-size: 0.85rem;
        line-height: 1.15;
    }

    body:not(:has(#reservationsTab)) > #currentPageTitle .title-text,
    body:not(:has(#reservationsTab)) > #currentPageTitle .center-label-inline {
        max-width: 100%;
        flex: 1 1 50%;
    }

    /* Stack the paired work areas so neither panel becomes cramped. */
    body:has(.checkout-container) > .container,
    .checkout-container,
    body:has(#clock-form) #clock-form,
    body:has(#clock-form) > .container {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        max-width: none;
        margin-left: 80px;
        margin-right: 30px;
    }

    body:has(.checkout-container) > .container,
    body:has(#clock-form) #clock-form {
        margin-top: 180px;
    }

    .checkout-container,
    body:has(#clock-form) > .container {
        margin-top: 24px;
        margin-bottom: 30px;
    }

    .pickup-row {
        flex-wrap: wrap;
    }

    .pickup-row label,
    .pickup-row select,
    .pickup-row input[type="time"],
    #coupon-select {
        min-width: 0;
        width: 100%;
    }

    .preschool-grid,
    .split-grid,
    .employee-hours-detail .split-grid,
    .tuition-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    #purchaseFamilyCon,
    #editFamilyCon,
    #editContainer,
    #edit-reservation-container,
    #edit-reservation-container.reservations-expanded,
    #checked-in-con,
    .page-wrap,
    .edit-wrap,
    .reports-wrap,
    .preschool-page-wrap,
    #mainContent,
    main#content,
    body:has(#familyHistoryCon) > .container,
    body:has(.page-wrapper) .page-wrapper > .container,
    body:has(.checkout-container) > .container,
    .checkout-container,
    body:has(#clock-form) #clock-form,
    body:has(#clock-form) > .container {
        left: auto;
        right: auto;
        width: auto;
        max-width: none;
        margin-left: 70px;
        margin-right: 16px;
    }

    #purchaseFamilyCon,
    #editFamilyCon,
    #editContainer,
    #edit-reservation-container,
    #edit-reservation-container.reservations-expanded {
        padding: 16px;
    }

    .form-grid,
    .field-grid,
    .ed-program-card .field-grid,
    .preschool-form,
    .add-clock-grid {
        grid-template-columns: 1fr;
    }

    .entry-block {
        grid-template-columns: minmax(100px, 0.4fr) minmax(0, 1fr);
    }

    .result-row,
    .history-header,
    .family-history-title-row,
    .purchase-title-row,
    .checkin-title-row {
        gap: 10px;
    }

    .purchase-title-row,
    .family-history-title-row,
    .checkin-title-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .purchase-title-row h1,
    .family-history-title-row h1,
    .checkin-title-row h1 {
        grid-column: 1;
        text-align: left;
    }

    .purchase-title-row .all-centers-label,
    .family-history-title-row .all-centers-label,
    .checkin-title-row .all-centers-label {
        grid-column: 2;
    }

    .results-pagination {
        gap: 12px;
    }

    .pagination-button {
        width: auto;
        flex: 1 1 120px;
    }

    .history-table,
    .report-table,
    table.striped {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* The reservation creation page becomes a natural vertical document. */
    body:has(#recurringForm) .select-child-title-row,
    body:has(#recurringForm) #childResultsTable,
    body:has(#recurringForm) #reservationManagementColumn,
    body:has(#recurringForm) h4,
    body:has(#recurringForm) #reservationForm,
    body:has(#recurringForm) #futureReservationsSection,
    body:has(#recurringForm) #recurringForm + hr + h3,
    body:has(#recurringForm) hr + h3,
    body:has(#recurringForm) .standing-summary,
    body:has(#recurringForm) #recurringForm {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        max-width: none;
        margin-left: 70px;
        margin-right: 16px;
    }

    body:has(#recurringForm) .select-child-title-row {
        margin-top: 140px;
    }

    body:has(#recurringForm) #reservationManagementColumn {
        margin-top: 18px;
    }

    body:has(#recurringForm) #reservationManagementColumn > h4,
    body:has(#recurringForm) #reservationManagementColumn #reservationForm,
    body:has(#recurringForm) #reservationManagementColumn #futureReservationsSection,
    body:has(#recurringForm) #reservationManagementColumn #standingReservationsHeading,
    body:has(#recurringForm) #reservationManagementColumn .standing-summary,
    body:has(#recurringForm) #reservationManagementColumn #recurringForm {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        max-width: none;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
    }

    body:has(#recurringForm) #reservationManagementColumn #futureReservationsSection,
    body:has(#recurringForm) #reservationManagementColumn #recurringForm {
        margin-top: 18px;
    }

    body:has(#recurringForm) #childResultsTable,
    body:has(#recurringForm) h4,
    body:has(#recurringForm) #reservationForm,
    body:has(#recurringForm) #futureReservationsSection,
    body:has(#recurringForm) #recurringForm + hr + h3,
    body:has(#recurringForm) hr + h3,
    body:has(#recurringForm) .standing-summary,
    body:has(#recurringForm) #recurringForm {
        margin-top: 18px;
    }

    body:has(#recurringForm) .standing-summary {
        min-height: 0;
        max-height: none;
    }

    body:has(#recurringForm) #futureReservationsResults {
        max-height: none;
    }
}

@media (max-width: 600px) {
    #login-container {
        box-sizing: border-box;
        left: 20px;
        right: 20px;
        width: auto;
        height: auto;
        min-height: 420px;
        padding: 32px 24px;
        transform: none;
    }

    #loginButton {
        left: 24px;
        right: 24px;
        width: auto;
    }

    .flash-messages-login li {
        position: static;
        width: auto;
        margin-top: 16px;
    }

    .result-row,
    .history-header,
    .detail-header,
    .card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .result-row .purchase-button,
    .result-row .edit-button,
    .result-row button,
    .history-actions .back-link {
        width: 100%;
        align-self: stretch;
    }

    .entry-block {
        display: block;
    }

    .entry-block label,
    .entry-block input,
    .entry-block select,
    .entry-block textarea {
        display: block;
        width: 100%;
        text-align: left;
    }
}

/* Family page: keep Add New Family and Edit Existing Family as distinct
   panels. They share a row only while both have enough room. */
@media (min-width: 701px) and (max-width: 1500px) {
    body:has(#familyCon) #familyCon {
        box-sizing: border-box;
        left: 70px;
        width: calc(64% - 80px);
    }

    body:has(#familyCon) #editFamilyCon {
        box-sizing: border-box;
        left: auto;
        right: 20px;
        width: calc(36% - 30px);
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    body:has(#familyCon) #form-columns {
        gap: 18px;
    }

    body:has(#familyCon) #parent-section,
    body:has(#familyCon) #child-section {
        min-width: 0;
        width: auto;
    }

    body:has(#familyCon) .parent-entry,
    body:has(#familyCon) .child-entry,
    body:has(#familyCon) button#add-parent,
    body:has(#familyCon) button#add-child {
        box-sizing: border-box;
        width: 100%;
        margin-left: 0;
    }

    body:has(#familyCon) #editFamilyCon > div:first-child {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 700px) {
    body:has(#familyCon) #familyCon,
    body:has(#familyCon) #editFamilyCon {
        box-sizing: border-box;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        max-width: none;
        margin-left: 70px;
        margin-right: 20px;
    }

    body:has(#familyCon) #familyCon {
        margin-top: 180px;
    }

    body:has(#familyCon) #editFamilyCon {
        margin-top: 24px;
        margin-bottom: 30px;
    }
}

@media (max-width: 820px) {
    body:has(#familyCon) #form-columns {
        flex-direction: column;
        gap: 20px;
    }

    body:has(#familyCon) #parent-section,
    body:has(#familyCon) #child-section,
    body:has(#familyCon) .parent-entry,
    body:has(#familyCon) .child-entry,
    body:has(#familyCon) button#add-parent,
    body:has(#familyCon) button#add-child {
        box-sizing: border-box;
        width: 100%;
        margin-left: 0;
    }

    body:has(#familyCon) #editFamilyCon > div:first-child {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 10px;
    }
}

/* Reservations use one stable search layout at every width, eliminating the
   breakpoint where controls used to disappear and then reappear. */
body:has(#reservationsTab) #navigation {
    overflow: visible;
}

body:has(#reservationsTab) #logo {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(300px, 35vw, 460px);
    height: auto;
    z-index: 4;
}

body:has(#reservationsTab) .tab-bar {
    top: 165px;
}

body:has(#reservationsTab) #searchChildForm {
    box-sizing: border-box;
    margin: 230px 12px 0 62px;
    display: grid;
    grid-template-columns: minmax(0, 500px) minmax(100px, 150px);
    align-items: end;
    gap: 8px 10px;
}

body:has(#reservationsTab) #searchChildForm label {
    grid-column: 1 / -1;
    margin: 0;
}

body:has(#reservationsTab) #childSearch,
body:has(#reservationsTab) #searchButton {
    box-sizing: border-box;
    position: static;
    width: 100%;
    height: 44px;
    margin: 0;
}

body:has(#reservationsTab) #searchButton {
    padding: 8px 12px;
}

body:has(#reservationsTab) #filterDateLabel {
    top: 365px;
}

body:has(#reservationsTab) #filterDate {
    top: 385px;
}

body:has(#reservationsTab) #reservationsTablesContainer {
    top: 455px;
}

body:has(#reservationsTab) #edProgramControls {
    top: 230px;
}

body:has(#reservationsTab) #edProgramRosterContainer {
    top: 330px;
}

@media (max-width: 1280px) {
    body:has(#reservationsTab) #edProgramsTab {
        padding-top: 230px;
    }
}

/* Page-specific styles used display:none at these widths. Keep the elements
   in a stable state and fade them instead, so resizing has no visual pop. */
@media (max-width: 900px) {
    body:has(#reservationsTab) > #centerButton,
    body:has(#reservationsTab) > #recordsButton,
    body:has(#reservationsTab) > #managerButton {
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 320ms ease, visibility 0s linear 320ms;
    }
}

@media (max-width: 600px) {
    body:has(#familyHistoryCon) > #centerButton,
    body:has(#familyHistoryCon) > #recordsButton,
    body:has(#familyHistoryCon) > #managerButton {
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 320ms ease, visibility 0s linear 320ms;
    }
}