/*
 * MyExamPath
 * Subjective Evaluation Workspace
 *
 * Tablet-first teacher evaluation interface.
 */


/* =====================================================
   WORKSPACE
===================================================== */

.em-subjective-workspace {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	background: #f4f7fb;
	min-height: 100vh;
	color: #14213d;
	box-sizing: border-box;
}

.em-subjective-workspace *,
.em-subjective-workspace *::before,
.em-subjective-workspace *::after {
	box-sizing: border-box;
}


/* =====================================================
   TOP BAR
===================================================== */

.em-subjective-workspace-topbar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;

	padding: 14px 20px;

	background: #0967c9;
	color: #ffffff;

	border-radius: 10px 10px 0 0;
}

.em-subjective-workspace-back a {
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

.em-subjective-workspace-back a:hover {
	text-decoration: underline;
}

.em-subjective-workspace-student {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
}

.em-subjective-workspace-student strong {
	font-size: 17px;
}

.em-subjective-workspace-student span {
	opacity: 0.95;
}

.em-subjective-workspace-progress {
	font-weight: 600;
	white-space: nowrap;
}


/* =====================================================
   EVALUATION MODE
===================================================== */

.em-subjective-evaluation-mode {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;

	padding: 14px 20px;

	background: #ffffff;
	border: 1px solid #dbe3ed;
	border-top: 0;
}

.em-subjective-evaluation-mode > strong {
	margin-right: 5px;
}

.em-subjective-manual-mode,
.em-subjective-ai-mode {
	min-height: 44px;
	padding: 10px 18px;

	border-radius: 7px;
	border: 1px solid #b9c8da;

	font-size: 14px;
	font-weight: 600;

	cursor: pointer;
}

.em-subjective-manual-mode {
	background: #0878ee;
	border-color: #0878ee;
	color: #ffffff;
}

.em-subjective-ai-mode {
	background: #eef3f8;
	color: #627085;
	cursor: not-allowed;
}

.em-subjective-ai-mode span {
	font-size: 11px;
	margin-left: 5px;
}


/* =====================================================
   QUESTION INFORMATION
===================================================== */

.em-subjective-workspace-question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;

	padding: 14px 20px;

	background: #ffffff;
	border-left: 1px solid #dbe3ed;
	border-right: 1px solid #dbe3ed;
}

.em-subjective-workspace-question-text {
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.5;
}

.em-subjective-workspace-max-marks {
	background: #eaf4ff;
	padding: 8px 12px;
	border-radius: 6px;
	white-space: nowrap;
}


/* =====================================================
   REFERENCE ANSWER
===================================================== */

.em-subjective-workspace-reference {
	margin: 0;
	padding: 10px 20px;

	background: #f8fbff;
	border: 1px solid #dbe3ed;

	font-size: 14px;
	line-height: 1.5;
}

.em-subjective-workspace-reference strong {
	margin-right: 5px;
}


/* =====================================================
   MAIN WORKSPACE
===================================================== */

.em-subjective-workspace-main {
	display: grid;

	grid-template-columns:
		minmax(0, 2fr)
		minmax(300px, 0.85fr);

	gap: 14px;

	padding: 14px;

	background: #edf3f9;
}


/* =====================================================
   ANSWER VIEWER
===================================================== */

.em-subjective-answer-viewer {
	min-width: 0;

	background: #ffffff;
	border: 1px solid #d6e0eb;
	border-radius: 9px;

	overflow: hidden;
}

.em-subjective-answer-viewer-header {
	min-height: 46px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 10px 14px;

	background: #ffffff;
	border-bottom: 1px solid #dbe3ed;
}

.em-subjective-answer-canvas-area {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 620px;
	height: calc(100vh - 360px);

	padding: 12px;

	background: #e6edf5;

	overflow: auto;
}


/* =====================================================
   ANSWER STAGE
===================================================== */

.em-subjective-answer-stage {
	position: relative;

	display: inline-block;

	max-width: 100%;
	max-height: 100%;
}

.em-subjective-answer-image {
	display: block;

	max-width: 100%;
	max-height: calc(100vh - 390px);

	width: auto;
	height: auto;

	margin: 0 auto;

	object-fit: contain;

	user-select: none;
	-webkit-user-drag: none;
}


/*
 * Annotation canvas will later sit directly
 * above the original answer image.
 */

.em-subjective-annotation-canvas {
	position: absolute;

	left: 0;
	top: 0;

	width: 100%;
	height: 100%;

	z-index: 5;

	touch-action: none;
}


/* =====================================================
   EVALUATION PANEL
===================================================== */

