/* app.css */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
/* Hide password reveal button in Microsoft Edge */
::-ms-reveal {
  display: none;
}
/* ==========================================
TABLE OF CONTENTS:
1. Variables and Defaults
2. Typography and Fonts
   2.1 Extended Font Sizes
3. Layout & Containers
4. Component Styles
   4.1 Buttons
   4.2 Progress Bars
   4.3 Speech Bubbles
   4.4 Forms & Inputs
   4.5 List Groups
   4.6 Tab Component Styles
   4.7 Summary Dots
   4.8 Badges
   4.9 Icons
   4.11 Avatar Image Uploader
   4.12 - Quill editor
   4.13 - Sortable Modal

5. Utility Classes
   5.1 Lightbox
*/

/* ==========================================
  1. Variables and Defaults
========================================== */
:root {
  --white: #ffffff;
  --black: #000000;
  --black-900: #0a0a0a;
  --black-800: #1a1a1a;
  --black-700: #2a2a2a;
  --black-600: #3a3a3a;
  --black-500: #4a4a4a;
  --black-rgba-50: rgba(0, 0, 0, 0.5);
  --black-rgba-30: rgba(0, 0, 0, 0.3);
  --black-rgba-20: rgba(0, 0, 0, 0.2);
  --black-rgba-10: rgba(0, 0, 0, 0.1);
  --black-rgba-5: rgba(0, 0, 0, 0.05);
  
  /* Material Design Colors */
  /* Grays */
  --md-gray-50: #fafafa;
  --md-gray-100: #f5f5f5;
  --md-gray-200: #eeeeee;
  --md-gray-300: #e0e0e0;
  --md-gray-400: #bdbdbd;
  --md-gray-500: #9e9e9e;
  --md-gray-600: #757575;
  --md-gray-700: #616161;
  --md-gray-800: #424242;
  --md-gray-900: #212121;

  /* Red */
  --md-red-50: #ffebee;
  --md-red-100: #ffcdd2;
  --md-red-200: #ef9a9a;
  --md-red-300: #e57373;
  --md-red-400: #ef5350;
  --md-red-500: #f44336;
  --md-red-600: #e53935;
  --md-red-700: #d32f2f;
  --md-red-800: #c62828;
  --md-red-900: #b71c1c;

  /* Pink */
  --md-pink-50: #fce4ec;
  --md-pink-100: #f8bbd0;
  --md-pink-200: #f48fb1;
  --md-pink-300: #f06292;
  --md-pink-400: #ec407a;
  --md-pink-500: #e91e63;
  --md-pink-600: #d81b60;
  --md-pink-700: #c2185b;
  --md-pink-800: #ad1457;
  --md-pink-900: #880e4f;

  /* Purple */
  --md-purple-50: #f3e5f5;
  --md-purple-100: #e1bee7;
  --md-purple-200: #ce93d8;
  --md-purple-300: #ba68c8;
  --md-purple-400: #ab47bc;
  --md-purple-500: #9c27b0;
  --md-purple-600: #8e24aa;
  --md-purple-700: #7b1fa2;
  --md-purple-800: #6a1b9a;
  --md-purple-900: #4a148c;

  /* Deep Purple */
  --md-deep-purple-50: #ede7f6;
  --md-deep-purple-100: #d1c4e9;
  --md-deep-purple-200: #b39ddb;
  --md-deep-purple-300: #9575cd;
  --md-deep-purple-400: #7e57c2;
  --md-deep-purple-500: #673ab7;
  --md-deep-purple-600: #5e35b1;
  --md-deep-purple-700: #512da8;
  --md-deep-purple-800: #4527a0;
  --md-deep-purple-900: #311b92;

  /* Indigo */
  --md-indigo-50: #e8eaf6;
  --md-indigo-100: #c5cae9;
  --md-indigo-200: #9fa8da;
  --md-indigo-300: #7986cb;
  --md-indigo-400: #5c6bc0;
  --md-indigo-500: #3f51b5;
  --md-indigo-600: #3949ab;
  --md-indigo-700: #303f9f;
  --md-indigo-800: #283593;
  --md-indigo-900: #1a237e;

  /* Blue */
  --md-blue-50: #e3f2fd;
  --md-blue-100: #bbdefb;
  --md-blue-200: #90caf9;
  --md-blue-300: #64b5f6;
  --md-blue-400: #42a5f5;
  --md-blue-500: #2196f3;
  --md-blue-600: #1e88e5;
  --md-blue-700: #1976d2;
  --md-blue-800: #1565c0;
  --md-blue-900: #0d47a1;

  /* Light Blue */
  --md-light-blue-50: #e1f5fe;
  --md-light-blue-100: #b3e5fc;
  --md-light-blue-200: #81d4fa;
  --md-light-blue-300: #4fc3f7;
  --md-light-blue-400: #29b6f6;
  --md-light-blue-500: #03a9f4;
  --md-light-blue-600: #039be5;
  --md-light-blue-700: #0288d1;
  --md-light-blue-800: #0277bd;
  --md-light-blue-900: #01579b;

  /* Cyan */
  --md-cyan-50: #e0f7fa;
  --md-cyan-100: #b2ebf2;
  --md-cyan-200: #80deea;
  --md-cyan-300: #4dd0e1;
  --md-cyan-400: #26c6da;
  --md-cyan-500: #00bcd4;
  --md-cyan-600: #00acc1;
  --md-cyan-700: #0097a7;
  --md-cyan-800: #00838f;
  --md-cyan-900: #006064;

  /* Teal */
  --md-teal-50: #e0f2f1;
  --md-teal-100: #b2dfdb;
  --md-teal-200: #80cbc4;
  --md-teal-300: #4db6ac;
  --md-teal-400: #26a69a;
  --md-teal-500: #009688;
  --md-teal-600: #00897b;
  --md-teal-700: #00796b;
  --md-teal-800: #00695c;
  --md-teal-900: #004d40;

  /* Green */
  --md-green-50: #e8f5e9;
  --md-green-100: #c8e6c9;
  --md-green-200: #a5d6a7;
  --md-green-300: #81c784;
  --md-green-400: #66bb6a;
  --md-green-500: #4caf50;
  --md-green-600: #43a047;
  --md-green-700: #388e3c;
  --md-green-800: #2e7d32;
  --md-green-900: #1b5e20;

  /* Light Green */
  --md-light-green-50: #f1f8e9;
  --md-light-green-100: #dcedc8;
  --md-light-green-200: #c5e1a5;
  --md-light-green-300: #aed581;
  --md-light-green-400: #9ccc65;
  --md-light-green-500: #8bc34a;
  --md-light-green-600: #7cb342;
  --md-light-green-700: #689f38;
  --md-light-green-800: #558b2f;
  --md-light-green-900: #33691e;

  /* Lime */
  --md-lime-50: #f9fbe7;
  --md-lime-100: #f0f4c3;
  --md-lime-200: #e6ee9c;
  --md-lime-300: #dce775;
  --md-lime-400: #d4e157;
  --md-lime-500: #cddc39;
  --md-lime-600: #c0ca33;
  --md-lime-700: #afb42b;
  --md-lime-800: #9e9d24;
  --md-lime-900: #827717;

  /* Yellow */
  --md-yellow-50: #fffde7;
  --md-yellow-100: #fff9c4;
  --md-yellow-200: #fff59d;
  --md-yellow-300: #fff176;
  --md-yellow-400: #ffee58;
  --md-yellow-500: #ffeb3b;
  --md-yellow-600: #fdd835;
  --md-yellow-700: #fbc02d;
  --md-yellow-800: #f9a825;
  --md-yellow-900: #f57f17;

  /* Amber */
  --md-amber-50: #fff8e1;
  --md-amber-100: #ffecb3;
  --md-amber-200: #ffe082;
  --md-amber-300: #ffd54f;
  --md-amber-400: #ffca28;
  --md-amber-500: #ffc107;
  --md-amber-600: #ffb300;
  --md-amber-700: #ffa000;
  --md-amber-800: #ff8f00;
  --md-amber-900: #ff6f00;

  /* Orange */
  --md-orange-50: #fff3e0;
  --md-orange-100: #ffe0b2;
  --md-orange-200: #ffcc80;
  --md-orange-300: #ffb74d;
  --md-orange-400: #ffa726;
  --md-orange-500: #ff9800;
  --md-orange-600: #fb8c00;
  --md-orange-700: #f57c00;
  --md-orange-800: #ef6c00;
  --md-orange-900: #e65100;

  /* Deep Orange */
  --md-deep-orange-50: #fbe9e7;
  --md-deep-orange-100: #ffccbc;
  --md-deep-orange-200: #ffab91;
  --md-deep-orange-300: #ff8a65;
  --md-deep-orange-400: #ff7043;
  --md-deep-orange-500: #ff5722;
  --md-deep-orange-600: #f4511e;
  --md-deep-orange-700: #e64a19;
  --md-deep-orange-800: #d84315;
  --md-deep-orange-900: #bf360c;

  /* Brown */
  --md-brown-50: #efebe9;
  --md-brown-100: #d7ccc8;
  --md-brown-200: #bcaaa4;
  --md-brown-300: #a1887f;
  --md-brown-400: #8d6e63;
  --md-brown-500: #795548;
  --md-brown-600: #6d4c41;
  --md-brown-700: #5d4037;
  --md-brown-800: #4e342e;
  --md-brown-900: #3e2723;

  /* Custom Grays and Neutral Colors */
  --light-gray: var(--md-gray-100);
  --slightly-darker-gray: var(--md-gray-300);
  --dark-gray: var(--md-gray-500);

  /* Primary Colors */
  --primary-color: var(--md-yellow-500);
  --primary-color-dark: var(--md-yellow-600);
  --primary-color-rgba-80: rgba(255, 238, 88, 0.8);
  --primary-color-rgba-50: rgba(255, 238, 88, 0.5);
  --primary-color-rgba-30: rgba(255, 238, 88, 0.3);
  --primary-color-rgba-20: rgba(255, 238, 88, 0.2);

  /* Secondary Colors */
  --secondary-color: var(--md-deep-orange-400);
  --secondary-color-dark: var(--md-deep-orange-600);
  --secondary-color-rgba-50: rgba(255, 112, 67, 0.5);
  --secondary-color-rgba-20: rgba(255, 112, 67, 0.2);

  /* Alert Colors */
  /* Success */
  --success-color: var(--md-green-400);
  --success-color-dark: var(--md-green-600);
  --success-color-rgba-50: rgba(102, 187, 106, 0.5); /* Green 400 at 50% opacity */
  --success-color-rgba-20: rgba(102, 187, 106, 0.2); /* Green 400 at 20% opacity */

  /* Warning */
  --warning-color: var(--md-yellow-400);
  --warning-color-dark: var(--md-yellow-800);

  /* Danger */
  --danger-color: var(--md-red-400);
  --danger-color-dark: var(--md-red-800);
  --danger-color-rgba-50: rgba(239, 83, 80, 0.5); /* Red 400 at 50% opacity */
  --danger-color-rgba-20: rgba(239, 83, 80, 0.2); /* Red 400 at 20% opacity */

  /* Info */
  --info-color: var(--md-cyan-400);
  --info-color-dark: var(--md-cyan-600);

  /* Key Stage Colors */
  --ks1-color: var(--md-blue-400);
  --ks2-color: var(--md-orange-400);

  /* Layout Dimensions */
  --header-height: 3.5rem;
  --sidebar-width: 16rem;
  --collapsed-sidebar-width: 5rem;

  /* Border Radius */
  --border-radius: 1.25em;
  --half-radius: 0.625em;

  /* Spacing */
  --tab-gap: 1rem;

  /* Component Colors */
  --text-color: var(--black);
  --sidebar-bg-color: var(--white);
  --main-bg-color: #f7fbf9;
  --table-stripe-color: #fafafa;

  /* Summary dot size */
  --summary-dot-size: 0.75rem;
}

