/* ============================================================
   assets/css/style.css
   EduForms – Professional Google Forms Clone
   ============================================================ */

/* ── Root Variables ─────────────────────────────────────── */
:root {
  --primary: #1a73e8;
  --primary-dark: #1558b0;
  --primary-light: #e8f0fe;
  --success: #0f9d58;
  --danger: #d93025;
  --warning: #f4b400;
  --bg-page: #f0f4f9;
  --bg-card: #ffffff;
  --text-main: #202124;
  --text-muted: #5f6368;
  --border: #dadce0;
  --shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .06);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, .1);
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --transition: .2s ease;
}

/* ── Base ─────────────────────────────────────────────────── */
body {
  background-color: var(--bg-page);
  color: var(--text-main);
  font-family: 'Google Sans', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

a {
  color: var(--primary);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .3s ease, color .2s ease;
}

a:hover {
  text-decoration-color: currentColor;
}

a.btn:hover,
.nav-link:hover,
.navbar-brand:hover,
.dropdown-item:hover {
  text-decoration: none;
}

/* ── Navbar ───────────────────────────────────────────────── */
.navbar-brand {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--primary) !important;
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
}
.navbar-brand:hover{
    color:white;
}

.navbar {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.navbar-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}

@media (max-width: 768px) {
  .navbar .btn span {
    display: none;
  }

  .navbar-avatar {
    width: 21px;
    height: 21px;
  }

  .navbar .btn {
    background: #ffffff;
    border: none;
    box-shadow: 1px 1px 4px lightgray;
    color: red;
    font-weight: 650;
  }
}
.welcomeMessage{
    background: #f4fff4;
    font-weight: bold;
    padding: 20px 30px;
    border-radius: 20px;
}


/* ── Cards ────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--bg-card);
  transition: box-shadow var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  padding: .9rem 1.25rem;
}

/* ── Form Header Card ─────────────────────────────────────── */
.form-header-card {
  border-top: 6px solid var(--primary);
}

/* ── Section Card ─────────────────────────────────────────── */
.section-card {
  border-left: 4px solid var(--primary);
}

/* ── Question Card ────────────────────────────────────────── */
.question-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: .75rem;
  background: var(--bg-card);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.question-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #bdc1c6;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* ── Badges ───────────────────────────────────────────────── */
.badge-draft {
  background-color: #fce8e6;
  color: var(--danger);
}

.badge-published {
  background-color: #e6f4ea;
  color: var(--success);
}

.badge {
  font-size: 12px;
}

/* ── Stat Boxes (Dashboard) ───────────────────────────────── */
.stat-box {
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

.stat-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-box .stat-number {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
}

.stat-box .stat-label {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .3rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Form Fill View ────────────────────────────────────────── */
.fill-form-container {
  max-width: 720px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* ── Required asterisk ─────────────────────────────────────── */
.required-star {
  color: var(--danger);
  margin-left: 2px;
}

/* ── Drag handle ───────────────────────────────────────────── */
.drag-handle {
  cursor: grab;
  color: var(--text-muted);
}

/* ── Table ────────────────────────────────────────────────── */
.table th {
  background: #f8f9fa;
  font-weight: 600;
  font-size: .79rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}

.table td {
  vertical-align: middle;
}

/* ── Auth pages ────────────────────────────────────────────── */
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, #e8f0fe 0%, #f0f4f9 60%, #fce8e6 100%);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: .5rem;
}

.form-control:focus,
.form-control:active {
  box-shadow: none;

}

/* ── Sidebar ───────────────────────────────────────────────── */
/* ───────────────────────────────
   BASE LAYOUT WRAPPER
────────────────────────────── */
.layout-wrapper {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 56px);
}

/* ───────────────────────────────
   SIDEBAR (DESKTOP)
────────────────────────────── */
.sidebar {
  width: 240px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: 1.5rem 0;

  position: fixed;
  top: 56px;
  left: 0;
  bottom: 0;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: left var(--transition, .25s ease), box-shadow var(--transition, .25s ease);
  z-index: 1040;
}

/* ── Sidebar mobile/tablet toggle button ─────────────────────
   Hidden on desktop (Bootstrap's d-lg-none handles that on the
   markup side); styled here for the small-screen sizes. ────── */
.sidebar-toggle-btn {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-main);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  padding: 0;
  line-height: 1;
}

.sidebar-toggle-btn:hover,
.sidebar-toggle-btn:focus {
  background: var(--primary-light);
  color: var(--primary);
}

