/* =========================================================================
   New Booking page — mobile makeover.
   Long single-page form with customer search, service, calendar, participants,
   pickup, payment, extras, summary. On mobile:
     - Title hidden
     - "Adicionar Cliente" button → compact 42x42 "+" icon so the search input
       gets full width
     - All multi-column grids stacked (the 1fr 1.5fr service/calendar grid was
       the biggest offender causing horizontal overflow and blocking central
       vertical scroll)
     - Container overflow-x locked to fix "scroll only works from far edges"
   ========================================================================= */

/* -------------------------------------------------------------------------
   Inner padding for .new-booking-body — restore the padding that the
   original .modal-body wrapper had before we renamed the class in the HTML.
   The rename (which fixed a mobile scroll trap) also orphaned the
   `.modal-body { padding: var(--spacing-xl) }` rule from admin-styles.css,
   leaving form fields flush against the edges of .content-section.
   Scoped to >=768px because the mobile block below already sets its own
   (smaller) inner spacing on this wrapper for phones.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
    #new-booking .new-booking-body {
        padding: var(--spacing-xl);
    }
}

@media (max-width: 767px) {

    /* -----------------------------------------------------------------
       Container — do NOT set overflow-x here. The parent .main-content
       already has overflow-x: hidden, and CSS spec promotes overflow-y
       to `auto` whenever overflow-x is hidden — that would turn
       #new-booking into a vertical scroll container that traps touch.
       Horizontal overflow is prevented via max-width alone.
       ----------------------------------------------------------------- */
    #new-booking {
        padding: 8px !important;
        padding-bottom: 100px !important;
        max-width: 100vw !important;
        width: 100% !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
        min-height: 0 !important;
        height: auto !important;
    }
    #new-booking * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Inner containers must stay overflow: visible. Two CSS traps to avoid:
       1) mobile-optimized.css:2053 sets `.modal-body { overflow-y: auto }` on
          mobile — turns any .modal-body into a scroll container that captures
          touch. The wrapper is renamed to .new-booking-body in the HTML so
          this rule never matches.
       2) CSS spec: when overflow-x is `hidden` and overflow-y is `visible`,
          the browser promotes overflow-y to `auto`, silently creating a
          vertical scroll container. Overflow-x is locked at #new-booking
          only; inner containers stay fully visible on both axes. */
    #new-booking .content-section,
    #new-booking .new-booking-body,
    #new-booking #newBookingForm {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    #new-booking > .content-section {
        background: #fff !important;
        border-radius: 12px !important;
        padding: 12px !important;
        margin: 0 !important;
    }

    /* -----------------------------------------------------------------
       Title hidden
       ----------------------------------------------------------------- */
    #new-booking > .page-header,
    #new-booking > .page-header[style] {
        display: none !important;
    }

    /* -----------------------------------------------------------------
       Customer search row — inline "display: flex; gap: 1rem" from HTML.
       Give the search input all remaining space, shrink the "Adicionar
       Cliente" button to a compact 42x42 "+" icon.
       ----------------------------------------------------------------- */
    #new-booking .customer-search-row,
    #new-booking .customer-search-row[style] {
        display: flex !important;
        gap: 8px !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    #new-booking .customer-search-row > .customer-search,
    #new-booking .customer-search-row > .customer-search[style] {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }
    #new-booking .customer-search-row > .customer-search input {
        width: 100% !important;
        min-height: 42px !important;
    }
    /* The "+" button — replace text with a big plus glyph. */
    #new-booking .customer-search-row > button[onclick*="toggleNewCustomer"] {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        font-size: 0 !important;
        line-height: 1 !important;
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.35) !important;
    }
    #new-booking .customer-search-row > button[onclick*="toggleNewCustomer"] svg {
        display: none !important;
    }
    #new-booking .customer-search-row > button[onclick*="toggleNewCustomer"] > span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
    #new-booking .customer-search-row > button[onclick*="toggleNewCustomer"] > span::before {
        content: "+" !important;
        font-size: 28px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        color: #fff !important;
        display: block !important;
    }

    /* -----------------------------------------------------------------
       Form fields — normalise
       ----------------------------------------------------------------- */
    #new-booking .form-group {
        margin-bottom: 12px !important;
    }
    #new-booking .form-group > label {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        color: #374151 !important;
        display: block !important;
        margin-bottom: 4px !important;
    }
    #new-booking input[type="text"],
    #new-booking input[type="email"],
    #new-booking input[type="tel"],
    #new-booking input[type="number"],
    #new-booking input[type="date"],
    #new-booking input[type="time"],
    #new-booking select,
    #new-booking textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 42px !important;
        padding: 8px 12px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        font-size: 0.95rem !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
    #new-booking textarea {
        min-height: 80px !important;
        resize: vertical !important;
    }
    #new-booking input:focus,
    #new-booking select:focus,
    #new-booking textarea:focus {
        outline: none !important;
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
    }

    /* -----------------------------------------------------------------
       All multi-column grids → single column. Includes the biggest
       offender: the 1fr 1.5fr service/calendar row.
       ----------------------------------------------------------------- */
    #new-booking .form-grid,
    #new-booking #newCustomerFields .form-grid,
    #new-booking #pickupDetailsContainer .form-grid,
    #new-booking div[style*="grid-template-columns: 1fr 1.5fr"],
    #new-booking div[style*="grid-template-columns: 1fr 1fr"],
    #new-booking div[style*="grid-template-columns: repeat(2"],
    #new-booking div[style*="grid-template-columns: repeat(3"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }
    /* Full-span form-groups stay full-span */
    #new-booking .form-group[style*="grid-column: 1 / -1"] {
        grid-column: 1 / -1 !important;
    }

    /* Section headings — tighter */
    #new-booking h3,
    #new-booking h4 {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: #111827 !important;
        margin: 14px 0 8px 0 !important;
    }
    #new-booking h3[style],
    #new-booking h4[style] {
        margin: 14px 0 8px 0 !important;
    }

    /* -----------------------------------------------------------------
       Participants section — center the label + counter box in the column
       so each row reads as a centred stack rather than left-aligned.
       ----------------------------------------------------------------- */
    #new-booking #participantsSection .form-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 8px !important;
        margin: 0 !important;
    }
    /* The inline label is "display: flex; justify-content: space-between" —
       flip it to centred inline row so title + price sit together. */
    #new-booking #participantsSection .form-group > label,
    #new-booking #participantsSection .form-group > label[style] {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        width: auto !important;
    }
    #new-booking .participant-counter {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        margin: 0 auto !important;
    }
    #new-booking .counter-btn {
        min-width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
    }

    /* -----------------------------------------------------------------
       Time slot list — no internal scroll on mobile so the whole page
       pans as one. Nested overflow-y traps the touch and blocks pan-y.
       ----------------------------------------------------------------- */
    #new-booking #timeSlotList,
    #new-booking #timeSlotList[style] {
        max-height: none !important;
        overflow: visible !important;
    }
    /* Same for the calendar container — no nested scroll */
    #new-booking #bookingCalendarPicker,
    #new-booking #scheduleCalendarContainer {
        overflow: visible !important;
        touch-action: pan-y !important;
    }

    /* Let touch/wheel behave natively. DO NOT set overscroll-behavior on
       #new-booking — combined with the CSS quirk that promotes overflow-y
       to auto, `overscroll-behavior: contain` traps wheel scroll and
       refuses to chain to html (the only element that actually scrolls).
       That was the whole scroll bug. */
    #new-booking {
        overscroll-behavior: auto !important;
        overscroll-behavior-y: auto !important;
        overscroll-behavior-x: auto !important;
    }

    /* -----------------------------------------------------------------
       Calendar picker — stretch and remove double padding
       ----------------------------------------------------------------- */
    #new-booking #scheduleCalendarContainer,
    #new-booking #bookingCalendarPicker,
    #new-booking #bookingCalendarPicker[style] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }
    /* .booking-calendar has align-items: center and no explicit width, so it
       collapses toward intrinsic size. Force it to fill the container so the
       max-width: 400px children (nav row, grid, legend) actually center on
       the viewport instead of shrinking off to one side. */
    #new-booking #bookingCalendarPicker .booking-calendar {
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
    }
    /* Fix the 7-column grid overflowing past the container. `1fr` in CSS grid
       has an implicit `min-width: min-content`, so if a cell's text (e.g.
       "10 vagas") is wider than viewport/7 the whole grid overflows to fit.
       `minmax(0, 1fr)` removes the min-content floor so cells actually shrink
       to their column allotment. */
    #new-booking #bookingCalendarPicker .booking-calendar > div[style*="grid-template-columns: repeat(7"],
    #new-booking #bookingCalendarPicker div[style*="grid-template-columns: repeat(7"] {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 3px !important;
    }
    /* Give day cells room to shrink and keep numbers/text readable inside a
       narrow column. */
    #new-booking #bookingCalendarPicker .booking-calendar > div[style*="grid-template-columns: repeat(7"] > div,
    #new-booking #bookingCalendarPicker div[style*="grid-template-columns: repeat(7"] > div {
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 4px 2px !important;
        font-size: 0.7rem !important;
    }
    /* Calendar internals — force fit and prevent inline-set widths */
    #new-booking #bookingCalendarPicker table,
    #new-booking #bookingCalendarPicker > * {
        max-width: 100% !important;
    }

    /* Time-slot list buttons — inline style sets width: 100% + padding: 1rem
       with default box-sizing: content-box on some browsers under the * {
       box-sizing: border-box } rule (attribute-selector inline styles can
       out-specificity ours). Force border-box + width to keep them inside
       the card. */
    #new-booking #timeSlotList > button.time-slot-btn,
    #new-booking #timeSlotList > button.time-slot-btn[style] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* -----------------------------------------------------------------
       Collapsible sections (Detalhes Adicionais, Extras de Serviço,
       Adjustments) — drop the outer .section-collapsible border on mobile
       so extras items don't sit inside "a card inside a card inside a
       card". The section-toggle button stays as the visual container; the
       body just extends below it flush.
       ----------------------------------------------------------------- */
    #new-booking .section-collapsible {
        border: none !important;
        border-radius: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: transparent !important;
    }
    /* Undo the toggle's "connected to a border below" look — round both
       top and bottom corners since there's no attached border-box now. */
    #new-booking .section-toggle[aria-expanded="true"] {
        border-bottom-left-radius: var(--radius-md) !important;
        border-bottom-right-radius: var(--radius-md) !important;
        border-bottom-color: rgba(102, 126, 234, 0.2) !important;
        margin-bottom: 8px !important;
    }
    /* Kill the inner list container's padding — extras cards handle their
       own spacing. */
    #new-booking #bookingExtrasList,
    #new-booking #bookingExtrasList[style] {
        padding: 0 !important;
    }
    /* Individual extras cards should already have their own border/bg
       from the base CSS — just make sure they aren't double-nested. */
    #new-booking #bookingExtrasList > * {
        margin: 0 0 8px 0 !important;
    }
    #new-booking #bookingExtrasList > *:last-child {
        margin-bottom: 0 !important;
    }

    /* -----------------------------------------------------------------
       Voucher/adjustment inline rows — stack instead of overflowing
       ----------------------------------------------------------------- */
    #new-booking #bookingVoucherApplied,
    #new-booking #bookingVoucherApplied[style],
    #new-booking #bookingVoucherInputRow,
    #new-booking #bookingVoucherInputRow[style] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    #new-booking #bookingVoucherDiscountLabel,
    #new-booking #bookingVoucherDiscountLabel[style] {
        width: auto !important;
        flex: 1 1 100% !important;
    }
    #new-booking .adjustment-row,
    #new-booking .adjustment-row[style] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    /* Voucher/adjustment action bar buttons stay side-by-side */
    #new-booking #bookingAdjustmentsBody > div[style*="justify-content: flex-end"] {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* -----------------------------------------------------------------
       Booking summary panel — light card
       ----------------------------------------------------------------- */
    #new-booking > .content-section .content-section,
    #new-booking > .content-section .content-section[style] {
        background: #f9fafb !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        padding: 12px !important;
        margin: 14px 0 !important;
    }

    /* -----------------------------------------------------------------
       Bottom action row — Reset + Create Booking as sticky bottom bar,
       matching the pattern from other modernised pages.
       ----------------------------------------------------------------- */
    #new-booking form > div[style*="justify-content: flex-end"]:last-of-type {
        display: grid !important;
        grid-template-columns: 1fr 2fr !important;
        gap: 8px !important;
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(70px + env(safe-area-inset-bottom)) !important;
        z-index: 100 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #new-booking form > div[style*="justify-content: flex-end"]:last-of-type > .btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border-radius: 12px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    #new-booking form > div[style*="justify-content: flex-end"]:last-of-type > .btn.btn-danger {
        background: #fff !important;
        color: #dc2626 !important;
        border: 1.5px solid #fecaca !important;
        box-shadow: 0 6px 16px rgba(220, 38, 38, 0.12) !important;
    }
    #new-booking form > div[style*="justify-content: flex-end"]:last-of-type > .btn.btn-success {
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35) !important;
    }
    #new-booking form > div[style*="justify-content: flex-end"]:last-of-type > .btn svg {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }
}