:root {
  /* Colors */
  --background-colour: #53829F; /*#9BC2E9; /*#F9DB87; /*#F6CB50; /*#8ECE91;*/
  --white-background: #ffffff;
  --tab-colour: #53829F; /*#9BC2E9; /*#F9DB87; /*#F6CB50; /*#8ECE91;*/
  --tab-colour-active: #ffffff;
  --tab-colour-hover: #d7d7d7;
  --button-colour: #355365; /*#5D576B; /*#316b83;*/
  --button-colour-hover: #d7d7d7;
  --body-colour: #2E2E2E;
  --title-colour: #2E2E2E;
  --button-text-colour: #fff;
  --chat-background-colour: #d7d7d7;
  --row-colour: #f7f7f7;
  --toggle-off: #4EA72E;
  --toggle-on: #C00000;
  --comp-high: #C2E4C4;
  --comp-med: #8ECE91;
  --comp-low: #24B272;
  
  /* Borders */
  --border-colour: #ddd;
  --border-thickness: 0.5px;
  --border-radius: 20px;
  
  
  /* Spacing */
  --padding-small: 0.5rem;
  --padding-med: 1rem;
  --padding-large: 2rem;
 
  /* Font */
  --font: Aptos, sans-serif; /*Aptos, sans-serif;*/
  --body-size: 10px;
  --title-size: 16px;
  --title-size-large: 24px;
  
  /* Shadows */
  --box-shadow-side: 0px -0px 0px rgba(0, 0, 0, 0.5); /*0px -3px 3px rgba(0, 0, 0, 0.5);*/
  --box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5); /*0px 3px 3px rgba(0, 0, 0, 0.5);*/
  --box-shadow-up: 0px -0px 0px rgba(0, 0, 0, 0.5); /*0px -3px 3px rgba(0, 0, 0, 0.5);*/
  
}

    /* -----------------------------------
       BASIC RESET
    ----------------------------------- */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: var(--font);
    }

    body {
      display: flex;
      height: 100vh;
      background-color: var(--background-colour);
      color: var(--background-colour);
	  flex-direction: row;
    }

    /* -----------------------------------
       SIDEBAR
       (Vertical chat tabs)
    ----------------------------------- */
    .sidebar {
      width: clamp(420px, 50vw, 720px);
      background-color: var(--background-colour);
      display: flex;
      flex-direction: column;
	  flex-shrink: 0; /* Prevent sidebar from shrinking */
	  height: 100vh;
	  padding: var(--padding-small);
	  padding-right: 0;
	  gap: 10px;
    }
    .sidebar-header {
      padding: var(--padding-med);
      background-color: var(--background-colour);
      text-align: center;
    }
	
    /* Menu tab */
    .menu {
      display: flex;
	  flex-direction: row;
	  align-items: center;
      background-color: var(--background-colour);
	  width: 100%;
	  color: var(--white-background);
	  font-size: var(--title-size-large);
	  font-weight: bold;
	  padding-left: 2px;
	  gap: 10px;
/* 	  margin-left: var(--padding-small);
	  margin-right: var(--padding-small);
	  margin-top: var(--padding-small); */
    }
	
    .menu-tab {
      padding: var(--padding-small);
	  background-color: var(--background-colour);
      cursor: pointer;
      border: 0px;
      text-align: center;
	  display: flex;
      flex: 1;
      transition: background 0.2s;
	  border-radius: 0px;
	  height: 38px;
	  color: var(--white-background);
	  justify-content: space-evenly;
      align-items: center;
    }
	
	.fa-bars {
	  font-size: 24px; /* Adjust size */
	  cursor: pointer; /* Make it clickable */
	  background: var(--background-white);
	}
	
	.menu-button {
	  width: 40px;
	  height: 40px;
	  background: transparent;
	  border: none;
	  border-radius: 50%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  cursor: pointer;
	  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
	}

	/* Default state: white icon */
	.menu-button i {
	  color: var(--white-background);
	  font-size: 20px;
	}

	/* Hover state: black icon inside a grey circle */
	.menu-button:hover {
	  background: var(--tab-colour-hover);
	}

	.menu-button:hover i {
	  color: black;
	}

	/* Active (clicked) state: black icon inside a white circle */
	.menu-button:active {
	  background: var(--tab-colour-active);
	}

	.menu-button:active i {
	  color: black;
	}
	
	/* Basic reset for list styling */
	.dropdown-menu ul {
	  list-style: none;
	  margin: 0;
	  padding: 0;
	}

	/* Dropdown container styles */
	.dropdown-menu {
	  display: none; /* Hidden by default */
	  position: absolute;
	  top: 60px;      /* Adjust as needed relative to your sidebar */
	  left: 10px;     /* Adjust based on your layout */
	  background-color: #fff;
	  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	  border-radius: 4px;
	  padding: 10px;
	  z-index: 1000;
	}

	/* Style for each menu item */
	.dropdown-menu li {
	  margin-bottom: 5px;
	}

	.dropdown-menu li button {
	  width: 100%;
	  padding: 10px;
	  border: none;
	  background: none;
	  text-align: left;
	  cursor: pointer;
	  font-size: 1rem;
	}

	.dropdown-menu li button:hover {
	  background-color: #f0f0f0;
	}

	/* hide any sub-menu by default */
	.submenu { display: none; margin-left: .5rem; }

	/* ① basic geometry for the right-hand column */
	.settings-panel {
	  display: none;                 /* hidden until JS flips it */
	  position: absolute;
	  top: 0;
	  left: 100%;                    /* stick to the menu’s right edge */
	  margin-left: 8px;              /* small gap between columns */
	  min-width: 190px;
	  background: #fff;
	  border: 1px solid #ddd;
	  border-radius: 4px;
	  box-shadow: 0 2px 6px rgba(0,0,0,.15);
	  padding: .75rem .85rem;
	  z-index: 20;                   /* above the menu list */
	}

	/* ② each group */
	.setting-block { 
	  margin: 0 0 .9rem 0;
	  border: none;                  /* remove default browser border */
	  padding: 0;
	}

	/* ③ legend = group title */
	.setting-title {
	  font-weight: 600;
	  margin-bottom: .4rem;
	}

	/* ④ radio labels stack vertically */
	.setting-option {
	  display: block;
	  margin-left: .4rem;
	  cursor: pointer;
	}

	/* ⑤ optional: tighter radios */
	.setting-option input { margin-right: .25rem; }

	.has-submenu { position: relative; }               /* ① anchor */

	.has-submenu .settings-panel {                     /* ② panel box */
	  display: none;           /* JS toggles this */
	  position: absolute;      /* now relative to the <li> */
	  top: 0;                  /* top aligns with the button */
	  left: 100%;              /* sits to the right edge */
	  margin-left: 18px;        /* gap */
	  min-width: 140px;
	  background: #fff;
	  border: 1px solid #ddd;
	  border-radius: 4px;
	  box-shadow: 0 2px 6px rgba(0,0,0,.15);
	  padding: .75rem .85rem;
	  z-index: 20;
	  color: black;
	  font: var(--font);
	  font-size: var(--title-size);
	}

	/* keep the setting-block / title / option rules you already added */


	.chat-container {
	  display: flex; /* Aligns the sidebar and the content */
	  flex: 1;
	  flex-direction: row;
	  height: 100%;
	  overflow-y: auto;
	}

	/* -----------------------------------------------------------------
	   Class Review: left-side class tabs
	   - Reuses the same .chat-tabs / .chat-tab styling as the main page
	   - Keeps the panel narrow so the review table gets maximum width
	------------------------------------------------------------------ */
	.class-review-tabs {
	  display: flex;
	  flex-direction: column;
	  flex-shrink: 0;
	  height: 100vh;
	  padding: var(--padding-small);
	  padding-right: 0;
	  background-color: var(--background-colour);
	}
	.chat-tabs {
	  width: 50px;
	  background-color: var(--background-colour);
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: 5px;
	  padding-right: 7px;
	}

	.chat-tab {
	  flex-grow: 1; /* Ensures each tab grows to fill space evenly */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  writing-mode: vertical-rl;
	  text-orientation: mixed;
	  transform: rotate(180deg);
	  cursor: pointer;
	  width: 40px; /* Makes the tabs take the full width of .chat-tabs */
	  text-align: center;
	  background: var(--tab-colour);
	  /*border: var(--border-thickness) solid var(--border-colour); */
/* 	  border-top: var(--border-thickness) solid var(--border-colour);
	  border-bottom: var(--border-thickness) solid var(--border-colour); */
	  transition: background 0.2s;
	  min-height: 50px; /* Ensures they don't get too small */
	  color: var(--white-background);
	  font-size: var(--title-size);
	  padding: var(--padding-small);
	  border-radius: var(--border-radius);
	}
	
    .chat-tab:hover {
      background: var(--tab-colour-hover);
	  border-radius: var(--border-radius);
	  color: var(--body-colour);
	  /*border: var(--border-thickness) solid var(--border-colour); */
    }
    .chat-tab.active {
      background: var(--tab-colour-active);
      border: var(--border-thickness) solid var(--border-colour);
	  box-shadow: var(--box-shadow-side);
	  border-radius: var(--border-radius);
	  z-index: 10;
	  color: var(--body-colour);
    }
	
	/* Remove the bottom border of the tab above the active one */
	.chat-tab.active + .chat-tab {
		border-bottom: none;
	}

	/* Remove the top border of the tab below the active one */
	.chat-tab:has(+ .chat-tab.active) {
		border-top: none;
	}	
	
	/* Remove the bottom border of the tab above the hover one */
	.chat-tab:hover + .chat-tab {
		border-bottom: none;
	}

	/* Remove the top border of the tab below the hover one */
	.chat-tab:has(+ .chat-tab:hover) {
		border-top: none;
	}		
	
    .chat-main {
      flex: 1;
      display: flex;
      flex-direction: column;
	  overflow: hidden;
	  box-shadow: var(--box-shadow);
	  border-radius: var(--border-radius);
    }
	.chat-message {
	  margin-bottom: var(--padding-small);
	  line-height: 1.4;
	  padding: var(--padding-small) var(--padding-small);
	  border-radius: var(--border-radius);
	  max-width: 80%;
	  word-wrap: break-word;
	  display: inline-block;
	  overflow-wrap: break-word;
	}

	.chat-message.user {
	  background: var(--chat-background-colour);
	  color: var(--body-colour);
	  align-self: flex-end; /* Align user messages to the left */
	}

	.chat-message.bot {
	  background: none;
	  color: var(--body-colour);
	  align-self: flex-start; /* Align bot messages to the right */
	}

	.chat-message.candidate {
	  display: flex;  
	  transform: scale(1);
	  flex-direction: row;       
	  align-items: center; /* Space out the content, if needed */
	  justify-content: space-between;
	  padding: 10px;
	  border: 1px solid #ddd;
	  border-radius: var(--border-radius);
	  cursor: pointer;
	  background-color: #f9f9f9;
	  transition: transform 0.3s ease-in-out, opacity 0.5s ease-in-out;
	  font-family: Arial, sans-serif; /* Correct way to apply font */ 
	  color: var(--title-colour);
	  font-size: var(--title-size);
	  opacity: 1;
	  align-self: flex-start;
	  min-width: 300px;
	}

	/* Ensures messages are flex items for alignment */
	.chat-messages {
	  display: flex;
	  flex-direction: column;
	  background: var(--white-background);
	  flex: 1;
	  padding: 5px;
	  overflow-y: auto; Allows scrolling
	  max-height: calc(100vh - 100px); /* Adjust to leave space for other elements */
	  min-height: 200px;
	  min-height: 100%;
	  scrollbar-width: thin; 
	  border: None solid var(--border-colour); /*var(--border-thickness) solid var(--border-colour)*/
	  border-radius: var(--border-radius);
	  box-shadow: var(--box-shadow);
	}

		
	/* Ensure the list stays inside the chat bubble */
	.chat-message ul {
	  padding-left: 20px; /* Indent the bullets to align with text */
	  margin: 5px 0; /* Adjust spacing */
	  max-width: 100%; /* Prevents list from overflowing */
	  overflow-wrap: break-word;
	  word-wrap: break-word;
	}

	.chat-message li {
	  word-break: break-word; /* Ensures long filenames wrap inside bubble */
	  max-width: 100%;
	}
	

	#chatCandidates {
	  padding: 5px;
	  background-color: inherit; /* so it blends with chat */
	  border: none;
	}

	
	.chat-input {
		display: flex;
		border-top: 0px solid var(--border-colour);
		background: var(--background-colour);
		flex-shrink: 0; /* Prevents shrinking */
		width: 100%; /* Ensures full width */
		box-sizing: border-box;
	}

	.chat-textarea-wrapper {
		flex-grow: 1;
		min-width: 0;
		margin-left: 3rem; /* Moves everything inside (textarea) without affecting flex behavior */
	}

	.chat-textarea {
		width: 100%; /* Full width within wrapper */
		height: 120px;
		overflow-y: auto; /* Enables scrolling if text exceeds max-height */
		resize: none; /* Prevents manual resizing */
		padding: var(--padding-small);
		border: var(--border-thickness) solid var(--border-colour);
		background: var(--white-background);
		border-radius: var(--border-radius) 0 0 var(--border-radius);
		box-shadow: var(--box-shadow);
		transition: height 0.2s ease-in-out;
		font-size: 16px;
		line-height: 20px; /* Helps with expansion */
		box-sizing: border-box;
	}

	.chat-input button {
		flex-shrink: 0; /* Prevents button from getting squeezed */
		padding: var(--padding-small) var(--padding-med);
		background: var(--button-colour);
		border: 0;
		border-radius: 0 var(--border-radius) var(--border-radius) 0;
		cursor: pointer;
		white-space: nowrap; /* Prevents text from breaking inside button */
		box-shadow: var(--box-shadow);
		color: var(--button-text-colour);
		height: 120px; /* Explicitly match the textarea height */
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	
    .chat-input button:hover {
      background: var(--button-colour-hover);
	  border: 0;
    }

    /* -----------------------------------
       MAIN CONTENT AREA (right side)
    ----------------------------------- */
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
	  padding: var(--padding-small);
	  overflow-x: hidden;
	  min-width: 0;
	  height: 100vh;
	  gap: var(--padding-small);
	  justify-content: center;
	  align-content: center;
    }

    /* Tabs (Content | Class Review | Focus Review ) */
    .tabs {
      display: flex;
      background-color: var(--background-colour);
	  width: 100%;
	  color: var(--title-colour);
	  font-size: var(--title-size);
	  gap: 0px;
	  /*margin-top: var(--padding-small);*/
	  height: 40px;
    }
