/* =========================================================================
   CBSE TC Display — front-end styles
   Aesthetic: official document registry. Deep ink navy + warm gold accent,
   serif display face, parchment panel, crisp restrained motion.
   All rules scoped under .cbse-tc / .cbse-tc-modal to avoid theme collisions.
   ========================================================================= */

.cbse-tc {
	--tc-ink:        #15233b;
	--tc-ink-soft:   #3a4a66;
	--tc-paper:      #fcfbf7;
	--tc-paper-edge: #efeadd;
	--tc-line:       #e2dccb;
	--tc-gold:       #b8893b;
	--tc-gold-deep:  #8a6526;
	--tc-accent-bg:  #f6f1e3;
	--tc-shadow:     0 1px 2px rgba(21,35,59,.06), 0 10px 30px -12px rgba(21,35,59,.22);
	--tc-radius:     14px;

	font-family: ui-sans-serif, "Segoe UI", system-ui, sans-serif;
	color: var(--tc-ink);
	max-width: 1080px;
	margin: 2rem auto;
	background: var(--tc-paper);
	border: 1px solid var(--tc-line);
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow);
	overflow: hidden;
}

/* --- Masthead -------------------------------------------------------- */
.cbse-tc__masthead {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 1.5rem 1.75rem;
	background:
		linear-gradient(180deg, #fff 0%, var(--tc-accent-bg) 100%);
	border-bottom: 2px solid var(--tc-gold);
	position: relative;
}
.cbse-tc__masthead::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--tc-gold) 0 14px, transparent 14px 22px);
	opacity: .35;
}
.cbse-tc__logo {
	width: 64px; height: 64px;
	object-fit: contain;
	flex: 0 0 auto;
}
.cbse-tc__school {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.5rem;
	line-height: 1.15;
	margin: 0;
	letter-spacing: .2px;
	color: var(--tc-ink);
}
.cbse-tc__affiliation {
	margin: .25rem 0 0;
	font-size: .82rem;
	color: var(--tc-ink-soft);
	letter-spacing: .2px;
}
.cbse-tc__affiliation strong { color: var(--tc-gold-deep); }
.cbse-tc__title {
	margin: .55rem 0 0;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--tc-gold-deep);
	font-weight: 700;
}

/* --- Controls -------------------------------------------------------- */
.cbse-tc__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: .75rem;
	padding: 1.1rem 1.75rem;
	background: #fff;
	border-bottom: 1px solid var(--tc-line);
}
.cbse-tc__searchwrap {
	position: relative;
	flex: 1 1 320px;
	max-width: 460px;
	display: flex;
}
.cbse-tc__searchicon {
	position: absolute;
	left: 14px; top: 50%;
	transform: translateY(-50%);
	width: 18px; height: 18px;
	color: var(--tc-ink-soft);
	pointer-events: none;
	z-index: 1;
}
.cbse-tc__search {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	margin: 0;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.2;
	color: var(--tc-ink);
	background-color: var(--tc-paper);
	border: 1px solid var(--tc-line);
	border-radius: 10px;
	padding: 0 .95rem 0 2.6rem;
	transition: border-color .15s, box-shadow .15s;
}
.cbse-tc__search:focus {
	outline: none;
	border-color: var(--tc-gold);
	box-shadow: 0 0 0 3px rgba(184,137,59,.18);
}

/* Overlay dropdown: the visible box + label are plain flex-centered HTML
   (centering is browser-proof, independent of native <select> internals).
   The real <select> sits transparent on top so it remains fully functional. */
