/* ================================================================ */
/* STYLES FOR THE SINGLE COURSE VIEW (INSIDE WP ADMIN)              */
/* ================================================================ */

/* --- Main Layout & Structure --- */
/* The .wrap class from WordPress gives us our basic container */
.ets-course-view-container {
    margin-left: -20px; /* Counteract default WP .wrap padding */
}
.ets-course-wrapper {
    display: flex;
    min-width: 100%;
}
/* --- Left Sidebar Styling --- */
.ets-course-sidebar {
    flex: 0 0 320px;
    background-color: #fff;
    border-right: 1px solid #e5e5e5;
    min-height: calc(100vh - 32px); /* Full height minus admin bar */
}
.ets-sidebar-inner {
    padding: 20px;
}
.ets-back-button {
    display: block;
    margin-bottom: 20px;
    text-decoration: none;
    font-weight: 600;
    color: #0073aa;
}
.ets-sidebar-search {
    position: relative;
    margin-bottom: 20px;
}
.ets-sidebar-search input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}
.ets-sidebar-search .dashicons-search {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #888;
}

/* --- Module & Lesson List Styling --- */
.ets-module-list, .ets-lesson-list { list-style: none; margin: 0; padding: 0; }
.ets-module-item { margin-bottom: 5px; }
.ets-module-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 15px; cursor: pointer; border-radius: 4px;
}
.ets-module-header:hover { background-color: #f5f5f5; }
.ets-module-header .module-title { font-weight: 600; }
.ets-module-header .lesson-count {
    background-color: #e9e9e9; font-size: 12px; padding: 2px 8px; border-radius: 10px;
}
.ets-lesson-list { margin: 5px 0 10px 0; padding-left: 20px; }
.ets-lesson-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 15px; border-radius: 4px; cursor: pointer;
}
.ets-lesson-item.is-active {
    background-color: #fffbe6; border: 1px solid #ffeeba; font-weight: 600;
}
.ets-lesson-item .dashicons-lock { color: #aaa; }

/* --- Main Content Area Styling --- */
.ets-course-content {
    flex: 1;
}
.ets-content-header {
    background-color: #4c2885; color: #fff; padding: 20px 40px;
    /* We need to stretch this header outside the .wrap padding */
    margin: -1px -20px 0 0;
}
.ets-content-header h1 {
    margin: 0; font-size: 24px; font-weight: 600; color: #fff;
}
.ets-content-body {
    padding: 20px 40px; background: #fdfdfd;
}
.ets-content-body h1, .ets-content-body h2, .ets-content-body h3 {
    font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; color: #333; font-size: 22px; line-height: 1.3;
}
.ets-content-body p {
    font-size: 16px; line-height: 1.7; color: #444; margin-bottom: 1em;
}