/* ==========================================
  2. Typography and Fonts
========================================== */

body {
  background-color: var(--white);
  font-family: "Poppins", sans-serif;
  overflow-x: auto;
}
.fw-bold {
  font-weight: 500 !important;
}

.fw-bolder {
  font-weight: 600 !important;
}
.fw-extra-bolder {
  font-weight: 700;
}
/* ------------------------------------------
  2.1 Extended Font Sizes
------------------------------------------- */
.fs-7 {
  font-size: 0.875rem !important;
}
.fs-8 {
  font-size: 0.75rem !important;
}
.fs-9 {
  font-size: 0.5rem !important;
}

/* ==========================================
  3. Layout & Containers
========================================== */
.full-radius {
  border-radius: var(--border-radius);
}
.half-radius {
  border-radius: var(--half-radius);
}
/* Sidebar Base Styles */
.sidemenu {
  width: var(--sidebar-width);
  height: 100%;
  transition: all 0.3s ease;
  background-color: var(--sidebar-bg-color);
}

.sidemenu.collapsed {
  width: var(--collapsed-sidebar-width);
}

/* Sidemenu links */

.sidemenu-link {
  display: flex;
  align-items: center;
  padding: 0.8rem;
  margin-bottom: 0.5rem;
  border-radius: var(--border-radius);
  color: var(--text-color);
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.sidemenu-link i {
  margin-right: 1rem;
}

.sidemenu-link:hover {
  background-color: var(--primary-color);
  color: var(--text-color);
}

.sidemenu-link.active {
  background-color: var(--primary-color);
  color: var(--white);
  font-weight: 500;
}

/* Mascot Styles */
.mascot-container {
  position: relative;
  width: 100%;
  text-align: center;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  padding-bottom: 1rem;
}
.mascot-image-sm {
  max-height: 4rem;
}
.mascot-image {
  max-height: 6rem;
  transition: transform 0.5s ease;
}

.mascot-container:hover .mascot-image {
  transform: translateY(0.25rem);
}

.collapse-sidebar-btn {
  background-color: var(--primary-color);
  color: var(--black);
  display: none !important;
  font-weight: 600;
  height: 2rem;
  width: 2rem;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease;
}

.mascot-container:hover .collapse-sidebar-btn {
  display: flex !important;
}

.collapse-sidebar-btn:hover {
  background-color: var(--primary-color-dark);
  color: var(--black);
  transform: scale(1.1);
}

/* Collapsed State */
.sidemenu.collapsed .mascot-image {
  width: 3.75rem;
  height: 3.75rem;
}

.sidemenu.collapsed .sidemenu-link span {
  display: none;
}

.sidemenu.collapsed .sidemenu-link i {
  margin-right: 0;
}

.sidemenu.collapsed .mascot-title {
  display: none;
}
.mascot-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
  text-align: center;
  margin-top: 0.5rem;
}