/*     .tab {
      padding: var(--padding-small);
	  background-color: var(--tab-colour);
      cursor: pointer;
      border: var(--border-thickness) solid var(--border-colour);
      text-align: center;
      flex: 1;
      transition: background 0.2s;
	  border-radius: var(--border-radius);
    } */

	.tab {
	  display: flex; /* Enables Flexbox */
	  align-items: center; /* Centers content vertically */
	  justify-content: center; /* Centers content horizontally */
	  padding: var(--padding-small);
	  background-color: var(--tab-colour);
	  cursor: pointer;
	  /*border: var(--border-thickness) solid var(--border-colour); */
	  border-left: var(--border-thickness) solid var(--border-colour);
	  border-right: var(--border-thickness) solid var(--border-colour);
	  text-align: center;
	  flex: 1;
	  transition: background 0.2s;
	  height: 100%; /* Ensures it takes up the full height of the tab container */
	  color: var(--white-background);
	}


    .tab:hover {
      background-color: var(--tab-colour-hover);
	  border-radius: var(--border-radius);
	  color: var(--body-colour);
    }
    .tab.active {
      background-color: var(--tab-colour-active);
	  box-shadow: var(--box-shadow);
	  border: var(--border-thickness) solid var(--border-colour);
	  border-radius: var(--border-radius);
	  color: var(--body-colour);

    }
	
	/* Remove the bottom border of the tab above the active one */
	.tab.active + .tab {
		border-left: none;
	}

	/* Remove the top border of the tab below the active one */
	.tab:has(+ .tab.active) {
		border-right: none;
	}	
	
	/* Remove the bottom border of the tab above the hover one */
	.tab:hover + .tab {
		border-left: none;
	}

	/* Remove the top border of the tab below the hover one */
	.tab:has(+ .tab:hover) {
		border-right: none;
	}		
	
	
    .tab-content {
      display: none; /* hidden by default */
      padding: 0;
      flex: 1;
      overflow-y: auto;
	  height: 100%;
	  box-shadow: var(--box-shadow);
	  background: var(--white-background)
    }
    .tab-content.active {
      display: flex; /* show active tab */
	  flex-direction: column;
	  border: var(--border-thickness) solid var(--border-colour);
	  border-radius: var(--border-radius);
    }

    /* -----------------------------------
       CONTENT TAB
       With No. | Question | Response | Marking | Comments
       + Summary, Positives, Improvement, Preferences
    ----------------------------------- */
    .content-tab {
      display: flex;
	  flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      /*margin-bottom: 1rem; */
	  flex: 1;
	  height: 100%;
	  overflow: hidden;
	  border: var(--border-thickness) solid var(--border-colour);
	  border-radius: var(--border-radius);
    }
	
	.content-batch-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
	  flex-direction: row;
	  width: 100%;
      margin: 0; /* Reset margin */
    }

	.content-pupil-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
	  flex-direction: row;
    }

	

    .arrow {
      font-size: 2rem;
      cursor: pointer;
      padding: var(--padding-small);
    }
    .arrow-container:hover {
      background: var(--button-colour-hover);
    }


	/* Main table styling */
	.content-table {
	  width: 95%;
	  border-collapse: separate; /* Allows border-radius to work */
	  border-spacing: 0; /* Ensures no gaps between cells */
	  border: 0 solid var(--border-colour);/*var(--border-thickness) solid var(--border-colour); /* Outer border */
	  border-radius: calc(var(--border-radius) * 0.5); /* Rounded outer corners */
	  overflow: hidden; /* Ensures the border radius applies */
	  color: var(--body-colour);
	  font-size: var(--body-size);
	  margin: 0 auto;
	  position: relative;
	}

	/* Remove default borders on all cells */
	.content-table th {
	  border: none; /* Removes all inner grid lines */
	  padding: 10px;
	  text-align: center;
	  vertical-align: middle;
	}
	
	/* -----------------------------------------------------------------
	   Specific rule only for the header that now contains
	   <div class="title-wrapper"> … </div>
	------------------------------------------------------------------*/
	.content-table th > .title-wrapper {
	  display: flex;                /* make button + title one flex row   */
	  justify-content: center;      /* centre the whole group horizontally */
	  align-items: center;          /* vertically middle-align icon + text */
	  gap: 8rem;                  /* space between the magic-wand icon and text */
      padding:0.25rem;     
	}
	
	.content-table th > .title-wrapper .title-text{   /* add a class to the <strong> or <p> */
	  font-size:1.5rem;           /* just the text */
	  line-height:1.2;            /* optional - tighten vertical rhythm */
	}
	
	/* push the left button hard left */
	.title-wrapper .summary-btn-left{
	  margin-right:auto;     /* everything after it goes to the right */
	}

	/* push the right button hard right (if present) */
	.title-wrapper .summary-btn-right{
	  margin-left:auto;      /* keeps it at the far edge */
	}
	.content-table td {
	  border: none; /* Removes all inner grid lines */
	  padding: 10px;
	  text-align: left;
	  vertical-align: middle;
	}

	/* Remove individual row alternating background */
	.content-table tbody tr:nth-child(even),
	.content-table tbody tr:nth-child(odd) {
	  background: none;
	}

	/* Apply alternating background on each tbody group */
	.content-table tbody:nth-of-type(odd) {
	  background-color: var(--white-background); /* e.g. white */
	}

	.content-table tbody:nth-of-type(even) {
	  background-color: var(--row-colour); /* e.g. light gray */
	}


	/* Apply padding and styling to headers */
	.content-table th {
	  background-color: var(--tab-colour); /* Light beige header */
	  padding: var(--padding-small);
	  color: var(--white-background);
	}

	/* Top-left and top-right corners from the header */
