/* =====================================================================
   Calendar mobile — Step 1: CSS-only chrome tweaks (<=767px).
   Everything scoped inside the media query so desktop is unaffected.
   No JS. If this step works we'll layer on more.
   ===================================================================== */

@media (max-width: 767px) {
    /* 1a. Kill the "Calendário / Todas as Reservas" title card
           (which also contains the filter row). Bottom tab bar already
           tells the user which page they're on. */
    #calendar > .modern-content-card.u-mb-4 { display: none !important; }

    /* 1b. Edge-to-edge calendar container. Strip card chrome so the grid
           hits the viewport edges. The .main-content wrapper has 8px
           lateral padding from mobile-optimized.css; negative margins pull
           the container across it — but the container's width still
           computes as 100% of its parent (359 on a 375 viewport), so
           without widening it, we shift 8px left and leave 16px blank on
           the right. `width: calc(100% + 16px)` compensates so the
           container actually spans the full viewport. */
    #calendar > .calendar-container.modern-content-card {
        padding: 0 !important;
        margin: 0 -8px !important;
        width: calc(100% + 16px) !important;
        max-width: calc(100% + 16px) !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* 1c. Explicit viewport-based height on the grid — flex chain was
       fighting existing calendar.css rules. This bypasses that:
       grid height = viewport - top header (56) - nav+tabs (~124) -
       tab bar (80). `dvh` handles mobile browser chrome hiding/showing
       gracefully; `vh` fallback for older browsers. */
    #calendar #calendarGrid.calendar-grid {
        /* 240 = 56 (top header) + ~104 (calendar-nav after tightening) + 80
           (tab bar). Grid bottom sits flush with the top of the bottom tab
           bar. Reduced from 260 after trimming .calendar-nav spacing so the
           6th week row stops getting clipped. */
        height: calc(100vh - 240px) !important;
        height: calc(100dvh - 240px) !important;
        min-height: 400px !important;
    }

    /* 1d. Weekday headers — calendar.js now emits short forms on mobile
       ("Seg"/"Mon"/…) so we can use a readable size without truncation. */
    .calendar-header-cell {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        padding: 0.5rem 0.25rem !important;
        white-space: nowrap !important;
        text-transform: capitalize !important;
        min-height: 28px !important;
        line-height: 1.2 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 1e. FAB — repos above the bottom tab bar so it doesn't sit at the
           very bottom of the viewport where the tab bar covers it.
           Size normalised to 56px so it matches bookings' .bm-fab. */
    .floating-action-btn {
        bottom: 90px !important;
        right: 16px !important;
        width: 56px !important;
        height: 56px !important;
        font-size: 20px !important;
    }

    /* ---------------------------------------------------------------
       Step 2 — Compact nav bar
       Stack month/year on its own row (centred, larger), then the
       Anterior / HOJE / Seguinte trio spreads full-width below it.
       View tabs (.view-toggles) stay on their own row.
       --------------------------------------------------------------- */
    .calendar-nav {
        padding: 0.375rem 0.75rem !important;
    }
    .calendar-nav .nav-controls-row {
        display: flex !important;
        flex-direction: column-reverse !important;   /* month/year on top */
        align-items: stretch !important;
        gap: 0.5rem !important;
        margin-bottom: 0.375rem !important;
    }
    .calendar-nav .month-year {
        text-align: center !important;
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }
    .calendar-nav .nav-controls {
        display: grid !important;
        grid-template-columns: 1fr 1.4fr 1fr !important;  /* prev | today | next */
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
    .calendar-nav .nav-btn,
    .calendar-nav .today-btn {
        width: 100% !important;
        height: 38px !important;
        padding: 0 0.5rem !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .calendar-nav .today-btn {
        font-weight: 600 !important;
    }
    /* Nav block and view tabs sit close together — pushing them apart just
       burns vertical space that the grid needs to fit 6 weeks. */
    .calendar-nav .view-toggles {
        margin-top: 0 !important;
    }

    /* ---------------------------------------------------------------
       Step 3a — Equal-width day columns (MONTH VIEW ONLY)
       Scoped to `:not(.week-view):not(.day-view):not(.list-view)` —
       the other views set their own grid-template-columns inline
       (auto+7 for week, auto+1 for day, 1 for list) and get broken
       by a blanket `repeat(7, ...)`.
       --------------------------------------------------------------- */
    #calendarGrid.calendar-grid:not(.week-view):not(.day-view):not(.list-view) {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        grid-template-rows: auto !important;
        grid-auto-rows: minmax(70px, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        /* responsive.css:811 (@media <=480px) forces .calendar-grid to
           min-width: 400px — that pushes the grid past a 375px viewport
           and clips "Dom". CSS spec: min-width wins over max-width whenever
           it's larger, so we have to kill it explicitly. */
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    .calendar-cell {
        min-width: 0 !important;
        overflow: hidden !important;
    }
    /* Headers keep min-width: 0 for equal columns, but NO overflow: hidden —
       that was clipping the bottom half of "Seg/Ter/…" when the row auto-sized
       shorter than the text box. Flex-centred in the cell above ensures the
       glyphs sit vertically regardless of row height. */
    .calendar-header-cell {
        min-width: 0 !important;
        overflow: visible !important;
    }

    /* ---------------------------------------------------------------
       Step 3b — Events collapse to dot indicators on mobile
       Cell has direct children: .cell-date, then one .calendar-event
       per booking, then .add-event-btn. Trick: flex-wrap the cell so
       the cell-date takes its own row (width:100%), and the events
       flow as dots under it. .add-event-btn hidden on mobile — FAB
       already handles new-booking.
       --------------------------------------------------------------- */
    .calendar-cell {
        padding: 0.3rem 0.25rem !important;
        min-height: 58px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-content: flex-start !important;
        align-items: flex-start !important;
        gap: 3px !important;
    }
    .calendar-cell .cell-date {
        width: 100% !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        margin: 0 0 2px 0 !important;
        padding: 0 !important;
    }
    /* The event pill → a small time bar (e.g. "15:00"). Shows only the
       .event-time span; .event-title and .event-participants stay hidden.
       Pill takes its background colour from the inline style JS set on
       .calendar-event, so status/category colour carries through. */
    .calendar-cell .calendar-event {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 2px 5px !important;
        margin: 0 !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        font-size: 0.62rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
        text-align: left !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }
    /* Show the time, hide title/participants */
    .calendar-cell .calendar-event .event-time {
        display: inline !important;
        color: #fff !important;
        font-weight: 700 !important;
    }
    .calendar-cell .calendar-event .event-title,
    .calendar-cell .calendar-event .event-participants {
        display: none !important;
    }
    /* Cap visible events per cell to 3 — beyond that they'd overflow.
       Uses :nth-of-type which counts by tag name (all <div> siblings), and
       .cell-date is also a <div> taking the (1) slot — so pill positions are
       shifted by 1: 1st pill = nth-of-type(2), … 3rd pill = nth-of-type(4).
       Hide starting at nth-of-type(5) to correctly keep the first 3 pills.
       The bottom sheet still shows all of them on tap. */
    .calendar-cell .calendar-event:nth-of-type(n+5) {
        display: none !important;
    }
    /* Overflow badge — added by calendar.js when a cell has more bookings
       than the visible cap. Sits at the bottom-right corner of the cell. */
    .calendar-cell .cell-overflow-badge {
        position: absolute !important;
        right: 4px !important;
        bottom: 3px !important;
        background: rgba(102, 126, 234, 0.85) !important;
        color: #fff !important;
        font-size: 0.6rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        padding: 2px 5px !important;
        border-radius: 10px !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }
    .calendar-cell {
        position: relative !important;
    }
    /* Hide the per-cell '+' button on mobile — FAB does this job. */
    .calendar-cell .add-event-btn {
        display: none !important;
    }

    /* Day view's purple date header — trim vertical padding + font on mobile. */
    .day-view-header {
        padding: 10px 16px !important;
    }
    .day-view-header h3 {
        font-size: 1.1rem !important;
    }

    /* ---------------------------------------------------------------
       Week-view mobile tweaks
       - Cancel the 700px min-width on .calendar-container that forces
         horizontal overflow off-screen (from calendar.css line 531).
       - Tighter columns: narrow time column + 7 equal day columns.
       - Header: "Seg" and "29" side-by-side (was stacked column).
       --------------------------------------------------------------- */
    #calendar > .calendar-container.modern-content-card {
        min-width: 0 !important;
    }
    #calendarGrid.calendar-grid.week-view {
        grid-template-columns: 44px repeat(7, minmax(0, 1fr)) !important;
    }
    .week-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 14px 4px !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }
    /* "vez" time-header should match — row height is the tallest cell, so
       don't let a tiny .time-header force week-header to align tight. */
    .time-header {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .week-header .day-name {
        font-size: 0.7rem !important;
    }
    .week-header .day-number {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
    }
    .time-header,
    .time-slot-label {
        font-size: 0.65rem !important;
        padding: 4px 2px !important;
    }
    .week-time-slot {
        min-height: 40px !important;
        padding: 2px !important;
    }

    /* Day view uses time-slot-label + day-time-slot — align sizes with
       week view for consistency. minmax(0,1fr) lets the event column shrink
       below its content's min-width instead of forcing horizontal overflow. */
    #calendarGrid.calendar-grid.day-view {
        grid-template-columns: 60px minmax(0, 1fr) !important;
    }
    .day-time-slot {
        min-height: 50px !important;
    }

    /* -----------------------------------------------------------------
       Horizontal overflow fix (day / week / agenda).
       responsive.css forces `.calendar-grid { min-width: 400–500px }`, and
       the month-view rule only cancels it for `:not(.day-view):not(.week-
       view):not(.list-view)` — so these three views stayed wider than a
       ~375px viewport and scrolled sideways. Pin them to the viewport width
       and let their inner content wrap instead.
       ----------------------------------------------------------------- */
    #calendar #calendarGrid.calendar-grid.day-view,
    #calendar #calendarGrid.calendar-grid.week-view,
    #calendar #calendarGrid.calendar-grid.list-view {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Day-view cells + event must be able to shrink and wrap their text. */
    #calendar .calendar-grid.day-view .day-time-slot,
    #calendar .calendar-grid.day-view .day-event {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    #calendar .calendar-grid.day-view .event-title,
    #calendar .calendar-grid.day-view .event-customer {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Agenda (list) view — trim the 20px desktop padding and let each row's
       columns shrink so the count pill and booking reference stay on-screen. */
    #calendar .calendar-grid.list-view { padding: 12px !important; }
    #calendar .calendar-grid.list-view .list-date-header { min-width: 0 !important; gap: 8px !important; }
    #calendar .calendar-grid.list-view .list-date-header h3 { min-width: 0 !important; overflow-wrap: anywhere !important; }
    #calendar .calendar-grid.list-view .booking-count { flex-shrink: 0 !important; white-space: nowrap !important; }
    #calendar .calendar-grid.list-view .list-booking { min-width: 0 !important; }
    #calendar .calendar-grid.list-view .list-booking > * { min-width: 0 !important; overflow-wrap: anywhere !important; }

    /* Day & week are hourly time-grids, not a fixed 6-row month grid. The
       generic `height: calc(100dvh - 240px)` + the base `.calendar-grid`
       `overflow-x: auto` (which promotes overflow-y to auto) turn them into a
       short fixed-height scroll box — a tall booking (e.g. an 11:00–13:00
       event) then gets visually clipped instead of pushing its row taller.
       Let these grids grow to their content and scroll the page instead. */
    #calendar #calendarGrid.calendar-grid.day-view,
    #calendar #calendarGrid.calendar-grid.week-view {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        grid-auto-rows: min-content !important;
    }
    /* Rows must size to their content so the event is never cut. */
    #calendar .calendar-grid.day-view .day-time-slot,
    #calendar .calendar-grid.week-view .week-time-slot {
        height: auto !important;
        overflow: visible !important;
    }
    #calendar .calendar-grid.day-view .day-event {
        overflow: visible !important;
        white-space: normal !important;
    }
    /* Time labels top-align next to a tall event row instead of centring. */
    #calendar .calendar-grid.day-view .time-slot-label {
        align-self: start !important;
    }

    /* ---------------------------------------------------------------
       Step 6 — Filter drawer
       Funnel icon in top-right of .calendar-nav; taps open a right-side
       slide-in drawer that mirrors the hidden #statusFilter and
       #serviceFilter <select>s. The mirror inputs write back to the
       hidden selects on change, then call filterCalendarBookings().
       --------------------------------------------------------------- */
    .calendar-nav {
        position: relative !important;    /* anchor for funnel trigger */
    }
    .cal-filter-trigger {
        position: absolute !important;
        top: 6px;
        right: 6px;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #fff;
        border: 1px solid #e5e7eb;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #4b5563;
        z-index: 5;
    }
    .cal-filter-trigger:active { background: #f3f4f6; }
    .cal-filter-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: #ef4444;
        color: #fff;
        font-size: 0.65rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    .cal-filter-badge[hidden] { display: none; }

    /* Drawer + backdrop (appended to <body> by calendar-mobile.js) */
    .cal-filter-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
        z-index: 1050;
    }
    .cal-filter-backdrop.open { opacity: 1; pointer-events: auto; }
    .cal-filter-drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(85vw, 340px);
        background: #fff;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
        transform: translateX(100%);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 1051;
        display: flex;
        flex-direction: column;
        padding-top: env(safe-area-inset-top);
    }
    .cal-filter-drawer.open { transform: translateX(0); }
    .cal-filter-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px 12px;
        border-bottom: 1px solid #f3f4f6;
    }
    .cal-filter-drawer-title {
        font-size: 1.1rem;
        font-weight: 700;
        margin: 0;
        color: #111827;
    }
    .cal-filter-drawer-close {
        background: transparent;
        border: none;
        font-size: 1.75rem;
        color: #6b7280;
        cursor: pointer;
        padding: 4px 8px;
        line-height: 1;
    }
    .cal-filter-drawer-body {
        padding: 16px 20px;
        overflow-y: auto;
        flex: 1;
    }
    .cal-filter-group {
        margin-bottom: 18px;
    }
    .cal-filter-group-label {
        display: block;
        font-size: 0.8rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .cal-filter-group select {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.9rem;
        background: #fff;
        color: #111827;
    }

    /* Pill/chip pattern — tap-to-select rows. Selected pill takes an inline
       style from JS with the status's colour scheme; unselected use these
       defaults. */
    .cal-filter-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .cal-filter-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1.5px solid #e5e7eb;
        background: #fff;
        color: #4b5563;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s, color 0.15s;
        line-height: 1.2;
    }
    .cal-filter-pill:active { transform: scale(0.97); }
    .cal-filter-pill-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    /* Selected state (no colour scheme, e.g. service pills) */
    .cal-filter-pill.selected:not([style*="background"]) {
        background: #eef2ff;
        border-color: #6366f1;
        color: #4338ca;
    }
    .cal-filter-drawer-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid #f3f4f6;
    }
    .cal-filter-drawer-footer button {
        height: 40px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
    }
    .cal-filter-clear {
        background: #f3f4f6;
        color: #374151;
        border: 1px solid #e5e7eb;
    }
    .cal-filter-apply {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #fff;
        border: none;
    }
}

