/* =========================================================
   GLOBAL / BASE (Site-wide)
   ========================================================= */

/* ---- Root font sizing ---- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* ---- Focus states (Bootstrap overrides) ---- */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #eb8613b9;
}

/* ---- Layout baseline ---- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}

/* ---- Default tables (site-wide) ---- */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  margin: 1em 0;
}

th {
  background-color: #ff8800; /* orange header */
  color: white;
  text-align: left;
  padding: 10px;
}

td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
  background-color: #f9f9f9; /* subtle zebra striping */
}

tr:hover {
  background-color: #f1f1f1; /* highlight row on hover */
}

/* Optional: centre vertically */



/* =========================================================
   LOGIN / REGISTER PAGE (Auth)
   ========================================================= */

/* Subtle page background */
body {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 60%);
}

/* Card */
.form-signin {
  max-width: 420px;
  margin: 64px auto;
  padding: 28px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* Title */
.form-signin h1 {
  margin-bottom: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* Labels feel cleaner */
.form-signin label {
  font-weight: 600;
  margin-bottom: 6px;
}

/* Inputs: slightly taller + nicer focus */
.form-signin .form-control {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
}

.form-signin .form-control:focus {
  border-color: rgba(255, 140, 0, 0.55);
  box-shadow: 0 0 0 0.2rem rgba(255, 140, 0, 0.18);
}

/* Button: full-width, modern, consistent */
.form-signin button.btn {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 700;
}

/* Link row: tidy + aligned */
.form-signin p {
  margin-top: 14px;
}

.form-signin p i {
  color: rgba(0,0,0,0.65);
}

/* Footer */
.form-signin .text-muted,
.form-signin p.mt-5 {
  margin-top: 24px !important;
  text-align: center;
}

/* Login button hover / focus */
.form-signin button.btn-primary:hover,
.form-signin button.btn-primary:focus {
  background-color: #e67e00;   /* darker orange */
  border-color: #e67e00;
}

/* Back to login link */
.form-signin .login-back-link {
  margin-bottom: 18px;
}

.form-signin .login-back-link a {
  color: rgba(0,0,0,0.6);
  text-decoration: none;
  font-size: 0.9rem;
}

.form-signin .login-back-link a:hover {
  color: #e67e00; /* match your orange hover */
  text-decoration: underline;
}

/* Auth header: title + back link */
.form-signin .auth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

/* Back to login link */
.form-signin .auth-back-link {
  font-size: 0.9rem;
  color: #000;               /* black by default */
  text-decoration: none;
  white-space: nowrap;
}

.form-signin .auth-back-link:hover {
  color: #e67e00;            /* orange on hover */
  text-decoration: underline;
}

/* Navbar logo */
.navbar-logo {
  height: 45px;   /* adjust if needed */
  width: auto;
  display: block;
}

.form-signin {
  font-family:
    system-ui, 
    -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", /* Windows (Global & CN) */
    "PingFang SC", /* Chinese OS */
    "Microsoft YaHei", /* Chinese OS */
    Arial, 
    sans-serif; 
}
.register-form button.btn {
  margin-top: 18px;
}

/* =========================================================
   Landing Page Background
   ========================================================= */

body.landing-page {
    background: url('/img/background.png') no-repeat center center fixed;
    background-size: cover;
}

body.landing-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.3); /* light overlay */
    pointer-events: none;
    z-index: -1;
}

/* =========================================================
   USER PROFILE PAGE STYLING
   ========================================================= */

/* Page background */
body {
  background:
    radial-gradient(1000px 600px at 10% 10%, rgba(255,140,0,.10), transparent 60%),
    radial-gradient(800px 500px at 90% 20%, rgba(255,140,0,.06), transparent 55%),
    #f6f7fb;
}

/* Main profile card */
.container .card.shadow-sm {
  border-radius: 18px;
  border: none;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  overflow: hidden;
}

/* Avatar */
.container img.rounded-circle {
  width: 110px;
  height: 110px;
  object-fit: cover;
  background: #fff;
  padding: 6px;
  border-radius: 50%;
  box-shadow: 
    0 0 0 4px #fff,
    0 0 0 8px rgba(255,140,0,.35),
    0 12px 25px rgba(0,0,0,.12);
}

/* Card body spacing */
.card-body {
  padding: 24px 28px;
}

/* Name */
.card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #222;
}

/* Role + info text */
.card-text {
  margin-bottom: 8px;
}

.card-text.text-muted i {
  color: #ff8c00;
  margin-right: 6px;
}

/* Divider between content and footer */
.card-footer {
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 16px;
}