/* 	.content-table thead tr:first-child th:first-child {
	  border-top-left-radius: calc(var(--border-radius) * 0.5);
	}
	.content-table thead tr:first-child th:last-child {
	  border-top-right-radius: calc(var(--border-radius) * 0.5);
	} */

	/* Bottom-left and bottom-right corners from the last row of the last tbody */
/* 	.content-table tbody:last-of-type tr:last-child td:first-child {
	  border-bottom-left-radius: calc(var(--border-radius) * 0.5);
	}
	.content-table tbody:last-of-type tr:last-child td:last-child {
	  border-bottom-right-radius: calc(var(--border-radius) * 0.5);
	} */

	/* =============================
	   PUPIL INFO CONTAINER (MATCH HEIGHT)
	============================= */
	.pupil-info-container {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background: var(--white-background);
	  border: var(--border-thickness) solid var(--border-colour);
	  padding: 0px;
	  width: 100%;
	  /*max-width: 600px; /* Adjust as needed */
	  border-radius: 0px; /* Keeps it square-edged */
	  height: 40px; /* Ensures height matches batch select */
	  position: relative; /* Needed for arrow positioning */
	  margin-left: 75px;
	  margin-right: 75px;
	}
	
	.cohort-info-container {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background: var(--white-background);
	  border: var(--border-thickness) solid var(--border-colour);
	  padding: 0px;
	  width: auto;
	  /*max-width: 600px; /* Adjust as needed */
	  border-radius: 0px; /* Keeps it square-edged */
	  height: 40px; /* Ensures height matches batch select */
	  position: relative; /* Needed for arrow positioning */
	  margin-left: 75px;
	  margin-right: 75px;
	}

	/* =============================
	   PUPIL INFORMATION BOX (NO RADIUS)
	============================= */
	.pupil-info {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  background: var(--white-background);
	  border: var(--border-thickness) solid var(--border-colour);
	  padding: var(--padding-small);
	  padding-left: 50px;
	  padding-right: 50px;
	  width: 100%;
	  border-radius: 0px; /* Keeps it square-edged */
	  height: 40px;
	  color: var(--body-colour);
	  font-size: var(--title-size);
	}

	.cohort-info {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background: var(--white-background);
	  border: var(--border-thickness) solid var(--border-colour);
	  padding: var(--padding-small);
	  padding-left: 50px;
	  padding-right: 50px;
	  width: 100%;
	  border-radius: 0px; /* Keeps it square-edged */
	  height: 40px;
	  color: var(--body-colour);
	  font-size: var(--title-size);
	  text-align: center;
	}

	/* =============================
	   ARROWS (STUCK TO ENDS)
	============================= */
	.arrow-container {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background: var(--button-colour);
	  color: var(--button-text-colour);
	  font-size: 20px;
	  font-weight: bold;
	  cursor: pointer;
	  width: 40px;
	  height: 40px; /* Same height as .pupil-info-container */
	  position: absolute;
	  padding-bottom: 3px;
	}

	.arrow-container.left {
	  left: -40px; /* Moves it outside the left edge */
	  border-radius: var(--border-radius) 0 0  var(--border-radius);
	}

	.arrow-container.right {
	  right: -40px; /* Moves it outside the right edge */
	  border-radius: 0  var(--border-radius)  var(--border-radius) 0;
	}

	/* =============================
	   INDIVIDUAL INFO ITEMS
	============================= */
	.content-pupil-nav {
	  display: flex;
	  align-items: center;
	  gap: 1px;
	  flex-grow: 1;
	  padding: 0 1px;
	}

	.info-item {
	  display: flex;
	  align-items: center;
	  gap: 1px;
	  background: white;
	  padding:  1px;
	  border-radius:  var(--border-radius);
	  border: 0px solid #ccc;
	  min-width: 50px;
	}

	/* =============================
	   BUTTONS & SELECT DROPDOWN
	============================= */
	.info-item button,
	.info-item select {
	  height: 28px; /* Uniform height */
	  padding: 5px;
	  color: var(--body-colour);
	  font-size: var(--body-size);
	}

	.info-item select {
	  border-radius: var(--border-radius);
	}

	.info-item button {
	  background: var(--button-colour);
	  color: var(--button-text-colour);
	  border: none;
	  padding: 5px;
	  border-radius: var(--border-radius);
	  cursor: pointer;
	  font-weight: bold;
	  height: 30px;
	  width: 30px;
	}

	.info-item button:hover {
	  background: var(--button-colour-hover);
	}


	/* Adjust spacing between label and input */
	.info-item label {
	  margin-right: 0.5rem;
	  white-space: nowrap; /* Prevents label text from wrapping */
	}

	/* Optional: Uniform input styling */
	.info-item input,
	.info-item select {
	  flex-grow: 1;
	  min-width: 100px;
	}

	/* Ensure Positive text & Toggle are inline */
	.positive-row {
	  display: flex;
	  align-items: center;
	  justify-content: space-between; /* Push toggle to the right */
	  gap: 10px; /* Adds spacing between text and toggle */
	  width: 100%; /* Ensure full width of the cell */
	}

	/* =============================
	   CONTAINER FOR BATCH SELECT + PUPIL INFO
	============================= */
	.batch-pupil-container {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  /*gap: 120px; /* Space between dropdown and pupil info */
	  width: 100%;
	  /*max-width: 900px; /* Adjust if necessary */
	  /*margin: auto; */
	}

	/* =============================
	   BATCH SELECT DROPDOWN & BUTTON (MATCH HEIGHT)
	============================= */
	.batch-select {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 40px; /* Match with pupil-info height */
	  border-radius: var(--border-radius); /* Ensures smooth corners */
	}

	/* Style the dropdown */
	#jobBatchSelect {
	  border: var(--border-thickness) solid var(--border-colour);
	  padding: var(--padding-small);
	  font-size: var(--title-size);
	  color: var(--title-colour);
	  border-right: none; /* Removes border between dropdown & button */
	  border-radius: var(--border-radius) 0 0 var(--border-radius); /* Rounded left corners */
	  height: 40px; /* Ensure consistent height */
	  cursor: pointer;
	  outline: none;
	}

	/* Style the submit button */
	#Submit {
	  background-color: var(--button-colour);
	  color: var(--button-text-colour);
	  border: var(--border-thickness) solid var(--border-colour);
	  padding: var(--padding-small);
	  font-size: var(--title-size);
	  cursor: pointer;
	  border-radius: 0 var(--border-radius) var(--border-radius) 0; /* Rounded right corners */
	  height: 40px; /* Ensure consistent height */
	  transition: background 0.3s ease-in-out;
	}

	#Submit:hover {
	  background-color: var(--button-colour-hover);
	}

	/* Ensures dropdown & button sit flush together */
	#jobBatchSelect, #Submit {
	  display: inline-block;
	  margin: 0; /* Removes spacing */
	}

	/* =============================
	   HOLD TOGGLE SWITCH STYLING
	============================= */
	.hold-toggle-switch {
	  position: relative;
	  width: 40px; /* Adjust width */
	  height: 20px; /* Adjust height */
	  background: var(--toggle-off); /* Default background (Red) */
	  border-radius: 10px;
	  border: var(--border-thickness) solid var(--border-colour);
	  cursor: pointer;
	  transition: background 0.3s ease-in-out;
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	}

	/* Toggle Slider */
	.hold-toggle-slider {
	  position: absolute;
	  top: 2px;
	  left: 2px;
	  width: 16px;
	  height: 16px;
	  background: var(--background-colour);
	  border-radius: 50%;
	  transition: all 0.3s ease-in-out;
	}

	/* Active State */
	.hold-toggle-switch.active {
	  background: var(--toggle-on); /* Green when active */
	  border-color: var(--border-colour);
	}

	.hold-toggle-switch.active .hold-toggle-slider {
	  left: 22px; /* Moves right when active */
	}

	/* Text inside the toggle */
	.hold-toggle-text {
	  position: absolute;
	  width: 100%;
	  text-align: center;
	  font-size: 12px;
	  font-weight: bold;
	  color: white;
	  user-select: none; /* Prevents accidental selection */
	}


	/* =====================================
	   BUTTON STYLING (Marking & Include)
	===================================== */

	/* General Button Styling */
	.toggle-marking-btn, 
	.toggle-include-btn {
	  font-size: var(--body-size); /* Adjust text size */
	  padding: var(--padding-small); /* Controls button size */
	  border: var(--border-thickness) solid var(--border-colour); /* Default border color */
	  border-radius: var(--border-radius); /* Rounded corners */
	  cursor: pointer;
	  transition: all 0.2s ease-in-out; /* Smooth hover effect */
	}

	/* Marking Buttons */
	.toggle-marking-btn {
	  font-weight: bold;
	  border-color: var(--border-colour);
	}

	/* Include Buttons */
	.toggle-include-btn {
	  font-weight: bold;
	  border-color: var(--border-colour);
	}

	/* Hover Effects */
	.toggle-marking-btn:hover, 
	.toggle-include-btn:hover {
	  background-color: var(--button-colour-hover); /* Light grey hover effect */
	  border-color: var(--border-colour); /* Darker border */
	}

	/* Active (Clicked) State */
	.toggle-marking-btn:active, 
	.toggle-include-btn:active {
	  transform: scale(0.95); /* Slight press effect */
	}

	/* Right (Green) & Wrong (Red) Marking Buttons */
	.toggle-marking-btn[data-index] {
	  min-width: 80px; /* Ensures buttons have a consistent width */
	  color: var(--white-background);
	}

	.toggle-marking-btn[data-index][style*="background-color: green"] {
	  background-color: var(--toggle-on); /* Green */
	  border-color: var(--border-colour);
	}

	.toggle-marking-btn[data-index][style*="background-color: red"] {
	  background-color: var(--toggle-off); /* Red */
	  border-color: var(--border-colour);
	}

	/* =============================
	   TOGGLE SWITCH STYLING
	============================= */
	/*  =====  TOGGLE SWITCH  =====  */
	/*  markup:  <label class="toggle-switch">
				   <input type="checkbox">
				   <span class="slider"></span>
				 </label>                                  */

	/* layout wrapper -------------------------------------------------- */
	.toggle-switch {
	  position: relative;
	  display: inline-block;
	  width: 26px;               /* lozenge width  */
	  height: 16px;              /* lozenge height */
	  cursor: pointer;
	}

	/* hide the real checkbox ----------------------------------------- */
	.toggle-switch input {
	  opacity: 0;
	  width: 0;
	  height: 0;
	}

	/* coloured lozenge ------------------------------------------------ */
	.toggle-switch .slider {
	  position: absolute;
	  inset: 0;                              /* top/left/right/bottom: 0 */
	  background: var(--toggle-on);         
	  border: var(--border-thickness) solid var(--border-colour);
	  border-radius: 15px;                   /* pill shape */
	  transition: background 0.25s ease;
	}

	/* white circular knob -------------------------------------------- */
	.toggle-switch .slider::before {
	  content: '';
	  position: absolute;
	  height: 10px; width: 10px;             /* knob diameter */
	  left: 2px;                             /* start: left edge */
	  top: 50%;
	  transform: translateY(-50%) translateX(0);
	  background: var(--white-background);   /* always white */
	  border-radius: 50%;
	  transition: transform 0.25s ease;
	}

	/*  ----------  CHECKED STATE  ----------  */
	.toggle-switch input:checked + .slider {
	  background: var(--toggle-off);          
	}

	.toggle-switch input:checked + .slider::before {
	  /* slide knob to the right by (lozenge width - knob width - 2*margin) */
	  transform: translateY(-50%) translateX(10px);
	}



	/* =============================
	   MARKING SLIDER STYLING
	============================= */

	/* Container for the slider */
	.marking-slider-container {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  width: 100px;
	  margin: 0 auto;
	  position: relative;
	}

	/* Slider Styling */
	.marking-slider {
	  width: 100%;
	  appearance: none;
	  background: transparent;
	  outline: none;
	  cursor: pointer;
	  margin-top: 5px;
	}

	/* Slider Track */
	.marking-slider::-webkit-slider-runnable-track {
	  background: #ccc;
	  height: 6px;
	  border-radius: 3px;
	}

	.marking-slider::-moz-range-track {
	  background: #ccc;
	  height: 6px;
	  border-radius: 3px;
	}

	/* Slider Thumb */
	.marking-slider::-webkit-slider-thumb {
	  appearance: none;
	  width: 16px;
	  height: 16px;
	  background: var(--button-colour);
	  border-radius: 50%;
	  border: var(--border-thickness) solid var(--border-colour);
	  margin-top: -5px;
	  transition: transform 0.2s ease-in-out;
	}

	.marking-slider::-moz-range-thumb {
	  width: 16px;
	  height: 16px;
	  background: var(--button-colour);
	  border-radius: 50%;
	  border: 2px solid #0056b3;
	  transition: transform 0.2s ease-in-out;
	}

	/* Hover and Active States */
	.marking-slider:hover::-webkit-slider-thumb {
	  transform: scale(1.2);
	}

	.marking-slider:active::-webkit-slider-thumb {
	  transform: scale(1.3);
	}

	/* Numbers Below the Slider */
	.marking-values {
	  display: flex;
	  justify-content: space-between;
	  width: 100%;
	  font-size: var(--body-size);
	  margin-top: 5px;
	}


    /* -----------------------------------
       SCROLLABLE TABLE CONTAINER
    ----------------------------------- */
    .content-table-container {
	  flex: 1;
	/*  max-height: calc(100vh - 200px); /* Adjust as needed */
      overflow-y: auto;
      padding: var(--padding-large); 
	  padding-top: var(--padding-med);
	  

	  flex-direction: column; /* Ensures elements stack correctly */
	  align-items: center; /* Centers children horizontally */
	  justify-content: flex-start; /* Centers vertically if container has height */
	  position: relative;
	  background: var(--white-background);
    }

    /* -----------------------------------
       CLASS REVIEW TAB
       - Two-row header approach
    ----------------------------------- */
    .review-table {
      border-collapse: separate;
      border-spacing: 0;
      border: var(--border-thickness) solid var(--border-colour);
      margin: 0rem 2.5rem 0rem 2.5rem;
	  border-radius: var(--border-radius);
	  overflow: hidden;
	  color: var(--body-colour);
	  font-size: var(--body-size);
	  text-overflow: ellipsis;
	  table-layout: fixed;
	  background: var(--white-background);
    }
    .review-table th,
    .review-table td {
	  overflow: hidden;
	  text-overflow: ellipsis;
	  border: none;
      /*border-bottom: var(--border-thickness) solid var(--border-colour);*/
      /*padding: var(--padding-med); */
      text-align: center;
	  height: 16px; /* Adjust this value to set the row height */
	  line-height: 16px; /* Ensures text is vertically centered */
    }
	

	.review-table th {
	  background: var(--tab-colour);
	  color: var(--white-background);
	}
	
 	/* ✅ Apply border-radius ONLY to the first and last cell of the second row */
