/* Transfer Certificate Manager - front end
 *
 * Everything is scoped to .ntc-scope.ntc-wrapper. The first block strips the
 * theme's styling off the elements this plugin renders, and the rest rebuilds
 * them, so the table looks the same whichever theme it lands in.
 */

.ntc-wrapper.ntc-scope {
	--ntc-border: #e3e3e8;
	--ntc-stripe: #faf9fb;
	--ntc-muted: #6b6b75;
	--ntc-row-hover: #f4f0f7;
	--ntc-control-h: 38px;
	position: relative;
	display: block;
	margin: 0 0 2rem;
	padding: 0;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
}

/* 1. Isolation. */
.ntc-scope.ntc-wrapper div,
.ntc-scope.ntc-wrapper span,
.ntc-scope.ntc-wrapper label,
.ntc-scope.ntc-wrapper table,
.ntc-scope.ntc-wrapper thead,
.ntc-scope.ntc-wrapper tbody,
.ntc-scope.ntc-wrapper tr,
.ntc-scope.ntc-wrapper th,
.ntc-scope.ntc-wrapper td,
.ntc-scope.ntc-wrapper ul,
.ntc-scope.ntc-wrapper li,
.ntc-scope.ntc-wrapper a,
.ntc-scope.ntc-wrapper button,
.ntc-scope.ntc-wrapper input,
.ntc-scope.ntc-wrapper h2 {
	all: revert;
	box-sizing: border-box;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.ntc-scope.ntc-wrapper *,
.ntc-scope.ntc-wrapper *::before,
.ntc-scope.ntc-wrapper *::after {
	box-sizing: border-box;
}

.ntc-scope.ntc-wrapper [hidden] {
	display: none;
}

/* 2. Heading and toolbar. */
.ntc-scope.ntc-wrapper h2.ntc-title {
	margin: 0 0 1rem;
	font-size: 22px;
	line-height: 1.3;
}

.ntc-scope.ntc-wrapper .ntc-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 14px;
	padding: 0;
}

.ntc-scope.ntc-wrapper .ntc-length,
.ntc-scope.ntc-wrapper .ntc-search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}

/* Labels are boxed to the control height so nothing sits half a line off. */
.ntc-scope.ntc-wrapper .ntc-label {
	display: inline-flex;
	align-items: center;
	height: var(--ntc-control-h);
	margin: 0;
	padding: 0;
	color: var(--ntc-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
}

.ntc-scope.ntc-wrapper input.ntc-search-input {
	height: var(--ntc-control-h);
	width: 240px;
	max-width: 100%;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--ntc-border);
	border-radius: 6px;
	background: #fff;
	color: inherit;
	font-size: 14px;
	line-height: 1.2;
	box-shadow: none;
}

.ntc-scope.ntc-wrapper input.ntc-search-input:focus {
	outline: 2px solid var(--ntc-accent);
	outline-offset: 1px;
	border-color: var(--ntc-accent);
}

/* 3. Rows-per-page dropdown, built from a button so no form plugin can hijack it. */
.ntc-scope.ntc-wrapper .ntc-select {
	position: relative;
	display: inline-block;
}

.ntc-scope.ntc-wrapper button.ntc-select-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: var(--ntc-control-h);
	min-width: 72px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--ntc-border);
	border-radius: 6px;
	background: #fff;
	color: inherit;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
}

.ntc-scope.ntc-wrapper button.ntc-select-toggle:focus-visible {
	outline: 2px solid var(--ntc-accent);
	outline-offset: 1px;
}

.ntc-scope.ntc-wrapper .ntc-select-caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.55;
}

.ntc-scope.ntc-wrapper .ntc-select.is-open .ntc-select-caret {
	transform: rotate(180deg);
}

.ntc-scope.ntc-wrapper ul.ntc-select-menu {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	min-width: 100%;
	margin: 0;
	padding: 4px;
	list-style: none;
	border: 1px solid var(--ntc-border);
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.ntc-scope.ntc-wrapper ul.ntc-select-menu li {
	margin: 0;
	padding: 6px 12px;
	border-radius: 4px;
	list-style: none;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
}

.ntc-scope.ntc-wrapper ul.ntc-select-menu li:hover,
.ntc-scope.ntc-wrapper ul.ntc-select-menu li:focus {
	background: var(--ntc-row-hover);
	outline: none;
}

.ntc-scope.ntc-wrapper ul.ntc-select-menu li[aria-selected="true"] {
	background: var(--ntc-accent);
	color: var(--ntc-header-text);
	font-weight: 600;
}

/* 4. The table. */
.ntc-scope.ntc-wrapper .ntc-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--ntc-border);
	border-radius: 8px;
	background: #fff;
}

.ntc-scope.ntc-wrapper table.ntc-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: transparent;
	font-size: 15px;
	line-height: 1.45;
}

.ntc-scope.ntc-wrapper table.ntc-table th,
.ntc-scope.ntc-wrapper table.ntc-table td {
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid var(--ntc-border);
	background: transparent;
	color: inherit;
	text-align: left;
	vertical-align: middle;
	font-size: inherit;
}

.ntc-scope.ntc-wrapper table.ntc-table thead th {
	background: var(--ntc-accent);
	color: var(--ntc-header-text);
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 0;
}