/* Desktop safety net — even if the drawer element is appended to body,
   never render it on wide screens. */
@media (min-width: 768px) {
    .cal-filter-trigger,
    .cal-filter-drawer,
    .cal-filter-backdrop { display: none !important; }
}

    /* ---------------------------------------------------------------
       Step 4 — Day bottom sheet
       Backdrop + slide-up sheet, appended to <body> by JS module.
       Only visible on mobile (JS gates open; CSS scoped by media
       query too as a belt+braces).
       --------------------------------------------------------------- */
    .cal-day-sheet-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
        z-index: 1050;
    }
    .cal-day-sheet-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }
    .cal-day-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 1051;
        max-height: 82vh;
        display: flex;
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .cal-day-sheet.open { transform: translateY(0); }
    .cal-day-sheet-handle {
        width: 40px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 8px auto 0;
        flex-shrink: 0;
    }
    .cal-day-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px 8px;
        flex-shrink: 0;
    }
    .cal-day-sheet-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #111827;
        margin: 0;
        text-transform: capitalize;
    }
    .cal-day-sheet-close {
        background: transparent;
        border: none;
        font-size: 1.75rem;
        line-height: 1;
        color: #6b7280;
        cursor: pointer;
        padding: 4px 8px;
    }
    .cal-day-sheet-content {
        overflow-y: auto;
        padding: 4px 16px 24px;
        -webkit-overflow-scrolling: touch;
    }
    .cal-day-sheet-booking {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
        margin-bottom: 8px;
        background: #f9fafb;
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.15s;
    }
    .cal-day-sheet-booking:active {
        background: #f3f4f6;
    }
    .cal-day-sheet-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-top: 6px;
        flex-shrink: 0;
    }
    .cal-day-sheet-body {
        flex: 1;
        min-width: 0;
    }
    .cal-day-sheet-title-row {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 4px;
    }
    .cal-day-sheet-time {
        font-weight: 700;
        color: #6366f1;
        font-size: 0.9rem;
        flex-shrink: 0;
    }
    .cal-day-sheet-name {
        font-weight: 600;
        color: #111827;
        font-size: 0.9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cal-day-sheet-meta {
        font-size: 0.8rem;
        color: #6b7280;
    }
    .cal-day-sheet-empty {
        text-align: center;
        padding: 24px 16px 8px;
    }
    .cal-day-sheet-empty-icon {
        font-size: 2.5rem;
        opacity: 0.5;
        margin-bottom: 8px;
    }
    .cal-day-sheet-empty p {
        color: #6b7280;
        margin: 0 0 16px;
        font-size: 0.9rem;
    }
    .cal-day-sheet-new {
        background: #6366f1;
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: 10px 20px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
    }
    .cal-day-sheet-new:active { background: #4f46e5; }
}

/* Desktop safety net — even if JS opens the sheet on a big screen (it
   won't, but belt+braces), hide it. */
@media (min-width: 768px) {
    .cal-day-sheet, .cal-day-sheet-backdrop { display: none !important; }
}