/* 	.review-table thead tr:nth-child(2) th:first-child {
	  border-top-left-radius: var(--border-radius);
	}

	.review-table thead tr:nth-child(2) th:last-child {
	  border-top-right-radius: var(--border-radius);
	} */

    .topHeader {
      cursor: pointer;
      transition: background 0.2s;
      background: var(--white-background);
    }
    .topHeader:hover {
      background: var(--tab-colour-hover);
    }
    .topHeader.active {
      background: var(--tab-colour);
	  box-shadow: var(--box-shadow-up);
	  z-index: 10;
	  position: relative; /* ✅ Required for z-index to work */
	  color: var(--white-background);
    }

    .\33 {
      background-color: var(--comp-high);
      color: transparent;
    }
    .\32 {
      background-color: var(--comp-med);
      color: transparent;
    }
    .\31 {
      background-color: var(--comp-low);
      color: transparent;
    }

    /* -----------------------------------
       FOCUS REVIEW TAB
    ----------------------------------- */
    .concept-map {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 0rem;
      padding: 1rem;
	  padding-top: 4rem;
	  flex-direction: column;
    }
	
	.concept-levels {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 2rem;
      padding: 1rem;
	  flex-direction: row;
    }
	
    .concept-node {
      width: 120px;
      height: 120px;
      border-radius: 60px;
      background-color: #fff;
	  color: var(--body-colour);
	  font-size: var(--title-size);
      border: var(--border-thickness) solid var(--border-colour);
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0.5rem;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .concept-node.main {
      font-weight: bold;
    }

    /* -----------------------------------
       UPLOAD TAB
    ----------------------------------- */
	.upload-section {
	  display: flex;
	  flex-direction: column;
	  align-items: flex-start;
	  gap: 1rem;
	}

	.drop-area {
	  width: 100%;
	  height: 200px;
	  border: 2px dashed #ccc;
	  border-radius: 8px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  padding: 10px;
	  text-align: center;
	  background-color: #f9f9f9;
	  cursor: pointer;
	  position: relative;
	}

	.drop-area p {
	  font-size: 16px;
	  color: #333;
	}

	#fileList {
	  list-style-type: none;
	  padding: 0;
	  margin: 0;
	  width: 100%;
	}

	#fileList li {
	  padding: 5px;
	  margin-bottom: 8px;
	  background-color: #e6e6e6;
	  border-radius: 4px;
	  display: flex;
	  justify-content: space-between;
	}

	#submitFilesBtn {
	  margin-top: 1rem;
	  background-color: #4CAF50;
	  color: white;
	  padding: 10px 20px;
	  border: none;
	  border-radius: 5px;
	  cursor: pointer;
	}

	#submitFilesBtn:hover {
	  background-color: #45a049;
	}
	
	/*-----------------------
	/* Timeline Styles 
	-------------------------*/
	
	button.generic {
	  padding: 0.5rem 1rem;
	  border: none;
	  border-radius: var(--border-radius);
	  cursor: pointer;
	  font-size: 1rem;
	  transition: background-color 0.3s ease;
	  background-color: var(--button-colour);
	  color: var(--button-text-colour);
	}

	button.generic:hover {
	  background-color: var(--button-colour-hover);
	}

	/* Base style for dynamic new tab buttons */
	button[data-new-tab-dynamic="true"] {
	  padding: 0.5rem 1rem;
	  border: none;
	  border-radius: var(--border-radius);
	  cursor: pointer;
	  font-size: 1rem;
	  transition: background-color 0.3s ease;
	}

	/* Specific styles */
	button.class-review {
	  background-color: var(--button-colour);
	  color: var(--button-text-colour);
	}

	button.class-review:hover {
	  background-color: var(--button-colour-hover);
	}
	
	.timeline {
	  display: flex;
	  flex-grow: 1;
	  flex-direction: column;
	  gap: var(--padding-med);
	}

	/* Edge-driven auxiliary tile containers (optional).
	   These reuse the same task styling as the timeline, but can be toggled independently. */
	.timeline.edge-aux {
	  width: 100%;
	}

	.task.edge-aux-task {
	  border-style: solid;
	}

	/* Task Container */
	.task {
	  display: flex;  
	  transform: scale(1);
	  flex-direction: row;       
	  align-items: center; /* Space out the content, if needed */
	  justify-content: space-between;
	  padding: 30px;
	  border: 1px solid #ddd;
	  border-radius: var(--border-radius);
	  cursor: pointer;
	  background-color: #f9f9f9;
	  transition: transform 0.3s ease-in-out, opacity 0.5s ease-in-out;
	  font-family: Arial, sans-serif; /* Correct way to apply font */ 
	  color: var(--title-colour);
	  font-size: var(--title-size);
	  opacity: 1;
	}

	.task.subtask {
	  display: flex;  
	  flex-direction: row;
	  align-items: center; /* Space out the content, if needed */
	  justify-content: space-between;	  
	  margin-left: 1.5rem;
	  background-color: #f9f9f9;
	  height: 80px;
	  padding: 5px 15px 5px 3px;
	}
	
	.subtask-container {
	  opacity: 0;
	  max-height: 0;
	  overflow: hidden;
	  /* transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out; */
	  display: flex; /* keep it in the layout */
	  flex-direction: column;
	}

