// Variables
$primary-color: #007bff; // Moodle-like blue
$secondary-color: #0056b3; // Darker blue
$background-color: #f0f2f5; // Light grey background
$card-bg: #ffffff;
$text-color: #333;
$light-grey: #ddd;
$shadow-light: rgba(0,0,0,0.05);
$shadow-medium: rgba(0,0,0,0.08);
$shadow-strong: rgba(0,0,0,0.15);
$border-radius-main: 8px;
$border-radius-card: 10px;
$border-radius-button: 25px;

// --- General Body and Page Wrapper Styles ---
body#page-site-index { // Using the ID from your screenshot
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: $background-color;
    color: $text-color;
    line-height: 1.6;
    margin: 0; // Ensure no default body margin
    padding: 0;
}

#page-wrapper { // The main page content wrapper from your screenshot
    max-width: 1200px;
    margin: 20px auto; /* Center the content */
    padding: 0 20px;
    box-shadow: 0 0 15px rgba(0,0,0,0.05); // Overall page shadow
    background-color: transparent; // Let body handle background
    border-radius: $border-radius-main;
}

// --- Header Styles (Top Navigation Bar) ---
.navbar.fixed-top.bg-navbar-top.bg-white { // More specific selector based on your screenshot
    background-color: $card-bg !important; // Override Moodle's inline/default bg-white if needed
    border-bottom: 1px solid $light-grey;
    box-shadow: 0 2px 4px $shadow-light;
    padding: 10px 20px;
    z-index: 1030; // Ensure it stays on top of other content

    // Styles for the Moodle logo (often within .navbar-brand)
    .navbar-brand {
        img {
            height: 40px; // Adjust as needed
            transition: transform 0.3s ease;
            &:hover {
                transform: scale(1.05);
            }
        }
    }

    // Styles for main navigation links (Home, Dashboard, My courses, Site administration)
    .nav-item {
        .nav-link {
            color: $primary-color;
            padding: 8px 15px;
            border-radius: 5px;
            transition: background-color 0.3s ease, color 0.3s ease;
            font-weight: 500;

            &:hover {
                background-color: lighten($primary-color, 45%);
                color: $secondary-color;
            }
            &.active {
                background-color: lighten($primary-color, 40%);
                color: $secondary-color;
            }
        }
    }

    // User menu items (bell, user icon, edit mode)
    .usermenu-container { // Common Moodle class for user menu
        .action-icon, .userbutton { // Or specific icon classes like .icon
            margin-left: 15px;
            cursor: pointer;
            font-size: 1.2em;
            color: #555;
            transition: color 0.3s ease, transform 0.2s ease;

            &:hover {
                color: $primary-color;
                transform: translateY(-2px); // Subtle bounce
            }
        }
    }
}

// --- Page Title / Sub-header (where "NACOS LMS" and Home/Settings are) ---
// This is often within a .main-inner or .page-context-header
.main-inner[role="main"] { // Common Moodle Boost main content area
    // This is the container for the actual page content after the header.
    // The "NACOS LMS" heading and sub-nav are usually inside a specific section here.
    // Let's target it specifically assuming it's a "block" or a "card"
    .card.p-4.m-y-3 { // A common pattern for Boost's page header card
        background-color: $card-bg;
        padding: 20px 40px;
        margin-top: 20px;
        border-radius: $border-radius-main;
        box-shadow: 0 2px 8px $shadow-medium;
        margin-bottom: 20px; // Add space below

        h1 { // The "NACOS LMS" heading
            margin: 0;
            color: $primary-color;
            font-size: 2em;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.05); // Subtle text shadow
        }

        // Sub-navigation (Home, Settings, Participants...)
        .nav-tabs {
            margin-top: 15px;
            border-bottom: none;

            .nav-item {
                .nav-link {
                    text-decoration: none;
                    color: #555;
                    margin-right: 20px;
                    padding: 10px 0;
                    position: relative;
                    transition: color 0.3s ease, transform 0.2s ease;
                    border: none;
                    border-bottom: 2px solid transparent;

                    &:hover {
                        color: $primary-color;
                        transform: translateY(-2px); // Lift on hover
                    }

                    &.active {
                        color: $primary-color;
                        font-weight: bold;
                        border-bottom: 2px solid $primary-color;
                        background-color: transparent;
                        transform: translateY(0); // Reset for active
                    }
                }
            }
        }
    }
}


