/* =====================================================================
   Bookings — mobile layout (<768px)
   Loaded globally from admin.html, but every rule is scoped inside the
   media query so desktop and tablet users see zero effect.
   ===================================================================== */

/* Card grid is hidden by default; the media query shows it on mobile.
   The mobile chrome (search bar, FAB) is hidden by default so it can't
   accidentally leak onto desktop. */
.bookings-cards { display: none; }
#bookingsMobileSearchBar { display: none; }
#bookings > .bm-fab { display: none; }

@media (max-width: 767px) {
    /* Swap: hide the table, show the card list. */
    #bookingsDataTable { display: none !important; }
    .bookings-cards {
        display: flex; flex-direction: column;
        padding: 0; gap: 0.5rem;
    }

    /* Hide the whole desktop filter card. Search stays inline in the fixed
       top bar; status/dates/reset/export/new booking are moved into the
       funnel drawer by bookings-mobile.js. The filter card is the one with
       the .u-mb-4 spacer class (the list card doesn't have it). */
    #bookings > .modern-content-card.u-mb-4 { display: none !important; }

    /* Bookings list card: strip padding/border/background/shadow so the
       cards go edge-to-edge on mobile like the Booknetic reference. */
    #bookings > .modern-content-card:not(.u-mb-4) {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* "All Bookings" section header + bulk-actions bar are noise on mobile. */
    #bookings .modern-section-header { display: none !important; }

    /* Section spacing: leave room for the fixed search bar (top) and the
       bottom tab bar. The mobile-optimized.css already gives .main-content a
       56px top margin for the mobile header; we add another 56px inside the
       section to sit below the fixed search bar. */
    #bookings { padding-top: 56px !important; padding-bottom: 90px !important; }

    /* Pull the section flush against the viewport edges (mobile-optimized.css
       puts 8px padding on .main-content). No :has() dependency so it works
       on every browser. */
    #bookings > .modern-content-card:not(.u-mb-4) {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    /* Card cosmetics */
    .bookings-cards .b-card {
        position: relative;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin: 0 !important;
        padding: 0.85rem 0.9rem 0.85rem 1.05rem;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.2s ease-out;
    }
    .bookings-cards .b-card:active { transform: scale(0.99); }
    .bookings-cards .b-strip {
        position: absolute; top: 0; left: 0; bottom: 0;
        width: 4px;
    }
    .bookings-cards .b-dot {
        position: absolute; top: 0.75rem; right: 0.85rem;
        width: 10px; height: 10px; border-radius: 50%;
    }
    .bookings-cards .b-title {
        font-weight: 600; color: #1f2937; font-size: 0.95rem; line-height: 1.3;
        padding-right: 1.25rem;
    }
    .bookings-cards .b-title-muted { color: #9ca3af; font-weight: 400; }
    .bookings-cards .b-when { color: #4b5563; font-size: 0.85rem; margin-top: 0.25rem; }
    .bookings-cards .b-foot {
        display: flex; justify-content: space-between; align-items: center;
        margin-top: 0.6rem; font-size: 0.8rem; color: #6b7280;
        /* Reserve room on the right so the amount clears the absolutely
           positioned ⋯ button (30px wide at right:0.5rem) sitting in the
           card's bottom-right corner — otherwise the € value is hidden
           behind it. */
        padding-right: 50px;
        gap: 0.5rem;
    }
    /* Provider name truncates; amount stays whole and right-aligned against
       the reserved gutter, so a long value grows left (never under the ⋯). */
    .bookings-cards .b-provider { min-width: 0; flex: 0 1 auto; }
    .bookings-cards .b-provider .b-avatar { flex-shrink: 0; }
    .bookings-cards .b-provider-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .bookings-cards .b-provider { display: inline-flex; align-items: center; gap: 0.4rem; }
    .bookings-cards .b-avatar {
        width: 22px; height: 22px; border-radius: 50%;
        background: #eef2ff; color: #4f46e5;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 0.65rem; font-weight: 700;
    }
    .bookings-cards .b-amount { font-weight: 600; color: #1f2937; flex-shrink: 0; white-space: nowrap; }
    .bookings-cards .b-ref {
        font-size: 0.7rem; color: #9ca3af; letter-spacing: 0.02em; margin-bottom: 0.2rem;
    }
    .bookings-cards .b-empty {
        padding: 3rem 1rem; text-align: center; color: #9ca3af;
    }
    .table-container { overflow-x: visible; }

    /* Card ⋯ button */
    .bookings-cards .b-more {
        position: absolute; bottom: 0.5rem; right: 0.5rem;
        width: 30px; height: 30px; border-radius: 50%;
        border: none; background: #f3f4f6; color: #4b5563;
        display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer;
    }
    .bookings-cards .b-more:active { background: #e5e7eb; }

    /* Swipe reveal panes (background behind the card, seen when the card slides) */
    .bookings-cards .b-card[data-swipe="left"] { background: linear-gradient(to left, #fee2e2 30%, #fff 100%); }
    .bookings-cards .b-card[data-swipe="right"] { background: linear-gradient(to right, #d1fae5 30%, #fff 100%); }
    .bookings-cards .b-card[data-swipe="left"]::after {
        content: "✕"; position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
        color: #dc2626; font-weight: 700; font-size: 1.15rem; pointer-events: none;
    }
    .bookings-cards .b-card[data-swipe="right"]::before {
        content: "€"; position: absolute; top: 50%; left: 14px; transform: translateY(-50%);
        color: #059669; font-weight: 700; font-size: 1.15rem; pointer-events: none;
    }

    /* Fixed search + filter bar — pinned right below the 56px mobile header. */
    #bookingsMobileSearchBar {
        display: flex !important; gap: 0.5rem;
        padding: 0.55rem 0.75rem;
        position: fixed !important; top: 56px; left: 0; right: 0;
        z-index: 990;
        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;
    }
    #bookingsMobileSearchBar input {
        flex: 1; padding: 0.55rem 0.75rem; border: 1px solid #d1d5db;
        border-radius: 8px; font-size: 0.9rem; background: #fff;
    }
    #bookingsMobileSearchBar .bm-filter-btn {
        width: 40px; height: 40px; border-radius: 8px;
        border: 1px solid #d1d5db; background: #fff;
        display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer; position: relative;
    }
    #bookingsMobileSearchBar .bm-filter-btn[data-has-filters="1"]::after {
        content: ""; position: absolute; top: 6px; right: 6px;
        width: 8px; height: 8px; border-radius: 50%; background: #2563eb;
    }

    /* Hide the desktop filter row (id set by bookings.html edit) — moved into
       the drawer by bookings-mobile.js when opened. */
    #bookingsFiltersRow { display: none !important; }

    /* FAB for New Booking — visually matches calendar's .floating-action-btn
       so both mobile FABs are indistinguishable. */
    .bm-fab {
        position: fixed; bottom: 90px; right: 16px; z-index: 900;
        width: 56px; height: 56px; border-radius: 50%;
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #fff;
        border: 2px solid rgba(255, 255, 255, 0.2);
        display: inline-flex; align-items: center; justify-content: center;
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
        cursor: pointer;
    }
    .bm-fab:active { transform: scale(0.95); }

    /* Pagination bar: shrink on mobile so it doesn't cover the tab bar. */
    #bookings .email-logs-pagination {
        font-size: 0.8rem; padding: 0.75rem !important;
    }

    /* Status pill row — replaces the native <select> inside the mobile
       filter drawer. Same visual language as the calendar drawer's pills. */
    .bm-status-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 6px;
    }
    .bm-status-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;
    }
    .bm-status-pill:active { transform: scale(0.97); }
    .bm-status-pill-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
}

/* ---------------------------------------------------------------------
   Bottom sheet + drawer overlays (always available; only opened on mobile).
   -------------------------------------------------------------------- */

.bm-sheet-wrap {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: flex-end; justify-content: center;
}
.bm-sheet-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0);
    transition: background 0.2s;
}
.bm-sheet-wrap.is-open .bm-sheet-backdrop { background: rgba(0,0,0,0.35); }
.bm-sheet {
    position: relative; width: 100%; max-width: 500px;
    background: #fff; border-radius: 16px 16px 0 0;
    transform: translateY(100%); transition: transform 0.22s ease-out;
    padding: 0.4rem 0.5rem env(safe-area-inset-bottom, 0.5rem);
    max-height: 85vh; overflow-y: auto;
}
.bm-sheet-wrap.is-open .bm-sheet { transform: translateY(0); }
.bm-sheet-handle {
    width: 40px; height: 4px; background: #d1d5db; border-radius: 2px;
    margin: 0.5rem auto 0.6rem;
}
.bm-sheet-title {
    text-align: center; font-size: 0.8rem; color: #9ca3af;
    letter-spacing: 0.02em; margin-bottom: 0.5rem;
}
.bm-sheet-list { display: flex; flex-direction: column; padding: 0.25rem; }
.bm-sheet-item {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; padding: 0.85rem 0.75rem;
    background: transparent; border: none; cursor: pointer;
    font-size: 0.95rem; color: #1f2937; text-align: left;
    border-radius: 8px;
}
.bm-sheet-item:active { background: #f3f4f6; }
.bm-sheet-item.is-danger { color: #dc2626; }
.bm-sheet-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.bm-sheet-divider { height: 1px; background: #e5e7eb; margin: 0.4rem 0; }
.bm-sheet-cancel {
    width: calc(100% - 1rem); margin: 0.5rem;
    padding: 0.9rem; border: none; border-radius: 12px;
    background: #f3f4f6; color: #374151;
    font-size: 0.95rem; font-weight: 600; cursor: pointer;
}

.bm-drawer-wrap {
    position: fixed; inset: 0; z-index: 10000;
}
.bm-drawer-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0);
    transition: background 0.2s;
}
.bm-drawer-wrap.is-open .bm-drawer-backdrop { background: rgba(0,0,0,0.35); }
.bm-drawer {
    position: absolute; right: 0; top: 0; bottom: 0; width: 88%; max-width: 380px;
    background: #fff; box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    transform: translateX(100%); transition: transform 0.22s ease-out;
    display: flex; flex-direction: column;
}
.bm-drawer-wrap.is-open .bm-drawer { transform: translateX(0); }
.bm-drawer-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.15rem; border-bottom: 1px solid #e5e7eb;
    font-weight: 700; font-size: 1.05rem;
}
.bm-drawer-close {
    border: none; background: transparent; font-size: 1.5rem;
    color: #6b7280; cursor: pointer; line-height: 1;
}
/* Body is a flex column so we can push the buttons group to the bottom
   via `margin-top: auto`. */