/* 	.subtask-container {
	  display: none;
	  flex-direction: column;
	} */
	.subtask-container.visible {
	  display: flex;
	  opacity: 1;
	  flex-direction: column;
	  justify-content: space-between;
	  min-height: 80px; /* or another appropriate value */
	  max-height: 1000px;
	  padding: var(--padding-small);
	  gap: var(--padding-small);
	}

	.lesson-wrapper {
	  display: flex;
	  flex-direction: column;
	  position: relative;
	  z-index: 10;
	  min-height: 80px; /* ensure there's a target area */
	}

	.lesson-wrapper .subtask-container.visible {
	  display: flex;
	  position: relative;
	  z-index: 10;
	  min-height: 80px; /* ensure there's a target area */
	}

	.subtask-text {
	  display: flex;
	  flex-direction: column;
	  margin: 0 1rem;
	  flex-grow: 1;
	}

	.sortable-ghost {
	  opacity: 0.5;
	}
	.sortable-drag {
	  transform: scale(1.05);
	}

	.icon-container {
	  padding: 0.5rem 1rem;
	  cursor: pointer;
	  font-size: 2rem;
	  color: #355365;
	}

	/* Newly added task effect */
	.task.new-task {
	  transform: scale(1.05); /* Start slightly larger */
	  opacity: 0.5; /* Optional: Fade in effect */
	}

	/* Task Hover Style */
	.task:hover {
	  background-color: #FFFFFF;
	}

	/* Task Content Container */
	.task-content {
	  display: flex;
	  flex-grow: 1;
	  flex-direction: row;       
	  font-family: Arial, sans-serif; /* Correct way to apply font */
	  gap: 25px;                     /* Space between paragraphs */
	  justify-content: space-between;
	}
	


	/* Button Styling */
	.add-task-btn {
	  width: 50px; /* Set width and height to make it a circle */
	  height: 50px;
	  border-radius: 50%; /* Makes the button circular */
	  background-color: #4CAF50;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border: none;
	  cursor: pointer;
	  font-size: 20px; /* If using a text icon */
	}

	.add-task-btn i {
	  color: white; /* Make the gear white */
	  font-size: 24px; /* Adjust size */
	}

	.add-task-btn:hover {
	  background-color: #45a049;
	}

	/* Overlay positioned inside the container */
	.overlay {
	  display: none; /* Hidden by default */
	  position: absolute; /* Positions overlay within .task-container */
	  top: 7px;
	  left: 0;
	  width: 100%; /* Fill the container */
	  height: 100%; /* Fill the container */
	  background-color: rgba(0, 0, 0, 0.25); /* Semi-transparent background */
	  z-index: 10; /* Ensure it's above other elements */
	  justify-content: center;
	  align-items: center;
	  flex-direction: column;

	}
	.overlay-content {

	  background-color: transparent;
	  padding: 0 0 20px 0; /* Add a 20px padding at the bottom */
	  border-radius: calc(var(--border-radius) * 0.5);
	  width: 90%;
	  max-width: 95%;
	  max-height: 95%;
	  overflow: auto;
	  position: relative;
	  gap: 20px;
	  box-sizing: border-box; /* Make sure padding is included in the height calculation */
	}

	/* Adds a bottom margin to every content table except the last one */
	.overlay-content .content-table:not(:last-child) {
	  margin-bottom: 20px; /* Adjust the value as needed */
	}
	/*-----------------------
	/* Progress circle Styles 
	-------------------------*/


	.progress-container {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 50px;
	}

	.progress-circle {
		transform: rotate(0deg);
	}

	.progress-circle .bg,
	.progress-circle .fg {
		transform: rotate(-90deg); /* Rotate the circles only */
		transform-origin: center;
	}

	.progress-circle .bg {
		stroke: #ddd;
		stroke-width: 5;
		fill: none;
	}

	.progress-circle .fg {
		stroke: #4CAF50; /* Progress color */
		stroke-width: 5;
		fill: none;
		stroke-dasharray: 125.6; /* 2 * π * r */
		stroke-dashoffset: 125.6; /* Start empty */
		transition: stroke-dashoffset 0.5s ease-in-out;
	}


	.progress-text {
		font-size: 12px;
		font-weight: bold;
		fill: black;
	}

	/* chat dots */

	.typing-indicator {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  gap: 5px;
	  font-size: 24px;
	  color: #888;
	}

	.dot {
	  width: 8px;
	  height: 8px;
	  background-color: #888;
	  border-radius: 50%;
	  opacity: 0;
	  animation: blink 1.5s infinite;
	}

	.dot:nth-child(1) {
	  animation-delay: 0s;
	}

	.dot:nth-child(2) {
	  animation-delay: 0.3s;
	}

	.dot:nth-child(3) {
	  animation-delay: 0.6s;
	}

	@keyframes blink {
	  0% { opacity: 0; }
	  50% { opacity: 1; }
	  100% { opacity: 0; }
	}


	/*Class review styles */
	
	#tabBar {                         /* id selector */
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	  gap: 5px;
	  margin: 1rem 2.5rem 1rem 2.5rem;
	}

	button.topic-tab {
	  flex-grow: 1; /* Ensures each tab grows to fill space evenly */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  writing-mode: horizontal-rl;
	  cursor: pointer;
	  text-align: center;
	  background: var(--tab-colour);
	  transition: background 0.2s;
	  height: 50px; /* Ensures they don't get too small */
	  color: var(--white-background);
	  font-size: var(--title-size);
	  padding: var(--padding-small);
	  border-radius: var(--border-radius);
	  border: none;
	}
	
    button.topic-tab:hover {
      background: var(--tab-colour-hover);
	  border-radius: var(--border-radius);
	  color: var(--body-colour);
	  /*border: var(--border-thickness) solid var(--border-colour); */
    }
	
    button.topic-tab.active {
      background: var(--tab-colour-active);
      border: var(--border-thickness) solid var(--border-colour);
	  box-shadow: var(--box-shadow);
	  border-radius: var(--border-radius);
	  z-index: 10;
	  color: var(--body-colour);
    }



