/* =========================================================
   EduPro Laptop UX Responsive - balanced
   Phạm vi: 1200px - 1500px
   Mục tiêu:
   - GIỮ NGUYÊN SIDEBAR / menu / avatar / toggle.
   - Không dùng zoom / scale / transform toàn trang.
   - Chỉ làm gọn nội dung bên phải ở mức vừa đủ để thao tác tốt trên laptop.
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1500px) {
    html,
    body {
        overflow-x: hidden;
    }
	.edupro-student-dashboard-stat strong {
		font-size: 20px;
	}
    /* Modal/popup luôn nằm trên sidebar */
    body.edupro-modal-open .edupro-sidebar,
    body.edupro-modal-open .edupro-teacher-sidebar,
    body.edupro-modal-open .edupro-student-sidebar,
    body.edupro-modal-open .edupro-admin-sidebar,
    body.edupro-modal-open .edupro-role-sidebar,
    body.edupro-modal-open .edupro-role-sidebar-toggle,
    body.swal2-shown .edupro-sidebar,
    body.swal2-shown .edupro-teacher-sidebar,
    body.swal2-shown .edupro-student-sidebar,
    body.swal2-shown .edupro-admin-sidebar,
    body.swal2-shown .edupro-role-sidebar,
    body.swal2-shown .edupro-role-sidebar-toggle {
        z-index: 1000 !important;
    }

    .edupro-modal-overlay,
    .edupro-modal-overlay.is-open,
    #edupro-session-modal,
    #edupro-assignment-modal,
    #edupro-question-modal,
    #edupro-viewer-modal,
    .edupro-material-viewer-modal,
    .edupro-student-material-viewer-modal,
    .swal2-container {
        z-index: 1000000 !important;
    }

    .edupro-session-modal,
    .edupro-assignment-modal,
    .edupro-question-modal,
    .edupro-viewer-modal-inner,
    .edupro-material-viewer-dialog,
    .swal2-popup {
        z-index: 1000001 !important;
    }

    /* Scope nội dung - tuyệt đối không target sidebar */
	:root {
		--edupro-laptop-page-pad: 20px;
        --edupro-laptop-card-pad: 16px;
        --edupro-laptop-gap: 16px;
        --edupro-laptop-radius: 16px;
        --edupro-laptop-control-h: 30px;
        --edupro-laptop-control-radius: 10px;
        --edupro-laptop-base: 11.5px;
        --edupro-laptop-small: 10px;
        --edupro-laptop-meta: 10.5px;
        --edupro-laptop-h1: clamp(22px, 2vw, 28px);
        --edupro-laptop-h2: 20px;
        --edupro-laptop-h3: 16px;
        font-size: var(--edupro-laptop-base) !important;
	}
