/* =====================================================================
   QR Scanner — mobile makeover. Everything scoped inside the media query
   so desktop is unaffected. Two changes:
     - Hide the top title card ("Scanner de Código QR").
     - Verificar + Gerar Código QR sit side-by-side on a single row.
   ===================================================================== */

@media (max-width: 767px) {
    /* 1. Kill the title/subtitle card + collapse the empty space it
       left above the scanner layout. The bottom tab bar already tells
       the user which page they're on. */
    #qr-scanner > .modern-content-card.u-mb-4 {
        display: none !important;
    }
    /* Kill the blue "Pronto para digitalizar" status card on mobile —
       its text is now shown inline inside the qr-reader placeholder. */
    #qr-scanner #scanner-status {
        display: none !important;
    }
    /* Inline title + subtitle inside the qr-reader placeholder — the
       replacement content for the hidden blue status card. */
    #qr-scanner .qr-inline-title {
        display: block !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #1a202c !important;
        margin-bottom: 4px !important;
    }
    #qr-scanner .qr-inline-subtitle {
        display: block !important;
        font-size: 0.85rem !important;
        color: #718096 !important;
        margin-bottom: 12px !important;
    }
    #qr-scanner > .qr-scanner-layout {
        margin-top: 0 !important;
    }
    /* .qr-scanner-card ships with a 24px section margin from base CSS;
       tighten so the scanner card sits right under the mobile header. */
    #qr-scanner .qr-scanner-card {
        margin-top: 0 !important;
    }

    /* 2. Verificar + Gerar Código QR side-by-side.
       DOM (unchanged):
           .qr-scanner-card
             ├─ h3 (Manual Entry)
             ├─ p  (description)
             ├─ .manual-entry-input-group
             │    ├─ input#manual-reference
             │    └─ button.manual-entry-btn         ← "Verificar"
             ├─ div (border-top wrapper)
             │    ├─ button[onclick*="showGenerateQRModal"]  ← "Gerar Código QR"
             │    └─ p (description)
             └─ #recent-manual-entries-section
       Turn the card into a 2-col grid; dissolve the two wrappers with
       `display: contents` so their children flow into the grid, then
       place Verificar in col 1 and Gerar in col 2 of the same row. */
    #qr-scanner .qr-scanner-card:has(.manual-entry-input-group) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        align-items: start;
    }
    /* Direct children that should span the full row. */
    #qr-scanner .qr-scanner-card:has(.manual-entry-input-group) > h3,
    #qr-scanner .qr-scanner-card:has(.manual-entry-input-group) > .card-title,
    #qr-scanner .qr-scanner-card:has(.manual-entry-input-group) > .card-description,
    #qr-scanner .qr-scanner-card:has(.manual-entry-input-group) > p {
        grid-column: 1 / -1 !important;
        margin: 0 !important;
    }

    /* Dissolve the input-group wrapper so its children participate in the
       card's grid. The base bookings-mobile CSS elsewhere makes this
       wrapper `display: flex` — override. */
    #qr-scanner .qr-scanner-card > .manual-entry-input-group {
        display: contents !important;
    }
    #qr-scanner .manual-entry-input-group > #manual-reference,
    #qr-scanner .manual-entry-input-group > .manual-entry-input {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    /* Verificar → column 1 of the button row */
    #qr-scanner .manual-entry-input-group > .manual-entry-btn {
        grid-column: 1 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Dissolve the Gerar wrapper (the border-top div). Border/spacing
       removed — the grid gap handles separation. */
    #qr-scanner .qr-scanner-card > div:has(> button[onclick*="showGenerateQRModal"]) {
        display: contents !important;
    }
    #qr-scanner .qr-scanner-card > div:has(> button[onclick*="showGenerateQRModal"]) > button {
        grid-column: 2 !important;
        width: 100% !important;
        margin: 0 !important;
    }
    /* Description under Gerar — spans full row, small centred caption. */
    #qr-scanner .qr-scanner-card > div:has(> button[onclick*="showGenerateQRModal"]) > p {
        grid-column: 1 / -1 !important;
        text-align: center !important;
        margin: 4px 0 0 !important;
    }

    /* Recent entries section: back to full row. */
    #qr-scanner #recent-manual-entries-section {
        grid-column: 1 / -1 !important;
        margin-top: 12px !important;
    }

    /* Tighten the Today's Bookings section — base CSS reserves 32px of
       padding-top on top of the section's own margin, leaving a large
       gap between the separator line and the stat cards. Equal 12px
       gap above + below the divider line. */
    #qr-scanner .todays-bookings-section {
        margin-top: 12px !important;
        padding-top: 12px !important;
    }
    /* Also zero the Entrada Manual card's bottom margin so its distance
       to the divider matches the divider-to-search-bar gap. */
    #qr-scanner .qr-scanner-column + .qr-results-column .qr-scanner-card:last-child,
    #qr-scanner .qr-results-column > .qr-scanner-card {
        margin-bottom: 0 !important;
    }
    /* The stats grid is relocated to the very top of the qr-scanner
       section by qr-scanner-mobile.js. Small vertical spacing so it
       doesn't hug the mobile header. */
    #qr-scanner > .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin: 0 0 12px 0 !important;
        padding: 0 4px !important;
    }
    /* Stat-card interior sizing/layout lives in shared css/stat-cards-mobile.css */

    /* -----------------------------------------------------------------
       Today's Bookings — swap the desktop table for a card list, hide
       the inline filter row (search + status + refresh + bulk) and
       expose a funnel-trigger button that opens a right-side drawer
       populated by qr-scanner-mobile.js.
       ----------------------------------------------------------------- */
    #qr-scanner #todays-bookings-table-container,
    #qr-scanner #todaysBookingsDataTable {
        display: none !important;
    }
    #qr-scanner .tb-cards {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        padding: 0 4px;
    }

    /* The original .modern-section-header (title + filters row) is
       hidden by qr-scanner-mobile.js via inline `display:none`. Our own
       #tbMobileHeader is inserted right after and styled below. */

    #qr-scanner #tbMobileHeader.tb-mobile-header {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin: 0 0 12px 0;
        padding: 0 4px;
    }

    /* Strip the outer content-card that wraps the Today's Bookings
       section on mobile — matches the bookings-page layout (search +
       funnel free-floating above cards, no card wrapper). */
    #qr-scanner .todays-bookings-section > .modern-content-card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Funnel trigger — injected by JS. Sits to the right of the search
       input, matches the bookings page's top filter icon. */
    #qr-scanner .tb-filter-trigger {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        background: #fff;
        color: #4b5563;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
    }
    /* Search input — plain input, matches bookings-mobile's
       #bookingsMobileSearchBar input styling. */
    #qr-scanner .tb-top-search-input {
        flex: 1;
        min-width: 0;
        height: 40px;
        padding: 0.55rem 0.75rem;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.9rem;
        background: #fff;
        color: #111827;
        outline: none;
    }
    #qr-scanner .tb-top-search-input:focus {
        border-color: #6366f1;
    }
    .tb-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.6rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    .tb-filter-badge[hidden] { display: none; }
    /* Modern section header title row on mobile — flex so funnel sits right */
    #qr-scanner .modern-section-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }
    #qr-scanner .modern-section-header > div:first-child {
        flex: 1;
    }

    /* -----------------------------------------------------------------
       Card list styles — mirrors the bookings page's b-card look.
       ----------------------------------------------------------------- */
    #qr-scanner .tb-card {
        position: relative;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 12px 44px 12px 20px; /* right padding for 3-dot */
        display: flex;
        flex-direction: column;
        gap: 6px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .tb-card .tb-strip {
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 4px;
    }
    .tb-card .tb-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .tb-card .tb-ref {
        color: #6b7280;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.02em;
    }
    .tb-card .tb-status-badge {
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .tb-card .tb-status-badge.pending    { background: #fef3c7; color: #92400e; }
    .tb-card .tb-status-badge.checked-in { background: #d1fae5; color: #065f46; }
    .tb-card .tb-status-badge.no-show    { background: #fee2e2; color: #991b1b; }
    .tb-card .tb-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: #111827;
        line-height: 1.3;
    }
    .tb-card .tb-title-muted {
        color: #6b7280;
        font-weight: 500;
    }
    .tb-card .tb-meta {
        display: flex;
        gap: 12px;
        font-size: 0.8rem;
        color: #4b5563;
    }
    /* 3-dot "more" button — replaces per-card action buttons. Opens
       the tb-sheet-wrap bottom sheet with all card actions. */
    .tb-card .tb-more {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        color: #6b7280;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }
    .tb-card .tb-more:active { background: #f3f4f6; }

    /* Bottom action sheet — mirrors the bookings-page sheet. */
    .tb-sheet-wrap {
        position: fixed;
        inset: 0;
        z-index: 1100;
        pointer-events: none;
    }
    .tb-sheet-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0);
        transition: background 0.2s;
    }
    .tb-sheet-wrap.is-open { pointer-events: auto; }
    .tb-sheet-wrap.is-open .tb-sheet-backdrop { background: rgba(0, 0, 0, 0.35); }
    .tb-sheet {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-radius: 20px 20px 0 0;
        padding: 0.5rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
        transform: translateY(100%);
        transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
        max-height: 82vh;
        overflow-y: auto;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
    }
    .tb-sheet-wrap.is-open .tb-sheet { transform: translateY(0); }
    .tb-sheet-handle {
        width: 40px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 8px auto 12px;
    }
    .tb-sheet-title {
        text-align: center;
        font-size: 0.85rem;
        color: #6b7280;
        margin-bottom: 8px;
        font-weight: 600;
    }
    .tb-sheet-list {
        display: flex;
        flex-direction: column;
    }
    .tb-sheet-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 8px;
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
    }
    .tb-sheet-item:active { background: #f3f4f6; }
    .tb-sheet-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .tb-sheet-label {
        font-size: 0.95rem;
        font-weight: 600;
        color: #111827;
    }
    .tb-sheet-divider {
        height: 1px;
        background: #f3f4f6;
        margin: 6px 8px;
    }
    .tb-sheet-cancel {
        width: 100%;
        margin-top: 8px;
        padding: 12px;
        background: #f3f4f6;
        border: none;
        border-radius: 10px;
        font-size: 0.95rem;
        font-weight: 600;
        color: #374151;
        cursor: pointer;
    }

    /* -----------------------------------------------------------------
       Drawer (right-side slide-in) — populated by qr-scanner-mobile.js
       ----------------------------------------------------------------- */
    .tb-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;
    }
    .tb-filter-backdrop.open { opacity: 1; pointer-events: auto; }
    .tb-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;
    }
    .tb-filter-drawer.open { transform: translateX(0); }
    .tb-filter-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px 12px;
        border-bottom: 1px solid #f3f4f6;
    }
    .tb-filter-drawer-title {
        font-size: 1.1rem;
        font-weight: 700;
        margin: 0;
        color: #111827;
    }
    .tb-filter-drawer-close {
        background: transparent;
        border: none;
        font-size: 1.75rem;
        color: #6b7280;
        cursor: pointer;
        padding: 4px 8px;
        line-height: 1;
    }
    .tb-filter-drawer-body {
        padding: 16px 20px;
        overflow-y: auto;
        flex: 1;
    }
    .tb-filter-group { margin-bottom: 18px; }
    .tb-filter-group-label {
        display: block;
        font-size: 0.8rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .tb-filter-group input[type="text"] {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.9rem;
    }
    .tb-filter-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .tb-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;
    }
    .tb-filter-pill.selected {
        background: #eef2ff;
        border-color: #6366f1;
        color: #4338ca;
    }
    .tb-filter-drawer-footer {
        display: flex;
        gap: 8px;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid #f3f4f6;
    }
    .tb-filter-drawer-footer button {
        flex: 1;
        height: 42px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
    }
    .tb-filter-refresh {
        background: #f3f4f6;
        color: #374151;
        border: 1px solid #e5e7eb;
    }
    .tb-filter-close-btn {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #fff;
        border: none;
    }
    /* Bulk actions surfaces inside drawer as a link at the bottom */
    .tb-filter-bulk-trigger {
        margin-top: 8px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: transparent;
        border: none;
        color: #4338ca;
        font-weight: 600;
        cursor: pointer;
        padding: 6px 0;
    }
}

    /* ---------------------------------------------------------------
       Scan result card + Recent manual entries — modernise on mobile.
       Uses the same white-bordered-rounded card language as elsewhere.
       --------------------------------------------------------------- */
    #qr-scanner .scan-result-card {
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        padding: 14px 16px !important;
        margin-bottom: 12px !important;
        box-shadow: none !important;
    }
    #qr-scanner .scan-result-card.error {
        border-color: #fecaca !important;
        background: #fef2f2 !important;
    }
    #qr-scanner .scan-result-card.warning {
        border-color: #fde68a !important;
        background: #fffbeb !important;
    }
    /* Header row of the result card (title + status badge) */
    #qr-scanner .scan-result-card > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    #qr-scanner .scan-result-card h3 {
        font-size: 1.05rem !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* Info-row wrapper */
    #qr-scanner .scan-result-card > div:nth-child(2) {
        margin-bottom: 0 !important;
    }
    #qr-scanner .booking-detail-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
        gap: 8px !important;
        font-size: 0.85rem !important;
    }
    #qr-scanner .booking-detail-row:last-child {
        border-bottom: none !important;
    }
    #qr-scanner .booking-detail-row > span:first-child {
        color: #6b7280 !important;
        flex-shrink: 0 !important;
    }
    #qr-scanner .booking-detail-row > strong,
    #qr-scanner .booking-detail-row > span:last-child {
        color: #111827 !important;
        text-align: right !important;
        font-weight: 600 !important;
    }
    /* Unify badges inside the card */
    #qr-scanner .scan-result-card .badge {
        padding: 4px 10px !important;
        border-radius: 999px !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        white-space: nowrap !important;
    }

    /* Recent manual verifications — card list matching the tb-card
       pattern (colored left strip, header row, sub info). */
    #qr-scanner .recent-scan-item {
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        border-left: 4px solid #10b981 !important;
        border-radius: 10px !important;
        padding: 12px 14px !important;
        margin-bottom: 8px !important;
        box-shadow: none !important;
    }
    #qr-scanner .recent-scan-item.duplicate {
        border-left-color: #f59e0b !important;
    }
    #qr-scanner .recent-scan-item > div:first-child {
        gap: 8px !important;
    }
    #qr-scanner .recent-scan-item strong {
        color: #111827 !important;
        font-size: 0.95rem !important;
    }
    #qr-scanner .recent-scan-item .badge {
        padding: 3px 10px !important;
        border-radius: 999px !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
    }
    /* Section heading "Recent Manual Verifications" */
    #qr-scanner #recent-manual-entries-section h4 {
        font-size: 0.9rem !important;
        color: #374151 !important;
        margin-bottom: 10px !important;
    }
    /* The grey wrapper around the list — flatten on mobile */
    #qr-scanner #recent-manual-entries-list {
        background: transparent !important;
        padding: 0 !important;
        max-height: none !important;
    }
}