.mobile-header img {
  height: 3rem;
}
.mobile-header h1 {
  font-weight: 600;
}
.mobile-header button {
  width: 2.5rem;
}
/* Mobile Styles */
@media (max-width: 47.998rem) {
  /* 767.98px -> 47.998rem */
  .sidemenu {
    position: fixed;
    left: 0;
    top: calc(var(--header-height) + 11px);
    bottom: 0;
    z-index: 1045;
    transform: translateX(-100%);
  }

  .sidemenu.show {
    transform: translateX(0);
  }

  .mascot-container {
    display: none;
  }
}

.question-navigator {
  width: 90%;
  margin: 0 auto;
}

.tips-and-video-link {
  max-width: 90%;
  margin: 0 auto;
}

.helpful-tip-avatar {
  width: 100%;
  max-width: 150px;
}

/* ==========================================
  4. Component Styles
========================================== */

/* ------------------------------------------
  4.1 Buttons
------------------------------------------- */
/* Base Button Class */
.btn {
  border-radius: var(--half-radius, 0.5rem);
  border: none;
  cursor: pointer;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.2s ease,
    border-color 0.15s ease;
}

/* Global Hover and Focus Effect */
.btn:hover {
  transform: translateY(-1px);
}

.btn:focus {
  outline: none;
}

