/**
 * Dashboard Height Fix & Upcoming Activities Styling
 * This CSS ensures the Upcoming Activities widget has the same height as the Weather Forecast widget
 * and provides improved styling for planned activities
 */

/* Set a fixed height for the Upcoming Activities widget container */
.upcoming-activities-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Make the Upcoming Activities widget take up the full height of its container */
.upcoming-activities-widget {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Make the content area scrollable if it overflows */
.upcoming-activities-content {
    flex: 1;
    overflow-y: auto;
    max-height: 240px; /* Reverted to original height */
}

/* Ensure the footer stays at the bottom */
.upcoming-activities-footer {
    margin-top: auto;
}

/* Improved styling for planned activities */
.upcoming-activities-content > div {
    border-bottom: 1px solid #f3f4f6;
}

.upcoming-activities-content > div:last-child {
    border-bottom: none;
}

/* Smooth hover effects for activity items */
.upcoming-activities-content > div:hover {
    transform: translateX(2px);
}

/* Enhanced planned activity styling */
.upcoming-activities-content > div[class*="border-l-4"] {
    background: linear-gradient(90deg, rgba(217, 119, 7, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
}

/* Ensure header background is properly applied */
.upcoming-activities-widget .bg-gradient-to-r {
    background: linear-gradient(to right, #D97707, #E89B29) !important;
}

/* Additional styling for better visibility */
.upcoming-activities-widget {
    border: 1px solid #f3f4f6;
}

/* Header styling improvements */
.upcoming-activities-widget > div:first-child {
    background: linear-gradient(to right, #D97707, #E89B29) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1.5rem 1rem !important; /* Increased header padding only */
    box-shadow: 0 2px 4px rgba(217, 119, 7, 0.1); /* Add subtle glossy shadow */
}

/* Media query for larger screens */
@media (min-width: 1024px) {
    /* Match the height of the Weather Forecast widget */
    .lg\:grid-cols-3 > div:first-child,
    .lg\:grid-cols-3 > div:nth-child(2) {
        min-height: 260px; /* Reverted to original height */
    }

    /* Increase header height on larger screens */
    .upcoming-activities-widget > div:first-child {
        padding: 1.75rem 1rem !important; /* Even more header padding for desktop */
        box-shadow: 0 4px 8px rgba(217, 119, 7, 0.15); /* Enhanced glossy shadow for desktop */
    }
}