/* =============================
   DASHBOARD ROOT & LAYOUT
============================= */
/* Ensure the dashboard content is properly positioned relative to the sidebar and header */
.dashboard-root {
    padding: 24px; /* Adjust padding as needed, considering main's padding */
    /* max-width: 1200px;  Max width for content for better readability */
    margin: 0 auto; /* Center content within main area */
}

/* Welcome Heading */
.welcome-heading {
    font-size: 2.25rem; /* Matches h2 from styles.css */
    /* padding-bottom: 20px; */
    border-bottom: 2px solid #e0e0e0;
    color: #1e1e2d;
    margin-top: 0; /* Adjust as main padding already accounts for space */
    margin-bottom: 3rem;
    text-align: left;
    display: flex;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .welcome-heading {
        margin-bottom: 1.5rem;
        font-size: 2rem;
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
} 

/* =============================
   STATISTICS GRID
============================= */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid for stat cards */
    gap: 1.5rem; /* Space between cards */
    margin-bottom: 2.5rem;
}

.stat-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 12px rgba(0, 64, 128, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(0, 64, 128, 0.15);
}

.stat-icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #f0f8ff; /* Light background for icons */
    flex-shrink: 0; /* Prevent icon container from shrinking */
}

.stat-icon {
    width: 32px;
    height: 32px;
}

/* Specific icon colors */
.total-courses .stat-icon { color: #5a67d8; } /* Indigo */
.monthly-trips .stat-icon { color: #3182ce; } /* Blue */
.driving-time .stat-icon { color: #38a169; } /* Green */
.average-rating .stat-icon { color: #d69e2e; } /* Yellow */

.stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1e1e2d;
    line-height: 1; /* Adjust line height to prevent extra space */
}

.stat-label {
    font-size: 0.95rem;
    color: #555555;
    margin-top: 0.25rem;
    font-weight: 500;
}
.highlight-time {
    font-weight: 700;
    font-size: 1.3em; /* Make the time larger */
    color: #0d6efd; /* Blue color to emphasize */
    margin: 0 5px; /* Small horizontal spacing */
}
/* Rating stars within the average rating card */
.rating-stars {
    color: #f6ad55; /* Gold color for stars */
    font-size: 1.2rem;
    margin-left: 0.5rem;
}
.rating-stars .far.fa-star {
    color: #ccc; /* Lighter color for empty stars */
}

/* =============================
   AVAILABLE TRIPS BUTTON
============================= */
.button-container {
    margin-bottom: 3rem;
}

.available-trips-button {
    display: inline-flex; /* Allows icon and text to be on one line */
    align-items: center;
    gap: 0.75rem;
    background: #004080; /* Primary button color */
    color: white;
    font-weight: 600;
    border: none;
    padding: 0.9rem 1.8rem;
    border-radius: 8px; /* Slightly larger border-radius for buttons */
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,64,128,0.3);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    text-decoration: none; /* Remove underline from anchor */
    white-space: nowrap; /* Prevent text wrapping */
}

.available-trips-button:hover,
.available-trips-button:focus {
    background: #1e90ff; /* Hover color */
    box-shadow: 0 6px 16px rgba(30,144,255,0.5);
    transform: translateY(-2px); /* Slight lift on hover */
    outline: none;
    text-decoration: none; /* Keep no underline on hover */
}

.button-icon {
    width: 24px;
    height: 24px;
    fill: currentColor; /* Inherit color from parent */
}

/* =============================
   SECTION HEADINGS (General)
============================= */
.section-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.75rem; /* Matches h3 from styles.css */
    color: #1e1e2d;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.section-heading .icon-svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* =============================
   NEXT TRIP SECTION
============================= */
.next-trip-section {
    background-color: #f7fafc; /* Light background for this section */
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 3rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.next-trip-icon {
    color: #4c51bf; /* Indigo/blue shade */
}

.next-trip-details-text {
    font-size: 1.1rem;
    color: #333333;
    line-height: 1.5;
    text-align: center;
    font-weight: 500;
}

/* =============================
   RECENT REVIEWS SECTION
============================= */
.ratings-section {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 3rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.ratings-icon {
    color: #805ad5; /* Purple shade */
}

.ratings-list {
    list-style: none; /* Remove default list bullet */
    padding: 0;
    margin: 0;
}

.review-item {
    background-color: #f7fafc; /* Lighter background for individual reviews */
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.review-item:last-child {
    margin-bottom: 0; /* No margin after the last review item */
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.review-stars {
    color: #f6ad55; /* Gold color for review stars */
    font-size: 1.1rem;
    flex-shrink: 0;
}

.review-stars .far.fa-star {
    color: #ccc;
}

.review-date {
    font-size: 0.85rem;
    color: #777;
    flex-shrink: 0;
    margin-left: 1rem; /* Space between stars and date */
}

@media (max-width: 480px) {
    .review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    .review-date {
        margin-left: 0; /* Remove left margin on small screens */
    }
}

.review-comment-text {
    font-style: italic;
    color: #333333;
    font-size: 0.95rem;
    margin-top: 0.5rem;
    margin-bottom: 0; /* Remove default paragraph margin */
}

.no-content-message {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 1rem;
    background-color: #f0f0f0;
    border-radius: 8px;
    border: 1px dashed #ccc;
}

.all-ratings-link {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
}

.all-ratings-link a {
    color: #004080; /* Match primary button color */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.all-ratings-link a:hover {
    color: #1e90ff;
    text-decoration: underline;
}