/* Backdrop shown behind the open sidebar drawer on mobile/tablet */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: 56px;
  background: rgba(0, 0, 0, .45);
  z-index: 1035;
  opacity: 0;
  transition: opacity var(--transition, .25s ease);
}

.sidebar-backdrop.show {
  display: block;
  opacity: 1;
}

body.sidebar-locked {
  overflow: hidden;
}

/* sidebar links */
.sidebar .nav-link {
  color: var(--text-main);
  padding: .55rem 1.5rem;
  font-size: .9rem;

  display: flex;
  align-items: center;
  gap: .6rem;

  border-radius: 0 24px 24px 0;
  margin-right: 1rem;

  transition: background var(--transition), color var(--transition);
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.sidebar-section-label {
  font-size: .68rem;
  letter-spacing: .5px;
}

/* ───────────────────────────────
   MAIN CONTENT
────────────────────────────── */
.main-content {
  margin-left: 240px;
  padding: 2rem;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.otherSection{
    padding: 2rem 2rem;
    background: #e7fffc;
    border-radius: 10px;
}




/* ───────────────────────────────
   RESPONSIVE (MOBILE)
────────────────────────────── */
@media (max-width: 991.98px) {

  .layout-wrapper {
    flex-direction: column;
  }

  /* Sidebar becomes an off-canvas drawer, opened via the
     hamburger button (adds .show) and closed by tapping the
     backdrop, a nav link, or resizing back to desktop. */
  .sidebar {
    display: block;
    left: -280px;
    width: 260px;
    max-width: 82vw;
    box-shadow: none;
  }

  .sidebar.show {
    left: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
  }

  .main-content {
    margin-left: 0;
    padding: 1.25rem;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 1rem;
  }

  .otherSection{
      display:flex;
      gap:5px !important;
      justify-content: space-evenly;
  }

  .otherSection .hide {
      display:none;

   }
}

@media (max-width: 480px) {
  .main-content {
    padding: .75rem;
  }
}

/* ───────────────────────────────
   GLOBAL SAFETY FIX
────────────────────────────── */
html,
body {
  width: 100%;
  overflow-x: hidden;
}

/* ── Alert ─────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-sm);
  font-size: .9rem;
}

/* ── Empty state ───────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

.empty-state i {
  opacity: .35;
}

/* ── Option rows ───────────────────────────────────────────── */
.option-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .4rem;
}

/* ── Export buttons ────────────────────────────────────────── */
.export-btn-group {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* ── Profile ───────────────────────────────────────────────── */
.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #5f94ff;
}

.profile-avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--border);
}

/* ── Images in questions/options ───────────────────────────── */
.question-image-display {
  max-width: 100%;
  max-height: 300px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  object-fit: contain;
  display: block;
}

.option-image-display {
  display: block;
  max-width: 100%;
  max-height: 140px;
  margin-top: .4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  object-fit: contain;
}

/* ── Form check option (fill form) ─────────────────────────── */
.form-check-option {
  padding: .6rem .9rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  margin-bottom: .4rem;
  transition: background var(--transition), border-color var(--transition);
  cursor: pointer;
}

.form-check-option:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

.form-check-option.selected {
  background: #e6f4ea;
  border-color: #34a853;
}

[data-theme="dark"] .form-check-option.selected {
  background: #1a3a26;
  border-color: #34a853;
}

/* ── Rating stars ───────────────────────────────────────────── */
.rating-star {
  font-size: 1.8rem;
  color: #dadce0;
  cursor: pointer;
  transition: color var(--transition), transform var(--transition);
}

.rating-star:hover,
.rating-star.text-warning {
  color: #f4b400 !important;
}

.rating-star:hover {
  transform: scale(1.15);
}

/* ── Rating display (view responses) ──────────────────────── */
.rating-display {
  font-size: 1.2rem;
}

.rating-display .bi-star-fill {
  color: #f4b400;
}

.rating-display .bi-star {
  color: #dadce0;
}

/* ── Danger zone card ───────────────────────────────────────── */
.card.border-danger {
  border-color: #f8d7da !important;
}

.card.border-danger .card-header {
  background: #fff5f5;
}