.em-subjective-evaluation-panel {
	min-width: 0;

	align-self: start;

	background: #ffffff;

	border: 1px solid #d6e0eb;
	border-radius: 9px;

	padding: 16px;

	position: sticky;
	top: 10px;
}

.em-subjective-evaluation-panel h3 {
	margin: 0 0 20px;
	padding-bottom: 12px;

	border-bottom: 1px solid #e1e7ef;

	font-size: 18px;
}


/* =====================================================
   FORM FIELDS
===================================================== */

.em-subjective-evaluation-field {
	margin-bottom: 20px;
}

.em-subjective-evaluation-field label {
	display: block;

	margin-bottom: 7px;

	font-size: 14px;
	font-weight: 600;
}

.em-subjective-evaluation-field > div {
	display: flex;
	align-items: center;
	gap: 8px;
}

.em-subjective-marks-awarded {
	width: 100%;
	min-height: 46px;

	padding: 9px 11px;

	border: 1px solid #afbed0;
	border-radius: 6px;

	font-size: 17px;
}

.em-subjective-feedback {
	display: block;

	width: 100%;
	min-height: 150px;

	padding: 11px;

	border: 1px solid #afbed0;
	border-radius: 6px;

	resize: vertical;

	font: inherit;
	line-height: 1.45;
}

.em-subjective-marks-awarded:focus,
.em-subjective-feedback:focus {
	outline: 2px solid #91c7ff;
	border-color: #0878ee;
}


/* =====================================================
   STATUS
===================================================== */

.em-subjective-evaluation-status {
	margin: 10px 0 18px;

	padding: 10px 12px;

	background: #fff7d6;

	border-radius: 6px;
}


/* =====================================================
   SAVE BUTTON
===================================================== */

.em-save-subjective-evaluation {
	width: 100%;
	min-height: 48px;

	border: 0;
	border-radius: 7px;

	background: #0878ee;
	color: #ffffff;

	font-size: 15px;
	font-weight: 600;

	cursor: pointer;
}

.em-save-subjective-evaluation:hover {
	background: #0668ce;
}


/* =====================================================
   BOTTOM NAVIGATION
===================================================== */

.em-subjective-workspace-navigation {
	display: grid;

	grid-template-columns:
		minmax(150px, 1fr)
		auto
		minmax(150px, 1fr)
		minmax(170px, 1fr);

	align-items: center;
	gap: 12px;

	padding: 12px 14px 16px;

	background: #ffffff;

	border: 1px solid #dbe3ed;
	border-top: 0;

	border-radius: 0 0 10px 10px;
}

.em-subjective-workspace-navigation > span {
	text-align: center;
	font-weight: 600;
	white-space: nowrap;
}

.em-subjective-workspace-navigation button {
	min-height: 44px;

	padding: 9px 15px;

	border: 1px solid #aebfd2;
	border-radius: 6px;

	background: #ffffff;
	color: #193451;

	font-weight: 600;
	cursor: pointer;
}

.em-subjective-workspace-navigation button:not(:disabled):hover {
	background: #edf6ff;
	border-color: #0878ee;
}

.em-subjective-workspace-navigation button:disabled {
	background: #e7edf3;
	color: #98a5b3;
	border-color: #d7e0e8;

	cursor: not-allowed;
}


/* =====================================================
   FUTURE TABLET ANNOTATION TOOLBAR
===================================================== */

/*
 * This toolbar is intentionally prepared now.
 * We will add its HTML and JS during the
 * annotation stage.
 */

.em-subjective-annotation-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;

	padding: 10px;

	background: #ffffff;

	border: 1px solid #d6e0eb;
	border-radius: 8px;
}

.em-subjective-annotation-tool {
	min-width: 44px;
	min-height: 44px;

	border: 1px solid #b8c6d7;
	border-radius: 6px;

	background: #ffffff;

	cursor: pointer;
}

.em-subjective-annotation-tool.is-active {
	background: #0878ee;
	border-color: #0878ee;
	color: #ffffff;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

	.em-subjective-workspace-main {
		grid-template-columns:
			minmax(0, 1.7fr)
			minmax(280px, 0.8fr);
	}

	.em-subjective-answer-canvas-area {
		min-height: 550px;
	}

}


/* =====================================================
   PORTRAIT TABLET / SMALL SCREEN
===================================================== */

