/* ==========================================================================
   CIMCO WDM Modern UI — CSS skin for the wdm teacher/super-user pages
   (student & teacher lists, add-student/teacher forms, dialogs).
   Pure CSS over the existing markup: no HTML/JS behavior is changed.

   Rebrand in one place: change --wdm-accent below.
   ========================================================================== */
   
/* --------------------------------------------------------------------------
   0. Tables (quiz-reporting) Background
   -------------------------------------------------------------------------- */

.qre-reports-wrapper-class {
    background: #ffffff !important;
}   

/* -------------------------------------------------------------------------- */

:root {
	/* Follows the theme's global accent color when the theme publishes one
	   (GeneratePress: Customize → Colors → Global Colors → Primary = --accent).
	   The fallback blue applies on themes that publish no --accent variable. */
	--wdm-accent: var(--accent, #2563eb);
	--wdm-accent-hover: var(--wdm-accent);   /* darkened below when supported */
	--wdm-accent-soft: #eff6ff;              /* recolored below when supported */
	--wdm-accent-border: #bfdbfe;
	--wdm-danger: #dc2626;        /* destructive actions            */
	--wdm-danger-soft: #fef2f2;   /* destructive tinted background  */
	--wdm-text: #1e293b;          /* main text                      */
	--wdm-muted: #64748b;         /* secondary text                 */
	--wdm-border: #e2e8f0;        /* hairline borders               */
	--wdm-bg: #ffffff;
	--wdm-bg-soft: #f8fafc;
	--wdm-radius: 10px;
	--wdm-radius-sm: 8px;
	--wdm-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .08);
	--wdm-focus-ring: 0 0 0 3px rgba(37, 99, 235, .18);
	--wdm-font: inherit;
}

/* Recolor the accent-derived tints to match whatever accent ended up active.
   Declared inside @supports because custom properties do not degrade
   gracefully: browsers without color-mix must keep the safe defaults above. */
@supports (color: color-mix(in srgb, #000 10%, #fff)) {
	:root {
		--wdm-accent-hover: color-mix(in srgb, var(--wdm-accent) 86%, #000);
		--wdm-accent-soft: color-mix(in srgb, var(--wdm-accent) 8%, #fff);
		--wdm-accent-border: color-mix(in srgb, var(--wdm-accent) 35%, #fff);
		--wdm-focus-ring: 0 0 0 3px color-mix(in srgb, var(--wdm-accent) 20%, transparent);
	}
}

/* --------------------------------------------------------------------------
   1. Buttons
   -------------------------------------------------------------------------- */

/* Compact action chips inside the list tables */
#wdm_std_list input[type='button'],
#wdm_teacher_list input[type='button'] {
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--wdm-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #334155;
	background: var(--wdm-bg);
	border: 1px solid var(--wdm-border);
	border-radius: var(--wdm-radius-sm);
	padding: 8px 13px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

#wdm_std_list input[type='button']:hover,
#wdm_teacher_list input[type='button']:hover {
	color: var(--wdm-accent);
	border-color: var(--wdm-accent-border);
	background: var(--wdm-accent-soft);
}

#wdm_std_list input[type='button']:active,
#wdm_teacher_list input[type='button']:active {
	transform: translateY(1px);
}

#wdm_std_list input[type='button']:focus-visible,
#wdm_teacher_list input[type='button']:focus-visible {
	outline: none;
	box-shadow: var(--wdm-focus-ring);
}

/* Destructive action (Delete) */
#wdm_std_list input[id^='wdm_delete_'],
#wdm_teacher_list input[id^='wdm_delete_teacher'] {
	color: var(--wdm-danger);
}

#wdm_std_list input[id^='wdm_delete_']:hover,
#wdm_teacher_list input[id^='wdm_delete_teacher']:hover {
	color: var(--wdm-danger);
	background: var(--wdm-danger-soft);
	border-color: #fecaca;
}