.cbse-tc__selectwrap {
	position: relative;
	flex: 0 0 190px;
	height: 46px;
	box-sizing: border-box;
	display: flex;
	align-items: center;          /* vertical centering of the label, deterministic */
	background-color: var(--tc-paper);
	border: 1px solid var(--tc-line);
	border-radius: 10px;
	transition: border-color .15s, box-shadow .15s;
}
.cbse-tc__selectlabel {
	flex: 1 1 auto;
	padding: 0 .95rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.2;
	color: var(--tc-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;          /* clicks pass through to the native select */
}
.cbse-tc__selecticon {
	position: absolute;
	right: .85rem; top: 50%;
	transform: translateY(-50%);
	width: 16px; height: 16px;
	color: var(--tc-ink-soft);
	pointer-events: none;
}
/* The native select: transparent, fills the wrap, sits on top, stays clickable. */
.cbse-tc__filter {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 2.4rem 0 .95rem;
	border: 0;
	background: transparent;
	color: transparent;            /* hide the native selected-text rendering */
	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;
	z-index: 2;
}
.cbse-tc__filter::-ms-expand { display: none; }
/* The option list still needs readable colours when the native list opens. */
.cbse-tc__filter option { color: var(--tc-ink); background: #fff; }
/* Focus ring is shown on the visible wrap, driven by :focus-within. */
.cbse-tc__selectwrap:focus-within {
	border-color: var(--tc-gold);
	box-shadow: 0 0 0 3px rgba(184,137,59,.18);
}
.cbse-tc__filter:focus { outline: none; }
@media (max-width: 640px) {
	.cbse-tc__searchwrap { flex: 1 1 100%; max-width: none; }
	.cbse-tc__selectwrap { flex: 1 1 100%; }
}

/* --- Status / loading ------------------------------------------------ */
.cbse-tc__status {
	padding: 0 1.75rem;
	min-height: 0;
	color: var(--tc-ink-soft);
	font-size: .9rem;
}
.cbse-tc__status:not(:empty) { padding: 1rem 1.75rem; }

.cbse-tc__skeleton {
	height: 52px;
	margin: .4rem 1.75rem;
	border-radius: 8px;
	background: linear-gradient(90deg, #f1ece0 25%, #f8f5ec 37%, #f1ece0 63%);
	background-size: 400% 100%;
	animation: cbse-tc-shimmer 1.3s ease infinite;
}
@keyframes cbse-tc-shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }

/* --- Table ----------------------------------------------------------- */
.cbse-tc__tablewrap { padding: .5rem 1rem 1rem; }
.cbse-tc table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}
.cbse-tc thead th {
	text-align: center;
	font-family: Georgia, serif;
	font-size: .73rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tc-ink-soft);
	padding: .75rem .85rem;
	border-bottom: 2px solid var(--tc-line);
	position: sticky;
	top: 0;
	background: var(--tc-paper);
}
.cbse-tc tbody td {
	padding: .8rem .85rem;
	border-bottom: 1px solid var(--tc-line);
	vertical-align: middle;
	text-align: center;
}
/* Student column: header stays centered (global), but its data is left-aligned
   so the name + DOB block reads naturally. */
.cbse-tc tbody td:first-child { text-align: left; }
.cbse-tc tbody tr { transition: background .12s; }
.cbse-tc tbody tr:nth-child(even) { background: rgba(246,241,227,.45); }
.cbse-tc tbody tr:hover { background: var(--tc-accent-bg); }
.cbse-tc__name { font-weight: 600; }
.cbse-tc__sub { display: block; font-size: .78rem; color: var(--tc-ink-soft); }
.cbse-tc__badge {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	padding: .18rem .5rem;
	border-radius: 999px;
	background: var(--tc-accent-bg);
	color: var(--tc-gold-deep);
	border: 1px solid var(--tc-line);
}

