/* ==========================================================================
   COMPLETE MOBILE & IOS SAFARI REFACTOR (Max-width: 768px)
   ========================================================================== */

/* 1. SAFARI 16px INPUT ZOOM FIX */
@media screen and (-webkit-min-device-pixel-ratio:0) {

    input,
    select,
    textarea,
    .form-input,
    #dash-main-search,
    #mreg-query,
    #nf-search-input {
        font-size: 16px !important;
    }
}






/* 1. SAFARI 16px INPUT ZOOM FIX */
@media screen and (-webkit-min-device-pixel-ratio:0) {

    input,
    select,
    textarea,
    .form-input,
    #dash-main-search,
    #mreg-query,
    #nf-search-input {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {

    /* =======================================================
       1. APP SHELL & NATIVE FEEL
       ======================================================= */
    html,
    body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        background-color: #f0f4f8 !important;
        /* Soft mobile background */
    }

    .admin-layout {
        display: block !important;
        height: 100dvh !important;
        /* Use dynamic viewport height */
        width: 100vw !important;
    }

    /* Main Content Area - Padding for bottom App Bar */
    .portal-main {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: calc(85px + env(safe-area-inset-bottom)) !important;
        /* Clear the bottom nav */
        display: block !important;
    }

    /* Panels take full width and scroll naturally */
    .main-panel:not(.active) {
        display: none !important;
    }

    .main-panel.active {
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        width: 100% !important;
        min-height: 100% !important;
        height: auto !important;
    }

    /* Hide desktop-only UI */
    .event-drawer,
    .app-footer,
    #settings-dropdown,
    .rail-header {
        display: none !important;
    }

    /* =======================================================
       2. GLASSMORPHIC BOTTOM APP BAR (The Icon Rail)
       ======================================================= */
    .icon-rail {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: calc(65px + env(safe-area-inset-bottom)) !important;
        flex-direction: row !important;
        justify-content: space-evenly !important;
        align-items: center !important;
        padding: 5px 10px env(safe-area-inset-bottom) 10px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
        border-right: none !important;
        z-index: 10000 !important;

        /* Immersive Glass Effect */
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(20px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
        box-shadow: 0 -10px 30px rgba(32, 65, 100, 0.08) !important;
    }

    .rail-item-container {
        flex: 1 !important;
        display: flex !important;
    }

    .rail-item {
        flex: 1 !important;
        margin: 0 !important;
        height: 100% !important;
        justify-content: center !important;
        color: #94a3b8 !important;
        border-left: none !important;
        border-bottom: 3px solid transparent !important;
        /* Move active bar to bottom */
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    .rail-item.active {
        background: transparent !important;
        color: var(--primary) !important;
        transform: translateY(-4px);
        /* Active items pop up slightly */
    }

    .rail-item .material-icons {
        font-size: 24px !important;
    }

    .rail-item .rail-text {
        font-size: 9px !important;
        font-weight: 700 !important;
        margin-top: 4px !important;
        letter-spacing: 0.5px !important;
    }

    /* Center "NEW" Button (Floating Action Button style) */
    #rail-new-btn {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 56px !important;
        height: 56px !important;
        margin: -25px 10px 0 10px !important;
        /* Break out of the top of the bar */
        border-radius: 50% !important;
        background: var(--primary) !important;
        color: white !important;
        box-shadow: 0 10px 20px rgba(32, 65, 100, 0.3) !important;
        order: 2 !important;
        /* Force to center visually */
    }

    #rail-new-btn .material-icons {
        font-size: 28px !important;
    }

    /* =======================================================
       3. STICKY GLASS HEADER
       ======================================================= */
    .dash-nav {
        position: sticky !important;
        top: 0 !important;
        padding: calc(15px + env(safe-area-inset-top)) 20px 15px 20px !important;
        height: auto !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        z-index: 9000 !important;

        background: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    }

    .header-logo-banner {
        height: 45px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    #mobile-dash-controls {
        width: 100% !important;
        justify-content: space-between !important;
        background: transparent !important;
        padding: 0 !important;
    }

    /* =======================================================
       4. DASHBOARD & CARDS (Edge-to-Edge feel)
       ======================================================= */
    .view-body,
    #system-dashboard.view-body {
        padding: 15px !important;
    }

    .upcoming-cards-grid,
    .venue-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 10px 0 !important;
    }

    .premium-card,
    .wizard-card {
        margin: 0 !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 25px -5px rgba(32, 65, 100, 0.08) !important;
        border: none !important;
    }

    /* Stack Event Panels (Left table, Right sidebars) */
    .event-dashboard-layout {
        display: flex !important;
        flex-direction: column !important;
        padding: 15px !important;
        gap: 20px !important;
        height: auto !important;
        overflow: visible !important;
    }

    .event-main-content,
    .event-sidebar-right {
        width: 100% !important;
    }

    .event-sidebar-right {
        margin-top: 10px !important;
    }

    /* =======================================================
       5. DATA TABLES (Horizontal Swiping)
       ======================================================= */
    .panel-body-scroll {
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 16px !important;
        border: 1px solid var(--border) !important;
        background: white !important;
    }

    /* Ensure tables don't squish, allow user to swipe to see columns */
    engagement-table {
        min-width: 800px !important;
    }

    /* =======================================================
       6. MODALS AS iOS BOTTOM SHEETS
       ======================================================= */
    .modal-overlay {
        align-items: flex-end !important;
        /* Push modal to bottom */
        padding: 0 !important;
    }

    .modal-box {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        max-height: 90dvh !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        animation: slideUpSheet 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    @keyframes slideUpSheet {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .modal-hero {
        padding: 30px 20px !important;
    }

    .modal-body-scroller {
        padding: 20px 15px !important;
    }

    .tab-content {
        padding: 15px 0 !important;
    }

    .form-grid-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Floating Close Button adjustments for Bottom Sheet */
    .close-wizard-btn,
    .close-modal-float {
        top: 15px !important;
        right: 15px !important;
        background: rgba(255, 255, 255, 0.2) !important;
    }

    /* =======================================================
       7. IMMERSIVE KIOSK MODE
       ======================================================= */
    #view-kiosk {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    .kiosk-branding-header {
        position: absolute !important;
        top: calc(20px + env(safe-area-inset-top)) !important;
        z-index: 1000 !important;
    }

    .kiosk-pro-logo {
        max-width: 100% !important;
    }


    /* Shrink corners slightly for mobile */
    .scanner-corner {
        width: 30px !important;
        height: 30px !important;
        border-width: 3px !important;
    }


    /* Floating terminal controls */
    .kiosk-terminal-controls {
        bottom: calc(30px + env(safe-area-inset-bottom)) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90vw !important;
        justify-content: center !important;
        gap: 15px !important;
    }

    .terminal-btn {
        width: 56px !important;
        height: 56px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

    /* =======================================================
       8. KIOSK & SPINNER SAFETY (Hide admin tools)
       ======================================================= */
    #panel-event .btn-settings-header,
    #panel-event .toolbar-toggle-group,
    .btn-gear-card,
    .btn-row-settings {
        display: none !important;
    }

    #panel-event .header-actions-group {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 10px !important;
        margin-top: 15px !important;
    }

    #panel-event .header-actions-group button {
        flex: 1 !important;
        height: 54px !important;
        font-size: 0.95rem !important;
        border-radius: 12px !important;
    }

    /* Spinner Wheel Adjustments */
    #wheel-container {
        width: 90vw !important;
        height: 90vw !important;
        margin: 20px auto !important;
    }

    #spinner-names-sidebar {
        display: none !important;
        /* Hide sidebar on mobile so wheel is full screen */
    }



    /* =======================================================
       📱 1. EVENT META HEADER (Date, Loc, Time)
       ======================================================= */

    #dash-meta-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* 2 columns */
        gap: 12px !important;
        width: 100% !important;
        margin-top: 15px !important;
    }

    .header-meta-item {
        font-size: 0.8rem !important;
        align-items: flex-start !important;
        /* Top-align icons with wrapping text */
    }

    /* Force the attendance/quorum badges to span the full width below the text */
    #dash-meta-row .attendance-badge {
        grid-column: 1 / -1 !important;
        justify-content: center !important;
        padding: 10px !important;
        font-size: 0.85rem !important;
        margin: 0 !important;
    }

    /* =======================================================
       📱 2. REGISTRANT DIRECTORY: HEADER CONTROLS
       ======================================================= */

    #panel-event .event-main-content .panel-header {
        flex-direction: column !important;
        height: auto !important;
        padding: 15px !important;
        gap: 15px !important;
    }

    /* Top Row (Walk-in Btn + Title + Search) */
    #panel-event .event-main-content .panel-header>div:first-child {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* Force Search Bar to its own full-width line */
    #panel-event .event-main-content .search-row-wrapper {
        width: 100% !important;
        margin: 5px 0 0 0 !important;
        height: 44px !important;
    }

    #reg-directory-search:focus {
        width: 100% !important;
        /* Stop desktop expansion animation */
    }

    /* Bottom Row (School Filter + Toggles) */
    #panel-event .event-main-content .panel-header>div:last-child {
        width: 100% !important;
        flex-direction: column !important;
        /* Stack them */
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* Hide the 1px desktop vertical divider */
    #panel-event .event-main-content .panel-header>div:last-child>div[style*="width: 1px"] {
        display: none !important;
    }

    /* Make School Dropdown full width */
    #panel-event .event-main-content .panel-header>div:last-child>div:first-child {
        width: 100% !important;
    }

    /* Make tiny filter toggles large and evenly spaced */
    #panel-event .event-main-content .panel-header>div:last-child>div:last-child {
        justify-content: space-evenly !important;
        padding: 5px !important;
    }

    .btn-sidebar-tiny {
        width: 44px !important;
        height: 44px !important;
    }

    .btn-sidebar-tiny .material-icons {
        font-size: 22px !important;
    }

    /* =======================================================
       📱 HERO BUTTON FIX & CENTERING
       ======================================================= */

    /* 1. ABSOLUTELY NUKE THE DRAW PRIZE BUTTON */
    /* 1. Target the unnamed flex container holding these buttons */
    #panel-event .dash-nav>div:last-child {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        /* Stacks the button instead of putting them side-by-side */
        align-items: center !important;
        margin-top: 15px !important;
        padding: 0 15px !important;
    }

    /* 2. ABSOLUTELY NUKE THE DRAW PRIZE & SETTINGS BUTTONS */
    #panel-event button[onclick*="openSpinner"],
    #panel-event button.btn-settings-header,
    #panel-event .toolbar-toggle-group {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        position: absolute !important;
    }

    /* 3. STYLE & CENTER THE LAUNCH KIOSK BUTTON */
    /* Target via the exact onclick function to bypass inline styles */
    #panel-event button[onclick*="startReception"] {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        width: 85% !important;
        max-width: 340px !important;
        /* Slimmed down width */
        height: 45px !important;
        /* Reduced from 65px (Standard premium touch target) */
        margin: 0 0 10px 10px !important;
        padding: 0 !important;

        background-color: var(--accent) !important;
        border-color: var(--accent) !important;
        color: white !important;

        border-radius: 25px !important;
        /* Matches the cards below */
        font-size: 1.05rem !important;
        /* Scaled down from 1.25rem */
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        box-shadow: 0 8px 15px -4px rgba(243, 156, 18, 0.3) !important;
        /* Softer, tighter shadow */
        transition: all 0.2s ease !important;
    }

    #panel-event button[onclick*="startReception"] .material-icons {
        font-size: 24px !important;
        /* Scaled down from 28px */
        margin-right: 8px !important;
    }




    /* =======================================================
       📱 3. REGISTRANT DIRECTORY: THE BULLETPROOF LIST
       ======================================================= */

    .reg-table,
    .reg-table tbody,
    .reg-table tr {
        display: block !important;
        width: 100% !important;
    }

    .reg-table thead {
        display: none !important;
    }

    /* Nuke Headers */

    /* The "Card" Look */
    .reg-table tr {
        display: grid !important;
        grid-template-columns: 85px 1fr 45px !important;
        grid-template-rows: auto auto !important;
        /* Allows vertical stacking in the middle */
        align-items: center !important;
        padding: 15px 12px !important;

        background: white !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03) !important;
        gap: 0 15px !important;
    }

    .reg-table tr.row-attended {
        background: #f0fff4 !important;
        border-color: #c6f6d5 !important;
    }

    /* THE SLEDGEHAMMER: Hide EVERY data cell by default */
    .reg-table td {
        display: none !important;
        padding: 0 !important;
        border: none !important;
        height: auto !important;
    }

    /* Resurrect Status, Name, SCHOOL (Targeted via Data-Field), and Actions */
    .reg-table td.col-status,
    .reg-table td.col-name,
    .reg-table td[data-field="school"],
    /* <--- THE FIX IS HERE */
    .reg-table td:last-child {
        display: flex !important;
    }

    /* 1. Status Column */
    .col-status {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        border-right: 1px dashed #e2e8f0 !important;
        padding-right: 10px !important;
        height: 100% !important;
    }

    .status-cell-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .arrival-time-display {
        font-size: 0.6rem !important;
        text-align: center !important;
        margin-top: 6px !important;
        white-space: normal !important;
    }

    /* 2. Name & Email */
    .col-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        overflow: hidden !important;
        padding-left: 5px !important;
        padding-bottom: 2px !important;
    }

    .col-name>div:first-child {
        font-size: 1.1rem !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* 3. School (Targeting via data-field) */
    .reg-table td[data-field="school"] {
        grid-column: 2 !important;
        grid-row: 2 !important;
        padding-left: 5px !important;
        padding-top: 2px !important;
        font-size: 0.8rem !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        align-items: flex-start !important;
        opacity: 0.85 !important;
    }

    /* 4. Action Buttons */
    .reg-table td:last-child {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100% !important;
    }

    .reg-table td:last-child .delete-btn,
    .reg-table td:last-child button[onclick*="confirmSoftDelete"],
    .reg-table td:last-child button[onclick*="confirmResurrect"] {
        display: none !important;
    }

    .reg-table td:last-child>div {
        flex-direction: column !important;
    }

    .reg-table td:last-child .btn-sidebar-tiny {
        width: 40px !important;
        height: 40px !important;
    }

    /* =======================================================
       📱 2. RECEPTION GATEWAY: THE HERO CTA
       ======================================================= */

    /* Fix the layout of the top title area to align the back arrow nicely */
    #panel-event .dash-nav>div:first-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 15px !important;
    }

    /* Make the back button feel native */
    #panel-event .dash-nav .btn-action {
        margin-top: 4px !important;
        padding: 0 !important;
        background: transparent !important;
        color: var(--primary) !important;
    }

    #panel-event .dash-nav .btn-action .material-icons {
        font-size: 28px !important;
    }

    /* The 'Launch Kiosk' Button Transformation */
    #panel-event .header-actions-group {
        display: block !important;
        width: 100% !important;
        margin: 15px 0 25px 0 !important;
        /* Space it out from the directory */
    }

    #panel-event .header-actions-group button[onclick*="startReception"] {
        width: 100% !important;
        height: 70px !important;
        /* Massive tap target */
        font-size: 1.3rem !important;
        font-weight: 900 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        border-radius: 20px !important;
        background: var(--accent) !important;
        /* OECTA Orange for high visibility */
        color: white !important;
        box-shadow: 0 15px 25px -5px rgba(243, 156, 18, 0.4) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        transition: transform 0.1s ease !important;
    }

    #panel-event .header-actions-group button[onclick*="startReception"]:active {
        transform: scale(0.96) !important;
        /* Satisfying physical press feel */
    }

    #panel-event .header-actions-group button[onclick*="startReception"] .material-icons {
        font-size: 32px !important;
        margin-right: 12px !important;
    }

   /* =======================================================
       3. IMMERSIVE KIOSK (NATIVE CAMERA FEEL) - PURE FLEXBOX
       ======================================================= */
    
    /* CRITICAL FIX: Only force display:flex when the view is ACTIVE */
    #view-kiosk.active {
        display: flex !important;
    }

    /* Apply layout rules, but DO NOT force display here */
    #view-kiosk {
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 100dvh !important;
        background: #000 !important;
        background-image: none !important;
        /* Safe area insets protect against notches and navigation pills */
        padding: calc(15px + env(safe-area-inset-top)) 0 calc(25px + env(safe-area-inset-bottom)) 0 !important;
        box-sizing: border-box !important;
    }

    /* 1. TOP: Logo */
    .kiosk-branding-header {
        order: 1 !important;
        position: relative !important;
        top: auto !important;
        margin: 0 0 15px 0 !important;
        flex-shrink: 0 !important; /* Prevents logo from squishing */
        z-index: 1000 !important;
    }

    /* 2. MIDDLE-TOP: Search Bar (Moved above camera) */
    .kiosk-search-integrated-row {
        order: 2 !important; /* Pushed up */
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 90vw !important;
        margin: 0 auto 15px auto !important; /* Spacing between search and camera */
        z-index: 2000 !important; /* Critical: Ensures dropdown spills OVER the camera */
        flex-shrink: 0 !important;
    }

    /* 3. MIDDLE-BOTTOM: Camera Stage */
    .kiosk-main-stage {
        order: 3 !important; /* Pushed down */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        flex: 1 !important; /* Takes all remaining vertical space */
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 0 !important; 
        padding: 0 0 10px 0 !important;
    }

    /* Keep orange brackets locked onto the video */
    .scanner-window-container {
        width: 85vw !important;
        height: 85vw !important;
        max-height: 100% !important; 
        max-width: 400px !important;
        border-radius: 36px !important;
        border: none !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
        margin: 0 !important;
        position: relative !important; 
    }

    .scanner-search-wrap {
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(10px) !important;
        height: 60px !important;
        border-radius: 16px !important;
    }

    .scanner-search-wrap input::placeholder {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* 4. BOTTOM-BOTTOM: Terminal Controls */
    .kiosk-terminal-controls {
        order: 4 !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100vw !important;
        padding: 0 25px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .terminal-btn {
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important; /* Circular buttons like iOS Camera app */
        background: rgba(255, 255, 255, 0.2) !important;
    }

    .terminal-btn .material-icons {
        font-size: 28px !important;
    }

    /* =======================================================
       📱 4. POLISHING ALIGNMENTS & SEARCH BAR
       ======================================================= */

    /* 1. Perfect Centering for Top Badges */
    #dash-meta-row .attendance-badge {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Full-Width "Launch Kiosk" Button */
    #panel-event .header-actions-group {
        display: flex !important;
        width: 100% !important;
        padding: 0 !important;
    }

    #panel-event .header-actions-group button[onclick*="startReception"] {
        width: 100% !important;
        flex: 1 !important;
        /* Force it to fill the flex container */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
    }

    /* 3. Premium Mobile Search Bar */
    /* Overrides the inline style="width: 300px;" from the HTML */
    #panel-event .event-main-content .search-row-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: 54px !important;
        /* Taller, touch-friendly height */
        background: white !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    #panel-event .event-main-content .search-row-wrapper:focus-within {
        border-color: var(--primary) !important;
        box-shadow: 0 4px 12px rgba(32, 65, 100, 0.1) !important;
    }

    /* Fix the magnifying glass icon positioning */
    #panel-event .event-main-content .search-row-wrapper .search-icon-fixed {
        position: static !important;
        transform: none !important;
        margin-right: 12px !important;
        color: #94a3b8 !important;
        font-size: 22px !important;
    }

    /* Fix the actual input field (Overrides inline padding) */
    #reg-directory-search {
        flex: 1 !important;
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        /* Strips the desktop 40px left padding */
        font-size: 1rem !important;
        /* 16px is critical to prevent iOS Safari auto-zoom */
        color: var(--primary) !important;
        font-weight: 600 !important;
        outline: none !important;
        box-shadow: none !important;
    }

    #reg-directory-search::placeholder {
        color: #cbd5e0 !important;
        font-weight: 500 !important;
    }

    /* Re-align the "X" clear button inside the new flex layout */
    #panel-event .event-main-content .search-row-wrapper .search-clear-btn {
        position: static !important;
        margin-left: 10px !important;
        background: #f1f5f9 !important;
        border-radius: 50% !important;
        padding: 4px !important;
    }


    /* Add a tiny bit of space between the magnifying glass and the text */
    #reg-directory-search {
        padding-left: 8px !important;
    }

    /* Darken the unselected filter icons so they don't wash out against the light background */
    #panel-event .event-main-content .panel-header>div:last-child>div:last-child .btn-sidebar-tiny .material-icons {
        color: #64748b !important;
    }

    /* Ensure they stay white when activated */
    #panel-event .event-main-content .panel-header>div:last-child>div:last-child .btn-sidebar-tiny.active-navy .material-icons,
    #panel-event .event-main-content .panel-header>div:last-child>div:last-child .btn-sidebar-tiny.active-orange .material-icons {
        color: #ffffff !important;
    }



    /* =======================================================
       📱 5. SCROLLING ARCHITECTURE — SELF-CONTAINED EVENT VIEW
       ======================================================= */

    /*
     * ARCHITECTURE:
     * Rather than fighting .portal-main's many competing rules, #panel-event
     * becomes its own independent fixed scroll container. .portal-main is
     * irrelevant while the event panel is active.
     *
     * Phase 1 — User scrolls UP inside #panel-event: the event header (title,
     *            date, location, badges, Launch Kiosk) slides off the top.
     * Phase 2 — Once .event-main-content reaches top:0 it sticks. From here,
     *            only the attendee list scrolls internally.
     *
     * Total content height = dash-nav (~250px) + event-main-content (~850px)
     * Container height = calc(100dvh - 65px) (~850px)
     * → ~250px of page scroll available before the directory locks in.
     */

    /* Step 1 — #panel-event IS the scroll container.
       position:fixed puts it above .portal-main with no interference.
       overflow-y:auto enables native touch scrolling of its full content. */
    #panel-event.active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: calc(100dvh - 65px - env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: column !important;
        background: #f0f4f8 !important;
        z-index: 200 !important;
    }

    /* Step 2 — The event header scrolls naturally (not sticky).
       This is the content the user scrolls PAST. */
    #panel-event .dash-nav {
        position: relative !important;
        z-index: 10 !important;
        flex-shrink: 0 !important;

    }

    /* Step 3 — Hide desktop-only sidebar panels.
       Mobile only needs the registrant list + Launch Kiosk button. */
    #panel-event .event-sidebar-right {
        display: none !important;
    }

    /* Step 4 — Layout wrapper expands freely. */
    #panel-event .event-dashboard-layout {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        gap: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex: 1 !important;
    }

    /* Step 5 — THE STICKY PANEL.
       Once this scrolls to top:0 inside #panel-event, it locks and fills
       exactly the height of the scroll container. */
    #panel-event .event-main-content {
        position: sticky !important;
        height: calc(100dvh - env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        z-index: 50 !important;
    }

    /* Step 6 — The white card fills the sticky panel completely. */
    #panel-event .event-main-content .event-panel {
        flex: 1 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        border: none !important;
        border-top: 1px solid var(--border) !important;
        background: white !important;
        box-shadow: none !important;
    }

    /* Step 7 — Registrant Directory filter bar: always visible at top of
       the sticky panel, never scrolls away. */
    #panel-event .event-main-content .panel-header {
        position: relative !important;
        flex-shrink: 0 !important;
        z-index: 100 !important;
        background: rgba(248, 250, 252, 0.97) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        padding: 15px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.06) !important;
    }

    /* Step 8 — Attendee list: scrolls within the sticky panel.
       flex:1 + height:0 is the reliable trick that fills remaining space. */
    #panel-event .event-main-content .panel-body-scroll {
        flex: 1 !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 0 20px 0 !important;
        background: white !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }






















}