/* Header styles for worksheet & marking views */
.title-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-header .summary-btn { margin-right: 0.6rem; }


/* Regular (screen) styles */

/* SCREEN STYLES (default) */

/* Let the container grow to show all pages on screen */
.worksheets-container {
  position: relative;
  width: 210mm;
  height: auto;   /* allow container to expand */
  margin: auto;
  border: 0px solid #ccc;
  padding: 0mm;
  box-sizing: border-box;
  background: #fff;
  color: black;
}

/* hide all worksheet roots unless they are .active */
.worksheet { display: none; }
.worksheet.active { display: block; margin-bottom: 0mm; }


/* Each worksheet page should have a fixed height to mimic a page */
.worksheet-page {
  display: flex;
  flex-direction: column;
  height: 297mm; /* adjust as needed; this is your per-page height */
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 0mm; /* space between pages */
}

/* Other styling for questions, QR codes, etc. remain the same */
.question-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-bottom: 5mm;
}

.answer-box {
  flex: 1;
  min-height: 30mm;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 5mm;
}

.page-top {
  /* flex: 0 0 45mm; */
  position: relative;
  height: 90mm;  /* adjust as needed */
  margin-top: 2mm;
  /* Optionally, add background, padding or border */
}

/* centred under the QR codes & sticker area */
.page-top .worksheet-title {
  position: absolute;
  bottom: 2mm;            /* tweak if you need more/less gap */
  left: 0;
  width: 100%;
  text-align: left;

  font-weight: 700;       /* bold */
  font-size: 18pt;        /* “large” – adjust to taste */
}

