/* Student Portal 2.2.8 — shared visual language and final compatibility layer. */
:root {
    --sp-ink: #17233a;
    --sp-muted: #66758f;
    --sp-blue: #2864e8;
    --sp-blue-dark: #1d4ed8;
    --sp-blue-soft: #eef5ff;
    --sp-line: #dbe4f0;
    --sp-surface: #ffffff;
    --sp-surface-soft: #f7f9fc;
    --sp-danger: #dc3f4f;
    --sp-radius-sm: 12px;
    --sp-radius-md: 16px;
    --sp-radius-lg: 22px;
    --sp-shadow: 0 12px 32px rgba(29, 54, 94, .09);
    --sp-focus: 0 0 0 4px rgba(40, 100, 232, .14);
}

/* Keep plugin pages centred without changing Elementor's site-wide layout. */
.sp-student-dashboard,
.sp-teacher-dashboard,
.sp-profile-page,
.sp-rules-page,
.sp-prices-page,
.sp-faq-page,
.sp-auth-shell,
.sp-register-shell {
    box-sizing: border-box;
    width: min(1240px, calc(100% - 32px));
    max-width: 1240px;
    margin-inline: auto !important;
    color: var(--sp-ink);
}

.sp-student-dashboard *,
.sp-teacher-dashboard *,
.sp-profile-page *,
.sp-rules-page *,
.sp-prices-page *,
.sp-faq-page *,
.sp-auth-shell *,
.sp-register-shell *,
.sp-classroom * { box-sizing: border-box; }

/* Consistent controls. Schedule blocks keep their own compact calendar styling. */
:where(.sp-student-dashboard,.sp-teacher-dashboard,.sp-profile-page,.sp-rules-page,.sp-prices-page,.sp-faq-page,.sp-auth-shell,.sp-register-shell,.sp-classroom,.sp-book-modal,.sp-exercise-modal)
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea) {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid #cbd7e6;
    border-radius: var(--sp-radius-sm);
    outline: 0;
    background: #fff;
    color: var(--sp-ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    font: inherit;
    line-height: 1.4;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

:where(.sp-student-dashboard,.sp-teacher-dashboard,.sp-profile-page,.sp-auth-shell,.sp-register-shell,.sp-classroom,.sp-book-modal,.sp-exercise-modal)
:where(input,select,textarea):focus-visible {
    border-color: var(--sp-blue);
    box-shadow: var(--sp-focus);
}

:where(.sp-student-dashboard,.sp-teacher-dashboard,.sp-profile-page,.sp-auth-shell,.sp-register-shell,.sp-classroom,.sp-book-modal,.sp-exercise-modal) textarea {
    min-height: 104px;
    resize: vertical;
}

:where(.sp-student-dashboard,.sp-teacher-dashboard,.sp-profile-page,.sp-auth-shell,.sp-register-shell,.sp-classroom,.sp-book-modal,.sp-exercise-modal) label {
    color: #34435a;
    font-weight: 700;
}

/* Buttons and links which act as buttons. */
:where(.sp-teacher-primary,.sp-teacher-secondary,.sp-neutral-action,.sp-auth-submit,.sp-register-submit,.sp-prices-button,.sp-calendar-sync-button,.sp-classroom-room-button) {
    min-height: 44px;
    border-radius: var(--sp-radius-sm) !important;
    font-weight: 750;
    line-height: 1.2;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

:where(.sp-teacher-primary,.sp-auth-submit,.sp-register-submit,.sp-prices-button--primary):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(40,100,232,.2);
}

:where(button,a,[role="button"]):focus-visible {
    outline: 3px solid rgba(40,100,232,.3) !important;
    outline-offset: 2px;
}

button:disabled,
[aria-disabled="true"] { cursor: not-allowed !important; opacity: .55; }

/* One circular icon-button model. */
:where(.sp-modal-close,.sp-class-overlay-close,.sp-exercise-modal-close,.sp-delete-cross,.sp-icon-edit,[data-close-modal],[data-close-editor],[data-close-exercise-modal]) {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 auto;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--sp-line) !important;
    border-radius: 50% !important;
    background: #f3f6fa !important;
    color: #26364d !important;
    font-size: 23px !important;
    font-weight: 600;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer;
}

:where(.sp-modal-close,.sp-class-overlay-close,.sp-exercise-modal-close,[data-close-modal],[data-close-editor],[data-close-exercise-modal]):hover {
    border-color: #b8c7dc !important;
    background: #e8eef6 !important;
    color: #111827 !important;
}

.sp-delete-cross:hover {
    border-color: #fecdd3 !important;
    background: #fff1f2 !important;
    color: var(--sp-danger) !important;
}

/* Cards use the same radius, border and restrained shadow. */
:where(.student-dashboard-card,.sp-dashboard-summary,.sp-dashboard-lesson,.sp-teacher-next,.sp-teacher-students,.sp-teacher-books,.sp-teacher-book-form,.sp-teacher-book-open,.sp-teacher-student-profile,.sp-rules-card,.sp-prices-format-card,.sp-auth-card,.sp-register-card) {
    border-color: var(--sp-line) !important;
    border-radius: var(--sp-radius-lg) !important;
    background: var(--sp-surface);
}

.sp-teacher-sections a,
.sp-dashboard-navigation-grid a,
.sp-dashboard-learning-grid a,
.sp-teacher-student-list > a,
.sp-teacher-books-grid article,
.sp-teacher-books-grid > a {
    border-color: var(--sp-line) !important;
    border-radius: var(--sp-radius-md) !important;
    background: var(--sp-surface-soft) !important;
}

.sp-teacher-sections a:hover,
.sp-dashboard-navigation-grid a:hover,
.sp-dashboard-learning-grid a:hover,
.sp-teacher-student-list > a:hover,
.sp-teacher-books-grid article:hover,
.sp-teacher-books-grid > a:hover {
    border-color: #a9c7fb !important;
    background: #fff !important;
    box-shadow: var(--sp-shadow) !important;
    transform: translateY(-2px);
}

/* Modals: complete viewport overlay, reliable scrolling and readable contrast. */
:where(.sp-modal,.sp-book-modal,.sp-exercise-modal,.sp-class-overlay)[aria-hidden="false"],
:where(.sp-modal,.sp-book-modal,.sp-exercise-modal,.sp-class-overlay):not([hidden]).open,
:where(.sp-book-modal,.sp-exercise-modal,.sp-class-overlay):not([hidden]) {
    overscroll-behavior: contain;
}

.sp-book-modal,
.sp-exercise-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99990 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: clamp(12px, 3vw, 32px) !important;
    overflow: auto !important;
    background: rgba(15, 23, 42, .68) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.sp-book-modal > div,
.sp-exercise-modal-dialog {
    width: min(980px, 100%) !important;
    max-height: none !important;
    margin: auto !important;
    padding: clamp(22px, 4vw, 38px) !important;
    overflow: visible !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 30px 90px rgba(15,23,42,.32) !important;
}

.sp-exercise-modal-dialog { min-height: min(620px, calc(100dvh - 48px)); }
.sp-exercise-modal-close,
.sp-book-modal [data-close-modal] { position: sticky !important; z-index: 8; top: 0 !important; float: right; }

/* Exercise catalogue and editor. */
.sp-exercise-template-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px !important;
}