.ntc-scope.ntc-wrapper table.ntc-table thead th.ntc-sortable {
	cursor: pointer;
	user-select: none;
}

.ntc-scope.ntc-wrapper table.ntc-table thead th.ntc-sortable:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -3px;
}

.ntc-scope.ntc-wrapper .ntc-sort-icon {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 6px;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.4;
}

.ntc-scope.ntc-wrapper th.ntc-sorted-asc .ntc-sort-icon {
	opacity: 1;
	border-top: 0;
	border-bottom: 5px solid currentColor;
}

.ntc-scope.ntc-wrapper th.ntc-sorted-desc .ntc-sort-icon {
	opacity: 1;
}

.ntc-scope.ntc-wrapper table.ntc-table tbody tr {
	background: transparent;
}

.ntc-scope.ntc-wrapper table.ntc-table tbody tr:nth-child(even) {
	background: var(--ntc-stripe);
}

.ntc-scope.ntc-wrapper table.ntc-table tbody tr:hover {
	background: var(--ntc-row-hover);
}

.ntc-scope.ntc-wrapper table.ntc-table tbody tr:last-child td {
	border-bottom: 0;
}

.ntc-scope.ntc-wrapper td[data-label="Admission No."] {
	font-variant-numeric: tabular-nums;
}

.ntc-scope.ntc-wrapper a.ntc-button {
	display: inline-block;
	margin: 0;
	padding: 6px 14px;
	border: 0;
	border-radius: 4px;
	background: var(--ntc-btn-bg);
	color: var(--ntc-btn-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	transition: filter 0.15s ease;
}

.ntc-scope.ntc-wrapper a.ntc-button:hover,
.ntc-scope.ntc-wrapper a.ntc-button:focus {
	filter: brightness(0.93);
	background: var(--ntc-btn-bg);
	color: var(--ntc-btn-text);
	text-decoration: none;
}

.ntc-scope.ntc-wrapper .ntc-no-file {
	color: var(--ntc-muted);
}

.ntc-scope.ntc-wrapper .ntc-message-row td {
	padding: 28px 16px;
	text-align: center;
	color: var(--ntc-muted);
}

/* 5. Footer and paging. */
.ntc-scope.ntc-wrapper .ntc-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin: 14px 0 0;
	padding: 0;
}

.ntc-scope.ntc-wrapper .ntc-info {
	color: var(--ntc-muted);
	font-size: 14px;
}

.ntc-scope.ntc-wrapper .ntc-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.ntc-scope.ntc-wrapper button.ntc-page {
	height: var(--ntc-control-h);
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--ntc-border);
	border-radius: 6px;
	background: #fff;
	color: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
}

.ntc-scope.ntc-wrapper button.ntc-page:hover:not(.is-disabled):not(.is-current) {
	border-color: var(--ntc-accent);
	color: var(--ntc-accent);
	background: #fff;
}

.ntc-scope.ntc-wrapper button.ntc-page.is-current {
	background: var(--ntc-accent);
	border-color: var(--ntc-accent);
	color: var(--ntc-header-text);
	font-weight: 600;
}

.ntc-scope.ntc-wrapper button.ntc-page.is-disabled {
	opacity: 0.45;
	cursor: default;
}

.ntc-scope.ntc-wrapper .ntc-page-gap {
	display: inline-flex;
	align-items: center;
	height: var(--ntc-control-h);
	padding: 0 4px;
	color: var(--ntc-muted);
}

.ntc-wrapper.ntc-scope.is-loading .ntc-table-scroll {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

/* 6. Small screens keep the table, they do not turn it into cards. */
@media (max-width: 782px) {
	.ntc-scope.ntc-wrapper .ntc-toolbar {
		gap: 10px;
	}

	.ntc-scope.ntc-wrapper .ntc-search {
		flex: 1 1 100%;
	}

	.ntc-scope.ntc-wrapper input.ntc-search-input {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	.ntc-scope.ntc-wrapper table.ntc-table {
		font-size: 13px;
	}

	.ntc-scope.ntc-wrapper table.ntc-table th,
	.ntc-scope.ntc-wrapper table.ntc-table td {
		padding: 10px;
	}

	.ntc-scope.ntc-wrapper a.ntc-button {
		padding: 5px 11px;
		font-size: 12px;
	}

	.ntc-scope.ntc-wrapper .ntc-footer {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.ntc-wrapper.ntc-scope {
		font-size: 14px;
	}

	.ntc-scope.ntc-wrapper table.ntc-table {
		font-size: 12.5px;
	}

	.ntc-scope.ntc-wrapper table.ntc-table th,
	.ntc-scope.ntc-wrapper table.ntc-table td {
		padding: 9px 8px;
	}

	.ntc-scope.ntc-wrapper td[data-label="Sr. No."],
	.ntc-scope.ntc-wrapper td[data-label="Session"] {
		white-space: nowrap;
	}

	.ntc-scope.ntc-wrapper a.ntc-button {
		padding: 5px 9px;
	}

	.ntc-scope.ntc-wrapper button.ntc-page {
		padding: 0 10px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ntc-scope.ntc-wrapper * {
		transition: none;
	}
}