/* Footer buttons */
.card-footer .btn-link {
  font-weight: 600;
  color: #ff8c00;
  padding: 10px 16px;
  border-radius: 12px;
  transition: all .15s ease;
}

.card-footer .btn-link:hover {
  background: rgba(255,140,0,.12);
  text-decoration: none;
}



/* =========================================================
   UPDATE FORM CARD (Profile Update Form)
   ========================================================= */

/* Top navigation links hover effect */
nav a,
.navbar a {
  font-weight: 600;
  transition: color .15s ease;
}

nav a:hover,
.navbar a:hover {
  color: #ff8c00 !important;
  font-weight: 700;
}

.container > .card.shadow-sm.p-2 {
  margin-top: 40px !important;
  border-radius: 18px;
  border: none;
  padding: 28px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  background: #fff;
}

/* Form labels */
.form-label {
  font-weight: 600;
  color: #333;
}

/* Inputs */
.form-control {
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.12);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus {
  border-color: #ff8c00;
  box-shadow: 0 0 0 4px rgba(255,140,0,.15);
}

/* Update button */
.btn-primary {
  background: linear-gradient(135deg, #ff8c00, #ff7300);
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 600;
  box-shadow: 0 10px 22px rgba(255,140,0,.35);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(255,140,0,.45);
}

/* Validation text */
.text-danger {
  font-size: .85rem;
  margin-top: 4px;
}

/* Better vertical spacing on mobile */
@media (max-width: 768px) {
  .container .card.shadow-sm {
    margin-top: 40px !important;
  }

  .card-body {
    padding: 20px;
  }
}

.card-body i {
  width: 18px;
  text-align: center;
  margin-right: 7px;
}



/* =========================================================
   COURSE NOTES PAGE SPACING (Overview)
   ========================================================= */

/* Page container breathing room */
.course-notes-page,
.courseNotes {
  padding-top: 48px;
  padding-bottom: 48px;
}

/* Page title */
.course-notes h1,
.course-notes h2 {
  margin-bottom: 20px;
  line-height: 1.2;
}

/* New Session button spacing */
.course-notes .btn,
.course-notes button {
  margin-top: 12px;
  margin-bottom: 28px;
}

/* Section headings */
.course-notes h3,
.course-notes h4 {
  margin-top: 32px;
  margin-bottom: 16px;
  font-weight: 700;
}

/* Left column spacing (Sessions list) */
.course-notes .left-column,
.course-notes .sessions-column {
  padding-right: 40px;
}

/* Right column spacing (Latest Homework Submissions) */
.course-notes .right-column {
  padding-left: 40px;
}

/* Align top of both columns */
.course-notes .row > div {
  padding-top: 8px;
}

/* Mobile spacing fixes */
@media (max-width: 768px) {
  .course-notes .left-column,
  .course-notes .sessions-column,
  .course-notes .right-column {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 40px;
  }
}

.timeline-delete-btn{
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
}
.timeline-delete-btn:hover{
  opacity: 0.8;
}

/* =========================================================
   TUTOR DASHBOARD PAGE LAYOUT
   ========================================================= */

/* Page container – no extra padding */
.tutor-dashboard-page,
.tutorDashboard {
  padding-top: 0px;
  padding-bottom: 0px;
}

/* Override Bootstrap py-5 on the section (smaller top spacing) */
.tutor-dashboard section,
.tutor-dashboard section.py-5 {
  padding-top: 28px !important;   /* ↓ was 70px */
  padding-bottom: 4px !important;
  margin-bottom: 0;
}

.tutor-dashboard section .row,
.tutor-dashboard section .row.py-lg-5 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0;
  margin-bottom: 0;
}

/* Page title – minimal gap above & below */
.tutor-dashboard h1,
.tutor-dashboard h2 {
  margin-top: 0;
  margin-bottom: 8px;
  line-height: 1.1;
}

/* Card area sits right under the title */
.tutor-dashboard .album {
  padding-top: 0;
  margin-top: 0;
}

/* Stack cards vertically + centre */
.tutor-dashboard .album .row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;

  max-width: 440px;
  margin: 0 auto;
}

/* Card styling */
.tutor-dashboard .card {
  width: 420px;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 10px 18px rgba(0,0,0,.04);
  overflow: hidden;
}

/* Just in case any svg placeholders remain */
.tutor-dashboard svg.bd-placeholder-img {
  display: none;
}

/* Card content spacing */
.tutor-dashboard .card-body {
  padding: 18px 20px;
  text-align: center;
}

