/* Home Page Top Section */
.home-top-section {
    display: flex;
    align-items: center;
    gap: 30px;
}

.home-profile-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative; 
    z-index: 1; 
}

.home-profile-pic {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid hsla(0,0%,100%,0.2);
}

/* Heatmap Grid */
.home-heatmap-box {
    flex-grow: 1;
    min-width: 0;
    position: relative;
    z-index: 20;
    position: relative; 
    z-index: 999;
}

.heatmap-scroll-container {
    overflow-x: auto;
    scrollbar-width: none; 
    
    padding: 40px 100px 10px 100px; 
    margin: -30px -100px 0 -100px; 
}
.heatmap-scroll-container::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.heatmap-grid {
    display: grid;
    grid-template-rows: repeat(7, 10px); 
    grid-auto-flow: column;
    gap: 3px;
    width: max-content;
}

.heatmap-cell {
    width: 10px;
    height: 10px;
    background-color: hsla(0,0%,100%,0.05); /* Empty state */
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: outline 0.1s; 
}

.heatmap-cell:hover {
    outline: 2px solid hsla(0,0%,100%,0.8);
    outline-offset: -1px;
    z-index: 10;
}

/* Green Intensity Levels (Dark Mode) */
.heatmap-cell.heat-1 { background-color: #0e4429; } /* > 0km */
.heatmap-cell.heat-2 { background-color: #006d32; } /* > 5km */
.heatmap-cell.heat-3 { background-color: #26a641; } /* > 10km */
.heatmap-cell.heat-4 { background-color: #39d353; } /* > 21km */

.today-cell {
    box-shadow: inset 0 0 0 10px hsla(0,0%,100%,0.2) !important;
    outline: 1px solid hsla(0,0%,100%,0.5);
    outline-offset: -1px;
}


/* Tooltip on Hover */
@media (hover: hover) {
    .heatmap-cell[data-title]:hover::after {
        content: attr(data-title);
        position: absolute;
        bottom: 180%; 
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.9);
        color: white;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 11px;
        white-space: nowrap;
        pointer-events: none;
        z-index: 100;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
    }
}


/* Reusing timer-card style for Activity Logs */
.activity-log-card {
    background-color: hsla(0, 0%, 100%, 0.05);
    border: 1px solid hsla(0, 0%, 100%, 0.05);
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activity-icon-circle {
    background: hsla(0,0%,100%,0.1);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Prevents it from squishing on tiny screens */
}


/* Mobile Adjustments */
@media (max-width: 768px) {
    .home-top-section {
        flex-direction: column;
        width: 100%; /* Force it to respect the screen width */
    }
    
    .home-heatmap-box {
        width: 100%;
        max-width: 100%; /* Stop the 680px grid from stretching the parent */
        box-sizing: border-box;
    }

    .heatmap-scroll-container {
        /* FIX: Remove the massive left/right negative margins that cause the screen blowout! */
        padding: 40px 5px 10px 5px; 
        margin: -30px 0 0 0; /* Keep the top negative margin for tooltips, remove the sides */
        width: 100%;
        box-sizing: border-box;
    }
}

/* =========================================
   LIGHT MODE OVERRIDES
   ========================================= */

.light-mode .heatmap-cell { background-color: hsla(0,0%,0%,0.06); }
.light-mode .heatmap-cell:hover { outline-color: hsla(0,0%,0%,0.8); }

/* GitHub's Official Light-Mode Green Palette for high contrast */
.light-mode .heatmap-cell.heat-1 { background-color: #9be9a8; }
.light-mode .heatmap-cell.heat-2 { background-color: #40c463; }
.light-mode .heatmap-cell.heat-3 { background-color: #30a14e; }
.light-mode .heatmap-cell.heat-4 { background-color: #216e39; }

/* In Light Mode, the 'Today' cell gets a dark tint overlay instead of a white one */
.light-mode .today-cell { 
    box-shadow: inset 0 0 0 10px hsla(0,0%,0%,0.1) !important; 
    outline-color: hsla(0,0%,0%,0.3); 
}

.light-mode .activity-log-card { 
    background-color: hsla(0,0%,0%,0.03); 
    border-color: hsla(0,0%,0%,0.08); 
    color: hsl(0,0%,15%); 
}

.light-mode .activity-icon-circle {
    background: hsla(0,0%,0%,0.08);
}