.sp-exercise-template-grid > :where(button,a) {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid var(--sp-line) !important;
    border-radius: var(--sp-radius-md) !important;
    background: #fff !important;
    box-shadow: 0 3px 12px rgba(15,23,42,.04);
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.sp-exercise-template-grid > :where(button,a):hover {
    border-color: #8cb5f8 !important;
    box-shadow: var(--sp-shadow);
    transform: translateY(-2px);
}

.sp-exercise-editor-form { gap: 18px !important; }
.sp-exercise-editor-form > button[type="submit"] {
    min-height: 46px;
    padding: 11px 20px;
    border: 0;
    border-radius: var(--sp-radius-sm);
    background: var(--sp-blue);
    color: #fff;
    font-weight: 800;
}

/* Lesson cards and toolbars. */
.sp-class-assigned-exercises > article,
.sp-lesson-exercise-card,
.sp-article-exercise,
.sp-essay-exercise,
.sp-note-exercise,
.sp-vocabulary-exercise,
.sp-true-false-exercise,
.sp-test-exercise,
.sp-gaps-exercise {
    border-color: var(--sp-line) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 16px rgba(15,23,42,.045);
}

:where(.sp-exercise-actions,.sp-article-toolbar,.sp-essay-toolbar,.sp-image-tools,.sp-annotation-toolbar) button {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
    padding: 7px;
    border-radius: 11px;
}

/* Classroom consistency. */
.sp-class-workspace { color: var(--sp-ink); background: #f5f8fc; }
.sp-class-sidebar { border-right-color: var(--sp-line); background: #f8fafc; }
.sp-class-sidebar :where(a,button) {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.sp-class-topbar { border-bottom-color: var(--sp-line); background: rgba(255,255,255,.96); }
.sp-current-lesson,
.sp-class-call-card,
.sp-class-lesson-sections { border-color: var(--sp-line) !important; box-shadow: none; }
.sp-class-overlay { background: rgba(15,23,42,.6) !important; backdrop-filter: blur(2px); }
.sp-class-overlay-dialog { box-shadow: 0 28px 80px rgba(15,23,42,.3) !important; }
.sp-chat-compose { align-items: center !important; }
.sp-chat-compose button { display: grid !important; place-items: center !important; padding: 0 !important; }
.sp-chat-compose textarea { min-height: 44px !important; border-radius: 14px !important; }

/* Feedback and validation states. */
.sp-teacher-notice,
.sp-auth-notice,
.sp-register-notice {
    border: 1px solid currentColor;
    border-radius: 14px !important;
    line-height: 1.5;
}

form.is-sp-submitting { opacity: .78; pointer-events: none; }
form.is-sp-submitting button[type="submit"] { cursor: wait !important; }

/* Responsive polish. */
@media (max-width: 900px) {
    .sp-student-dashboard,
    .sp-teacher-dashboard,
    .sp-profile-page,
    .sp-rules-page,
    .sp-prices-page,
    .sp-faq-page { width: min(100% - 24px, 1240px); }

    .sp-teacher-hero { align-items: flex-start; }
    .sp-teacher-profile-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
    .sp-student-dashboard,
    .sp-teacher-dashboard,
    .sp-profile-page,
    .sp-rules-page,
    .sp-prices-page,
    .sp-faq-page { width: min(100% - 16px, 1240px); }

    .sp-teacher-hero,
    .sp-teacher-next,
    .sp-teacher-students,
    .sp-teacher-books,
    .sp-teacher-book-open { padding: 18px !important; }

    .sp-teacher-next-row,
    .sp-teacher-section-title { align-items: stretch !important; flex-direction: column; }
    .sp-teacher-next-row .sp-teacher-secondary { margin-left: 0 !important; }
    .sp-exercise-template-grid { grid-template-columns: 1fr !important; }
    .sp-book-modal,
    .sp-exercise-modal { padding: 8px !important; }
    .sp-book-modal > div,
    .sp-exercise-modal-dialog { padding: 20px 16px !important; border-radius: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-student-dashboard *,
    .sp-teacher-dashboard *,
    .sp-classroom * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}