/* Desktop safety net — kills every mobile-only element that could
   linger if a user resized from mobile → desktop (the JS injected
   header would otherwise stay in the DOM and be visible). */
@media (min-width: 768px) {
    .tb-filter-trigger,
    .tb-filter-drawer,
    .tb-filter-backdrop,
    .tb-sheet-wrap { display: none !important; }
    #qr-scanner .tb-cards,
    #qr-scanner #todaysBookingsCards,
    #qr-scanner #tbMobileHeader,
    #qr-scanner .tb-mobile-header { display: none !important; }
    #qr-scanner .qr-inline-title,
    #qr-scanner .qr-inline-subtitle { display: none !important; }
    /* If the mobile module set `display: none` on the original header
       inline, override so desktop shows it again. */
    #qr-scanner .modern-section-header[style*="display: none"],
    #qr-scanner .modern-section-header[style*="display:none"] {
        display: flex !important;
    }
}

    /* ---------------------------------------------------------------
       Entrada Manual — collapsible card.
       Only the h3 shows when collapsed; tap to expand.
       --------------------------------------------------------------- */
    #qr-scanner .qr-scanner-card.me-collapsible {
        cursor: default;
    }
    #qr-scanner .qr-scanner-card.me-collapsible h3 {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        margin: 0 !important;
    }
    #qr-scanner .qr-scanner-card.me-collapsible h3 .me-chevron {
        display: inline-flex;
        transition: transform 0.2s ease;
        color: #6b7280;
        flex-shrink: 0;
    }
    /* When expanded, chevron rotates 180deg (points up) */
    #qr-scanner .qr-scanner-card.me-collapsible:not(.is-collapsed) h3 .me-chevron {
        transform: rotate(180deg);
    }
    /* Collapse everything below the h3 — description, input group, Gerar
       wrapper, recent entries. Grid-view children only (skip h3 itself). */
    #qr-scanner .qr-scanner-card.me-collapsible.is-collapsed > *:not(h3) {
        display: none !important;
    }
    /* Tighten the card when collapsed so it's just a header row. */
    #qr-scanner .qr-scanner-card.me-collapsible.is-collapsed {
        padding: 14px 18px !important;
    }

    /* Button visual tune — align heights, match app palette.
       Verificar = purple gradient primary. Gerar = purple outline secondary. */
    #qr-scanner .manual-entry-btn {
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        color: #fff !important;
        border: none !important;
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 0.95rem !important;
        padding: 0 12px !important;
        box-shadow: none !important;
    }
    #qr-scanner button[onclick*="showGenerateQRModal"] {
        background: #fff !important;
        color: #4338ca !important;
        border: 1.5px solid #c7d2fe !important;
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 0.95rem !important;
        padding: 0 8px !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }
}