.btn-close-xs {
  padding: 0.15rem;
  font-size: 0.65rem;
}

/* Global Active State */
.btn:active {
  transform: translateY(0);
}

/* Primary Button */
.btn.btn-primary {
  background-color: var(--primary-color);
  color: var(--black);
  border: 1px solid var(--md-yellow-600);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color: var(--md-yellow-600);
  border-color: var(--md-yellow-700); 
  box-shadow: 0 0 0 0.2rem var(--primary-color-rgba-80);
}

.btn.btn-primary:active {
  background-color: var(--md-yellow-600); 
  border-color: var(--md-yellow-800); 
  color: var(--black);
}

/* Secondary Button */
.btn.btn-secondary {
  background-color: var(--secondary-color);
  color: var(--white);
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
  background-color: var(--secondary-color-dark);
  box-shadow: 0 0 0 0.2rem var(--secondary-color-rgba-20);
}

.btn.btn-secondary:active {
  background-color: var(--secondary-color-dark);
}

/* Light Button */
.btn.btn-light {
  background-color: var(--md-gray-100);  
  color: var(--text-color);
  border: 1px solid transparent; 
}

.btn.btn-light:hover,
.btn.btn-light:focus {
  background-color: var(--md-gray-200); 
  border-color: var(--md-gray-400); 
  box-shadow: 0 0 0 0.2rem rgba(158, 158, 158, 0.2); 
}

