/* ==========================================================================
   1. CRITICAL FIX & GLOBAL DASHBOARD STYLES
   ========================================================================== */

/* This fixes the broken, transparent header on all dashboard pages */
body.dashboard-app .site-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    backdrop-filter: none; /* Removes blur from main site styles */
}

/* This pushes the main content down to account for the fixed header */
body.dashboard-app {
    padding-top: 70px;
}

/* General styles for all dashboard pages */
.ayekoo-widget, .widget {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
}

.widget-title {
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.1rem;
    color: #000;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
}
.widget-icon {
    font-size: 1.2rem;
    margin-right: 10px;
}

/* Skeleton Loaders (Essential for PWA feel) */
.skeleton { opacity: .7; animation: skeleton-loading 1s linear infinite alternate; }
@keyframes skeleton-loading {
    0% { background-color: #f0f3f5; }
    100% { background-color: #e6e9eb; }
}
.skeleton-text { width: 100%; height: 1em; border-radius: .25rem; margin-bottom: .5rem; }
.skeleton-text:last-child { margin-bottom: 0; }


/* --- NEW: Header Avatar & Unread Dot Styles --- */
.header-avatar-link {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #137057;
}
.header-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.conversation-item .conversation-name {
    position: relative;
}
.conversation-item.has-unread .conversation-name::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #F99D18; /* Ayekoo Orange */
    border-radius: 50%;
}

/* --- Styles for Notification Badge on Avatar (FINAL) --- */

/* The link container is our positioning reference.
   It must allow overflow for the badge to sit outside. */
.header-avatar-link {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    /* This is crucial to allow the badge to be positioned outside */
    overflow: visible; 
}

.header-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #137057;
    box-sizing: border-box;
}

/* The notification circle itself */
.header-avatar-link .notification-count {
    /* Set a fixed, equal width and height to guarantee a circle */
    width: 5px;
    height: 12px;

    /* Use flexbox to perfectly center the number */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Styling for the circle */
    background-color: #F99D18; /* Ayekoo Orange */
    color: white;
    border-radius: 50%;
    border: 2px solid #fff;

    /* Font styling */
    font-size: 11px;
    font-weight: bold;
    line-height: 1;

    /* Precise positioning on the edge */
    position: absolute;
    top: 0;
    right: 0;
    /* This transform is key: it moves the badge 40% of its own size
       to the right and up, centering it perfectly on the corner. */
    transform: translate(40%, -40%);
}

/* ==========================================================================
   2. MESSAGING SYSTEM (`template-messages.php`)
   ========================================================================== */

.ayekoo-messages-page {
    padding: 10px;
    max-width: 1000px;
    margin: 0 auto;
    height: calc(0vh - 160px); /* Adjusted for header + PWA nav */
}

.messages-container {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 9px;
    overflow: hidden;
    height: 100%;
    background-color: #fff;
}

