/* General body styling for dark mode and centering the main container */

body {

    display: flex;
    justify-content: center;
    min-height: 100vh; /* Full viewport height */
    margin: 0;
    background-color: #1a1a1a; /* Dark background for the page */
    font-family: 'Inter', sans-serif; /* Modern font */
    overflow-y: auto; /* Allow body to scroll if content exceeds viewport height */
    color: #e0e0e0; /* Light text color for overall page */
    padding: 0; /* Padding around the entire content */
    box-sizing: border-box; /* Include padding in element's total width and height */
    margin-bottom: 30px;

}

 h1 {

    color: #b0b0b0; /* A distinct color for the title */
    font-size: xx-large;
    text-align: center;
            
}

  a {
    color: white;
    text-decoration: none;
  }

  a:hover {
    color:#a5a5a5;
  }

/* Main container for the app guide and app grid. It's categorized as class in order to keep it consistent across all pages of the website */

.app-page-container {
    /* position of app-page-container */
    margin-top: 70px;
    /* dimensions of app-page-container */
    width: 100vw; /* Occupy 90% of viewport width */
    max-width: 100%; /* Limit maximum width for large screens */
    min-height: 80vh; /* Minimum height, expands with content */
    background-color: #2c2c2c; /* Darker background for the main content area */
    border-radius: 25px; /* Rounded corners for the container */    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); /* Prominent shadow */    
    display: flex;
    flex-direction: column;
    padding: 30px; /* Internal padding for the container */
    box-sizing: border-box; /* Include padding in width/height */
            /* No overflow hidden here, let content dictate scroll if needed */

}

/* Styling for the collapsible VI Guide section */
        
.vi-guide-section {

            
    background-color: #3a3a3a; /* Slightly lighter dark background */
    border-radius: 15px;
    margin-bottom: 25px; /* Space below the guide section */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);  
    transition: all 0.3s ease; /* Smooth transition for open/close */   
    overflow: hidden; /* Hide overflow if content is large */
 
}

/* Styling for the summary (header) of the collapsible section */

.vi-guide-header {

            
    padding: 18px 25px;    
    font-size: 1.4em;   
    font-weight: bold;   
    color: #f0f0f0;     
    cursor: pointer;     
    display: flex;    
    align-items: center;         
    justify-content: space-between;    
    transition: background-color 0.2s ease;    
    user-select: none; /* Prevent text selection on summary */

}

/* Hide default triangle marker for details summary */

.vi-guide-header::-webkit-details-marker,
.vi-guide-header::marker {

    display: none;

}

/* Custom arrow for collapsible section */

.vi-guide-header::after {

    content: '▼'; /* Down arrow for closed state */
    font-size: 0.8em;
    margin-left: 10px;
    transition: transform 0.3s ease;

}

/* Rotate arrow when section is open */

.vi-guide-section[open] .vi-guide-header::after {

    content: '▲'; /* Up arrow for open state */

}

.vi-guide-header:hover {

    background-color: #4a4a4a; /* Slightly darker on hover */

}

/* Styling for the content within the collapsible section */

.vi-guide-content {

    padding: 0 25px 25px; /* Adjust padding when open */
    font-size: 0.95em;
    color: #c0c0c0;
    line-height: 1.6;
    max-height: 0; /* Hidden by default for transition */
    overflow: hidden; /* Hide overflowing content */
    transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* Smooth slide effect */

}

/* Expand content when details is open */

.vi-guide-section[open] .vi-guide-content {

    max-height: 300px; /* A large enough value to cover content height */
    padding-top: 15px;
 
}

/* App grid container - now fills remaining space */

.app-drawer-scroll-area {

flex-grow: 1; /* Allows this area to take up available space */
padding-top: 10px; /* Space between guide and apps */

/* Removed overflow-y: auto here, as main container handles overall scroll */

}

/* Grid layout for app icons - spreads across screen */

.app-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Dynamic columns */
    gap: 30px; /* Increased space between grid items */
    justify-items: center; /* Center items within their grid cells */
    padding: 10px 0;

}

/* Styling for individual app icons */

.app-icon {

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none; /* Remove underline from links */
    color: #c0c0c0; /* Light grey text color for app names */
    font-size: 0.9em; /* Larger font for app names */
    transition: transform 0.2s ease-in-out; /* Smooth hover effect */
    width: 100px; /* Larger fixed width for consistent icon layout */
 
}

.app-icon:hover {

    transform: scale(1.08); /* Slightly enlarge on hover */

}

.app-icon img {

    width: 70px; /* Larger icon size */
    height: 70px;
    border-radius: 15px; /* Consistent rounded corners */
    margin-bottom: 10px; /* More space between icon and text */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); /* Deeper shadow */

}

.app-icon span {

    word-break: break-word; /* Ensures long app names wrap */
    max-width: 100%; /* Prevents text overflow */
    font-weight: 500;
    line-height: 1.3; /* Adjust line height for better readability */

}