/* Text */
.tutor-dashboard .card-text {
  margin-bottom: 8px;
  font-weight: 600;
}

/* Links */
.tutor-dashboard .btn-group a {
  text-decoration: none;
  font-weight: 500;
  color: #ff8a00;
}

.tutor-dashboard .btn-group a:hover {
  text-decoration: underline;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .tutor-dashboard .card {
    width: 100%;
    margin: 0 14px;
  }

  .tutor-dashboard .album .row {
    max-width: 100%;
  }
}
/* =========================================================
   TUTOR DASHBOARD – Welcome pop-up
   ========================================================= */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.walkthrough {
    background: #fff;
    width: 520px;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
    overflow: hidden;
}

/* Header */
.walkthrough .header {
    padding: 18px 24px;
    font-size: 1.4rem;
    font-weight: 600;
    border-bottom: 1px solid #eee;
}

/* Content */
.walkthrough .content {
    padding: 24px;
}

.walkthrough .text {
    margin-top: 0;
}

/* Typography */
.walkthrough .welcome-title {
    font-size: 1.9rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.walkthrough .welcome-lead {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.7;
    margin-bottom: 14px;
}

.walkthrough .welcome-sub {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #555;
}

/* Footer */
.walkthrough .footer {
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #eee;
}

.wt-btn {
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    cursor: pointer;
}

.wt-finish {
    background: #ff8c00;
    color: #fff;
}



/* =========================================================
   STUDENT MANAGEMENT PAGE
   ========================================================= */

.student-management {
  padding-top: 32px;
  padding-bottom: 48px;
}

/* Main page titles (general h2 styling) */
.student-management h2 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 28px;
}

/* Only move the FIRST/top h2 ("Your Students") up */
.student-management > h2 {
  margin-top: -10px;
}

/* Left column: student list card */
.student-management .list-group {
  border-radius: 16px;
  background-color: #ffffff;
  border: 1px solid #f0f0f0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
  padding: 4px 0;
  max-width: 520px;
  width: 100%;
}

.student-management .list-group-item {
  border: 0;
  border-bottom: 1px solid #f5f5f5;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.98rem;
}

.student-management .list-group-item:last-child {
  border-bottom: none;
}

/* Email link style */
.student-management .list-group-item a {
  font-size: 0.9rem;
  color: #ff8a00;
  text-decoration: none;
}

.student-management .list-group-item a:hover {
  text-decoration: underline;
}

/* Right column: invite panel */
.student-management .col:last-child {
  max-width: 520px;
  margin-left: 30px;
  margin-top: -70px;
}

.student-management .col:last-child h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.student-management .col:last-child p {
  color: #555;
  margin-bottom: 14px;
}

/* Invite URL pill */
.student-management .copy-box {
  background-color: hsl(0, 0%, 100%);
  border: 1px solid #f0f0f0;
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.student-management .copy-box:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.08);
}

/* Long URL behaviour */
.student-management #registerUrl {
  margin-bottom: 0;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow-x: auto;
}

/* Copy button styling */
.student-management .copy-box .btn {
  border-radius: 999px;
  border-color: #ff8a00;
  color: #ff8a00;
  padding-inline: 10px;
}

.student-management .copy-box .btn:hover {
  background-color: #ff8a00;
  color: #ffffff;
  border-color: #ff8a00;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .student-management {
    padding-top: 24px;
  }

  .student-management .row {
    row-gap: 32px;
  }

  .student-management .col:last-child {
    max-width: 100%;
    margin-left: 0;
  }
}
.student-management .invite-link {
  border-radius: 999px;
  font-size: 0.95rem;
  padding: 10px 14px;
  border: 1px solid #e6e6e6;
  background: #fafafa;
  cursor: text;
}

.student-management .invite-link:focus {
  border-color: #ff8a00;
  box-shadow: 0 0 0 2px rgba(255, 138, 0, 0.15);
}

.student-management .copy-btn {
  white-space: nowrap;
  border-radius: 999px;
  font-weight: 600;
}
.btn-remove-student {
    border: none;
    background: transparent;
    color: #dc3545;
    font-size: 20px;
    line-height: 1;
    padding: 2px 8px;
    cursor: pointer;
}

.btn-remove-student:hover {
    color: #a71d2a;
    transform: scale(1.1);
}

.student-info {
    display: flex;
    flex-direction: column;
}

.student-email {
    font-size: 0.85rem;
    color: #ff7a00;
}

.remove-student-form {
    margin: 0;
}

/* =========================
   Homework Generator (HomeworkGen)
   ========================= */