/* inline title ▸───────┐  header row  ───────▐ marks */
.page-top .worksheet-header{
  position:absolute;           /* sits over the top ruler area */
/*  top:27mm; */                   /* tweak if it clashes with sticker/QR */
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:end; /* was centre */
  padding:0 5mm 0 5mm;       /* push in from QR-codes */
  font-size: 28px;
  font-weight:bold;
}

.worksheet-header .header-left  { text-align:left;  }
.worksheet-header .header-right { text-align:right; font-size: 28px}


.sticker-area {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  width: 60mm;
  height: 30mm;
  border: none; /*1px dashed #000;*/
  border-radius: 8px;
  margin: 25mm auto 0 auto;
}

.page-middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10mm 5mm 8mm 5mm;
}

/* centres 1 or 2 diagrams with a gap */
.diagram-row{
  display:flex;
  justify-content:center;
  gap:40px;          /* space between the two canvases */
}

/* centre anything inside an answer box that contains a diagram */
.answer-box.has-diagram div:last-child {
  display: flex;
  flex-direction: column;      /* text on top, diagram below */
  align-items: center;         /* horizontal centre */
  justify-content: center;     /* vertical centre if box is large */
  gap: 8px;                    /* space between text and diagram */
  padding: 20px;
}

/* keep the diagram exactly 200×200, no extra margins */
.answer-box .diagram-wrapper canvas {
  display: block;
}


