/* ==========================================================================
   💻 STANDARD DESKTOP VIEWPORTS (Large Monitors & Spacious Layouts)
   ========================================================================== */
.portal-dashboard-grid {
    display: grid;
    /* Uses fluid column metrics: Left sidebar (300px), Center (flexible), Right sidebar (340px) */
    grid-template-columns: 300px 1fr 340px; 
    gap: 12px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 5px;
    box-sizing: border-box;
    align-items: start;
}

.dashboard-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.portal-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Base configuration: Hide phone helpers when fully expanded on monitor layouts */
.mobile-swipe-notice {
    display: none !important;
}

/* ==========================================================================
   📱 MOBILE & TABLET LAYOUTS (Activates at 991px down to smallest cell screens)
   ========================================================================== */
/* 👑 FIX: Changed from 1024px to 991px so tablets held horizontally get the full wide 3-column layout! */
@media (max-width: 991px) {
    .portal-dashboard-grid {
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box;
        padding: 5px !important;
        gap: 15px !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Safely completely hide the layout scrollbar engines from tracking views */
    .portal-dashboard-grid::-webkit-scrollbar { display: none !important; width: 0; height: 0; }
    .portal-dashboard-grid { -ms-overflow-style: none !important; scrollbar-width: none !important; }

    /* 🌟 FLUID CELL BLOCK CLAMP: Ensure panels scale properly on tiny phone frames */
    .portal-dashboard-grid .dashboard-col,
    .portal-dashboard-grid aside,
    .portal-dashboard-grid main {
        display: flex !important;
        flex-direction: column !important;
        min-width: 92vw !important;  
        max-width: 92vw !important;
        width: 92vw !important;
        flex-shrink: 0 !important;   
        scroll-snap-align: center !important;
        height: auto !important;
    }

    /* Force column items to scale down cleanly internally on small screens */
    .portal-card {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    /* Activate and display your swipe assistant navigation info text banner */
    .mobile-swipe-notice {
        display: block !important;
        text-align: center;
        font-size: 10px;
        color: #64748b;
        margin-bottom: 10px;
        font-weight: bold;
    }
}

/* 🖥️ DEFAULT RULES: Hides the swipe notice banner entirely on desktop/PC monitors */
#mobile-swipe-notice {
    display: none;
}

/* 📱 BREAKPOINT RULES: Only triggers on screens smaller than 992px wide (Tablets & Phones) */
/* 👑 FIX: Changed from 1023px to 991px to perfectly align your text notice rules! */
@media (max-width: 991px) {
    #mobile-swipe-notice {
        display: block !important;
    }
}

/* 📱 SWIPE PATTERN RESPONSIVENESS (MOBILE PHONE GRID ENGAGEMENTS) */
@media (max-width: 767px) {
    /* Drops the admin button out of sight ONLY on compact cell phones */
    .desktop-only-admin-btn {
        display: none !important;
    }
}