/* Small count input width (replaces inline style="width:90px") */
.hw-count {
    width: 90px;
}

/* Tutor homework preview box (replaces inline white-space style) */
.tutor-homework-preview {
    white-space: pre-wrap;
}

/* =========================
   Eli Loading Overlay (shared)
   ========================= */

.eli-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.eli-modal {
    background: #fff;
    width: min(520px, 92vw);
    border-radius: 14px;
    padding: 26px 22px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.eli-modal .spinner-border {
    width: 3rem;
    height: 3rem;
}

.eli-text {
    margin-top: 14px;
    font-size: 1.05rem;
    font-weight: 600;
}

/* Utility (if you don’t already have it globally) */
.d-none {
    display: none !important;
}

/* =========================================================
   NAVBAR (My Profile / Course Notes / Homework)
   ========================================================= */
.action-li {
  background-color: darkorange;
  border-radius: 8px;
}

.action-li-outline {
  border-color: darkorange;
  border-radius: 8px;
}

.rounded-pill {
  width: fit-content;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.btn-primary {
  background-color: darkorange;
  color: white;
}

p {
  color: dimgrey;
}

.bg-primary {
  background-color: darkorange !important;
}

.bg-secondary {
  background-color: #80808029 !important;
  color: grey;
}

.avatar-bg {
  background-color: #ff8c004f;
  width: 50px;
  height: 50px;
  border-radius: 30px;
}

.navbar-subs {
  border-top-color: orange;
  border-bottom-color: orange;
  border-bottom-style: solid;
}

.container > .navbar-subs {
  margin-bottom: 40px;
}



/* =========================================================
   COURSE NOTES PAGE (Headers / Titles)
   ========================================================= */
.course-notes-page {
  margin-top: -50px;
}

/* ---- Main Page Title ---- */
.notes-main-title {
  font-size: 2.5rem;
  font-weight: 500;
  padding-top: 12px;
  padding-bottom: 5px;
  margin-bottom: 6px;
}

/* ---- Top Headings Row ---- */
.notes-header-row {
  font-size: 2.5rem;
  font-weight: 500;
  margin-bottom: 0;
}

/* ---- Latest Homework Submissions ---- */
.homework-title {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.1;
  text-align: right;
}

/* ---- Add Notes Button ---- */
.btn.notes-add-btn {
  margin-top: 4px;
  margin-bottom: 14px;

  padding: 10px 35px;
  font-size: 1.3rem;
  border-radius: 10px;
  font-weight: 600;
}

/* ---- Previous Class Notes ---- */
.notes-subtitle {
  font-size: 2.5rem;
  font-weight: 500;
  margin-top: 18px;
}

.latest-homework-list {
  max-width: 520px;
  margin-left: auto;
  margin-right: 0;
}

/* Small centred action card */
.homework-action-card {
    background: #fff;
    padding: 14px 18px;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* Button base (same shape for both) */
.btn-save,
.btn-submit {
    border-radius: 10px;
    padding: 8px 18px;
    font-weight: 600;
    border: none;
}

/* Save progress = orange */
.btn-save {
    background: #ff8a00;
    color: #fff;
}

.btn-save:hover {
    background: #e67a00;
}

/* Submit = green */
.btn-submit {
    background: #28a745;
    color: #fff;
}

.btn-submit:hover {
    background: #218838;
}

/* =========================================================
   TIMELINE
   ========================================================= */
.timeline {
  position: relative;
  margin: 10px 0 20px;
  padding-left: 0;
  border-left: 5px solid orange;
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
}

.timeline-marker {
  position: absolute;
  left: -14px;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: orange;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #ffa500;
}

.timeline-content {
  padding: 1px 25px;
}

.timeline-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.timeline-date {
  margin: 0;
  font-size: 0.9rem;
  color: #666666;
}



/* =========================================================
   NOTES PAGE (ViewNote)
   ========================================================= */
.notes-page {
  padding-top: 10px;
  padding-bottom: 48px;
}

.notes-title {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 15px;
  margin-bottom: 8px;
  text-align: left;
}

.notes-meta label {
  font-size: 1rem;
  color: #555;
  text-align: center;
}

.notes-section-heading {
  margin-top: 20px;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 2.1rem;
  text-align: center;
}

/* ---- Notes content table (Model.Notes) ---- */
.notes-content table {
  width: 85%;
  margin: 0 auto;
  border-collapse: collapse;
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
  margin-bottom: 32px;
  font-size: 1.05rem;
}

.notes-content th {
  text-align: center;
  vertical-align: middle;
}

.notes-content td {
  padding: 10px 14px;
}

.notes-content td:first-child {
  font-weight: 700;
}

.notes-content thead th {
  background-color: darkorange;
  color: #ffffff;
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.notes-content tbody tr:nth-child(even) {
  background-color: #fff9f2;
}

.notes-content tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

.notes-content tbody tr:hover {
  background-color: #ffe4c2;
}

/* ---- Cards: Homework & Next lesson plan ---- */
.notes-difficulty {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 0.98rem;
}

.notes-difficulty b {
  color: darkorange;
}

.notes-page .card {
  border: 1px solid #f0f0f0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
}

.notes-page .card-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #333;
}

.card-heading {
  font-size: 2.4rem;
  font-weight: 700;
  color: #333;
  margin-top: 60px;
  padding-bottom: 40px;
  text-align: center;
}

.notes-page .card-body {
  width: 85%;
  border-radius: 16px;
  font-size: 0.96rem;
  line-height: 1.6;
  white-space: pre-wrap;
  text-align: center;
}

/* Homework card — controls size + position, NOT text *//* Primary orange CTA button (site-wide) */
.btn-classly-primary {
  background-color: darkorange;
  color: #fff;
  border: none;
  border-radius: 999px; /* pill shape */
  padding: 12px 28px;
  font-size: 1.05rem;
  font-weight: 600;
  box-shadow: 0 10px 20px rgba(255, 140, 0, 0.25);
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-classly-primary:hover {
  background-color: #ff8c00;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(255, 140, 0, 0.35);
}

.btn-classly-primary:active {
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(255, 140, 0, 0.25);
}

.card.homework-card {
  width: 85%;
  margin: 0 auto;
  border: 2px solid darkorange !important;
  border-radius: 18px;
}

/* Text in Homework card */
.homework-card {
  width: 85%;
  border-radius: 16px;
}

.card.NextLessonPlan-card {
  width: 85%;
  margin: 0 auto;
  border: 2px solid darkorange !important;
  border-radius: 18px;
}
/* Homework – Save button (green, no hover change) */
.hw-save-btn {
    background-color: #ff8c00;
  color: #fff;
  border: none;
  border-radius: 999px; /* pill shape */
  padding: 12px 28px;
  font-size: 1.05rem;
  font-weight: 600;
  box-shadow: 0 10px 20px rgba(255, 140, 0, 0.25);
  transition: all 0.2s ease;
  text-decoration: none;
}

/* Lock hover/focus/active to same colour */
.hw-save-btn:hover{
background-color: #ff8c00;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(255, 140, 0, 0.35);
}
.hw-save-btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(255, 140, 0, 0.25);
}

.hw-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Small screen spacing */
@media (max-width: 767.98px) {
  .notes-page {
    padding-top: 24px;
  }

  .notes-title {
    font-size: 2.2rem;
  }
}



/* =========================================================
   DASHBOARD SPACING TWEAKS (Shared)
   ========================================================= */

/* Reduce space under navbar */
body > header,
.navbar {
  margin-bottom: 10px !important;
}

/* Reduce space around the dashboard title section */
section.py-5.text-center.container {
  padding-top: 40px !important;
  padding-bottom: 30px !important;
}

/* Reduce space between header and cards area */
.album.py-5 {
  padding-top: 30px !important;
}



/* =========================================================
   HOMEWORK SUBMISSION
   ========================================================= */
.lesson-notes-wrapper {
  margin-top: 30px;
}

.lesson-notes-wrapper table {
  margin: 0 auto;
  width: 95%;
  max-width: 1100px;
}

.lesson-notes-wrapper th,
.lesson-notes-wrapper td {
  text-align: left;
  padding: 10px 12px;
}
/* =========================================================
   HOMEWORK SUBMISSION - Sentence Matching (colour pairs)
   ========================================================= */

.match-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.match-item {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  user-select: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}

.match-item:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.match-item.selected {
  outline: 2px dashed #ff8c00;
  outline-offset: 2px;
  border-color: #ff8c00;
}

/* Base paired look (colour is applied via pair-* classes below) */
.match-item.paired {
  border-width: 2px;
  font-weight: 600;
}

/* Optional: make paired items still feel clickable */
.match-item.paired:hover {
  transform: translateY(-1px);
}

/* High-contrast colour palette (20 distinct pairs) */
.match-item.pair-0  { border-color:#0f9d58; background:#e6f4ea; }  /* green */
.match-item.pair-1  { border-color:#1a73e8; background:#e8f0fe; }  /* blue */
.match-item.pair-2  { border-color:#9334e6; background:#f3e8fd; }  /* purple */
.match-item.pair-3  { border-color:#ea8600; background:#fff3e0; }  /* orange */
.match-item.pair-4  { border-color:#d93025; background:#fce8e6; }  /* red */
.match-item.pair-5  { border-color:#d00897; background:#e0f2f1; }  /* teal */
.match-item.pair-6  { border-color:#f9ab00; background:#fff8e1; }  /* yellow */
.match-item.pair-7  { border-color:#3f51b5; background:#e8eaf6; }  /* indigo */
.match-item.pair-8  { border-color:#d81b60; background:#fce4ec; }  /* pink */
.match-item.pair-9  { border-color:#00acc1; background:#e0f7fa; }  /* cyan */
.match-item.pair-10 { border-color:#7cb342; background:#f1f8e9; }  /* lime */
.match-item.pair-11 { border-color:#c2185b; background:#fce4ec; }  /* rose */
.match-item.pair-12 { border-color:#5e35b1; background:#ede7f6; }  /* violet */
.match-item.pair-13 { border-color:#2e7d32; background:#e8f5e9; }  /* emerald */
.match-item.pair-14 { border-color:#ef5350; background:#ffebee; }  /* coral */
.match-item.pair-15 { border-color:#0288d1; background:#e1f5fe; }  /* sky */
.match-item.pair-16 { border-color:#ff8f00; background:#fff3e0; }  /* amber */
.match-item.pair-17 { border-color:#0097a7; background:#e0f7fa; }  /* aqua */
.match-item.pair-18 { border-color:#6a1b9a; background:#f3e5f5; }  /* deep purple */
.match-item.pair-19 { border-color:#455a64; background:#eceff1; }  /* slate */


/* If you want a subtle “done” feel on the section */
#matching.is-complete .text-body-secondary {
  font-weight: 600;
}
/* =========================================================
   VIEW HOMEWORK
   ========================================================= */
.fill-ok {
  color: #198754;      /* green */
  font-weight: 700;
}

.fill-bad {
  color: #dc3545;      /* red */
  font-weight: 700;
}

.blank-answered {
    background: rgba(13, 110, 253, .08);
    border-color: rgba(13, 110, 253, .18);
    color: #0d6efd;
    font-weight: 700;
}

/* =========================================================
   LEARNING DASHBOARD
   ========================================================= */

/* Reduce space under navbar */
body > header,
.navbar {
  margin-bottom: 6px !important;
}

/* Reduce space around the dashboard title section */
section.py-5.text-center.container {
  padding-top: 28px !important;
  padding-bottom: 10px !important;
}

/* Reduce space between header and cards area */
.album.py-5 {
  padding-top: 12px !important;
  padding-bottom: 40px !important;
}



/* =========================================================
   STUDENT HOMEPAGE
   ========================================================= */
.dashboard-card {
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    border: 1px solid #f3e6d8;
    transition: all 0.25s ease;
}

.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(255, 140, 0, 0.15);
}

.dashboard-card .fw-semibold {
    font-size: 1.25rem;
    color: #333;
}

.dashboard-card .text-muted {
    font-size: 0.95rem;
}

.classly-btn {
    background: linear-gradient(135deg, #ff8c00, #ff6a00);
    color: #fff;
    padding: 10px 26px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.classly-btn:hover {
    background: linear-gradient(135deg, #ff6a00, #ff8c00);
    transform: scale(1.05);
}
.study-lab-title {
    font-weight: 700;      /* bold */
    font-size: 1.5rem;    /* bigger title */
}

.study-lab-subtext {
    font-size: 1.1rem;    /* slightly larger body text */
}

@media (max-width: 768px) {

  /* Stop the expanded notes panel from shifting right */
  .studylab-notes .accordion-body,
  .studylab-notes .collapse,
  .studylab-notes .collapsing {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* If notes content uses Bootstrap rows, remove their negative margins */
  .studylab-notes .accordion-body .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

}

/* =========================================================
   CLASSLY ORANGE PILL BUTTON
   ========================================================= */
.classly-btn {
  display: inline-block;
  background-color: #ff8c00;
  color: #fff;
  padding: 10px 22px;
  border-radius: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.classly-btn:hover {
  background-color: #e67600;
  color: #fff;
}

.download-notes-btn {
  border-radius: 10px;
  font-weight: 600;
  padding: 6px 12px;
  color: #ff8c00;
  border: 1px solid #ff8c00;
}

.download-notes-btn:hover {
  background-color: #ff8c00;
  color: #fff;
}



/* =========================================================
   STUDY LAB
   ========================================================= */
/* Force cards + headers to always be full width (prevents "shrink to text") */
.study-lab .card {
  width: 100%;
}

.study-lab .card-header {
  display: block;
  width: 100%;
}

.study-lab .card-header > .btn,
.study-lab .card-header > button {
  display: flex;     /* keep your chevron/badge layout */
  width: 100%;
}

/* Consistent spacing between stacked cards (within the same column) */
.study-lab .col-lg-6 .card + .card {
  margin-top: 1.5rem; /* matches your mt-4-ish spacing */
}

/* When columns stack (below lg), add the same spacing between left + right column cards */
@media (max-width: 991.98px) {
  .study-lab .row.g-4 > .col-lg-6 + .col-lg-6 {
    margin-top: 1.5rem;
  }
}
/* Card headers: orange background + bold titles */
.study-lab .card-header {
  background-color: #ff8c00;
  border-bottom: none;
}

.study-lab .submitted-hw-header {
  background-color: #198754;
  border-bottom: none;
  color: #fff;
}

/* Header text: white and bold */
.study-lab .card-header .fw-semibold {
  font-weight: 700 !important;
  color: #fff;
}

/* Start buttons: orange primary style */
.study-lab .btn-outline-primary {
  border-color: #ff8c00;
  color: #ff8c00;
  font-weight: 600;
}

.study-lab .btn-outline-primary:hover {
  background-color: #ff8c00;
  color: #fff;
}

/* Download buttons */
.study-lab .btn-outline-warning {
  border-color: #f59e0b;
  color: #f59e0b;
}

.study-lab .btn-outline-warning:hover {
  background-color: #f59e0b;
  color: #fff;
}

/* Badge tweak to match brand */
.study-lab .badge.bg-warning {
  background-color: #fbbf24 !important;
  color: #78350f !important;
}

/* Collapsible card headers */
.study-collapse-btn {
  background: transparent;
  border: 0;
  border-radius: 0;
}

.study-collapse-btn:focus {
  box-shadow: none;
}

/* Chevron rotation */
.study-collapse-btn .study-chevron {
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s ease;
}

/* When the collapse is CLOSED, Bootstrap sets aria-expanded="false" */
.study-collapse-btn[aria-expanded="false"] .study-chevron {
  transform: rotate(-90deg);
}

/* Force submitted header button to behave like the other headers */
.study-lab .submitted-hw-header > .study-collapse-btn {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: #fff;
}

.study-lab .submitted-hw-header .fw-semibold {
  color: #fff !important;
}
.study-collapse-btn .study-chevron {
  font-size: 1.1rem;
  opacity: 0.9;
}

.study-collapse-btn:hover .study-chevron {
  transform: scale(1.1);
}
.study-collapse-btn {
  cursor: pointer;
}

.study-collapse-btn:hover {
  background: rgba(255,255,255,0.08);
}

/* =========================================================
   HOMEWORK VOCAB PILL BOXES
   ========================================================= */
.vocab-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff4e8;
  border: 1px solid #ffb36b;
  color: #8a3d00;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all 0.15s ease;
}

.vocab-chip:hover {
  background: #ffe6cc;
  transform: translateY(-1px);
}



/* =========================================================
   HOMEWORK QUESTIONS
   ========================================================= */
.hw-section { margin-top: 10px; }

.hw-q {
  padding: 14px 14px;
  border: 1px solid #eee;
  border-radius: 14px;
  margin-bottom: 12px;
  background: #fff;
}

.hw-qtitle { font-weight: 700; margin-bottom: 10px; color: #222; }

.fill-render { font-size: 1.05rem; line-height: 1.8; }

.blank-input {
  display: inline-block;
  min-width: 110px;
  max-width: 180px;
  width: 140px;
  padding: 6px 10px;
  margin: 0 6px;
  border-radius: 10px;
  border: 1px solid #ddd;
  outline: none;
}

.blank-input:focus {
  border-color: darkorange;
  box-shadow: 0 0 0 3px rgba(255,140,0,0.15);
}

.hw-options { display: grid; gap: 10px; }

.hw-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #eee;
  cursor: pointer;
  background: #fafafa;
}

.hw-option input { transform: scale(1.1); }
.hw-option:hover { border-color: #ffd1a3; background: #fff6ec; }

.match-list { list-style: none; padding-left: 0; margin: 0; }

.match-item {
  padding: 10px 12px;
  border: 1px solid #eee;
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  background: #fafafa;
}

.match-item:hover { border-color: #ffd1a3; background: #fff6ec; }
.match-item.selected { border-color: darkorange; background: #fff0e0; }
.match-item.matched { opacity: 0.9; border-style: dashed; }

.create-text { border-radius: 14px; }

.hw-section,
.vocab-chip,
.hw-q {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.hw-q {
  background: #fff;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.hw-section h3 { text-align: center; }

/* Answer status */
.hw-q.is-unanswered {
  border-color: #f5b5b5 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}

.hw-q.is-answered {
  border-color: #b7e3c1 !important;
  box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.12);
}

/* Optional: colour the section container when fully complete */
.hw-section.is-complete {
  border-left: 4px solid #198754;
  padding-left: 12px;
}

.hw-section.is-incomplete {
  border-left: 4px solid #dc3545;
  padding-left: 12px;
}

/* Make unanswered blanks look obvious */
.blank-input.blank-unanswered {
  border-color: #dc3545;
  background: #fff5f5;
}

.blank-input.blank-answered {
  border-color: #198754;
  background: #f3fff6;
}



/* =========================================================
   HOMEWORK GENERATION (Eli Loading Overlay)
   ========================================================= */
.eli-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.eli-modal {
  background: #fff;
  width: min(520px, 92vw);
  border-radius: 14px;
  padding: 26px 22px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.eli-modal .spinner-border {
  width: 3rem;
  height: 3rem;
}

.eli-text {
  margin-top: 14px;
  font-size: 1.05rem;
  font-weight: 600;
}

.d-none {
  display: none !important;
}
/* ===== Homework Preview Collapsible Sections ===== */

.hw-section-toggle {
    background-color: #fff7f0;          /* very light orange tint */
    border: 1px solid #f0c7a1;
    border-radius: 0.6rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: #e86f1f;                      /* Classly orange */
    text-align: left;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.hw-section-toggle:hover {
    background-color: #fff1e6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.hw-section-toggle .badge {
    background-color: #e86f1f;
    font-weight: 500;
}

.hw-section {
    border-left: none;        
    padding-left: 0;
    margin-bottom: 1rem;
}

.hw-question {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem;
}

/* tighter spacing on inputs to reduce scroll fatigue */
.hw-question .form-control {
    margin-bottom: 0.5rem;
}

/* ============================
   Next Lesson Plan formatting
   ============================ */

.NextLessonPlan-card .lp-content {
    line-height: 1.6;
}

.NextLessonPlan-card .lp-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 16px;
    margin-bottom: 8px;
}

.NextLessonPlan-card .lp-paragraph {
    margin-bottom: 10px;
}

.NextLessonPlan-card .lp-list {
    margin-bottom: 12px;
    padding-left: 1.2rem;
}

.NextLessonPlan-card .lp-list li {
    margin-bottom: 6px;
}
.lp-section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 24px;
    margin-bottom: 6px;
}

.lp-section-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ff7a00; /* Classly orange */
}

.lp-section-title-text {
    font-size: 1.3rem;
    font-weight: 700;
}

.lp-section-divider {
    margin-top: 4px;
    margin-bottom: 14px;
    border-top: 1px solid #e0e0e0;
}
/* Lesson Plan Vocabulary Table */

.NextLessonPlan-card .lp-vocab-table thead th {
    background-color: #ff7a00;      /* Classly orange */
    color: #000;                   /* Black text */
    font-weight: 700;
    border-bottom: 2px solid #e06a00;
}

.NextLessonPlan-card .lp-vocab-table tbody td {
    vertical-align: middle;
}

.NextLessonPlan-card .lp-vocab-table {
    border-collapse: separate;
    border-spacing: 0;
}

.NextLessonPlan-card .lp-vocab-table thead th:first-child {
    border-top-left-radius: 6px;
}

.NextLessonPlan-card .lp-vocab-table thead th:last-child {
    border-top-right-radius: 6px;
}

.ProseMirror {
  font-family:
    /* CJK (keep your current best bets) */
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    "Source Han Sans SC",
    "Heiti SC",

    /* Japanese (macOS/Windows) */
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",

    /* Korean (macOS/Windows) */
    "Apple SD Gothic Neo",
    "Malgun Gothic",

    /* Arabic (Windows/macOS common) */
    "Segoe UI",
    "Tahoma",
    "Arial",
    "Noto Naskh Arabic",
    "Amiri",

    /* Universal fallbacks */
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  /* Helps mixed LTR/RTL content behave properly */
  unicode-bidi: plaintext;
}
.tox-edit-area iframe {
  unicode-bidi: plaintext;
}