/* "Send Message To All Student" — primary */
#wdm_send_mail_to_all {
	appearance: none;
	font-family: var(--wdm-font);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--wdm-accent);
	border: 1px solid var(--wdm-accent);
	border-radius: var(--wdm-radius-sm);
	padding: 10px 18px;
	cursor: pointer;
	box-shadow: var(--wdm-shadow);
	transition: background .15s ease, border-color .15s ease;
}

#wdm_send_mail_to_all:hover {
	background: var(--wdm-accent-hover);
	border-color: var(--wdm-accent-hover);
}

/* "Add Student" / "Add Teacher" page links rendered as buttons */
.dataTables_wrapper ~ a.button,
.dataTables_wrapper + a.button {
	display: inline-block;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
	color: #fff !important;
	background: var(--wdm-accent);
	border: 1px solid var(--wdm-accent);
	border-radius: var(--wdm-radius-sm);
	padding: 10px 18px;
	text-decoration: none;
	box-shadow: var(--wdm-shadow);
	transition: background .15s ease, border-color .15s ease;
}

.dataTables_wrapper ~ a.button:hover,
.dataTables_wrapper + a.button:hover {
	background: var(--wdm-accent-hover);
	border-color: var(--wdm-accent-hover);
	color: #fff !important;
}

/* Submit buttons (forms and dialogs) */
#wdm_student_add_form input[type='submit'],
#wdm_teacher_add_form input[type='submit'],
#wdm_email_send_form input[type='submit'],
#wdm_email_send_form_all input[type='submit'],
#wdm_profile_submit input[type='submit'],
#wdm_reset_quiz_table input.button {
	appearance: none;
	font-family: var(--wdm-font);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--wdm-accent);
	border: 1px solid var(--wdm-accent);
	border-radius: var(--wdm-radius-sm);
	padding: 10px 20px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

#wdm_student_add_form input[type='submit']:hover,
#wdm_teacher_add_form input[type='submit']:hover,
#wdm_email_send_form input[type='submit']:hover,
#wdm_email_send_form_all input[type='submit']:hover,
#wdm_profile_submit input[type='submit']:hover,
#wdm_reset_quiz_table input.button:hover {
	background: var(--wdm-accent-hover);
	border-color: var(--wdm-accent-hover);
}

/* --------------------------------------------------------------------------
   2. List tables (students / teachers) + quiz reset table
   -------------------------------------------------------------------------- */

#wdm_std_list,
#wdm_teacher_list {
	/* Fixed layout keeps the table inside its container (restores the right
	   border on wide screens) and lets narrow screens scroll the wrapper. */
	width: 98% !important;
	min-width: 640px;
	table-layout: fixed;
	border-collapse: separate !important;
	border-spacing: 0 !important;   /* overrides the cellspacing='20' attribute */
	background: var(--wdm-bg);
	border: 1px solid var(--wdm-border);
	border-radius: var(--wdm-radius);
	box-shadow: var(--wdm-shadow);
	overflow: hidden;
	margin: 0 0 8px 0;
}


#wdm_reset_quiz_table {
	width: 98%;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: var(--wdm-bg);
	border: 1px solid var(--wdm-border);
	border-radius: var(--wdm-radius);
	box-shadow: var(--wdm-shadow);
	overflow: hidden;
	margin: 0 0 8px 0;
}

#wdm_std_list th:first-child,
#wdm_teacher_list th:first-child {
	width: 26%;
}

#wdm_std_list td,
#wdm_teacher_list td {
	overflow-wrap: break-word;
}

#wdm_std_list thead th,
#wdm_teacher_list thead th,
#wdm_reset_quiz_table thead th {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wdm-muted);
	text-align: left;
	background: var(--wdm-bg-soft);
	border-bottom: 1px solid var(--wdm-border);
	padding: 12px 16px;
}

#wdm_std_list tbody td,
#wdm_teacher_list tbody td,
#wdm_reset_quiz_table tbody td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--wdm-border);
	vertical-align: middle;
	color: var(--wdm-text);
	font-size: 14px;
}