.bm-drawer-body {
    padding: 1rem 1.15rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bm-drawer-body > * { display: block !important; width: 100% !important; margin-bottom: 0.75rem; }

/* Sort section injected into the mobile drawer (matches the desktop's
   Ordenação Padrão controls that live in Column Settings). */
.bm-sort-section {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.bm-sort-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}
.bm-sort-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.bm-sort-row > .bm-sort-select {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-size: 0.9rem;
    appearance: menulist;
}
.bm-sort-row > .bm-sort-select:disabled {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Buttons row: pinned to the drawer bottom, Repor + Exportar side-by-side.
   Nova Reserva is hidden — the FAB already handles new-booking on mobile. */
.bm-drawer-body > .form-group.u-flex {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid #f3f4f6;
}
.bm-drawer-body > .form-group.u-flex > .btn {
    flex: 1 !important;
    width: auto !important;
    height: 42px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: none !important;
}
/* Repor — neutral/secondary style (matches calendar's Limpar) */
.bm-drawer-body > .form-group.u-flex > .btn[onclick*="resetBookingFilters"] {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
}
/* Exportar — purple gradient primary (matches calendar's Fechar + FAB) */
.bm-drawer-body > .form-group.u-flex > .btn[onclick*="exportBookingsToCSV"] {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: #fff !important;
    border: none !important;
}
.bm-drawer-body > .form-group .btn-success[onclick*="openCalendarNewBooking"] {
    display: none !important;
}