.btn.btn-light:active {
  background-color: var(--md-gray-300); 
  border-color: var(--md-gray-400); 
}

/* Outline Buttons */
.btn.btn-outline-primary {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  background-color: transparent;
}

.btn.btn-outline-primary:hover {
  background-color: var(--primary-color);
  color: var(--black);
  box-shadow: 0 0 0 0.2rem var(--primary-color-rgba-50);
}

.btn.btn-outline-primary:active {
  background-color: var(--primary-color-dark);
  color: var(--black);
}

.btn.btn-outline-secondary {
  color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  background-color: transparent;
}

.btn.btn-outline-secondary:hover {
  background-color: var(--secondary-color);
  color: var(--white);
  box-shadow: 0 0 0 0.2rem var(--secondary-color-rgba-50);
}

.btn.btn-outline-secondary:active {
  background-color: var(--secondary-color-dark);
  color: var(--white);
}

.btn.btn-outline-dark {
  color: var(--black);
  border: 1px solid var(--black);
  background-color: transparent;
}
.btn.btn-outline-dark:hover {
  background-color: var(--black);
  color: var(--white);
}
/* Custom tooltip theme */
.custom-tooltip {
  --bs-tooltip-bg: var(--primary-color);
  --bs-tooltip-color: var(--black);
}

/* Hide tooltips on small screens */
@media (max-width: 767.98px) {
  .custom-tooltip {
    display: none !important;
  }
}

/* ------------------------------------------
  4.2 Progress Bars
------------------------------------------- */
.question-navigator .progress {
  height: auto;
  border-radius: var(--border-radius);
}

.question-navigator .progress-bar.bg-success {
  padding: 1rem;
  background: var(--primary-color) !important;
}