// --- Search Bar Styling ---
// You will likely find the search form within a Moodle block or section
// Inspect your page to get the exact parent container for the search.
// Common parent for search: #block-search-courses, .search-courses-form, or directly within a form tag
.course-search-form { // Common Moodle search form class (please verify)
    display: flex;
    justify-content: center;
    margin: 30px auto; // Center and provide space
    max-width: 700px; // Limit width for better appearance

    .form-control { // Moodle's input class
        width: 100%;
        padding: 12px 20px;
        border: 1px solid #ccc;
        border-radius: $border-radius-button 0 0 $border-radius-button;
        font-size: 1em;
        outline: none;
        transition: all 0.3s ease;

        &:focus {
            border-color: $primary-color;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
        }
    }

    .btn.btn-primary { // Moodle's button class
        padding: 12px 20px;
        border: 1px solid $primary-color;
        background-color: $primary-color;
        color: white;
        border-radius: 0 $border-radius-button $border-radius-button 0;
        cursor: pointer;
        font-size: 1em;
        transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;

        &:hover {
            background-color: $secondary-color;
            border-color: $secondary-color;
            transform: translateY(-2px);
        }
        &:active {
            transform: translateY(0);
        }
    }
}


// --- Course List Container and Individual Course Card Styling ---
// The main area where courses are listed on the dashboard is typically a div with a specific class
.dashboard-card-deck { // This is a common class for the course grid on the dashboard
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
    padding: 0 20px; // Add some padding if needed
    justify-content: center; // Center cards if fewer than full row
}

.coursebox.card { // Common Moodle Boost class for individual course cards
    background-color: $card-bg;
    border-radius: $border-radius-card;
    box-shadow: 0 4px 15px $shadow-medium;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; // Ensure cards are same height
    border: none; // Remove default card border

    &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px $shadow-strong;
    }

    // Course Image
    .card-img-top { // Common class for course image
        width: 100%;
        height: 180px;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
    }
    &:hover .card-img-top {
        transform: scale(1.05); // Zoom effect for image on card hover
    }

    // Course Info / Body
    .card-body {
        padding: 20px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        // Course Title
        .card-title { // Common Moodle course title class
            font-size: 1.5em;
            color: $primary-color;
            margin-top: 0;
            margin-bottom: 10px;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;

            a { // The actual link inside the title
                color: inherit; // Inherit color from parent
                text-decoration: none;
                &:hover {
                    color: $secondary-color;
                    text-decoration: underline;
                }
            }
        }

        // Course Description
        .intro-content { // Common Moodle description class
            font-size: 0.95em;
            color: #555;
            margin-bottom: 15px;
            flex-grow: 1; // Allow description to grow
        }

        // Teacher Information
        .teachers { // Moodle often puts teacher info in a specific block/div
            font-size: 0.9em;
            color: #777;
            margin-top: auto; // Push to the bottom

            a {
                color: $primary-color;
                text-decoration: none;
                transition: color 0.3s ease;
                &:hover {
                    color: $secondary-color;
                    text-decoration: underline;
                }
            }
        }
    }
}

// Keyframe animations for subtle page load effects
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

// Apply a subtle fade-in to the main content after a delay
body#page-site-index #page-wrapper {
    animation: fadeIn 0.8s ease-out forwards;
    animation-delay: 0.2s; // Delay after header appears
}

// Apply fade-in to individual course cards with a staggered delay
.dashboard-card-deck .coursebox.card {
    opacity: 0; // Start invisible
    animation: fadeIn 0.6s ease-out forwards;
    @for $i from 1 through 10 { // Stagger delay for up to 10 cards
        &:nth-child(#{$i}) {
            animation-delay: ($i * 0.1s) + 0.5s; // Start after main content, then stagger
        }
    }
}