/* Responsive Adjustments */

@media (max-width: 768px) {

    .app-page-container {

        margin: 20px;
        padding: 20px;
        border-radius: 20px;

    }
    
    .vi-guide-header {

        font-size: 1.2em;
        padding: 15px 20px;

    }
    
    .vi-guide-content {
        font-size: 0.9em;
        padding: 0 20px 20px;
    
    }

    .app-grid {

        gap: 25px;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* More columns on smaller screens */
     
    }
    
    .app-icon {

        width: 90px;

    }

    .app-icon img {

        width: 60px;
        height: 60px;

    }
    
    .app-icon span {

        font-size: 0.85em;

    }

}

@media (max-width: 480px) {

    .app-page-container {

        padding: 15px;
        border-radius: 20px;

    }

    .vi-guide-header {

        font-size: 1em;
        padding: 12px 15px;

    }

    .vi-guide-content {

        font-size: 0.85em;
        padding: 0 15px 15px;

    }

    .app-grid {

        gap: 20px;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Adjust columns for mobile */
 
    }

    .app-icon {

        width: 80px;

    }
    
    .app-icon img {

        width: 50px;
        height: 50px;
        border-radius: 12px;

    }

    .app-icon span {

        font-size: 0.75em;

    }

}

/* BOTTOM BAR CLOCK CSS : BEGINS */

    /* Ensure Inter and Share Tech Mono fonts are imported if not already. */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Share+Tech+Mono&display=swap');

    /* Adjust body padding if not already done */
    body {
        padding-bottom: 80px; /* Crucial: Creates space for the fixed footer bar */
        margin-bottom: 60px;
    }

    /* Fixed bottom bar styling */
    .bottom-bar {

        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #1c1c1c;
        color: #f0f0f0;
        padding: 10px 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        border-top: 2px solid #555555;
        box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.5);
        font-family: 'Share Tech Mono', monospace;
        z-index: 1000;

    }

    .time-display-group {

        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 5px 15px;
        flex-grow: 1;
        min-width: 150px;

    }

    .time-display-group div {
        font-size: 1.2rem;
        white-space: nowrap;
        margin-bottom: 2px;
    }

    #fictionalClockStatus {

        font-size: 0.8rem;
        color: #888888;
        text-transform: uppercase;
        
    }

    .controls-group {
        display: flex;
        gap: 10px;
        margin: 5px 15px;
    }

    .control-button {
        background-color: hsl(0, 0%, 27%);
        color: #ffffff;
        border: none;
        padding: 10px 15px;
        border-radius: 8px;
        font-size: 1.1em;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .control-button:hover {
        background-color: #666666;
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    }

    .control-button:active {
        background-color: #333333;
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .control-button i {
        margin: 0 5px;
    }

    /* Responsive adjustments for smaller screens */
    @media (max-width: 600px) {
        .bottom-bar {
            flex-direction: column;
            padding: 10px;
        }
        .time-display-group, .controls-group {
            width: 100%;
            justify-content: center;
            margin: 5px 0;
        }
        .time-display-group div {
            font-size: 1rem;
        }
        .time-display-group #fictionalClockStatus {
            font-size: 0.7rem;
        }
        .control-button {
            padding: 8px 12px;
            font-size: 1em;
        }
    }

/* BOTTOM BAR CLOCK CSS : ENDS */


/* I BUTTON CSS : BEGINS */

        /* Basic styling for the info button */
        .info-button {
            /* position of the info-button */
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 1000;
            transition: background-color 0.5s ease, transform 0.5s ease;
            /* shape of the info-button */
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(74, 85, 104, 0.7);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow for dark mode */
            /* font of the info-button */
            color: white;
            font-size: 1.5 rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

        }

        .info-button:hover {

            background-color: rgba(163, 163, 163, 0.9);
            transform: scale(1.1);

        }

        /* styling for the pop-up information box */
        .info-popup {

            position: absolute;
            margin:auto;
            /* Position below the button: button top + button height + spacing */
            top: calc(1rem + 40px + 1rem);
            right: 1rem;
            width: 88%;
            /* max-width: calc(100% - 2rem); */
            background-color: rgba(93, 93, 93, 0.974); /* Darker background for popup with 90% opacity */
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3); /* Stronger shadow */
            padding: 1rem;
            color: #e2e8f0; /* Light text for dark background */
            font-family: 'Inter', sans-serif;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px); /* Adjust for top positioning */
            transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
            z-index: 999;
            border: 1px solid #848484; /* Blue border for popup */
        }

        .info-popup.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Responsive adjustments for smaller screens */
        @media (max-width: 640px) {
            .info-popup {

                width: calc(100% - 2rem);
                top: calc(1rem + 40px + 1rem);
                left: calc(1rem + 20px);
                right: auto;

            }

            .info-button {

                top: 1rem;
                right: 1rem;

            }
        }

        /* I BUTTON CSS : ENDS */