/* --- Sidebar / Conversation List --- */
.messages-sidebar {
    width: 300px;
    border-right: 1px solid #eee;
    background-color: #fdfcfa;
    display: flex;
    flex-direction: column;
}
.sidebar-header {
    padding: 20px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.sidebar-header .sidebar-title { margin: 0; font-size: 1.3em; color: #137057; }
.conversation-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; overflow-y: auto; }
.conversation-item { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid #eee; cursor: pointer; gap: 12px; transition: background-color 0.2s; }
.conversation-item:hover { background-color: #f5f5f5; }
.conversation-item.active { background-color: #e8f0ee; }
.conversation-avatar { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.conversation-details { flex-grow: 1; overflow: hidden; }
.conversation-name { font-weight: 600; display: block; }
.conversation-preview { font-size: 0.9em; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-item.has-unread .conversation-name,
.conversation-item.has-unread .conversation-preview { font-weight: 700; color: #000; }
.conversation-time { font-size: 0.8em; color: #777; flex-shrink: 0; }

/* --- Chat Area --- */
.messages-chat-area { flex-grow: 1; display: flex; flex-direction: column; }
.chat-header { padding: 15px 20px; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 15px; }
.chat-header .back-button { display: none; background: none; border: none; font-size: 1.5rem; font-weight: bold; cursor: pointer; }
.chat-header #chat-with-user { margin: 0; font-size: 1.4em; }
.chat-messages { flex-grow: 1; padding: 20px; overflow-y: auto; }
.no-messages-selected { text-align: center; padding: 20px; color: #777; font-style: italic; }

/* --- Chat Bubbles & Input --- */
.message-bubble-wrapper { display: flex; margin-bottom: 4px; align-items: flex-end; gap: 10px; }
.message-bubble-wrapper:not(.consecutive-message) { margin-top: 15px; }
.sent-message { justify-content: flex-end; }
.message-content-wrapper { display: flex; flex-direction: column; max-width: 75%; }
.sent-message .message-content-wrapper { align-items: flex-end; }
.received-message .message-content-wrapper { align-items: flex-start; }
.message-bubble { padding: 12px 18px; border-radius: 20px; line-height: 1.5; word-wrap: break-word; }
.sent-message .message-bubble { background-color: #137057; color: #fff; border-bottom-right-radius: 5px; }
.received-message .message-bubble { background-color: #f1f1f1; color: #000; border-bottom-left-radius: 5px; }
.message-time { font-size: 0.75em; color: #888; margin-top: 5px; padding: 0 10px; }
.date-separator { text-align: center; font-size: 0.8em; color: #777; padding: 10px 0; font-weight: 600; }
.message-input-area { display: flex; padding: 15px 20px; border-top: 1px solid #eee; align-items: flex-end; }
#message-content { flex-grow: 1; padding: 10px 15px; border: 1px solid #ddd; border-radius: 20px; font-size: 1em; resize: none; line-height: 1.4; }



/* --- Mobile PWA Slide Animation for Messaging --- */
@media (max-width: 768px) {
    .ayekoo-messages-page { height: calc(100vh - 70px - 60px); }
    .messages-container { position: relative; overflow: hidden; border: none; border-radius: 0; }
    .messages-sidebar, .messages-chat-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.3s ease-in-out; }
    .messages-chat-area { transform: translateX(100%); background-color: #fff; }
    .messages-container.chat-view-active .messages-chat-area { transform: translateX(0); }
    .messages-container.chat-view-active .messages-sidebar { transform: translateX(-100%); }
    .chat-header .back-button { display: block; }
}

/* --- Dashboard Login Form Styles --- */
.login-form-container {
    max-width: 420px;
    margin: 80px auto;
    padding: 40px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.login-form-container h1 {
    text-align: center;
    color: #137057; /* Heritage Green */
    margin-top: 0;
    margin-bottom: 30px;
}

#loginform p {
    margin-bottom: 20px;
}

#loginform label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

#loginform input[type="text"],
#loginform input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus {
    border-color: #F99D18; /* Ayekoo Orange */
    outline: none;
}

#loginform .forgetmenot {
    margin-top: 20px;
}

#loginform .forgetmenot label {
    font-weight: normal;
}

#loginform #wp-submit {
    width: 100%;
    background-color: #137057; /* Heritage Green */
    color: #fff;
    border: none;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#loginform #wp-submit:hover {
    background-color: #0f5a45; /* Darker Green */
}

.login-form-container .login-extra-links {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9rem;
}

.login-form-container .login-extra-links a {
    color: #555;
    text-decoration: none;
}
.login-form-container .login-extra-links a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   3. STUDENT & TUTOR DASHBOARDS
   ========================================================================== */

/* --- Main Dashboard Grids --- */
.student-dashboard-hub .dashboard-grid,
.tutor-dashboard-hub .dashboard-grid,
.tutor-dashboard-page .dashboard-grid-final {
    display: grid; grid-template-columns: 1fr; gap: 25px; align-items: start;
}
@media (min-width: 992px) {
    .student-dashboard-hub .dashboard-grid,
    .tutor-dashboard-hub .dashboard-grid,
    .tutor-dashboard-page .dashboard-grid-final {
        grid-template-columns: 2fr 1fr;
    }
}

/* --- Student Hub Widgets (`template-student-dashboard.php`) --- */
#gamification-content .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: center; margin-bottom: 20px; }
#gamification-content .stat-item .stat-value { font-family: 'Ubuntu', sans-serif; font-size: 2rem; font-weight: 700; color: #137057; }
#gamification-content .stat-item .stat-label { font-size: 0.85rem; color: #555; }
#gamification-content .progress-bar-container { background-color: #e9ecef; border-radius: 30px; height: 8px; overflow: hidden; margin-top: 10px; }
#gamification-content .progress-bar { height: 100%; background-color: #f99d18; border-radius: 30px; }
#gamification-content .milestone-text { font-size: 0.9rem; color: #555; text-align: center; margin-top: 10px; }

/* --- My Learning Hub (`template-my-learning.php`) --- */
.my-learning-hub-page .hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
.hub-card { display: block; background-color: #fff; border-radius: 12px; padding: 25px; text-decoration: none; color: #333; box-shadow: 0 5px 25px rgba(0,0,0,0.07); border: 1px solid #e0e0e0; }
.hub-card:hover { transform: translateY(-5px); border-color: #137057; }
.hub-card__icon { font-size: 2.5rem; margin-bottom: 15px; }
.hub-card__title { font-size: 1.5rem; color: #137057; margin: 0 0 10px 0; }
.hub-card__description { font-size: 0.95rem; line-height: 1.6; color: #555; }

/* --- My Tasks Page (`template-my-tasks.php`) --- */
.task-item { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.task-item:last-child { border-bottom: none; }
.task-title { font-weight: 600; margin: 0; }
.task-status { font-size: 0.85rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; color: #fff; text-transform: capitalize; }
.status-assigned, .status-needs_revision { background-color: #f99d18; }
.status-submitted { background-color: #3498db; }
.status-approved { background-color: #137057; }

/* ==========================================================================
   4. PWA NAVIGATION BAR (`footer.php`)
   ========================================================================== */

/* Find and REPLACE all existing .pwa-bottom-nav styles with this block */

/* --- DYNAMIC PWA NAVIGATION BAR --- */
.pwa-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: none; /* Hidden by default, shown by PWA mode */
    justify-content: space-around;
    height: 60px; /* Adjust height as needed */
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    padding-bottom: env(safe-area-inset-bottom); /* For iPhone home indicator */
}

/* This is the media query that makes the nav appear when in PWA mode */
@media all and (display-mode: standalone) {
    .pwa-bottom-nav {
        display: flex;
    }
    body {
        /* Prevent content from hiding behind the nav */
        padding-bottom: 60px; 
    }
}

.pwa-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #555;
    flex-grow: 1;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px;
    transition: transform 0.1s ease-out; /* For the press effect */
}

.pwa-bottom-nav .nav-icon {
    font-size: 1.5rem; /* Slightly larger icon */
    line-height: 1;
    margin-bottom: 3px;
    transition: transform 0.2s ease-in-out;
}

.pwa-bottom-nav .nav-label {
    transition: color 0.2s ease-in-out;
}

/* --- ACTIVE STATE --- */
.pwa-bottom-nav .nav-item.active .nav-icon {
    transform: translateY(-2px); /* Lifts the active icon slightly */
    color: #137057; /* Heritage Green */
}

.pwa-bottom-nav .nav-item.active .nav-label {
    color: #137057; /* Heritage Green */
}

/* --- PRESS-DOWN ANIMATION --- */
.pwa-bottom-nav .nav-item:active {
    transform: translateY(3px); /* Pushes the whole item down slightly on press */
}

/* --- NOTIFICATION BADGE (Unchanged) --- */
.pwa-bottom-nav .nav-icon-wrapper {
    position: relative;
}

.notification-badge {
    display: none;
    position: absolute;
    top: -5px;
    right: 5px;
    background-color: #d9534f;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
}


/*
==========================================================================
   FIX: Mobile Dashboard Header Padding
==========================================================================
*/

/* This targets the body tag when we are on a dashboard page */
body.dashboard-app {
    /* Add padding to the top of the entire page body.
       The value (e.g., 80px) should be roughly the height of your header.
       You can adjust this value until the spacing looks correct. */
    padding-top: 80px; 
}

/* We also need to make sure the sticky header stays at the very top */
.site-header {
    position: fixed; /* Change from sticky to fixed for better control */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999; /* Ensure it stays above other content */
}

/* ---
Styles for "My Rewards & Achievements" Page (V3 - Final Layout)
--- */

.student-achievements-page .achievements-section {
    margin-bottom: 60px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}

/* --- Badge Grid Styling (Extra Compact) --- */
.student-achievements-page .achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Smaller min-width */
    gap: 15px;
}

.student-achievements-page .achievement-card {
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 15px;
    text-align: center;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}
.student-achievements-page .achievement-card.unearned {
    filter: grayscale(100%) opacity(0.5);
}
.student-achievements-page .achievement-card.earned {
    border-color: #137057;
    box-shadow: 0 4px 15px rgba(19, 112, 87, 0.1);
}
.student-achievements-page .achievement-card.earned:hover {
    transform: translateY(-5px);
}
.student-achievements-page .badge-icon img {
    width: 50px; /* Even smaller icon */
    height: 50px; /* Even smaller icon */
    margin-bottom: 8px;
}
.student-achievements-page .badge-title {
    font-size: 0.9rem; /* Smaller title */
    font-weight: 600;
    margin: 0 0 5px;
    line-height: 1.3;
    flex-grow: 1;
}
.student-achievements-page .badge-description {
    font-size: 0.75rem; /* Smaller description */
    color: #777;
    line-height: 1.4;
}


/* --- Reward Card Styling (Compact 5-Column) --- */
/* --- Reward Card Styling (Corrected Responsive Grid) --- */
.student-achievements-page .rewards-grid {
    display: grid;
    gap: 20px;
    /* Mobile-first: 2 columns by default */
    grid-template-columns: repeat(2, 1fr);
}

/* For tablets: 3 columns */
@media (min-width: 768px) {
    .student-achievements-page .rewards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* For desktops: 5 columns */
@media (min-width: 1024px) {
    .student-achievements-page .rewards-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.student-achievements-page .reward-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.student-achievements-page .reward-image img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-bottom: 1px solid #eee;
}
.student-achievements-page .reward-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.student-achievements-page .reward-title {
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 10px;
}
.student-achievements-page .reward-description {
    display: none;
}
.student-achievements-page .reward-details-box {
    margin-top: 15px;
    padding: 10px;
    background-color: #f7f7f7;
    border: 1px dashed #e0e0e0;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
}
.student-achievements-page .reward-details-box p { margin: 0; }
.student-achievements-page .reward-content .button {
    margin-top: auto;
    padding: 8px 12px;
    font-size: 0.85rem;
}

/* ==========================================================================
   5. Reusable Profile Form Styles
   - Used on template-my-profile.php & template-tutor-profile.php
   ========================================================================== */

/* --- Main card container for the form --- */
.profile-form-card {
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
}

.profile-form-card h2 {
    font-family: 'Ubuntu', sans-serif;
    color: #137057; /* Heritage Green */
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

/* --- Form field container for consistent spacing --- */
.profile-form-card .form-field {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
}

.profile-form-card .form-field:last-of-type {
    border-bottom: none; /* Remove border from the last field */
    padding-bottom: 0;
    margin-bottom: 0;
}

.profile-form-card label {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 10px;
}

/* --- Consistent input styling --- */
.profile-form-card input[type="text"],
.profile-form-card input[type="file"],
.profile-form-card input[type="url"],
.profile-form-card input[type="email"],
.profile-form-card select,
.profile-form-card textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
    transition: border-color 0.3s ease;
}

.profile-form-card input[type="text"]:focus,
.profile-form-card select:focus,
.profile-form-card textarea:focus {
    border-color: #F99D18; /* Ayekoo Orange */
    outline: none;
}

.profile-form-card textarea {
    min-height: 120px;
}

/* --- Shared style for the action buttons container --- */
.profile-actions-section {
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    text-align: center;
    border: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.logout-button {
    display: inline-block; padding: 12px 30px; background-color: #d9534f;
    color: #fff !important; font-weight: 600; text-decoration: none;
    border-radius: 8px; transition: background-color 0.2s ease;
}
.logout-button:hover { background-color: #c9302c; color: #fff; }

/* --- FIXED-HEIGHT MESSAGING LAYOUT --- */

/* 1. Set a fixed height for the entire messaging container */
.messages-container {
    height: 78vh; /* 75% of the viewport height - you can adjust this value */
    max-height: 800px; /* A maximum height for very large screens */
    display: flex;
    flex-direction: row;
}

/* 2. Make the conversation list (sidebar) scrollable */
.messages-sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.conversation-list {
    flex-grow: 1;
    overflow-y: auto; /* Adds a scrollbar ONLY when the list is too long */
}

/* 3. Make the chat area fill the remaining space and manage its internal scrolling */
.messages-chat-area {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%; /* Ensure it fills the container's height */
}

/* 4. Make the message window scrollable */
.chat-messages {
    flex-grow: 1;
    overflow-y: auto; /* Adds a scrollbar ONLY when messages overflow */
    height: 100px; /* This is an initial height, flex-grow will expand it */
}

/* 5. Keep the message input area fixed at the bottom */
.message-input-area {
    flex-shrink: 0;
}


/* --- Mobile-Specific Styles for New Messaging UI --- */
@media (max-width: 768px) {
    .ayekoo-messages-page {
        padding: 0;
        height: calc(100vh - 70px); /* Adjust 70px to your header's height */
    }
    .messages-container {
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden; /* Prevent scrolling the container */
    }

    .messages-sidebar,
    .messages-chat-area {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: transform 0.3s ease-in-out;
        display: flex; /* Ensure flexbox is active */
        flex-direction: column;
    }

    /* Start with the chat area off-screen to the right */
    .messages-chat-area {
        transform: translateX(100%);
        background-color: #fff;
    }
    
    /* When active, slide the chat area in and the sidebar out */
    .messages-container.chat-view-active .messages-chat-area {
        transform: translateX(0);
    }
    .messages-container.chat-view-active .messages-sidebar {
        transform: translateX(-100%);
    }

    /* Header for the chat view on mobile */
    .chat-header {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .back-button {
        display: block; /* Show the back button on mobile */
        background: none;
        border: none;
        font-size: 1.5rem;
        font-weight: bold;
        cursor: pointer;
    }
    
    /* Ensure input area is always at the bottom */
    .message-input-area {
        flex-shrink: 0;
    }
}

/*
 * Mobile Messaging Page Full-Height Fix
 */

@media (max-width: 768px) {
    /* Target the body only when on a dashboard page to remove bottom padding */
    body.dashboard-app {
        padding-bottom: 05;
    }

    /* Set the messaging page container to fill the available height */
    .ayekoo-messages-page {
        height: calc(90vh - 80px); /* 100% of viewport height minus the 80px header */
        display: flex;
        flex-direction: column;
    }

    .ayekoo-messages-page .site-main {
        flex-grow: 1; /* Allow the main element to grow and fill space */
    }

    /* Ensure the messages container itself fills its parent */
    .messages-container {
        height: 92%;
    }
}

/* --- NEW: Task Management & Modal Styles --- */
.task-management-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 768px) {
    .task-management-layout {
        grid-template-columns: 1fr 1fr;
    }
}

.task-widget {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
}

.task-widget .widget-title {
    margin-top: 0;
}

.widget-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.ayekoo-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ayekoo-modal-content {
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    position: relative;
}

.ayekoo-modal-content .close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #888;
}

.assign-to-options {
    display: flex;
    gap: 20px;
}

#student_search_results {
    border: 1px solid #ddd;
    border-top: none;
    max-height: 150px;
    overflow-y: auto;
}

#student_search_results div {
    padding: 10px;
    cursor: pointer;
}

#student_search_results div:hover {
    background-color: #f0f7f5;
}

/* --- NEW: Review Submission List Styles --- */
.submission-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.submission-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}

.submission-item:last-child {
    border-bottom: none;
}

.submission-details .task-title {
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.submission-details .student-name {
    font-size: 0.9rem;
    color: #555;
}

.submission-item .review-btn {
    padding: 8px 20px;
    font-size: 0.85rem;
}

/* --- NEW: Dashboard Tab Layout --- */
.ayekoo-tabs {
    width: 100%;
}

.tab-triggers {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 30px;
}

.tab-trigger-item {
    padding: 15px 30px;
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    position: relative;
    top: 2px;
    border-bottom: 2px solid transparent;
}

.tab-trigger-item.active {
    color: #137057;
    border-bottom-color: #137057;
}

.tab-content-item {
    display: none;
}

.tab-content-item.active {
    display: block;
}

.ayekoo-widget {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
}

.ayekoo-widget .widget-title {
    margin-top: 0;
}

/* --- NEW: Student Task List Styles --- */
.student-task-item {
    background-color: #fdfdfd;
    border: 1px solid #eee;
    border-left: 4px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.student-task-item:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.student-task-item.status-assigned { border-left-color: #f99d18; } /* Orange */
.student-task-item.status-submitted { border-left-color: #3498db; } /* Blue */
.student-task-item.status-approved { border-left-color: #137057; } /* Green */
.student-task-item.status-needs_revision { border-left-color: #e74c3c; } /* Red */

.student-task-item h4 {
    margin: 0 0 10px;
    display: flex;
    justify-content: space-between;
}

.task-status {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    color: #fff;
    background-color: #ccc;
}

.status-assigned .task-status { background-color: #f99d18; }
.status-submitted .task-status { background-color: #3498db; }
.status-approved .task-status { background-color: #137057; }
.status-needs_revision .task-status { background-color: #e74c3c; }

.tutor-feedback {
    background-color: #f0f7f5;
    border-radius: 4px;
    padding: 15px;
    margin-top: 15px;
}

/* --- NEW: Community Hub Challenge Tab Styles --- */
/* --- Styling for Dashboard Page Tabs (My Learning, etc.) --- */
.leaderboard-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.filter-tab {
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 30px;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-tab.active,
.filter-tab:hover {
    background-color: #137057;
    color: white;
    border-color: #137057;
}

/* Hides the non-active tab content */
.tab-content-item {
    display: none;
}

.tab-content-item.active {
    display: block;
}
.challenges-section {
    margin-bottom: 40px;
}

.challenges-section h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.challenges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.challenge-card {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 250px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.challenge-card:hover {
    transform: translateY(-5px);
}

.challenge-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.challenge-card__overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.challenge-card__title {
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.6rem;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.challenge-card__status {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}

.status--active {
    background-color: #137057; /* Heritage Green */
}

.status--upcoming {
    background-color: #f99d18; /* Ayekoo Orange */
}

/* --- Your Standing Module (V2 - Modern Redesign) --- */
.your-standing-module {
    margin: 60px auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
    max-width: 900px;
    border-top: 4px solid #137057; /* Accent border */
}

.your-standing-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}
.your-standing-header h3 {
    margin: 0;
    font-size: 1.5rem;
}
.your-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.your-ranks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.stat-card {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    border: 1px solid #eee;
}

.stat-card__label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
}

.stat-card__value {
    display: block;
    font-family: 'Ubuntu', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #137057;
    line-height: 1;
}
.stat-card__value small {
    font-size: 1.2rem;
}

.stat-card__meta {
    display: block;
    font-size: 0.8rem;
    color: #777;
    margin-top: 8px;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .your-ranks-grid {
        grid-template-columns: 1fr;
    }
    .your-standing-header {
        justify-content: center;
    }
}

/* --- Tutor "My Students" Page Styles --- */
.student-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

.student-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease-in-out;
}

.student-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border-color: #137057;
}

.student-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.student-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* --- PWA-Specific Styles: Bottom Navigation Bar --- */
.pwa-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.pwa-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: #555;
    flex-grow: 1;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px;
    transition: all 0.2s ease;
}

.pwa-bottom-nav .nav-item:hover {
    background-color: #f7f7f7;
    color: #137057;
}

.pwa-bottom-nav .nav-item.active {
    color: #137057; /* Heritage Green */
}

.pwa-bottom-nav .nav-icon {
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: 5px;
}

/* Hide the regular footer for the PWA */
body.pwa-mode .site-footer:not(.simplified-dashboard-footer) {
    display: none;
}

/* --- Sophisticated PWA Animations and Transitions --- */
body.pwa-mode {
    /* Prevents scrollbar from flashing and provides a cleaner transition */
    overflow-x: hidden;
    position: relative;
}

/* Slide in animation for new content */
.pwa-slide-in {
    animation: pwa-slide-in 0.3s ease-out forwards;
}
@keyframes pwa-slide-in {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Fade in animation for a smoother loading experience */
.pwa-fade-in {
    animation: pwa-fade-in 0.5s ease-in-out forwards;
}
@keyframes pwa-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Add a transition to all dashboard links for a smoother feel */
.pwa-bottom-nav a,
.pwa-bottom-nav a:link,
.pwa-bottom-nav a:visited {
    transition: all 0.2s ease;
}

/* --- Animation container fix for PWA sliding --- */
.messages-container {
    overflow: hidden;
}

/* PWA Bottom Navigation Visibility Control */

/* By default, hide the bottom nav */
.pwa-bottom-nav {
    display: none;
}

/* Use a media query to show the nav ONLY when the app is running in standalone (PWA) mode */
@media all and (display-mode: standalone) {
    .pwa-bottom-nav {
        display: flex;
    }
    
    /* Add padding to the bottom of the body to prevent content from being hidden behind the nav bar */
    body {
        padding-bottom: 60px; /* This should match the height of your nav bar */
    }
}

/* --- PWA Navigation Bar Refinements --- */

/* Add padding to the bottom of the nav bar to account for the iPhone home indicator.
   The browser will automatically use the correct value for 'safe-area-inset-bottom'.
*/
.pwa-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Target the body class for the Auth Center template to hide the nav bar.
  This ensures it only appears for logged-in users viewing the actual dashboard.
*/
body.page-template-template-auth .pwa-bottom-nav {
    display: none;
}


/* --- Messaging UI Enhancements --- */
.conversation-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.conversation-details {
    flex-grow: 1;
    overflow: hidden;
}
.conversation-name {
    font-weight: 600;
    display: block;
}
.conversation-preview {
    font-size: 0.9em;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conversation-item.has-unread .conversation-name,
.conversation-item.has-unread .conversation-preview {
    font-weight: 700;
    color: #000;
}
.conversation-time {
    font-size: 0.8em;
    color: #777;
    flex-shrink: 0;
}
.date-separator {
    text-align: center;
    font-size: 0.8em;
    color: #777;
    padding: 10px 0;
    font-weight: 600;
}
.message-bubble-wrapper.consecutive-message {
    visibility: hidden;
}

.message-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 10px;
    align-self: flex-start;
    visibility: display;
}
/* --- Find and Replace this button style --- */
.button-icon-send {
    background-color: #137057;
    border: none;
    border-radius: 20px; /* This creates the pill shape */
    width: 55px; /* Wider than it is tall */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 10px;
    transition: background-color 0.2s ease;
}
.button-icon-send:hover {
    background-color: #0f5a45;
}

/* --- Chat Bubble UI Enhancements --- */

/* Wrapper for the bubble and its new timestamp */
.message-content-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 75%; /* Prevents bubbles from being too wide */
}

/* Sent message wrapper alignment */
.sent-message .message-content-wrapper {
    align-items: flex-end;
}

/* Received message wrapper alignment */
.received-message .message-content-wrapper {
    align-items: flex-start;
}

/* The new bubble style */
.message-bubble {
    padding: 12px 18px; /* More padding */
    border-radius: 20px; /* Softer, modern radius */
    line-height: 1.5;
    word-wrap: break-word;
}

/* Style for sent bubbles */
.sent-message .message-bubble {
    background-color: #137057;
    color: #fff;
    border-bottom-right-radius: 5px; /* Subtle "tail" */
}

/* Style for received bubbles */
.received-message .message-bubble {
    background-color: #f1f1f1;
    color: #000;
    border-bottom-left-radius: 5px; /* Subtle "tail" */
}

/* Styling for the new external timestamp */
.message-time {
    font-size: 0.75em;
    color: #888;
    margin-top: 5px;
    padding: 0 10px;
}

/* --- PWA Bottom Nav Enhancements --- */
.pwa-bottom-nav .nav-item .nav-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 32px;
    border-radius: 16px;
    transition: background-color 0.3s ease;
}
.pwa-bottom-nav .nav-item.active .nav-icon-wrapper {
    background-color: #e8f0ee; /* Light green accent */
}
.pwa-bottom-nav .nav-item.active .nav-label {
    color: #137057; /* Heritage Green */
}

/* Notification Badge on Nav Item */
.pwa-bottom-nav .nav-icon-wrapper {
    position: relative;
}
.notification-badge {
    display: none; /* Hidden by default */
    position: absolute;
    top: -5px;
    right: 5px;
    background-color: #d9534f; /* Red */
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    align-items: center;
    line-height: 1;
    border: 2px solid #fff;
}

/* Tap Animation for Nav Icons */
.pwa-bottom-nav .nav-item:active .nav-icon {
    transform: scale(0.9);
    transition: transform 0.1s ease;
}

/* ==========================================================================
   MESSAGING SYSTEM - UI FIXES & NEW CONVERSATION MODAL
   ========================================================================== */

/* --- FIX: Timestamp position under the bubble --- */
.message-bubble-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}
.sent-message { align-items: flex-end; }
.received-message { align-items: flex-start; }

/* --- FIX: Pill-shaped send button --- */
.button-icon-send {
    border-radius: 20px; /* This creates the pill shape */
    width: 55px;         /* Wider than it is tall */
    height: 40px;
}

/* --- NEW: "New Conversation" Modal Styles --- */
.message-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6); z-index: 10000;
    display: flex; justify-content: center; align-items: center;
}
.message-modal-content {
    background-color: #fff; padding: 30px; border-radius: 8px;
    width: 90%; max-width: 500px; position: relative;
}
.message-modal-content h3 {
    margin-top: 0;
    font-family: 'Ubuntu', sans-serif;
}
.close-modal {
    position: absolute; top: 10px; right: 15px; background: none; border: none;
    font-size: 2rem; cursor: pointer; color: #888;
}
#user-search-input {
    width: 100%; padding: 12px; font-size: 1rem;
    margin: 10px 0; box-sizing: border-box; border-radius: 8px; border: 1px solid #ddd;
}
.user-search-results-list {
    list-style: none; padding: 0; margin-top: 10px;
    max-height: 200px; overflow-y: auto;
}
.user-search-results-list li {
    padding: 10px; border-bottom: 1px solid #eee; cursor: pointer;
    display: flex; align-items: center; gap: 10px; font-weight: 600;
}
.user-search-results-list li:hover { background-color: #f5f5f5; }
.user-search-results-list li:last-child { border-bottom: none; }

/* --- Modern Lesson Detail Page Styling --- */
.lesson-detail-page .page-body {
    background-color: #f7f7f7;
}

.lesson-card-rich {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
    overflow: hidden;
    max-width: 800px; /* Center the card */
    margin: 0 auto;
}

.lesson-header {
    padding: 25px 30px;
    border-bottom: 1px solid #e0e0e0;
}

.lesson-title {
    font-size: 2rem;
    margin: 0 0 5px;
    color: #137057;
    font-family: 'Ubuntu', sans-serif;
}

.lesson-time {
    font-size: 1.1rem;
    font-weight: 600;
    color: #555;
    margin: 0;
}

.lesson-info-section {
    padding: 30px;
    border-bottom: 1px solid #f0f0f0;
}

.lesson-card-rich .lesson-info-section:last-child {
    border-bottom: none;
}

.lesson-info-section h4 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #555;
    letter-spacing: 1px;
    margin: 0 0 20px;
}

.lesson-info-section p {
    margin: 0 0 10px;
    line-height: 1.6;
}

.lesson-description p:last-child {
    margin-bottom: 0;
}

.action-box.confirmation-box {
    background-color: #FEF6EF; /* Parchment */
}

.action-box .payout-amount {
    font-size: 1.2rem;
    margin-top: 15px;
    font-weight: 600;
}

.action-box .button-group {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap on small screens */
    gap: 15px;
}

/* --- Local Time Conversion Style --- */
.utc-datetime {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.utc-datetime.is-visible {
    opacity: 1;
}

/* --- "Fade and Slide" Page Load Animation --- */

/* This is the animation definition */
@keyframes fade-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px); /* Start 20px down */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* End at its normal position */
    }
}

/* This class will be added by JavaScript to trigger the animation */
.page-body.animate-in {
    animation: fade-slide-in 0.5s ease-out forwards;
}

/* --- START: Task System Form Styling --- */

/* This targets all forms within the task system modals and pages */
.ayekoo-dashboard-form .form-row {
    margin-bottom: 25px; /* Adds consistent spacing between fields */
}

.ayekoo-dashboard-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.ayekoo-dashboard-form input[type="text"],
.ayekoo-dashboard-form input[type="url"],
.ayekoo-dashboard-form input[type="number"],
.ayekoo-dashboard-form select,
.ayekoo-dashboard-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
    transition: border-color 0.3s ease;
}

.ayekoo-dashboard-form input[type="text"]:focus,
.ayekoo-dashboard-form input[type="url"]:focus,
.ayekoo-dashboard-form input[type="number"]:focus,
.ayekoo-dashboard-form select:focus,
.ayekoo-dashboard-form textarea:focus {
    border-color: #F99D18; /* Ayekoo Orange on focus */
    outline: none;
    box-shadow: 0 0 0 2px rgba(249, 157, 24, 0.2);
}

.ayekoo-dashboard-form textarea {
    min-height: 120px;
    resize: vertical;
}

/* Styling for radio button options */
.assign-to-options {
    display: flex;
    gap: 20px;
    align-items: center;
}
.assign-to-options label {
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Styling for the live student search results */
#student_search_results {
    border: 1px solid #ddd;
    border-top: none;
    max-height: 150px;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 0 0 8px 8px;
    margin-top: -1px; /* Aligns with the input box */
}
#student_search_results div {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}
#student_search_results div:last-child {
    border-bottom: none;
}
#student_search_results div:hover {
    background-color: #f0f7f5; /* Light green accent on hover */
}

/* Submission content display */
.submission-content-wrapper {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
}
.submission-content-wrapper p {
    margin: 0;
}
.submission-content-wrapper audio {
    width: 100%;
    margin-top: 10px;
}

.ayekoo-dashboard-form .button-green .assign-task-btn {
    background-color: #137057; /* Heritage Green */
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.ayekoo-dashboard-form .button-green:hover {
    background-color: #0f5a45; /* Darker Green */
}

/* --- END: Fix for Unstyled Modal Buttons --- */

/* --- END: Task System Form Styling --- */

.task-preview-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.task-preview-list li a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    font-weight: 600;
    color: #333;
}
.task-preview-list li:last-child a {
    border-bottom: none;
}
.task-preview-list li a:hover {
    color: #137057;
}

/* --- START: Task System Form Styling --- */

.ayekoo-dashboard-form .form-row {
    margin-bottom: 25px;
}
.ayekoo-dashboard-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}
.ayekoo-dashboard-form input[type="text"],
.ayekoo-dashboard-form input[type="url"],
.ayekoo-dashboard-form input[type="number"],
.ayekoo-dashboard-form select,
.ayekoo-dashboard-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
    transition: border-color 0.3s ease;
}
.ayekoo-dashboard-form input[type="text"]:focus,
.ayekoo-dashboard-form input[type="url"]:focus,
.ayekoo-dashboard-form input[type="number"]:focus,
.ayekoo-dashboard-form select:focus,
.ayekoo-dashboard-form textarea:focus {
    border-color: #F99D18;
    outline: none;
    box-shadow: 0 0 0 2px rgba(249, 157, 24, 0.2);
}
.ayekoo-dashboard-form textarea {
    min-height: 120px;
    resize: vertical;
}
.ayekoo-dashboard-form .button-green {
    background-color: #137057;
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.ayekoo-dashboard-form .button-green:hover {
    background-color: #0f5a45;
}
.submission-content-wrapper {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
}
/* --- END: Task System Form Styling --- */

/* in dashboard.css */

/* --- Tutor Command Center & Hub Grids --- */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.hub-card {
    display: block;
    background-color: #fff;
    border-radius: 12px;
    padding: 25px;
    text-decoration: none;
    color: #333;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.hub-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    border-color: #137057;
}

.hub-card__icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.hub-card__title {
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.5rem;
    color: #137057;
    margin: 0 0 10px 0;
}

.hub-card__description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}

/* in dashboard.css */

/* --- Single Cohort Dashboard Layout --- */
.cohort-dashboard-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
}

@media (min-width: 992px) {
    .cohort-dashboard-layout {
        grid-template-columns: 2fr 1fr;
    }
}

/* Timetable List */
.cohort-timetable-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cohort-timetable-list li {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}

.cohort-timetable-list li:last-child {
    border-bottom: none;
}

.session-date {
    background-color: #f0f7f5;
    color: #137057;
    border-radius: 8px;
    text-align: center;
    padding: 10px;
    width: 60px;
    flex-shrink: 0;
}

.session-date .month {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.session-date .day {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

.session-details {
    flex-grow: 1;
}

.session-details .session-time {
    font-weight: 600;
    display: block;
}

.session-details .session-duration {
    font-size: 0.9rem;
    color: #555;
}

.session-actions .button-green {
    padding: 10px 25px;
    font-size: 0.9rem;
}

/* Student Roster */
.student-roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 10px;
}

.student-roster-item .student-avatar {
    width: 100%;
    height: auto;
    border-radius: 50%;
    display: block;
}

/* in dashboard.css */

/* ==========================================================================
   COHORT SYSTEM STYLES
   ========================================================================== */

/* --- My Cohorts List Page (template-my-cohorts.php) --- */
.cohort-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cohort-list-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s ease;
}

.cohort-list-item a:hover {
    background-color: #f9f9f9;
}

.cohort-list-item:first-child a {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.cohort-list-item:last-child a {
    border-bottom: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.cohort-title {
    font-weight: 600;
    font-size: 1.1rem;
}

.cohort-arrow {
    font-size: 1.5rem;
    color: #137057;
}


/* --- Single Cohort Dashboard Layout --- */
.cohort-dashboard-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
}

@media (min-width: 992px) {
    .cohort-dashboard-layout {
        grid-template-columns: 2fr 1fr;
    }
}

/* Timetable List */
.cohort-timetable-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cohort-timetable-list li {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}

.cohort-timetable-list li:last-child {
    border-bottom: none;
}

.session-date {
    background-color: #f0f7f5;
    color: #137057;
    border-radius: 8px;
    text-align: center;
    padding: 10px;
    width: 60px;
    flex-shrink: 0;
}

.session-date .month {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.session-date .day {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

.session-details {
    flex-grow: 1;
}

.session-details .session-time {
    font-weight: 600;
    display: block;
}

.session-details .session-duration {
    font-size: 0.9rem;
    color: #555;
}

.session-actions .button-green {
    padding: 10px 25px;
    font-size: 0.9rem;
}

/* Student Roster */
.student-roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 10px;
}

.student-roster-item .student-avatar {
    width: 100%;
    height: auto;
    border-radius: 50%;
    display: block;
}

/* Cohort Leaderboard Table */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}
.leaderboard-table th, .leaderboard-table td {
    padding: 12px 0;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}
.leaderboard-table th {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #555;
}
.leaderboard-table tr.current-user-rank {
    background-color: #f0f7f5;
    font-weight: bold;
}
.leaderboard-table .rank-cell {
    font-size: 1.2rem;
    font-weight: bold;
}