/* ------------------------------------------
  4.3 Speech Bubbles
------------------------------------------- */
.speech-bubble {
  position: relative;
  background: var(--md-gray-200);
  color: var(--text-color);
  padding: 1rem;
  border-radius: var(--half-radius);
  margin: 1.25rem;
}

/* Top triangle (up) */
.speech-bubble.up::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-bottom: 1rem solid var(--md-gray-200);
}

/* Bottom triangle (down) */
.speech-bubble.down::after {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 1rem solid var(--md-gray-200);
}

/* Left triangle */
.speech-bubble.left::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-right: 1rem solid var(--md-gray-200);
}

/* Right triangle */
.speech-bubble.right::after {
  content: "";
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-left: 1rem solid var(--md-gray-200);
}

/* ------------------------------------------
  4.4 Forms & Inputs
------------------------------------------- */

/* 4.4.1 Input Fields */

/* Focus state for text inputs */
.form-control:focus {
  border-color: var(--black) !important;
  box-shadow: 0 0 0 0.2rem var(--black-rgba-30) !important;
}

/* Disabled input styling */
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--md-gray-100);
  border-color: var(--md-gray-300);
  color: var(--md-gray-600);
}

/* 4.4.2 Checkboxes */

/* Increase size and darken border for checkboxes */
.form-check-input[type="checkbox"] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  border: 2px solid var(--black-600) !important;
  margin-top: 0.15rem !important;
}

/* Focus state for checkboxes */
.form-check-input[type="checkbox"]:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 0.2rem var(--black-rgba-30);
}

/* Checked state for checkboxes */
.form-check-input[type="checkbox"]:checked {
  background-color: var(--black);
  border-color: var(--black);
}

/* Remove focus styling when unchecked */
.form-check-input[type="checkbox"]:not(:checked):focus {
  box-shadow: none;
}

/* Disabled state for checkboxes */
.form-check-input[type="checkbox"]:disabled {
  background-color: var(--md-gray-200);
  border-color: var(--md-gray-500);
}

/* Indeterminate checkbox state */
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--black);
  border-color: var(--black);
}

/* 4.4.3 Switches */

/* Preserve the basic switch appearance */
.form-switch .form-check-input {
  width: 2rem !important;
  height: 1rem !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.65%29'/%3e%3c/svg%3e") !important;
  background-position: left center !important;
  border-radius: 2rem !important;
  transition: background-position 0.15s ease-in-out !important;
  border: 2px solid var(--black-600) !important;
}

/* Checked state for switches */
.form-switch .form-check-input:checked {
  background-color: var(--black) !important;
  border-color: var(--black) !important;
  background-position: right center !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* Focus state for switches */
.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem var(--black-rgba-30);
}

/* Focus state for unchecked switches */
.form-switch .form-check-input:not(:checked):focus {
  box-shadow: 0 0 0 0.2rem var(--black-rgba-30);
  border-color: var(--black);
}

/* Disabled switch styling */
.form-switch .form-check-input:disabled {
  opacity: 0.6;
  background-color: var(--md-gray-300);
  border-color: var(--md-gray-500);
}

/* 4.4.4 Radio Buttons - Standard */

/* Increase size and darken border for radio buttons */
.form-check-input[type="radio"] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  border: 2px solid var(--black-600) !important;
  margin-top: 0.15rem !important;
}

/* Checked state for radio buttons */
.form-check-input[type="radio"]:checked {
  background-color: var(--black);
  border-color: var(--black);
}

/* Focus state for radio buttons */
.form-check-input[type="radio"]:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 0.2rem var(--black-rgba-30);
}

/* Remove focus styling when unchecked */
.form-check-input[type="radio"]:not(:checked):focus {
  box-shadow: none;
}
/* 4.4.5 Custom Radio Cards */

/* Individual radio card styling - keeping border and transition only */
.radio {
  border: 2px solid #dee2e6;
  transition: all 0.3s ease;
}