#wdm_std_list tbody tr:last-child td,
#wdm_teacher_list tbody tr:last-child td,
#wdm_reset_quiz_table tbody tr:last-child td {
	border-bottom: none;
}

#wdm_std_list tbody tr:hover td,
#wdm_teacher_list tbody tr:hover td {
	background: var(--wdm-bg-soft);
}

/* Student/teacher name */
#wdm_std_list p[id^='wdm_student_name_'],
#wdm_teacher_list p[id^='wdm_teacher_name_'] {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wdm-text);
}

/* Action column stays a real table-cell — display:flex on a <td> breaks
   table-layout:fixed and pushes the whole table off-screen to the right.
   Buttons wrap as inline-blocks; word-spacing turns the markup's &nbsp;
   entities into uniform gaps between them. */
#wdm_std_list td:last-child,
#wdm_teacher_list td:last-child {
	word-spacing: 10px;
}

#wdm_std_list td:last-child > br,
#wdm_teacher_list td:last-child > br {
	display: none;
}

#wdm_std_list td:last-child input[type='button'],
#wdm_teacher_list td:last-child input[type='button'] {
	display: inline-block;
	margin: 0 0 6px 0;
	vertical-align: middle;
}

#wdm_std_list select[id^='wdm_select_group_'],
#wdm_teacher_list select[id^='wdm_select_group_'] {
	display: block;
	width: 100%;
	margin: 10px 0 0 0;
}

#wdm_std_list td:last-child .select2-container,
#wdm_teacher_list td:last-child .select2-container {
	display: block;
	width: 98% !important;
	margin: 10px 0 0 0;
}

/* ajax loader spinners */
img[id^='wdm_ajax_loader'] {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-left: 8px;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   3. DataTables controls (search, length, info, pagination, processing)
   -------------------------------------------------------------------------- */

.dataTables_wrapper {
	margin-top: 8px;
	color: var(--wdm-text);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
	font-size: 13px;
	color: var(--wdm-muted);
	margin-bottom: 12px;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
	font-family: var(--wdm-font);
	font-size: 13px;
	color: var(--wdm-text);
	background: var(--wdm-bg);
	border: 1px solid var(--wdm-border);
	border-radius: var(--wdm-radius-sm);
	padding: 7px 10px;
	margin-left: 6px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
	outline: none;
	border-color: var(--wdm-accent);
	box-shadow: var(--wdm-focus-ring);
}

.dataTables_wrapper .dataTables_info {
	font-size: 13px;
	color: var(--wdm-muted);
	margin: 12px 0;
}

.dataTables_wrapper .dataTables_paginate {
	margin: 12px 0 4px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	font-size: 13px;
	font-weight: 600;
	color: #334155 !important;
	background: var(--wdm-bg);
	border: 1px solid var(--wdm-border) !important;
	border-radius: var(--wdm-radius-sm);
	padding: 7px 13px !important;
	margin-left: 6px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	color: var(--wdm-accent) !important;
	background: var(--wdm-accent-soft);
	border-color: var(--wdm-accent-border) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	color: #fff !important;
	background: var(--wdm-accent);
	border-color: var(--wdm-accent) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
	color: #cbd5e1 !important;
	background: var(--wdm-bg);
	border-color: var(--wdm-border) !important;
	cursor: default;
}

.dataTables_wrapper .dataTables_processing {
	font-size: 13px;
	color: var(--wdm-muted);
}

/* --------------------------------------------------------------------------
   4. Select2 (group pickers)
   -------------------------------------------------------------------------- */

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
	font-size: 13.5px;
	border: 1px solid var(--wdm-border) !important;
	border-radius: var(--wdm-radius-sm) !important;
	min-height: 38px;
	background: var(--wdm-bg);
}

