/* lesson item / attendee list */

.lesson-detail { max-width: 1400px; }
.lesson-detail dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 0 0 18px; }
.lesson-detail dt { font-weight: bold; color: #555; }
.lesson-detail dd { margin: 0; }
.module-by-course + .module-by-course { margin-top: 4px; }
.course-label { font-weight: bold; font-size: 0.9em; color: #444; }
.module-names { color: #333; font-size: 0.95em; margin-left: 8px; }
.section-head { font-size: 1.05em; font-weight: bold; margin: 24px 0 8px; border-bottom: 1px solid #ddd; padding-bottom: 4px; }
.user-search-wrap { position: relative; max-width: 400px; margin-bottom: 16px; }
.user-search-wrap input { width: 100%; padding: 7px 9px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-size: 1em; }
.user-suggestions { position: absolute; left: 0; right: 0; background: white; border: 1px solid #ccc; border-top: none; border-radius: 0 0 4px 4px; z-index: 10; max-height: 220px; overflow-y: auto; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.user-suggestions div { padding: 7px 10px; cursor: pointer; }
.user-suggestions div:hover, .user-suggestions div.active { background: #eef3ff; }
.suggestion-name { font-weight: bold; }
.suggestion-email { color: #777; font-size: 0.9em; margin-left: 6px; }
table.lesson-users { width: 100%; max-width: 700px; border-collapse: collapse; margin-top: 4px; background: white; }
table.lesson-users th { text-align: left; font-size: 0.85em; color: #777; font-weight: normal; padding: 4px 8px; border-bottom: 1px solid #ddd; }
table.lesson-users td { padding: 7px 8px; border-bottom: 1px solid #eee; vertical-align: middle; }
table.lesson-users tr:hover td { background: #f9f9f9; }
.status-paid { color: #1a7a1a; font-weight: bold; font-size: 0.9em; }
.status-advance { color: #2255aa; font-weight: bold; font-size: 0.9em; }
.status-unpaid { color: #bbb; font-size: 0.9em; }
.credits-tag { font-size: 0.82em; color: #888; margin-left: 5px; }
.pay-btn { background: #3060c0; color: white; border: none; padding: 3px 10px; cursor: pointer; border-radius: 3px; font-size: 0.82em; white-space: nowrap; }
.pay-btn:hover { background: #254fa0; }
.del-pay-btn { background: white; border: none; color: #c0392b; cursor: pointer; font-size: 0.82em; padding: 3px 6px; }
.del-pay-btn:hover { text-decoration: underline; }
.remove-btn { background: white; border: none; color: #ccc; cursor: pointer; font-size: 0.82em; padding: 3px 6px; }
.remove-btn:hover { color: #c0392b; text-decoration: underline; }
.btn-group { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

@media (max-width: 800px) {
    .lesson-detail { max-width: 700px; }
    table.lesson-users thead { display: none; }
    table.lesson-users tbody tr { display: flex; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid #ddd; }
    table.lesson-users tbody tr:hover td { background: white; }
    table.lesson-users td { border-bottom: none; padding: 4px 8px; }
    table.lesson-users td.cell-actions { flex: 0 0 100%; border-top: 1px solid #eee; padding-top: 6px; }
}