/* Hover state for radio cards */
.radio:hover {
  border-color: var(--black) !important;
  box-shadow: 0 0 0 0.2rem var(--black-rgba-30) !important;
}

/* Selected state for radio cards */
.radio.selected-active {
  border-color: var(--black) !important;
  box-shadow: 0 0 0 0.2rem var(--black-rgba-30) !important;
  background-color: var(--black-rgba-5) !important;
}

/* 4.4.6 Image Radio */
.image-radio {
  border: 3px solid var(--md-gray-300);
  border-radius: var(--half-radius);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 1rem;
  text-align: center;
  transition: all 0.3s ease;
}
.image-radio img {
  margin-bottom: 10px;
  max-width: 160px;
}
.image-radio p {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}
.image-radio:hover,
.image-radio.selected-active {
  border-color: var(--black);
  box-shadow: 0 0 0 0.3rem var(--black-rgba-20);
}
.image-radio.selected-active {
  background-color: var(--black-rgba-5);
}
.image-radio input {
  display: none;
}

/* 4.4.7 Password Field */

/* Password visibility toggle icon color */
.password-toggle-icon {
  color: #6c757d;
  transition: color 0.2s ease;
}

/* Hover state for password toggle icon */
.password-toggle-icon:hover {
  color: var(--black-700);
}

/* 4.4.8 Select Dropdowns */

/* Focus state for select dropdowns */
.form-select:focus {
  border-color: var(--black) !important;
  box-shadow: 0 0 0 0.2rem var(--black-rgba-30) !important;
}

/* Modify the select dropdown arrow */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Selected option styling */
.form-select option:checked {
  background-color: var(--black) !important;
  color: var(--white) !important;
}

/* Option hover styling */
.form-select option:hover,
.form-select option:focus {
  background-color: var(--black) !important;
  color: var(--white) !important;
}

/* Multiple select option styling */
select[multiple].form-select option {
  padding: 0.5rem;
}

select[multiple].form-select option:checked {
  background-color: var(--black) !important;
  color: var(--white) !important;
}

select[multiple].form-select option:hover {
  background-color: var(--black-700) !important;
  color: var(--white) !important;
}

/* Disabled select styling */
.form-select:disabled {
  background-color: var(--md-gray-100);
  border-color: var(--md-gray-300);
  color: var(--md-gray-500);
  opacity: 0.7;
}

