// Variables (Optional, but good practice in SCSS)
$primary-color: #007bff; // Moodle-like blue
$secondary-color: #0056b3; // Darker blue
$background-color: #f0f2f5;
$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-card: 10px;
$border-radius-button: 25px;

// --- General Body and Container Styles ---
// Moodle's body is typically targeted globally
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: $background-color;
    color: $text-color;
    line-height: 1.6;
}

// Moodle's main content area often has a specific ID or class
// You might need to inspect your Moodle site to find the exact selector for the main content wrapper.
// Common Moodle main content selectors could be: #page, #page-wrapper, .main-inner
#page { /* This is a common Moodle Boost wrapper ID for the entire page content */
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
    box-shadow: 0 0 15px rgba(0,0,0,0.05); // Overall page shadow
    background-color: $card-bg; // Ensure background matches main content area
    border-radius: 8px;
}

// --- Header Styles (Top Navigation Bar) ---
// Moodle's header is often targeted by '.navbar' or specific IDs within it.
.navbar.fixed-top { // Assuming this is your top fixed header
    background-color: $card-bg;
    border-bottom: 1px solid $light-grey;
    box-shadow: 0 2px 4px $shadow-light;
    padding: 10px 20px;

    .navbar-brand { // Your logo area
        img {
            height: 40px; // Adjust as needed
        }
    }

    .nav-item {
        .nav-link {
            color: $primary-color;
            padding: 8px 15px;
            border-radius: 5px;
            transition: background-color 0.3s ease, color 0.3s ease;

            &:hover {
                background-color: lighten($primary-color, 45%); // Lighter blue hover
                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
            margin-left: 15px;
            cursor: pointer;
            font-size: 1.2em;
            color: #555;
            transition: color 0.3s ease;

            &:hover {
                color: $primary-color;
            }
        }
    }
}

// --- Page Title / Sub-header (where "NACOS LMS" and Home/Settings are) ---
// This area often has a specific class like '.page-header-wrapper' or similar within Moodle.
.main-course-content-header { // Placeholder, you'll need to inspect for the actual class
    background-color: $card-bg;
    padding: 20px 40px;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px $shadow-medium;

    h1 {
        margin: 0;
        color: $primary-color;
        font-size: 2em;
    }

    .nav-tabs { // Moodle often uses Bootstrap's nav-tabs for this sub-navigation
        margin-top: 15px;
        border-bottom: none; // Remove default Bootstrap border

        .nav-item {
            .nav-link {
                text-decoration: none;
                color: #555;
                margin-right: 20px;
                padding: 10px 0;
                position: relative;
                transition: color 0.3s ease;
                border: none; // Remove default tab borders
                border-bottom: 2px solid transparent; // For active indicator

                &:hover {
                    color: $primary-color;
                }

                &.active {
                    color: $primary-color;
                    font-weight: bold;
                    border-bottom: 2px solid $primary-color; // Active tab indicator
                    background-color: transparent; // Ensure no background on active
                }
            }
        }
    }
}