/* --- Buttons --------------------------------------------------------- */
.cbse-tc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	box-sizing: border-box;
	height: 38px;
	margin: 0;
	font-family: inherit;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	border-radius: 9px;
	padding: 0 .9rem;
	border: 1px solid var(--tc-gold);
	background: var(--tc-ink);
	color: #fff;
	text-decoration: none;
	vertical-align: middle;
	-webkit-appearance: none;
	appearance: none;
	transition: transform .1s, background .15s, box-shadow .15s;
}
.cbse-tc__btn:hover { background: #1d3052; box-shadow: var(--tc-shadow); transform: translateY(-1px); }
.cbse-tc__btn--ghost {
	background: transparent;
	color: var(--tc-gold-deep);
	border-color: var(--tc-line);
}
.cbse-tc__btn--ghost:hover { background: var(--tc-accent-bg); color: var(--tc-gold-deep); }
.cbse-tc__actions {
	display: flex;
	gap: .4rem;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

/* --- Pager ----------------------------------------------------------- */
.cbse-tc__pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1rem;
	border-top: 1px solid var(--tc-line);
	background: #fff;
}
.cbse-tc__pager button {
	font: inherit;
	cursor: pointer;
	border: 1px solid var(--tc-line);
	background: var(--tc-paper);
	border-radius: 8px;
	padding: .45rem .9rem;
	color: var(--tc-ink);
}
.cbse-tc__pager button:disabled { opacity: .4; cursor: default; }
.cbse-tc__pageinfo { font-size: .85rem; color: var(--tc-ink-soft); }

/* --- Empty ----------------------------------------------------------- */
.cbse-tc__empty {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--tc-ink-soft);
}
.cbse-tc__empty svg { width: 44px; height: 44px; opacity: .4; margin-bottom: .6rem; }

/* --- Modal viewer ---------------------------------------------------- */
.cbse-tc-modal[hidden] { display: none; }
.cbse-tc-modal {
	position: fixed; inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}
.cbse-tc-modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(13,21,36,.72);
	backdrop-filter: blur(3px);
	animation: cbse-tc-fade .2s ease;
}
@keyframes cbse-tc-fade { from { opacity: 0 } to { opacity: 1 } }
.cbse-tc-modal__dialog {
	position: relative;
	background: var(--tc-paper, #fcfbf7);
	border-radius: 14px;
	width: min(960px, 100%);
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
	animation: cbse-tc-pop .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes cbse-tc-pop { from { transform: translateY(12px) scale(.98); opacity: 0 } to { transform: none; opacity: 1 } }
.cbse-tc-modal__head {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid #e2dccb;
	font-family: Georgia, serif;
	color: #15233b;
}
.cbse-tc-modal__head small { display:block; font-family: ui-sans-serif, system-ui; color:#3a4a66; font-size:.8rem; margin-top:.15rem;}
.cbse-tc-modal__body {
	flex: 1;
	overflow: auto;
	background: #2a2f37;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50vh;
}
.cbse-tc-modal__body img { max-width: 100%; height: auto; display: block; }
.cbse-tc-modal__body iframe,
.cbse-tc-modal__body embed { width: 100%; height: 80vh; border: 0; }
.cbse-tc-modal__close {
	position: absolute;
	top: 8px; right: 10px;
	width: 34px; height: 34px;
	border: 0;
	border-radius: 50%;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	background: rgba(255,255,255,.9);
	color: #15233b;
	z-index: 2;
}
.cbse-tc-modal__close:hover { background:#fff; }

/* --- Responsive: cards on small screens ------------------------------ */
@media (max-width: 640px) {
	.cbse-tc thead { display: none; }
	.cbse-tc table, .cbse-tc tbody, .cbse-tc tr, .cbse-tc td { display: block; width: 100%; }
	.cbse-tc tbody tr {
		border: 1px solid var(--tc-line);
		border-radius: 10px;
		margin: .6rem 0;
		padding: .4rem .2rem;
		background: #fff;
	}
	.cbse-tc tbody td { border: 0; padding: .35rem .85rem; text-align: left; }
	.cbse-tc tbody td:first-child { text-align: left; }
	.cbse-tc__actions { justify-content: flex-start; }
	.cbse-tc tbody td::before {
		content: attr(data-label);
		display: block;
		font-size: .68rem;
		text-transform: uppercase;
		letter-spacing: .1em;
		color: var(--tc-ink-soft);
		margin-bottom: .1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cbse-tc *, .cbse-tc-modal * { animation: none !important; transition: none !important; }
}