/* ------------------------------------------
  4.5 List Groups
------------------------------------------- */
.b-list-group h5 {
  border-bottom: 2px solid var(--slightly-darker-gray);
  padding-bottom: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.b-list-group-item {
  margin-bottom: 0.5rem;
}

.b-list-group-item button {
  border-radius: var(--half-radius);
}

/* ------------------------------------------
  4.6 Tab Component Styles
------------------------------------------- */
ul.nav.nav-pills li.nav-item:not(:last-of-type) {
  margin-right: 0.5rem;
}

.nav-pills .nav-link {
  padding: 0.8em 1.5em;
  border-radius: var(--border-radius);
  text-align: center;
  cursor: pointer;
  font-weight: 500;
  background-color: var(--md-gray-200);
  color: var(--text-color);
  transition:
    background-color 0.3s,
    color 0.3s;
}

.nav-pills .nav-link.active {
  background-color: var(--primary-color);
  color: var(--black);
  pointer-events: none;
  cursor: default;
}

.nav-pills .nav-link:hover {
  background-color: var(--md-gray-300);
}

/* Key Stage Styles */
.ks1 {
  background-color: var(--ks1-color);
  color: var(--white);
}

.ks2 {
  background-color: var(--ks2-color);
  color: var(--white);
}

/* ------------------------------------------
  4.7 Summary Dots
------------------------------------------- */
.summary-dots {
  display: flex;
  gap: 0.4rem;
}

.summary-dot {
  width: var(--summary-dot-size);
  height: var(--summary-dot-size);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.summary-dot:hover {
  transform: scale(1.2);
}

.summary-dot.correct {
  background-color: var(--success-color);
}

.summary-dot.incorrect {
  background-color: var(--danger-color);
}
/* ------------------------------------------
  4.8 Badges
------------------------------------------- */
.badge.bg-primary {
  background-color: var(--primary-color) !important;
  color: var(--black) !important;
}

.badge.bg-secondary {
  background-color: var(--secondary-color) !important;
  color: var(--white) !important;
}
.deal-badge {
  background-color: var(--secondary-color);
  color: var(--white);
  padding: 0.25rem 0.5rem;
  border-radius: var(--half-radius);
}

/* ------------------------------------------
  4.9 Icons
------------------------------------------- */
.primary-icon-color {
  color: var(--primary-color);
}

.secondary-icon-color {
  color: var(--secondary-color);
}

.icon-sm {
  font-size: 0.875rem;
}

.icon-lg {
  font-size: 1.5rem;
}
/* ==========================================
  4.10 Avatar Image Uploader
========================================== */

.avatar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10rem;
  height: 10rem;
  overflow: hidden;
  border: 2px solid var(--md-gray-400);
  background-color: var(--md-gray-100);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.avatar-wrapper:hover {
  border-color: var(--black);
  box-shadow: 0 0 0 0.2rem var(--black-rgba-50) !important;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--black-rgba-10);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.avatar-wrapper:hover .avatar-overlay {
  opacity: 1;
}

.avatar-icon {
  color: var(--black);
  font-size: 2rem;
  cursor: pointer;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ==========================================
  4.11 Avatar Image 
========================================== */

.avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 600;
  background-color: var(--md-yellow-500);
}

/* Sizing options */
.avatar-sm {
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
}

.avatar-md {
  width: 5rem;
  height: 5rem;
  font-size: 2rem;
}

.avatar-lg {
  width: 8rem;
  height: 8rem;
  font-size: 3rem;
}

/* ==========================================
  4.12 Trix Editor
========================================== */

/* ==========================================
  4.13. Sortable Modal
========================================== */
#sortable-list,
#sortable-list * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Grab cursor for the grip icon */
.bi-grip-vertical {
  cursor: grab;
}

/* Change to grabbing hand when actively dragging */
.bi-grip-vertical:active {
  cursor: grabbing;
}

/* ==========================================
  5. Utility Classes
========================================== */
.focus {
  box-shadow: 0 0 0 0.313rem rgba(0, 0, 0, 0.2) !important;
  border-color: black;
  transition: box-shadow 0.5s ease;
}

.question-card-title {
  text-align: center;
  margin: 1rem 0;
}

.editable-heading-container h3 {
  cursor: pointer;
}

/* Lightbox Overlay */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

/* Lightbox Content */
.lightbox-content {
  position: relative;

  max-width: 90%;
  max-height: 90%;
  padding: 1rem;
  overflow: auto;
  border: 0.25rem solid var(--secondary-color);
  border-radius: var(--border-radius);

  background-color: var(--white);
  box-shadow: 0.875rem 0.875rem 0 0 rgba(0, 0, 0, 0.5);

  transform: scale(0.8);
  transition: transform 0.3s ease;
}
/* Lightbox Image */
.lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  margin: 0 auto;
  border-radius: 0.25rem;
}

/* Close Button */
.close-button {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1051; /* Higher than lightbox overlay */
  background-color: #0d6efd;
  color: #fff;
  border: none;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
}

/* Lightbox Open State */
.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-overlay.active .lightbox-content {
  transform: scale(1);
}

/* Responsive Adjustments */
@media (max-width: 48rem) {
  .lightbox-content {
    max-width: 95%;
    max-height: 95%;
    padding: 0.9375rem;
  }

  .close-button {
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
  }
}