/*     :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main,
        .edupro-login-page
    ) {
        
    } */

    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main
    ) {
        padding: var(--edupro-laptop-page-pad) !important;
        box-sizing: border-box !important;
    }

    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main
    ) :where(
        .edupro-page-head,
        .edupro-admin-page-head,
        .edupro-teacher-dashboard-head,
        .edupro-student-hero,
        .edupro-student-page-head,
        .edupro-student-page-title,
        .edupro-profile-page .edupro-page-head
    ) {
		padding: 0 8px !important;
        margin-bottom: 20px !important;
        border-radius: 20px !important;
    }

    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main
    ) :where(
        h1,
        .edupro-page-head h1,
        .edupro-admin-page-head h1,
        .edupro-teacher-dashboard-title h1,
        .edupro-student-hero h1,
        .edupro-student-page-head h1,
        .edupro-student-page-title h1,
        .edupro-profile-page h1,
        .edupro-schedule-pro-page h1,
        .edupro-hero-title
    ) {
        font-size: var(--edupro-laptop-h1) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
    }

    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main
    ) :where(
        h2,
        .edupro-section-title,
        .edupro-panel-title,
        .edupro-card-title,
        .edupro-card h2,
        .edupro-admin-card h2,
        .edupro-review-panel h2
    ) {
        font-size: var(--edupro-laptop-h2) !important;
        line-height: 1.22 !important;
    }

    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main
    ) :where(
        h3,
        h4,
        .edupro-card h3,
        .edupro-class-title-row h2,
        .edupro-student-homework-card h3,
        .edupro-homework-card h3,
        .edupro-student-schedule-info-modern h3,
        .edupro-session-time strong,
        .edupro-dashboard-session-title-row strong
    ) {
        font-size: var(--edupro-laptop-h3) !important;
        line-height: 1.25 !important;
    }

    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main
    ) :where(p, li, td, th, label, input, select, textarea, button, .edupro-btn, .button) {
        font-size: var(--edupro-laptop-base) !important;
        line-height: 1.5 !important;
    }

    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main
    ) :where(
        .edupro-page-head p,
        .edupro-admin-page-head p,
        .edupro-teacher-dashboard-title p,
        .edupro-student-hero p,
        .edupro-student-page-head p,
        .edupro-student-page-title p,
        .edupro-meta,
        .edupro-help-text,
        .edupro-note-text,
        .edupro-description,
        .edupro-subtitle,
        .edupro-empty-state p,
        small
    ) {
        font-size: var(--edupro-laptop-meta) !important;
        line-height: 1.48 !important;
    }

    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main
    ) :where(
        .edupro-badge,
        .edupro-chip,
        .edupro-pill,
        .edupro-tag,
        .edupro-status,
        .edupro-count-badge,
        .edupro-session-badges span,
        .edupro-student-homework-meta,
        .edupro-stat-label,
        .edupro-student-stat-label
    ) {
        font-size: var(--edupro-laptop-small) !important;
        line-height: 1.35 !important;
    }

    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main
    ) :where(
        .edupro-teacher-dashboard-stats,
        .edupro-student-stats,
        .edupro-schedule-pro-grid,
        .edupro-teacher-dashboard-grid,
        .edupro-student-home-grid,
        .edupro-dashboard-metric-grid,
        .edupro-admin-grid,
        .edupro-profile-grid,
        .edupro-review-layout,
        .edupro-grading-layout,
        .edupro-form-grid,
        .edupro-filter-row,
        .edupro-material-form-grid,
        .edupro-student-homework-filter,
        .edupro-admin-filter-row
    ) {
        gap: var(--edupro-laptop-gap) !important;
    }

    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main
    ) :where(
        .edupro-card,
        .edupro-class-card,
        .edupro-dashboard-session-card,
        .edupro-dashboard-class-card,
        .edupro-student-card,
        .edupro-student-homework-card,
        .edupro-create-session-card,
        .edupro-session-list-area,
        .edupro-teacher-dashboard-stat,
        .edupro-student-stat-card,
        .edupro-review-panel,
        .edupro-material-card,
        .edupro-admin-card,
        .edupro-profile-card,
        .edupro-filter-card,
        .edupro-session-item,
        .edupro-homework-item,
        .edupro-material-item,
        .edupro-mini-item,
        .edupro-assignment-item,
        .edupro-admin-list-item,
        .edupro-student-notice-item,
        .edupro-homework-card,
        .edupro-student-assignment-card,
        .edupro-student-schedule-tile
    ) {
        padding: var(--edupro-laptop-card-pad) !important;
        border-radius: var(--edupro-laptop-radius) !important;
    }

    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main,
        .edupro-login-page
    ) :where(input, select, textarea) {
        min-height: var(--edupro-laptop-control-h) !important;
        padding-left: 13px !important;
        padding-right: 13px !important;
        border-radius: var(--edupro-laptop-control-radius) !important;
        box-sizing: border-box !important;
    }

    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main,
        .edupro-login-page,
        .edupro-modal-overlay,
        .swal2-container
    ) :where(button, .edupro-btn, .edupro-btn-primary, .edupro-btn-primary-full, .edupro-button, .button) {
        min-height: var(--edupro-laptop-control-h) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        border-radius: var(--edupro-laptop-control-radius) !important;
        font-size: var(--edupro-laptop-base) !important;
    }

    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main
    ) :where(.edupro-teacher-dashboard-stat, .edupro-student-stat-card) {
        min-height: 92px !important;
    }

    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main
    ) :where(.edupro-teacher-dashboard-stat strong, .edupro-student-stat-card strong, .edupro-dashboard-metric strong, .edupro-stat-number, .edupro-student-stat-number) {
        font-size: 26px !important;
        line-height: 1.05 !important;
    }
	
	.edupro-teacher-dashboard-stat {
		padding: 6px !important;
		min-height: unset !important;
	}
	.edupro-teacher-dashboard-stat strong {
		font-size: 20px !important;
	}
	.edupro-teacher-dashboard-stat small {
		font-size: 10px !important;
	}
    /* Lịch học học viên: giữ layout ngang nhưng tăng khả năng đọc */
    .edupro-student-schedule-filter {
        padding: 16px !important;
        gap: 14px !important;
        border-radius: 18px !important;
    }

    .edupro-student-schedule-grid {
        gap: 16px !important;
    }

    .edupro-student-schedule-tile {
        min-height: 176px !important;
    }

    .edupro-student-schedule-date-box {
        width: 66px !important;
        height: 66px !important;
        border-radius: 18px !important;
    }

    .edupro-student-schedule-date-box strong {
        font-size: 15px !important;
    }

    .edupro-student-schedule-date-box span,
    .edupro-student-schedule-meta span,
    .edupro-student-schedule-status-modern {
        font-size: 11px !important;
    }
	.edupro-student-materials-summary strong {
		font-size: 20px;
	}
	.edupro-student-homework-summary span, .edupro-student-materials-summary span {
		font-size: 10px;
	}
    .edupro-student-schedule-info-modern h3 {
        font-size: 17px !important;
    }

    /* Chấm bài / tiến độ dạy */
    .edupro-review-list,
    .edupro-grading-list {
        max-width: 380px !important;
    }

    .edupro-review-empty,
    .edupro-grading-empty {
        padding: 56px 24px !important;
    }

    .edupro-page-head-progress {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 18px !important;
    }

    .edupro-progress-back-head {
        margin-left: auto !important;
        white-space: nowrap !important;
    }

    .edupro-progress-status-filter {
        min-width: 190px !important;
    }

    /* Modal content: gọn nhưng vẫn dễ đọc */
    .edupro-session-modal,
    .edupro-assignment-modal,
    .edupro-question-modal,
    .edupro-material-viewer-dialog {
        border-radius: 18px !important;
    }

    .edupro-modal-header,
    .edupro-modal-footer,
    .edupro-session-modal-header,
    .edupro-session-modal-footer {
        padding: 18px 22px !important;
    }

    .edupro-modal-body,
    .edupro-session-modal-body {
        padding: 18px 22px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) and (max-height: 820px) {
    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main
    ) {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    :where(
        .edupro-main,
        .edupro-admin-main,
        .edupro-profile-main,
        .edupro-teacher-dashboard-main,
        .edupro-schedule-pro-main,
        .edupro-teacher-reviews-main,
        .edupro-teacher-material-main,
        .edupro-student-main
    ) :where(.edupro-page-head, .edupro-admin-page-head, .edupro-teacher-dashboard-head, .edupro-student-hero) {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
}

/* =========================================================
   EduPro Laptop UI stabilization patch
   - Giữ sidebar nguyên bản.
   - Sửa layout trang chấm bài bị rối trên màn 1200px–1500px.
   - Không dùng zoom/scale/transform.
   ========================================================= */
@media (min-width: 1200px) and (max-width: 1500px) {
    /* Không để main tràn ngang, nhưng không đụng sidebar */
    :where(.edupro-main, .edupro-admin-main, .edupro-teacher-dashboard-main, .edupro-schedule-pro-main, .edupro-teacher-reviews-main, .edupro-teacher-material-main, .edupro-student-main, .edupro-profile-main) {
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    /* Page head gọn hơn, không chiếm quá nhiều chiều cao */
    :where(.edupro-main, .edupro-teacher-reviews-main) :where(.edupro-page-head, .edupro-admin-page-head) {
        min-height: auto !important;
        padding: 18px 22px !important;
        margin-bottom: 18px !important;
    }

    :where(.edupro-main, .edupro-teacher-reviews-main) :where(.edupro-page-head h1, .edupro-admin-page-head h1) {
        font-size: 26px !important;
        line-height: 1.18 !important;
        margin-bottom: 6px !important;
    }

    :where(.edupro-main, .edupro-teacher-reviews-main) :where(.edupro-page-head p, .edupro-admin-page-head p) {
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin: 0 !important;
    }

    /* Trang chấm bài tự luận: bố cục lại cho vừa màn laptop */
    .edupro-essay-grading-app {
        display: grid !important;
        grid-template-columns: minmax(300px, 330px) minmax(0, 1fr) !important;
        gap: 18px !important;
        margin-top: 18px !important;
        align-items: stretch !important;
        max-width: 100% !important;
        height: calc(100dvh - 185px) !important;
        min-height: 560px !important;
        overflow: hidden !important;
    }

    .edupro-essay-left,
    .edupro-essay-right {
        min-height: 0 !important;
        height: 100% !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .edupro-essay-panel-head {
        flex: 0 0 auto !important;
        padding: 18px 18px 12px !important;
        gap: 12px !important;
    }

    .edupro-essay-panel-head h2 {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    .edupro-essay-panel-head p {
        font-size: 12.5px !important;
        line-height: 1.4 !important;
    }

    #eduproEssayCount {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }

    .edupro-essay-filters {
        flex: 0 0 auto !important;
        padding: 0 18px 14px !important;
        gap: 9px !important;
    }

    .edupro-essay-filters select,
    .edupro-essay-filters input {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
        font-size: 12.5px !important;
    }

    .edupro-essay-list {
        flex: 1 1 auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 12px !important;
        scrollbar-gutter: stable !important;
    }

    .edupro-essay-item {
        padding: 12px !important;
        margin-bottom: 9px !important;
        border-radius: 14px !important;
    }

    .edupro-essay-item strong {
        font-size: 13.5px !important;
        line-height: 1.35 !important;
    }

    .edupro-essay-item span,
    .edupro-essay-title {
        font-size: 12.5px !important;
        line-height: 1.4 !important;
    }

    .edupro-essay-badge {
        font-size: 10.5px !important;
        padding: 3px 7px !important;
    }

    .edupro-essay-right {
        overflow-y: auto !important;
        scrollbar-gutter: stable !important;
    }

    .edupro-essay-detail {
        padding: 20px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .edupro-essay-detail-head {
        gap: 16px !important;
        margin-bottom: 16px !important;
    }

    .edupro-detail-label {
        font-size: 11px !important;
        padding: 5px 9px !important;
        margin-bottom: 8px !important;
    }

    .edupro-essay-detail-head h2 {
        font-size: 21px !important;
        line-height: 1.25 !important;
    }

    .edupro-essay-detail-head p {
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin-top: 6px !important;
    }

    .edupro-score-card {
        width: 82px !important;
        min-width: 82px !important;
        height: 82px !important;
        border-radius: 16px !important;
    }

    .edupro-score-card span {
        font-size: 11px !important;
    }

    .edupro-score-card strong {
        font-size: 26px !important;
    }

    .edupro-essay-meta {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 14px 0 18px !important;
    }

    .edupro-essay-meta div {
        padding: 10px 11px !important;
        border-radius: 12px !important;
        min-width: 0 !important;
    }

    .edupro-essay-meta small {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    .edupro-essay-meta strong {
        font-size: 12.5px !important;
        line-height: 1.35 !important;
    }

    .edupro-section-block {
        margin-top: 16px !important;
    }

    .edupro-section-block h3 {
        font-size: 14.5px !important;
        margin-bottom: 8px !important;
    }

    .edupro-content-box,
    .edupro-answer-box {
        padding: 14px !important;
        border-radius: 13px !important;
        font-size: 13px !important;
        line-height: 1.62 !important;
    }

    .edupro-grade-form {
        gap: 12px !important;
        margin-top: 18px !important;
        padding-top: 16px !important;
    }

    .edupro-grade-grid {
        grid-template-columns: 150px minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .edupro-grade-form label {
        font-size: 12.5px !important;
        margin-bottom: 5px !important;
    }

    .edupro-grade-form input,
    .edupro-grade-form textarea,
    .edupro-grade-form select {
        min-height: 38px !important;
        padding: 10px 11px !important;
        border-radius: 10px !important;
        font-size: 12.5px !important;
    }

    .edupro-grade-form textarea {
        min-height: 92px !important;
    }

    .edupro-grade-form small {
        font-size: 11.5px !important;
        margin-top: 5px !important;
    }

    .edupro-grade-submit,
    .edupro-grade-cancel {
        min-height: 38px !important;
        padding: 10px 15px !important;
        border-radius: 10px !important;
        font-size: 12.5px !important;
    }

    .edupro-essay-empty,
    .edupro-essay-empty-detail {
        min-height: 100% !important;
        padding: 24px !important;
    }

    .edupro-empty-circle {
        width: 64px !important;
        height: 64px !important;
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }

    .edupro-essay-empty h3,
    .edupro-essay-empty-detail h2 {
        font-size: 20px !important;
    }

    .edupro-essay-empty p,
    .edupro-essay-empty-detail p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}

@media (min-width: 1200px) and (max-width: 1320px) {
    .edupro-essay-grading-app {
        grid-template-columns: minmax(290px, 310px) minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .edupro-essay-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}