.page-bottom {
  flex: 0 0 65mm;
  margin-bottom: 2mm;
 /*  position: relative;
  height: 30mm; */ /* adjust as needed */
  /* Optionally, add background, padding or border */
}

/* parent already has position:relative */
.page-bottom .page-caption {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);   /* perfectly centred between QRs */

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 2.5;

  font-size: 14pt;       /* adjust to taste */
  font-weight: 600;      /* a bit bolder than body text */
}

.page-bottom .page-caption div:last-child {
  font-size: 7pt;
  font-weight: 400;
  max-width: 60mm;   /* prevent it from touching the QRs */
}

/* Ensure QR codes are correctly positioned within their containers */
.qr-code {
  /* For top QR codes, you might use inline-block or absolute positioning relative to .page-top */
  display: inline-block;
  width: 70mm;
  height: 70mm;
  background: #eee;
  border: 1px solid #000;
  text-align: center;
  line-height: 30mm; /* vertically center text */
  font-size: 10px;
  margin: 0 5mm;
}



.worksheet.active {
  display: block;
}
.worksheet-header {
  position: relative; /* Ensures children with absolute positions are positioned relative to this header */
  /* Additional styling as needed, e.g.: */
  width: 100%;
/*  height: 30mm; */ /* Adjust as necessary */
  margin-bottom: 5mm;
  margin-top: 10mm;
}

.qr-code {
  position: absolute;
  width: 65mm;
  height: 65mm;
  background: #eee;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.qr-top-left { top: 0; left: 0; }
.qr-top-right { top: 0; right: 0; }
.qr-bottom-left { bottom: 0; left: 0; }
.qr-bottom-right { bottom: 0; right: 0; }

/* Sticker area */
.sticker-area {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 25mm auto 10mm auto;
  border: none; /*1px dashed #000;*/
  border-radius: 8px;
  width: 60mm;
  height: 30mm;
}

/* keeps the two spans on the same line, left | right */
.question-title-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;   /* align first text baselines */
}

/* already left-aligned by default; rule here for clarity */
.q-title-left{
  text-align:left;
}

/* right-aligned & bold for marks */
.q-title-right{
  text-align:right;
  font-weight:bold;
  margin-left:12px;         /* a little breathing room if needed */
}


/* Other styling for top-matter, sections, etc. */
.top-matter { text-align: center; margin-bottom: 10mm; }
.section { margin-bottom: 10mm; }
.section-title { margin-bottom: 3mm; }
.question-text { margin-bottom: 3mm; }
.diagram { margin: 0; border: 0; padding: 0; text-align: center; }

.answer-box.small {
  padding: 10mm;
  margin-top: 5mm; 
  font-size: 10pt;
}

.answer-box.small .step-response {
  margin-bottom: 2em; /* Or use px, mm, rem, etc., depending on your sizing system */
}

.answer-box.large {
  padding: 5mm;
  max-height: 30mm;
  margin-top: 5mm;  
  font-size: 10pt;
}

.answer-box.large .section-title {
  font-weight: bold;  
}

.answer-box.small .step-response .step-text {
  font-style: italic;
}

.answer-box.small .step-response .step-title {
  font-weight: bold;
}

.answer-box.small .total-mark {
  font-weight: bold;
}

.sticker-area {
  font-weight: bold;
  font-size: 24pt;
}

.nav-buttons { 
  text-align: center; 
  margin-top: 20px; 
  position: relative;
  z-index: 1000; /* ensure this container stays on top */
  color: black;
}
/* button { padding: 8px 16px; margin: 0 10px; font-size: 16px; } */


#printButton {
  position: relative;
  z-index: 1001;
}

/* Hide the print header on screen */
.print-header {
  display: none;
}

.step-response span {
  display: block;
  margin-bottom: 0.25em; /* optional spacing */
}

.answer-inline {
  display: inline-flex;
  align-items: baseline;  /* or center, depending on your font-sizes */
  gap: 0.1rem;
}

/* PRINT-SPECIFIC STYLES */
@media print {
/*   @page {
    size: A4;
    margin: 0; 
  }*/
  body {
    margin: 0;
  }
  body * {
    visibility: hidden;
  }

  #worksheetsContainer > .worksheet {
    display:block !important;   /* override inline style */

/*   .worksheets-container {
	display: block;
    margin-top: 0mm;
    position: static;
    width: 210mm;
    height: auto;  
    transform: none;
    padding: 0;
    box-sizing: border-box;
    border: none;
  } */
  
  .worksheet-page-wrapper {
    display: block !important;
    page-break-after: always;
    break-after: page;
  }
}  

  .worksheet-page {
    /* display: grid !important; /* was grid */
    /* grid-template-rows: 30mm 1fr 30mm; */
    height: 297mm;
    box-sizing: border-box;
    overflow: visible;
  }



/*   .nav-buttons {
    display: none;
  }

  .menu {
    display: none;
  }
  .tab-content {
    display: none;
  } */

  .worksheets-container,
  .worksheets-container * {
    visibility: visible;
  }
  
  /* (a) margin-top pushes content into the QR band on A4 – remove it */
  .answer-box.small            { margin-top: 0 !important; }

  /* (b) lock the feedback / large boxes to their intended fixed height */
  .answer-box.large      { height: 45mm !important; }

  /* (c) let normal boxes grow naturally */
  /* .answer-box.small      { height: auto !important; }   */
  
}



/* Edge diagnostics status tile (pinned above canvas/dashboard tiles) */
.timeline.edge-status {
  margin-top: var(--padding-med);
  margin-bottom: var(--padding-med);
}

.task.edge-status-task {
  flex-direction: column;
  align-items: stretch;
  cursor: default;
  gap: var(--padding-small);
}

.task.edge-status-task .edge-status-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.task.edge-status-task .edge-status-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  color: var(--body-colour);
  font-size: 14px;
}

.task.edge-status-task .edge-status-line {
  display: flex;
  flex-direction: row;
  gap: 8px;
  word-break: break-word;
}

.task.edge-status-task .edge-status-line span {
  font-weight: 600;
}