.select2-container.select2-container--focus .select2-selection--multiple,
.select2-container.select2-container--open .select2-selection--single {
	border-color: var(--wdm-accent) !important;
	box-shadow: var(--wdm-focus-ring);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wdm-accent);
	background: var(--wdm-accent-soft);
	border: 1px solid var(--wdm-accent-border) !important;
	border-radius: 5px;
	padding: 3px 10px !important;
	margin-top: 6px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: var(--wdm-accent) !important;
	margin-right: 4px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: var(--wdm-danger) !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
	font-size: 13.5px;
	color: var(--wdm-text);
}

.select2-dropdown {
	border-color: var(--wdm-border) !important;
	border-radius: var(--wdm-radius-sm) !important;
	box-shadow: var(--wdm-shadow);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--wdm-accent) !important;
}

/* --------------------------------------------------------------------------
   5. Add-student / add-teacher forms
   -------------------------------------------------------------------------- */

#wdm_student_add_form,
#wdm_teacher_add_form {
	display: block;
	max-width: 560px;
	background: var(--wdm-bg);
	border: 1px solid var(--wdm-border);
	border-radius: var(--wdm-radius);
	box-shadow: var(--wdm-shadow);
	padding: 24px;
	margin: 0 0 24px 0;
}

/* The markup uses both <label> and the <lable> typo — cover both */
#wdm_student_add_form label, #wdm_student_add_form lable,
#wdm_teacher_add_form label, #wdm_teacher_add_form lable {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	margin: 0 0 6px 0;
}

#wdm_student_add_form input[type='text'],
#wdm_student_add_form input[type='email'],
#wdm_student_add_form input[type='password'],
#wdm_teacher_add_form input[type='text'],
#wdm_teacher_add_form input[type='email'],
#wdm_teacher_add_form input[type='password'] {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font-family: var(--wdm-font);
	font-size: 14px;
	color: var(--wdm-text);
	background: var(--wdm-bg);
	border: 1px solid var(--wdm-border);
	border-radius: var(--wdm-radius-sm);
	padding: 10px 12px;
	margin: 0 0 14px 0;
	transition: border-color .15s ease, box-shadow .15s ease;
}

#wdm_student_add_form input:focus,
#wdm_teacher_add_form input:focus {
	outline: none;
	border-color: var(--wdm-accent);
	box-shadow: var(--wdm-focus-ring);
}

/* Group multi-selects carry an inline width:20em — normalize to full width.
   Select2 copies that inline width onto its widget at init, so size both. */
#wdm_student_add_form .js-example-basic-multiple,
#wdm_teacher_add_form .js-example-basic-multiple {
	width: 100% !important;
	height: auto !important;
	box-sizing: border-box;
}

#wdm_student_add_form .select2-container,
#wdm_teacher_add_form .select2-container {
	width: 100% !important;
	margin-bottom: 14px;
}

/* The markup pads fields with <br> tags while labels/inputs are block-level
   here — hide them instead of doubling the vertical rhythm. */
#wdm_student_add_form br,
#wdm_teacher_add_form br,
#wdm_email_pop_up br,
#wdm_email_pop_up_all br,
#wdm_profile_pop_up br,
.ui-dialog br {
	display: none;
}

/* --------------------------------------------------------------------------
   6. jQuery UI dialogs (email + profile popups)
   -------------------------------------------------------------------------- */

.ui-dialog {
	border: 1px solid var(--wdm-border) !important;
	border-radius: 14px !important;
	box-shadow: 0 24px 64px rgba(15, 23, 42, .24) !important;
	max-width: 94vw !important;
	overflow: hidden;
	padding: 0 !important;
	font-family: var(--wdm-font);
}

.ui-dialog .ui-dialog-titlebar {
	background: var(--wdm-bg) !important;
	background-image: none !important;
	border: none !important;
	border-bottom: 1px solid var(--wdm-border) !important;
	border-radius: 0 !important;
	padding: 16px 20px !important;
	color: var(--wdm-text) !important;
}

.ui-dialog .ui-dialog-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0;
}

