.main-portal-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
}

/* Actions & Dynamic Dashboard Layout Rows */
.portal-actions-bar,
.portal-navigation-dashboard {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;      /* Overrides hidden layout limits */
    box-sizing: border-box !important;
    gap: 0px;  /* 12px !important;  /* Clean spacing between the stacked buttons */
}

/* Branding Core Shield Constraint Metrics */
.portal-branding-zone {
    width: 100%;
    max-width: 768px; /* Preserves old home_pages_image width layout restriction */
    margin: 10px auto;
}

.portal-logo-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.portal-modal {
    display: none;             /* Hidden by default, triggered by JS */
    position: fixed !important; /* Locks it to the screen viewport, breaking out of layout rows */
    z-index: 9999 !important;   /* Forces it onto the absolute highest visual layer on top of the logo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;             /* Allows scrolling if the image is tall on mobile */
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background backdrop */
}

/* Position the lightbox content container nicely in the center */
.modal-content {
    position: relative;
    background-color: #ffffff;
    margin: 10% auto;          /* 10% down from the top of the screen */
    padding: 20px;
    border-radius: 8px;
    width: 80%;                /* Takes up 80% of screen width */
    max-width: 600px;          /* Sharp limit so it doesn't blow out on wide PC monitors */
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* ==========================================================================
   3. Responsive Design Rules (Main Homepage Portal Layouts)
   ========================================================================== */

/* --- PC Desktop & Tablet Layout Rules --- */
@media (min-width: 768px) {
    .portal-actions-bar,
    .portal-navigation-dashboard {
        display: flex !important;
        flex-direction: column !important; /* Forces homepage buttons to stack vertically on PC screens */
        align-items: stretch !important;   /* FIXED: Instructs the browser to force all child buttons to fill out full horizontal width */
        width: 100% !important;
        max-width: 100% !important;
        gap: 0px !important;              /* Clean spacing between the stacked buttons */
        box-sizing: border-box !important; /*15px !important; /
    }
    
    .portal-actions-bar > .menu-button,
    .portal-navigation-dashboard > .menu-button {
        width: 100% !important;            /* FIXED: Unlocks the 100% full width breakout across PC screens */
        max-width: none !important;        /* CHANGED: Removes the 600px block restriction entirely */
        display: block !important;
        box-sizing: border-box !important;
    }
}

/* --- iPhone & Mobile Phone Layout Rules --- */
@media (max-width: 767px) {
    .portal-actions-bar,
    .portal-navigation-dashboard {
        flex-direction: column !important; 
        align-items: stretch !important;   
        width: 100% !important;
    }
    
    .portal-actions-bar > .menu-button,
    .portal-navigation-dashboard > .menu-button,
    .menu-button {
        display: block !important;         
        width: 100% !important;            
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}