/* ── Role card (register) ──────────────────────────────────── */
.role-card {
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.role-card input[type="radio"] {
  display: none;
}

/* ── bg-primary-subtle fallback ────────────────────────────── */
.bg-primary-subtle {
  background-color: var(--primary-light) !important;
}

/* ============================================================
   DARK MODE
   ============================================================ */

[data-theme="dark"] {
  --bg-page: #1a1a2e;
  --bg-card: #16213e;
  --text-main: #e0e0e0;
  --text-muted: #9aa5b4;
  --border: #2d3a52;
  --primary-light: #1a2a4a;
  --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .25);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, .4);
}

[data-theme="dark"] body {
  background-color: var(--bg-page);
  color: var(--text-main);
}

[data-theme="dark"] .navbar {
  background: #0f172a !important;
  border-bottom-color: var(--border);
}

[data-theme="dark"] .card,
[data-theme="dark"] .card-header,
[data-theme="dark"] .sidebar {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="dark"] .card-header {
  background: #1a2a42;
}

[data-theme="dark"] .table th {
  background: #1a2a42;
  color: var(--text-muted);
  border-bottom-color: var(--border);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table tr {
  border-color: var(--border);
  color: var(--text-main);
}

[data-theme="dark"] .table-hover>tbody>tr:hover>* {
  background-color: #1f2e47;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: #0f1e35;
  border-color: var(--border);
  color: var(--text-main);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #0f1e35;
  color: var(--text-main);
  border-color: var(--primary);
}

[data-theme="dark"] .form-control::placeholder {
  color: #4a5a72;
}

[data-theme="dark"] .btn-light {
  background: #1e2d44;
  border-color: var(--border);
  color: var(--text-main);
}

[data-theme="dark"] .btn-outline-secondary {
  color: var(--text-muted);
  border-color: var(--border);
}

[data-theme="dark"] .btn-outline-secondary:hover {
  background: #1e2d44;
  color: var(--text-main);
}

[data-theme="dark"] .text-muted {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .alert-info {
  background: #1a2a42;
  border-color: #2a4a72;
  color: #93c5fd;
}

[data-theme="dark"] .alert-danger {
  background: #2a1a1a;
  border-color: #5a2020;
  color: #fca5a5;
}

[data-theme="dark"] .alert-success {
  background: #1a2a1a;
  border-color: #2a4a2a;
  color: #86efac;
}

[data-theme="dark"] .alert-warning {
  background: #2a2210;
  border-color: #5a4a10;
  color: #fde68a;
}

[data-theme="dark"] .sidebar .nav-link {
  color: var(--text-muted);
}

[data-theme="dark"] .sidebar .nav-link:hover,
[data-theme="dark"] .sidebar .nav-link.active {
  background: #1a3060;
  color: #93c5fd;
}

[data-theme="dark"] .question-card {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="dark"] .question-card:hover {
  border-color: #3a5a8a;
}

[data-theme="dark"] .badge-draft {
  background-color: #3a1a1a;
  color: #fca5a5;
}

[data-theme="dark"] .badge-published {
  background-color: #1a3a1a;
  color: #86efac;
}

[data-theme="dark"] .stat-box {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="dark"] .bg-light {
  background-color: #1a2a42 !important;
}

[data-theme="dark"] .bg-primary-subtle {
  background-color: #1a2a4a !important;
}

/* ── Fix: text-dark / text-*-emphasis were left at their light-mode
   near-black colors, so once bg-light / bg-*-subtle got darkened above,
   badges and labels using them became unreadable (dark text on dark
   background). This block keeps every Bootstrap contextual pairing
   legible in dark mode, sitewide (batches, orders, response tables,
   forms, class/blog cards, etc.) ── */
[data-theme="dark"] .text-dark {
  color: var(--text-main) !important;
}

[data-theme="dark"] .bg-secondary-subtle { background-color: #2a3140 !important; }
[data-theme="dark"] .bg-success-subtle  { background-color: #1a2e22 !important; }
[data-theme="dark"] .bg-danger-subtle   { background-color: #2e1a1a !important; }
[data-theme="dark"] .bg-warning-subtle  { background-color: #2e2712 !important; }
[data-theme="dark"] .bg-info-subtle     { background-color: #12262e !important; }

[data-theme="dark"] .text-primary-emphasis   { color: #93c5fd !important; }
[data-theme="dark"] .text-secondary-emphasis { color: #c2c9d1 !important; }
[data-theme="dark"] .text-success-emphasis   { color: #86efac !important; }
[data-theme="dark"] .text-danger-emphasis    { color: #fca5a5 !important; }
[data-theme="dark"] .text-warning-emphasis   { color: #fde68a !important; }
[data-theme="dark"] .text-info-emphasis      { color: #7dd3fc !important; }

[data-theme="dark"] .text-secondary { color: var(--text-muted) !important; }
[data-theme="dark"] .text-primary   { color: #6ea8ff !important; }

/* Outline buttons: keep their accent readable against the dark card bg */
[data-theme="dark"] .btn-outline-primary   { color: #6ea8ff; border-color: #3a5a8a; }
[data-theme="dark"] .btn-outline-success   { color: #7bdca0; border-color: #2a4a3a; }
[data-theme="dark"] .btn-outline-danger    { color: #ff9a91; border-color: #5a2a2a; }
[data-theme="dark"] .btn-outline-warning   { color: #ffd76a; border-color: #5a4a1a; }
[data-theme="dark"] .btn-outline-primary:hover { background: #1a2a4a; color: #cfe0ff; }
[data-theme="dark"] .btn-outline-success:hover { background: #1a2e22; color: #c7f5d6; }
[data-theme="dark"] .btn-outline-danger:hover  { background: #2e1a1a; color: #ffd0cc; }
[data-theme="dark"] .btn-outline-warning:hover { background: #2e2712; color: #ffe9b0; }

[data-theme="dark"] .modal-content {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-main);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--border);
}

[data-theme="dark"] .dropdown-menu {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="dark"] .dropdown-item {
  color: var(--text-main);
}

[data-theme="dark"] .dropdown-item:hover {
  background: #1a2a42;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #0f1e35 !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}

[data-theme="dark"] .auth-container {
  background: var(--bg-page);
}

[data-theme="dark"] .auth-card {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-main);
}

[data-theme="dark"] .ann-modal-box {
  background: #1e1e2f;
  color: #e8eaed;
}

[data-theme="dark"] .ann-modal-header {
  border-bottom: 1px solid #444;
}


/* Dark mode toggle button */
.dark-mode-toggle {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-main);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all .2s;
}

.dark-mode-toggle:hover {
  background: var(--primary-light);
  color: var(--primary);
}


.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: auto;
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: auto;
}

.site-footer a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition);
  position: relative;
}

.site-footer a:not(.footer-brand)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}

.site-footer a:not(.footer-brand):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-footer a:hover {
  color: var(--primary-dark);
  text-decoration: none;
}

.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.25rem;
  margin-bottom: 0.5rem;
}

.site-footer .footer-brand {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.85rem;
}

.site-footer .footer-sep {
  color: var(--border);
}

[data-theme="dark"] .site-footer {
  background: #1e1e2e;
  border-top-color: #333;
}

/* Footer inside layout (teacher/student with sidebar) */
.main-content .site-footer {
  margin-left: -2rem;
  margin-right: -2rem;
  margin-bottom: -2rem;
  margin-top: auto;
  border-radius: 0;
}

@media (max-width: 768px) {
  .main-content .site-footer {
    margin-left: -1rem;
    margin-right: -1rem;
    margin-bottom: -1rem;
  }

  .site-footer .footer-links {
    gap: 0.3rem 0.75rem;
  }
}

/* Auth pages - footer sticks to bottom */
.auth-footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

/* ============================================================
   Jodit HTML content rendering — student fill_form view
   Ensures teacher's rich text (bold, italic, lists, images,
   font sizes, colours, tables etc.) display properly.
   ============================================================ */
.jodit-html-content {
  display: block;
  line-height: 1.6;
}

.jodit-html-content p {
  margin: 0 0 0.4em;
}

.jodit-html-content ul,
.jodit-html-content ol {
  padding-left: 1.4em;
  margin-bottom: 0.4em;
}

.jodit-html-content table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 0.4em;
}

.jodit-html-content table td,
.jodit-html-content table th {
  border: 1px solid var(--border, #dee2e6);
  padding: 4px 8px;
}

.jodit-html-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 4px 0;
}

.jodit-html-content a {
  color: var(--primary, #0d6efd);
}

/* ============================================================
   Sticky footer — footer always at bottom of viewport
   Works for ALL standalone pages (student, auth, index)
   ============================================================ */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* The main page wrapper div (margin-top:56px) grows to fill space */
body>div[style*="margin-top"] {
  flex: 1 0 auto;
}

/* For teacher/admin layout pages: the flex wrapper already handles this */
.dashboard-layout,
.flex-wrapper {
  flex: 1 0 auto;
}

/* Footer always pushed to bottom */
body>footer.site-footer,
body>div[style*="margin-top"]+footer.site-footer {
  flex-shrink: 0;
  margin-top: auto;
}
/* ============================================================
   Chat page type-switcher (Normal Chat / Group Chat tabs)
   Used on teacher/chat.php, teacher/group_chat.php,
   student/chat.php, student/group_chat.php
   ============================================================ */
.chat-type-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 16px 0;
  background: transparent;
}
.chat-type-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 8px 8px 0 0;
  font-size: .88rem;
  font-weight: 600;
  color: #5f6368;
  background: #eef1f4;
  text-decoration: none;
  border: 1px solid #dadce0;
  border-bottom: none;
  transition: background .15s, color .15s;
}
.chat-type-tab:hover {
  background: #e2e6ea;
  color: #1a73e8;
  text-decoration: none;
}
.chat-type-tab.active {
  background: #fff;
  color: #1a73e8;
  border-color: #dadce0;
  position: relative;
  z-index: 1;
}
[data-theme="dark"] .chat-type-tab {
  background: #2a2d31;
  color: #b4b8bc;
  border-color: #3c4043;
}
[data-theme="dark"] .chat-type-tab.active {
  background: #1e2124;
  color: #8ab4f8;
}

/* ============================================================
   PUBLIC SITE — 3D CARDS, GLASS UI, SCROLL/REVEAL ANIMATIONS
   Shared by index.php and every public/* page. Fully themed
   for both data-theme="light" and data-theme="dark".
   ============================================================ */

.pub-perspective { perspective: 1200px; }

.tilt-3d {
  --tiltX: 0deg;
  --tiltY: 0deg;
  --glowX: 50%;
  --glowY: 50%;
  --liftZ: 0px;
  --liftScale: 1;
  /* No transform / no perspective at rest — keeps text on the normal
     2D pixel grid so it stays crisp. The 3D transform is only ever
     applied while actively hovered (see .tilt-3d:hover below), which
     is what was previously making text look slightly blurred
     site-wide even when the card wasn't being hovered. */
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  position: relative;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.tilt-3d::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.tilt-3d:hover {
  /* Plain 2D lift only — no perspective/rotate/scale. Those used
     fractional (subpixel) values that forced the browser to
     rasterize the card on a 3D GPU layer, which is what was
     blurring the text while hovering. translateY at an integer
     pixel keeps everything on the normal sharp pixel grid. */
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(235, 235, 235, 0.1), 0 4px 12px rgba(255, 255, 255, 0.05);
  z-index: 2;
}
.tilt-3d:hover::after { opacity: 1; }

[data-theme="dark"] .tilt-3d:hover {
  box-shadow: 0 14px 26px rgba(0, 0, 0, .45), 0 4px 12px rgba(0,0,0,.28);
}

/* ── Reconcile scroll-reveal entrance with tilt-3d hover when a
   card is auto-enrolled in both (site-wide card upgrade below) ── */
.card.auto-reveal.tilt-3d {
  transform: translateY(14px);
}
.card.auto-reveal.tilt-3d.auto-revealed {
  transform: none;
}
.card.auto-reveal.tilt-3d.auto-revealed:hover {
  transform: translateY(-2px);
}


/* ── Glassmorphism surface ── */
.glass-card {
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .5);
}
[data-theme="dark"] .glass-card {
  background: rgba(22, 33, 62, .6);
  border-color: rgba(255, 255, 255, .08);
}

/* ── Floating gradient blobs (reusable) ── */
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .45;
  animation: pubBlobFloat 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .bg-blob { opacity: .28; }

@keyframes pubBlobFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-28px) scale(1.05); }
}

/* ── Scroll reveal ── */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Generic auto scroll-reveal, applied automatically by site3d.js to
   ordinary content cards (dashboard widgets, test/class cards, list
   cards, etc.) so pages feel alive without needing markup changes on
   every page. Lighter/faster than .reveal-up since it runs on many
   more elements per page. ── */
.auto-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease;
}
.auto-reveal.auto-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .auto-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Soft floating idle animation for icons/badges ── */
.float-idle { animation: pubFloatIdle 4.5s ease-in-out infinite; }
@keyframes pubFloatIdle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ── Gradient underline accent for headings ── */
.accent-underline { position: relative; display: inline-block; }
.accent-underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--success));
  transform-origin: left;
  animation: pubUnderlineGrow .7s ease both;
}
@keyframes pubUnderlineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Shiny glowing button for primary public CTAs ── */
.btn-glow {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(26, 115, 232, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-glow:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26, 115, 232, .45); }
.btn-glow::before {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn-glow:hover::before { left: 130%; }

/* ── Dark-mode aware public card base (used on classes/free-test/blog cards) ── */
.pub-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  color: var(--text-main);
}

/* ── Sitewide scroll-progress bar (injected by site3d.js) ── */
#site-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), #34a853, #f4b400);
  background-size: 200% 100%;
  z-index: 9999;
  transition: width .1s linear;
  animation: scrollBarGradient 3s linear infinite;
  pointer-events: none;
}
@keyframes scrollBarGradient {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── Navbar brand mark comes alive on hover, everywhere ── */
.lp-nav .brand svg { transition: transform .4s cubic-bezier(.22,1,.36,1); }
.lp-nav .brand:hover svg { transform: rotate(-12deg) scale(1.12); }

@media (prefers-reduced-motion: reduce) {
  #site-scroll-progress { animation: none; }
  .lp-nav .brand svg { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tilt-3d, .reveal-up, .bg-blob, .float-idle, .btn-glow::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   PROFILE PAGES — hero header, avatar ring, text shimmer,
   and site-wide smooth full-width search fields.
   Applies to student / teacher / admin profile pages alike.
   ============================================================ */

.profile-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.profile-hero .bg-blob.blob-a { width:220px; height:220px; top:-70px; left:-50px; background:radial-gradient(circle, var(--primary), transparent 70%); }
.profile-hero .bg-blob.blob-b { width:180px; height:180px; bottom:-80px; right:-40px; background:radial-gradient(circle, var(--success), transparent 70%); animation-delay:1.6s; }
.profile-hero .bg-blob.blob-c { width:140px; height:140px; top:15%; right:22%; background:radial-gradient(circle, var(--warning), transparent 70%); animation-delay:3.1s; }
.profile-hero-inner { position: relative; z-index: 1; }

/* ── Spinning gradient ring behind the profile avatar ── */
.profile-avatar-ring { position: relative; display: inline-block; border-radius: 50%; }
.profile-avatar-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--primary), var(--success), var(--warning), var(--primary));
  animation: avatarRingSpin 5s linear infinite;
  z-index: 0;
}
.profile-avatar-ring > .profile-avatar,
.profile-avatar-ring > .profile-avatar-placeholder {
  position: relative;
  z-index: 1;
}
@keyframes avatarRingSpin { to { transform: rotate(360deg); } }

/* ── Animated gradient shimmer text (profile name / headings) ── */
.text-shimmer {
  background: linear-gradient(90deg, var(--text-main) 0%, var(--primary) 25%, var(--success) 50%, var(--text-main) 75%, var(--primary) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textShimmerMove 6s linear infinite;
  display: inline-block;
}
@keyframes textShimmerMove {
  0%   { background-position: 0% center; }
  100% { background-position: -250% center; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-avatar-ring::before { animation: none; }
  .text-shimmer { animation: none; -webkit-background-clip: unset; background-clip: unset; background: none; color: var(--text-main); }
}

/* ── Site-wide smooth, full-width expanding search fields ──────
   Applied automatically (by app.js) to every search input across
   student / teacher / admin list pages. Compact pill by default,
   glides open to fill the row on focus. ── */
.search-expand-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 260px;
  transition: max-width .5s cubic-bezier(.22,1,.36,1);
}
.search-expand-wrap:focus-within,
.search-expand-wrap.search-focused {
  max-width: 100%;
}
.search-expand-wrap .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  transition: color .3s ease;
  pointer-events: none;
  z-index: 2;
}
.search-expand-wrap:focus-within .search-icon,
.search-expand-wrap.search-focused .search-icon { color: var(--primary); }
.search-expand-wrap input.form-control-search-anim {
  width: 100%;
  padding-left: 2.3rem;
  border-radius: 30px;
  transition: box-shadow .35s ease, border-color .3s ease;
}
.search-expand-wrap:focus-within input.form-control-search-anim,
.search-expand-wrap.search-focused input.form-control-search-anim {
  border-color: var(--primary);
  box-shadow: 0 10px 26px rgba(26,115,232,.18);
}

@media (prefers-reduced-motion: reduce) {
  .search-expand-wrap,
  .search-expand-wrap .search-icon,
  .search-expand-wrap input.form-control-search-anim { transition: none; }
}