.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 28px !important;
	height: 28px !important;
	background: var(--wdm-bg) !important;
	background-image: none !important;
	border: 1px solid var(--wdm-border) !important;
	border-radius: 50% !important;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
	background: var(--wdm-danger-soft) !important;
	border-color: #fecaca !important;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon {
	background: none !important;
	text-indent: 0;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick::before {
	content: '\00d7';
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: var(--wdm-muted);
}

.ui-dialog .ui-dialog-content {
	background: var(--wdm-bg) !important;
	padding: 20px !important;
}

.ui-widget-overlay {
	background: #0f172a !important;
	opacity: .45 !important;
}

/* Dialog form fields */
#wdm_email_pop_up label, #wdm_email_pop_up lable,
#wdm_email_pop_up_all label, #wdm_email_pop_up_all lable,
#wdm_profile_pop_up label, #wdm_profile_pop_up lable {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	margin: 0 0 6px 0;
}

#wdm_email_pop_up input[type='text'],
#wdm_email_pop_up textarea,
#wdm_email_pop_up_all input[type='text'],
#wdm_email_pop_up_all textarea,
#wdm_profile_pop_up input[type='text'] {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font-family: var(--wdm-font);
	font-size: 14px;
	color: var(--wdm-text);
	background: var(--wdm-bg);
	border: 1px solid var(--wdm-border);
	border-radius: var(--wdm-radius-sm);
	padding: 10px 12px;
	margin: 0 0 14px 0;
	transition: border-color .15s ease, box-shadow .15s ease;
}

#wdm_email_pop_up input:focus,
#wdm_email_pop_up textarea:focus,
#wdm_email_pop_up_all input:focus,
#wdm_email_pop_up_all textarea:focus,
#wdm_profile_pop_up input:focus {
	outline: none;
	border-color: var(--wdm-accent);
	box-shadow: var(--wdm-focus-ring);
}

#wdm_email_pop_up input:disabled,
#wdm_email_pop_up_all input:disabled,
#wdm_profile_pop_up input:disabled {
	background: var(--wdm-bg-soft);
	color: var(--wdm-muted);
}

#wdm_email_pop_up input[type='submit'],
#wdm_email_pop_up_all input[type='submit'],
#wdm_profile_pop_up input[type='submit'] {
	margin-bottom: 0;
}

#wdm_email_pop_up textarea {
	min-height: 140px;
	resize: vertical;
}

/* Profile dialog: two-column field grid */
#wdm_profile_table {
	width: 100%;
	border: none !important;
	margin-bottom: 4px;
}

#wdm_profile_pop_up input[name='passwordreset'] {
	accent-color: var(--wdm-accent);
	margin-right: 4px;
}

#profile_error_msg {
	color: var(--wdm-danger);
	font-size: 13px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Notices, group list, misc
   -------------------------------------------------------------------------- */

.wdm-update-message {
	display: block;
	max-width: 560px;
	font-size: 14px;
	font-weight: 600;
	color: #166534;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: var(--wdm-radius-sm);
	padding: 12px 16px;
	margin: 0 0 20px 0;
}

#wdm_teacher_group ul {
	list-style: none;
	max-width: 560px;
	background: var(--wdm-bg);
	border: 1px solid var(--wdm-border);
	border-radius: var(--wdm-radius);
	box-shadow: var(--wdm-shadow);
	padding: 0;
	margin: 0;
	overflow: hidden;
}

#wdm_teacher_group li {
	padding: 13px 16px;
	border-bottom: 1px solid var(--wdm-border);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wdm-text);
}

#wdm_teacher_group li:last-child {
	border-bottom: none;
}

#wdm_teacher_group li::before {
	content: '\203a';
	color: var(--wdm-accent);
	font-weight: 700;
	margin-right: 8px;
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */

.dataTables_wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 782px) {

	#wdm_send_mail_to_all {
		float: none !important;
		display: block;
		width: 100%;
		margin-bottom: 16px;
	}

	.dataTables_wrapper ~ a.button,
	.dataTables_wrapper + a.button {
		display: block;
		text-align: center;
	}

	#wdm_student_add_form,
	#wdm_teacher_add_form {
		padding: 16px;
	}
}