@media (max-width: 800px) {

	.em-subjective-workspace-topbar {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.em-subjective-workspace-student {
		justify-content: flex-start;
	}

	.em-subjective-workspace-main {
		grid-template-columns: 1fr;
	}

	.em-subjective-evaluation-panel {
		position: static;
	}

	.em-subjective-answer-canvas-area {
		height: auto;
		min-height: 500px;
	}

	.em-subjective-answer-image {
		max-height: none;
	}

	.em-subjective-workspace-navigation {
		grid-template-columns: 1fr 1fr;
	}

	.em-subjective-workspace-navigation > span {
		grid-column: 1 / -1;
		grid-row: 1;
	}

}


/* =====================================================
   VERY SMALL SCREEN
===================================================== */

@media (max-width: 520px) {

	.em-subjective-workspace-question {
		flex-direction: column;
	}

	.em-subjective-workspace-main {
		padding: 7px;
	}

	.em-subjective-answer-canvas-area {
		padding: 5px;
		min-height: 420px;
	}

	.em-subjective-workspace-navigation {
		grid-template-columns: 1fr;
	}

	.em-subjective-workspace-navigation > span {
		grid-column: auto;
	}

}

/* =========================================================
   SUBJECTIVE EVALUATION - ANNOTATION TOOLBAR
========================================================= */

.em-subjective-annotation-toolbar {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	background: #ffffff;
	border: 1px solid #d8e2ee;
	border-radius: 10px;
	margin: 10px 0;
	box-sizing: border-box;
}

.em-subjective-annotation-tools {
	display: flex;
	align-items: stretch;
	gap: 4px;
	flex-wrap: wrap;
}

.em-annotation-tool {
	min-width: 72px;
	min-height: 58px;
	padding: 7px 10px;
	border: 0;
	border-right: 1px solid #d8e2ee;
	background: transparent;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	font-size: 13px;
	line-height: 1.2;
	color: #25364d;
	border-radius: 7px;
	touch-action: manipulation;
}

.em-annotation-tool:last-child {
	border-right: 0;
}

.em-annotation-tool:hover:not(:disabled) {
	background: #eef6ff;
}

.em-annotation-tool.is-active {
	background: #0d7bf2;
	color: #ffffff;
}

.em-annotation-tool:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.em-tool-icon {
	display: block;
	font-size: 22px;
	line-height: 1;
}


/* =========================================================
   COLOUR + PEN SIZE SETTINGS
========================================================= */

.em-subjective-annotation-settings {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	padding: 8px 14px;
	border-left: 1px solid #d8e2ee;
}

.em-annotation-colors {
	display: flex;
	align-items: center;
	gap: 10px;
}

.em-annotation-color {
	width: 24px;
	height: 24px;
	min-width: 24px;
	padding: 0;
	border-radius: 50%;
	border: 3px solid transparent;
	cursor: pointer;
	box-sizing: border-box;
}

.em-annotation-color[data-color="#ef233c"] {
	background: #ef233c;
}

.em-annotation-color[data-color="#1769ff"] {
	background: #1769ff;
}

.em-annotation-color[data-color="#16a34a"] {
	background: #16a34a;
}

.em-annotation-color[data-color="#111827"] {
	background: #111827;
}

.em-annotation-color.is-active {
	outline: 2px solid #0d7bf2;
	outline-offset: 3px;
}


/* =========================================================
   PEN THICKNESS
========================================================= */

.em-annotation-size {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 170px;
}

.em-annotation-size-range {
	width: 125px;
	cursor: pointer;
	touch-action: manipulation;
}

.em-annotation-size-value {
	min-width: 32px;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

	.em-subjective-annotation-toolbar {
		flex-direction: column;
	}

	.em-subjective-annotation-tools {
		width: 100%;
	}

	.em-annotation-tool {
		flex: 1 1 80px;
		min-height: 62px;
	}

	.em-subjective-annotation-settings {
		width: 100%;
		justify-content: center;
		border-left: 0;
		border-top: 1px solid #d8e2ee;
		padding-top: 14px;
		box-sizing: border-box;
	}
}


/* =========================================================
   SMALL TABLET / MOBILE
========================================================= */

@media (max-width: 700px) {

	.em-subjective-annotation-tools {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}

	.em-annotation-tool {
		min-width: 0;
	}

	.em-subjective-annotation-settings {
		flex-wrap: wrap;
		gap: 18px;
	}

	.em-annotation-size {
		min-width: 150px;
	}

	.em-annotation-size-range {
		width: 110px;
	}
}

/* =========================================================
   ANSWER ANNOTATION CANVAS
========================================================= */

.em-subjective-answer-stage {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	overflow: hidden;
}

.em-subjective-answer-image {
	display: block;
	max-width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

.em-subjective-annotation-canvas {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	z-index: 5;

	display: block;

	touch-action: none;

	cursor: crosshair;
}

/* =========================================
   ANNOTATION CANVAS - DRAWING INPUT
========================================= */

.em-subjective-annotation-canvas {
	touch-action: none;
	cursor: crosshair;
}

/* =========================================================
   STEP 5.6E1
   TABLET PORTRAIT - MARKING WORKSPACE
========================================================= */

@media (min-width: 600px) and (max-width: 900px) {

	/*
	 * Use the complete tablet width.
	 */
	.em-subjective-workspace {
		width: 100%;
		max-width: none;
		margin: 0;
		background: #f8fafc;
	}


	/*
	 * Compact top bar.
	 */
	.em-subjective-workspace-topbar {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 12px;

		padding: 10px 14px;

		background: #12345b;
		border-radius: 0;
	}


	.em-subjective-workspace-student {
		justify-content: center;
		gap: 10px;
		flex-wrap: nowrap;
	}


	.em-subjective-workspace-student strong,
	.em-subjective-workspace-student span,
	.em-subjective-workspace-progress {
		font-size: 13px;
	}


	/*
	 * Evaluation mode becomes compact.
	 */
	.em-subjective-evaluation-mode {
		padding: 8px 12px;
		gap: 8px;

		background: #ffffff;
	}


	.em-subjective-manual-mode,
	.em-subjective-ai-mode {
		min-height: 38px;
		padding: 7px 12px;
	}


	/*
	 * Question information stays compact.
	 */
	.em-subjective-workspace-question {
		padding: 8px 12px;
		gap: 10px;
	}


	.em-subjective-workspace-question-text {
		margin-top: 3px;
		font-size: 13px;
	}


	.em-subjective-workspace-max-marks {
		padding: 6px 9px;
		font-size: 12px;
	}


	/*
	 * Reference answer must not consume
	 * large vertical space.
	 *
	 * Later this becomes a toggle panel.
	 */
	.em-subjective-workspace-reference {
		padding: 7px 12px;
		font-size: 12px;
	}


	/*
	 * Compact stylus toolbar.
	 */
	.em-subjective-annotation-toolbar {
		flex-direction: row;
		align-items: center;
		gap: 6px;

		margin: 6px 8px;
		padding: 6px 8px;

		background: #ffffff;
		border-color: #d7dee8;
	}


	.em-subjective-annotation-tools {
		display: flex;
		width: auto;
		flex: 1 1 auto;
		flex-wrap: nowrap;
		gap: 2px;
	}


	.em-annotation-tool {
		flex: 1 1 0;
		min-width: 0;
		min-height: 46px;

		padding: 5px 4px;

		font-size: 10px;
	}


	.em-tool-icon {
		font-size: 18px;
	}


	/*
	 * Pen colour + thickness remain on
	 * the same toolbar row where possible.
	 */
	.em-subjective-annotation-settings {
		width: auto;
		flex: 0 0 auto;

		justify-content: flex-end;
		gap: 10px;

		padding: 4px 6px 4px 10px;

		border-top: 0;
		border-left: 1px solid #d7dee8;
	}


	.em-annotation-colors {
		gap: 6px;
	}


	.em-annotation-color {
		width: 19px;
		height: 19px;
		min-width: 19px;
	}


	.em-annotation-size {
		min-width: 115px;
		gap: 5px;
	}


	.em-annotation-size-range {
		width: 78px;
	}


	/*
	 * IMPORTANT:
	 * Tablet portrait uses one marking column.
	 */
	.em-subjective-workspace-main {
		display: block;

		padding: 6px 8px;

		background: #f1f5f9;
	}


	/*
	 * Answer viewer receives most of the screen.
	 */
	.em-subjective-answer-viewer {
		width: 100%;
		border-radius: 6px;
	}


	.em-subjective-answer-viewer-header {
		min-height: 34px;
		padding: 6px 10px;
		font-size: 12px;
	}


	/*
	 * Main stylus writing area.
	 */
	.em-subjective-answer-canvas-area {
		height: calc(100vh - 330px);
		min-height: 420px;

		padding: 6px;

		background: #e9edf2;

		overflow: auto;
	}


	.em-subjective-answer-stage {
		max-width: 100%;
		max-height: 100%;
	}


	.em-subjective-answer-image {
		max-width: 100%;
		max-height: calc(100vh - 345px);

		width: auto;
		height: auto;

		object-fit: contain;
	}


	/*
	 * For E1 keep the existing evaluation panel,
	 * but make it compact and place it underneath
	 * the answer sheet.
	 *
	 * E2 will convert this into the compact
	 * Marks + Feedback control.
	 */
	.em-subjective-evaluation-panel {
		position: static;

		margin-top: 6px;
		padding: 10px;

		border-radius: 6px;
	}


	.em-subjective-evaluation-panel h3 {
		margin: 0 0 8px;
		padding-bottom: 6px;

		font-size: 14px;
	}


	.em-subjective-evaluation-field {
		margin-bottom: 8px;
	}


	.em-subjective-feedback {
		min-height: 70px;
	}


	/*
	 * Compact navigation.
	 */
	.em-subjective-workspace-navigation {
		grid-template-columns:
			1fr
			auto
			1fr
			1fr
			1fr;

		gap: 6px;

		padding: 7px 8px;

		border-radius: 0;
	}


	.em-subjective-workspace-navigation > span {
		grid-column: auto;
		grid-row: auto;

		font-size: 11px;
	}


	.em-subjective-workspace-navigation button {
		min-height: 38px;
		padding: 6px 8px;

		font-size: 11px;
	}

}

/* =========================================================
   STEP 5.6E2
   TABLET PORTRAIT - COMPACT EVALUATION PANEL
========================================================= */

@media (min-width: 600px) and (max-width: 900px) {

	/*
	 * Convert evaluation panel from a large card
	 * into a compact horizontal marking bar.
	 */
	.em-subjective-evaluation-panel {
		display: grid;

		grid-template-columns:
			auto
			minmax(110px, 150px)
			minmax(180px, 1fr)
			auto;

		align-items: end;
		gap: 10px;

		width: 100%;

		margin: 6px 0 0;
		padding: 8px 10px;

		background: #ffffff;

		border: 1px solid #d7dee8;
		border-radius: 6px;

		box-shadow: none;
	}


	/*
	 * Hide large heading on tablet.
	 */
	.em-subjective-evaluation-panel h3 {
		display: none;
	}


	/*
	 * Evaluation fields become compact.
	 */
	.em-subjective-evaluation-field {
		margin: 0;
	}


	.em-subjective-evaluation-field label {
		display: block;

		margin-bottom: 4px;

		font-size: 11px;
		font-weight: 600;

		color: #334155;
	}


	/*
	 * Marks box.
	 */
	.em-subjective-evaluation-field:first-of-type {
		min-width: 120px;
	}


	.em-subjective-evaluation-field:first-of-type > div {
		display: flex;
		align-items: center;
		gap: 5px;
	}


	.em-subjective-marks-awarded {
		width: 75px;
		min-height: 38px;

		padding: 6px 8px;

		font-size: 15px;
		font-weight: 600;
	}


	/*
	 * Feedback becomes a small single-row-style
	 * field instead of a large textarea.
	 */
	.em-subjective-feedback {
		width: 100%;
		min-height: 38px;
		height: 38px;

		padding: 8px 10px;

		resize: none;

		font-size: 12px;
	}


	/*
	 * Keep status small.
	 */
	.em-subjective-evaluation-status {
		margin: 0;
		padding: 8px 10px;

		min-height: 38px;

		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;

		white-space: nowrap;

		font-size: 11px;

		background: #f8fafc;
		border-radius: 5px;
	}


	/*
	 * Compact Save button.
	 */
	.em-save-subjective-evaluation {
		width: auto;
		min-width: 110px;
		min-height: 38px;

		margin: 0;
		padding: 7px 12px;

		white-space: nowrap;

		font-size: 12px;
		font-weight: 600;

		border-radius: 5px;
	}


	/*
	 * Give more height back to the actual
	 * answer sheet now that evaluation controls
	 * are compact.
	 */
	.em-subjective-answer-canvas-area {
		height: calc(100vh - 285px);
		min-height: 450px;
	}


	.em-subjective-answer-image {
		max-height: calc(100vh - 300px);
	}

}

/* =========================================================
   STEP 5.6E2A
   TABLET MARKS ENTRY + COMPACT STATUS
========================================================= */

@media (min-width: 600px) and (max-width: 900px) {

	/*
	 * Marks row.
	 */
	.em-subjective-evaluation-field:first-of-type > div {
		display: flex;
		align-items: center;
		gap: 5px;
	}


	/*
	 * Done button shown beside marks.
	 */
	.em-subjective-marks-done {
		min-height: 36px;
		padding: 5px 9px;

		border: 0;
		border-radius: 5px;

		background: #e8f1fb;
		color: #164e87;

		font-size: 11px;
		font-weight: 700;

		white-space: nowrap;

		cursor: pointer;
	}


	.em-subjective-marks-done:active {
		transform: scale(0.97);
	}


	/*
	 * Status should not occupy a large box.
	 */
	.em-subjective-evaluation-status {
		min-height: 28px;
		padding: 4px 7px;

		font-size: 10px;

		border-radius: 4px;

		justify-self: start;
		align-self: center;

		white-space: nowrap;
	}

}