/**
 * City School Core - Frontend & Portal Stylesheet
 * Native RTL Support with CSS Logical Properties
 */

:root {
	--csc-primary: #0B2545;
	--csc-secondary: #134074;
	--csc-accent: #00A896;
	--csc-gold: #D4AF37;
	--csc-success: #028090;
	--csc-danger: #E63946;
	--csc-light: #F8FAFC;
	--csc-dark: #0F172A;
	--csc-border-color: #E2E8F0;
	--csc-font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--csc-radius-sm: 6px;
	--csc-radius-md: 12px;
	--csc-radius-lg: 18px;
	--csc-shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
	--csc-shadow-md: 0 6px 18px rgba(0,0,0,0.06);
	--csc-shadow-lg: 0 12px 32px rgba(0,0,0,0.08);
}

/* ==========================================================================
   Admissions Application Multi-Step Form
   ========================================================================== */

.csc-admission-wrapper {
	max-width: 860px;
	margin: 30px auto;
	background: #ffffff;
	border-radius: var(--csc-radius-lg);
	box-shadow: var(--csc-shadow-lg);
	padding: 40px;
	border: 1px solid var(--csc-border-color);
	font-family: var(--csc-font-family);
	direction: rtl;
}

.csc-stepper {
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-bottom: 40px;
}

.csc-stepper::before {
	content: '';
	position: absolute;
	top: 20px;
	right: 40px;
	left: 40px;
	height: 3px;
	background: #E2E8F0;
	z-index: 1;
}

.csc-step {
	position: relative;
	z-index: 2;
	text-align: center;
	flex: 1;
}

.csc-step .step-num {
	width: 42px;
	height: 42px;
	line-height: 42px;
	background: #FFFFFF;
	border: 3px solid #CBD5E1;
	border-radius: 50%;
	display: inline-block;
	font-weight: 700;
	color: #64748B;
	transition: all 0.3s ease;
}

.csc-step.active .step-num {
	background: var(--csc-primary);
	border-color: var(--csc-primary);
	color: #FFFFFF;
	box-shadow: 0 0 0 4px rgba(11, 37, 69, 0.15);
}

.csc-step.completed .step-num {
	background: var(--csc-accent);
	border-color: var(--csc-accent);
	color: #FFFFFF;
}

.csc-step .step-title {
	display: block;
	margin-top: 10px;
	font-size: 13.5px;
	font-weight: 700;
	color: #64748B;
}

.csc-step .step-sub {
	display: block;
	font-size: 11px;
	color: #94A3B8;
	font-weight: 500;
	margin-top: 2px;
}

.csc-step.active .step-title {
	color: var(--csc-primary);
}

.csc-step.active .step-sub {
	color: var(--csc-secondary);
}

/* Inline Validation Alert */
.csc-validation-alert {
	background: #FEF2F2;
	border: 1px solid #FCA5A5;
	border-inline-start: 5px solid #EF4444;
	color: #991B1B;
	padding: 14px 18px;
	border-radius: var(--csc-radius-sm);
	font-size: 14.5px;
	font-weight: 600;
	margin-bottom: 24px;
	line-height: 1.6;
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.08);
	animation: cscShake 0.4s ease;
}

@keyframes cscShake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-4px); }
	40%, 80% { transform: translateX(4px); }
}

.csc-form-step {
	display: none;
	animation: fadeIn 0.3s ease;
}

.csc-form-step.active {
	display: block;
}

.csc-step-header {
	margin-bottom: 24px;
	padding-bottom: 14px;
	border-bottom: 2px solid #F1F5F9;
}

.csc-step-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--csc-accent);
	background: #E6F7F5;
	padding: 4px 12px;
	border-radius: 20px;
	margin-bottom: 10px;
}

.csc-step-intro {
	font-size: 14.5px;
	color: #64748B;
	margin: 6px 0 0;
	line-height: 1.6;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.csc-form-step h3 {
	font-size: 20px;
	color: var(--csc-primary);
	margin-bottom: 25px;
	padding-bottom: 12px;
	border-bottom: 2px solid #F1F5F9;
}

.csc-form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin-bottom: 18px;
}

.csc-field {
	margin-bottom: 18px;
}

.csc-field label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: #1E293B;
	font-size: 14px;
}

.csc-field input,
.csc-field select,
.csc-field textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid var(--csc-border-color);
	border-radius: var(--csc-radius-sm);
	font-family: inherit;
	font-size: 15px;
	color: #1E293B;
	background: #FFFFFF;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
}

.csc-field input:focus,
.csc-field select:focus,
.csc-field textarea:focus {
	outline: none;
	border-color: var(--csc-primary);
	box-shadow: 0 0 0 3px rgba(11, 37, 69, 0.1);
}

.csc-step-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--csc-border-color);
}

.csc-btn {
	padding: 12px 28px;
	border-radius: var(--csc-radius-sm);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	border: none;
	transition: all 0.2s ease;
	font-family: inherit;
}

.csc-btn-primary {
	background: var(--csc-primary);
	color: #FFFFFF;
}

.csc-btn-primary:hover {
	background: var(--csc-secondary);
}

.csc-btn-outline {
	background: transparent;
	border: 1.5px solid #CBD5E1;
	color: #475569;
}

.csc-btn-outline:hover {
	background: #F1F5F9;
	color: #0F172A;
}

.csc-btn-success {
	background: var(--csc-accent);
	color: #FFFFFF;
}

.csc-btn-success:hover {
	background: #00875A;
}

/* Review Summary (Step 4) */
.csc-review-summary {
	margin: 20px 0 30px;
}

.csc-review-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.csc-review-card {
	background: #F8FAFC;
	border: 1px solid var(--csc-border-color);
	border-radius: var(--csc-radius-md);
	padding: 20px 22px;
}

.csc-review-card h4 {
	font-size: 16px;
	color: var(--csc-primary);
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid #E2E8F0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.csc-review-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 1.5;
}

.csc-review-item:last-child {
	margin-bottom: 0;
}

.csc-review-item .label {
	color: #64748B;
	font-weight: 600;
	flex-shrink: 0;
}

.csc-review-item .val {
	color: #0F172A;
	font-weight: 700;
	text-align: left;
	direction: ltr;
}

/* Polished Success Screen */
.csc-success-screen {
	padding: 30px 10px;
	direction: rtl;
}

.csc-success-header {
	text-align: center;
	margin-bottom: 30px;
}

.csc-success-icon-badge {
	width: 68px;
	height: 68px;
	background: #D1FAE5;
	color: #065F46;
	border-radius: 50%;
	line-height: 68px;
	font-size: 32px;
	font-weight: 900;
	margin: 0 auto 16px;
	box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2);
}

.csc-success-title {
	font-size: 26px;
	font-weight: 800;
	color: var(--csc-primary);
	margin: 0 0 10px;
}

.csc-success-intro {
	font-size: 16px;
	color: #64748B;
	max-width: 580px;
	margin: 0 auto;
	line-height: 1.7;
}

.csc-success-details-card {
	background: #F8FAFC;
	border: 1.5px dashed var(--csc-primary);
	border-radius: var(--csc-radius-md);
	padding: 24px 28px;
	margin: 28px 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.csc-detail-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

.csc-detail-row .label {
	font-size: 15px;
	font-weight: 600;
	color: #475569;
}

.csc-detail-row .code {
	font-family: monospace;
	font-size: 22px;
	font-weight: 900;
	color: var(--csc-primary);
	background: #EEF4FA;
	padding: 6px 16px;
	border-radius: 8px;
	letter-spacing: 1.5px;
}

.csc-badge-submitted {
	background: #FEF3C7;
	color: #92400E;
	border: 1px solid #FCD34D;
	font-size: 13.5px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 20px;
}

.csc-next-steps-card {
	background: #FFFFFF;
	border: 1px solid var(--csc-border-color);
	border-radius: var(--csc-radius-md);
	padding: 26px 28px;
	margin-bottom: 28px;
	text-align: right;
}

.csc-next-steps-card h4 {
	font-size: 17px;
	font-weight: 800;
	color: var(--csc-primary);
	margin: 0 0 16px;
}

.csc-next-steps-list {
	margin: 0;
	padding-inline-start: 22px;
	color: #475569;
}

.csc-next-steps-list li {
	margin-bottom: 14px;
	line-height: 1.6;
	font-size: 14.5px;
}

.csc-next-steps-list li:last-child {
	margin-bottom: 0;
}

.csc-next-steps-list strong {
	color: var(--csc-primary);
	display: inline-block;
	margin-inline-end: 6px;
}

.csc-success-actions {
	text-align: center;
	margin-top: 10px;
}

/* ==========================================================================
   Student & Teacher Portals
   ========================================================================== */

.csc-portal-container {
	max-width: 1200px;
	margin: 30px auto;
	font-family: var(--csc-font-family);
	direction: rtl;
}

.csc-portal-banner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(135deg, var(--csc-primary) 0%, var(--csc-secondary) 100%);
	color: #FFFFFF;
	padding: 22px 28px;
	border-radius: var(--csc-radius-md);
	box-shadow: 0 8px 24px rgba(11, 37, 69, 0.12);
	margin-bottom: 24px;
	position: relative;
	overflow: hidden;
}

.csc-portal-banner::after {
	content: '';
	position: absolute;
	top: -50px;
	left: -50px;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%);
	pointer-events: none;
}

.csc-student-profile-header {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
}

.csc-student-avatar img,
.avatar-circle {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid rgba(255, 255, 255, 0.3);
}

.avatar-circle {
	background: var(--csc-accent);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 700;
}

.avatar-circle.teacher-circle {
	background: var(--csc-gold);
}

.csc-student-title h2,
.csc-portal-banner h2,
.csc-portal-banner h3 {
	margin: 0 0 6px 0;
	font-size: 20px;
	font-weight: 800;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
	line-height: 1.3;
}

.csc-meta-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.csc-meta-tags .badge {
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	backdrop-filter: blur(4px);
}

.csc-btn-logout {
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.22);
	padding: 7px 16px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.csc-btn-logout:hover {
	background: rgba(239, 68, 68, 0.25);
	border-color: rgba(239, 68, 68, 0.4);
	color: #FECACA;
}

.csc-portal-tabs {
	display: flex;
	gap: 6px;
	border-bottom: 2px solid #E2E8F0;
	margin-bottom: 24px;
	overflow-x: auto;
	padding-bottom: 2px;
	-webkit-overflow-scrolling: touch;
}

.csc-tab-btn {
	background: transparent;
	border: none;
	padding: 10px 18px;
	font-size: 14.5px;
	font-weight: 700;
	color: #64748B;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -4px;
	transition: all 0.2s;
	font-family: inherit;
	white-space: nowrap;
	border-radius: 6px 6px 0 0;
}

.csc-tab-btn.active {
	color: var(--csc-primary);
	border-bottom-color: var(--csc-primary);
}

.csc-tab-content {
	display: none;
	animation: fadeIn 0.3s ease;
}

.csc-tab-content.active {
	display: block;
}

/* KPI Row */
.csc-kpi-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.csc-kpi-card {
	background: #FFFFFF;
	padding: 20px 16px;
	border-radius: var(--csc-radius-md);
	box-shadow: 0 2px 10px rgba(11, 37, 69, 0.04);
	border: 1px solid var(--csc-border-color);
	text-align: center;
	transition: all 0.25s ease;
	position: relative;
	overflow: hidden;
}

.csc-kpi-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(11, 37, 69, 0.08);
	border-color: #cbd5e1;
}

.csc-kpi-card .kpi-num {
	display: block;
	font-size: 30px;
	font-weight: 800;
	color: var(--csc-primary);
	line-height: 1.1;
	letter-spacing: -0.5px;
}

.csc-kpi-card .kpi-label {
	display: block;
	margin-top: 6px;
	color: #64748B;
	font-size: 13px;
	font-weight: 700;
}

/* 2-Column Portal Overview Grid */
.csc-portal-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 10px;
}

.csc-portal-box {
	background: #FFFFFF;
	border: 1px solid var(--csc-border-color);
	border-radius: var(--csc-radius-md);
	padding: 24px 22px;
	box-shadow: 0 2px 10px rgba(11, 37, 69, 0.04);
	display: flex;
	flex-direction: column;
}

.csc-portal-box h3 {
	margin: 0 0 16px 0;
	font-size: 16.5px;
	font-weight: 800;
	color: var(--csc-primary);
	border-bottom: 2px solid #F1F5F9;
	padding-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.csc-portal-box .csc-data-table {
	width: 100%;
	border-collapse: collapse;
}

.csc-portal-box .csc-data-table th,
.csc-portal-box .csc-data-table td {
	padding: 10px 12px;
	font-size: 13.5px;
	border-bottom: 1px solid #F1F5F9;
	text-align: right;
}

.csc-portal-box .csc-data-table th {
	color: #64748B;
	font-weight: 700;
	width: 38%;
}

.csc-portal-box .csc-data-table td {
	color: #0F172A;
	font-weight: 600;
}

.csc-portal-box .csc-portal-item {
	padding: 12px 14px;
	border-radius: 8px;
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	margin-bottom: 10px;
	transition: background 0.2s;
}

.csc-portal-box .csc-portal-item:hover {
	background: #F1F5F9;
}

.csc-portal-box .csc-portal-item strong {
	display: block;
	font-size: 14px;
	color: #0F172A;
	margin-bottom: 4px;
}

.csc-portal-box .csc-portal-item p {
	font-size: 13px;
	color: #475569;
	line-height: 1.5;
	margin: 0 0 6px 0;
}

.csc-portal-box .csc-portal-item .date {
	font-size: 11.5px;
	color: #94A3B8;
}

@media (max-width: 860px) {
	.csc-portal-grid-2 {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
}

/* Data Tables */
.csc-custom-table {
	width: 100%;
	border-collapse: collapse;
	background: #FFFFFF;
	border-radius: var(--csc-radius-md);
	overflow: hidden;
	box-shadow: var(--csc-shadow-sm);
	border: 1px solid var(--csc-border-color);
}

.csc-custom-table th,
.csc-custom-table td {
	padding: 16px 20px;
	text-align: right;
	border-bottom: 1px solid var(--csc-border-color);
}

.csc-custom-table th {
	background: #F8FAFC;
	font-weight: 700;
	color: var(--csc-primary);
}

/* Attendance Summary Cards */
.csc-attendance-summary-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
}

.att-card {
	padding: 20px;
	border-radius: var(--csc-radius-md);
	text-align: center;
}

.att-card.present { background: #E6F4EA; color: #137333; }
.att-card.absent { background: #FCE8E6; color: #C5221F; }
.att-card.late { background: #FEF7E0; color: #B06000; }
.att-card.excused { background: #F3E8FD; color: #7627BB; }

.att-card .num {
	display: block;
	font-size: 28px;
	font-weight: 800;
}

.att-card .lbl {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
}

/* Teachers Grid */
.csc-teachers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 25px;
	margin: 30px 0;
	direction: rtl;
	font-family: var(--csc-font-family);
}

.csc-teacher-card {
	background: #FFFFFF;
	border-radius: var(--csc-radius-md);
	box-shadow: var(--csc-shadow-sm);
	border: 1px solid var(--csc-border-color);
	overflow: hidden;
	transition: transform 0.2s, box-shadow 0.2s;
	text-align: center;
	padding: 30px 20px;
}

.csc-teacher-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--csc-shadow-md);
}

.csc-teacher-avatar img,
.csc-avatar-placeholder {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 15px;
	border: 3px solid var(--csc-accent);
}

.csc-avatar-placeholder {
	background: var(--csc-secondary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	font-weight: 700;
}

.csc-teacher-name {
	margin: 0 0 5px;
	font-size: 18px;
	color: var(--csc-primary);
	font-weight: 700;
}

.csc-teacher-subject {
	display: inline-block;
	color: var(--csc-accent);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 12px;
}

.csc-teacher-bio {
	font-size: 14px;
	color: #64748B;
	line-height: 1.6;
	margin: 0 0 15px;
}

/* Events Grid */
.csc-events-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 25px;
	margin: 30px 0;
	direction: rtl;
}

.csc-event-card {
	background: #FFFFFF;
	border-radius: var(--csc-radius-md);
	box-shadow: var(--csc-shadow-sm);
	border: 1px solid var(--csc-border-color);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.csc-event-img img {
	width: 100%;
	height: 190px;
	object-fit: cover;
}

.csc-event-body {
	padding: 22px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.csc-event-meta {
	display: flex;
	gap: 15px;
	font-size: 12px;
	color: #64748B;
	margin-bottom: 10px;
}

.csc-event-title {
	margin: 0 0 10px;
	font-size: 18px;
}

.csc-event-title a {
	color: var(--csc-primary);
	text-decoration: none;
}

.csc-event-title a:hover {
	color: var(--csc-accent);
}

.csc-event-location {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--csc-border-color);
	font-size: 13px;
	color: #475569;
}


/* ==========================================================================
   CSC School Life & Activities Grid Styles
   ========================================================================== */
.csc-empty-state {
	text-align: center;
	padding: 40px 20px;
	background: #F8FAFC;
	border: 1px dashed var(--csc-border-color);
	border-radius: var(--csc-radius-md);
	color: #64748B;
	font-size: 15px;
	margin: 20px 0;
}

.csc-activities-grid,
.csc-gallery-grid,
.csc-talents-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 26px;
	margin: 25px 0 35px;
	direction: rtl;
}

.csc-activity-card,
.csc-album-card,
.csc-talent-card {
	background: #FFFFFF !important;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
	display: flex;
	flex-direction: column;
	position: relative;
}

.csc-activity-card:hover,
.csc-album-card:hover,
.csc-talent-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
	border-color: #CBD5E1;
}

.csc-activity-thumb,
.csc-album-cover,
.csc-talent-thumb {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	background: #0B2545;
}

.csc-activity-thumb img,
.csc-album-cover img,
.csc-talent-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.4s ease;
}

.csc-activity-card:hover .csc-activity-thumb img,
.csc-album-card:hover .csc-album-cover img,
.csc-talent-card:hover .csc-talent-thumb img {
	transform: scale(1.05);
}

.csc-thumb-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #0B2545 0%, #134074 100%);
	color: #D4AF37;
}

.csc-thumb-fallback .dashicons {
	font-size: 52px;
	width: 52px;
	height: 52px;
	opacity: 0.8;
}

.csc-card-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(11, 37, 69, 0.85);
	color: #FFFFFF;
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 50px;
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.csc-badge-count {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(0, 168, 150, 0.9);
}

.csc-badge-count .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.csc-card-date {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	color: #64748B;
	margin-bottom: 8px;
}

.csc-card-date .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: #0284C7;
}

.csc-activity-body,
.csc-album-body,
.csc-talent-body {
	padding: 20px 22px;
	flex: 1;
	display: flex;
	flex-direction: column;
	text-align: right;
}

.csc-activity-title,
.csc-album-title,
.csc-talent-title {
	font-size: 17.5px !important;
	font-weight: 800 !important;
	color: #0B2545 !important;
	margin: 0 0 10px !important;
	line-height: 1.4 !important;
}

.csc-activity-desc,
.csc-album-desc,
.csc-talent-desc {
	font-size: 14px !important;
	color: #475569 !important;
	line-height: 1.65 !important;
	margin: 0 0 10px !important;
	flex: 1;
}

.csc-talent-student {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	color: #0B2545;
	background: #F1F5F9;
	padding: 4px 10px;
	border-radius: 6px;
	margin-bottom: 10px;
	align-self: flex-start;
}

.csc-talent-student .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	color: #00A896;
}

.csc-empty-state {
	text-align: center;
	padding: 40px 20px;
	background: #F8FAFC;
	border: 1px dashed #CBD5E1;
	border-radius: 12px;
	color: #64748B;
	font-size: 15px;
	margin: 20px 0;
}

/* ==========================================================================
   Hall of Fame & Honored Students Grid (.city-hall-of-fame-section)
   ========================================================================== */
.city-hall-of-fame-section {
	padding: 60px 0;
	background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
	border-top: 1px solid #E2E8F0;
	border-bottom: 1px solid #E2E8F0;
	position: relative;
}

.city-honor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 28px;
	margin-top: 36px;
	direction: rtl;
}

.city-honor-card {
	background: #FFFFFF !important;
	border: 1px solid #E2E8F0;
	border-radius: 18px;
	padding: 28px 24px 24px;
	text-align: center;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.city-honor-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
	border-color: #CBD5E1;
}

.city-honor-card__badge-tag {
	position: absolute;
	top: -12px;
	background: linear-gradient(135deg, #0B2545 0%, #134074 100%);
	color: #D4AF37;
	font-size: 11.5px;
	font-weight: 800;
	padding: 4px 14px;
	border-radius: 50px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid #D4AF37;
}

.city-honor-card__avatar-wrap {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	overflow: hidden;
	margin: 10px auto 16px;
	border: 3px solid #D4AF37;
	box-shadow: 0 4px 14px rgba(212, 175, 55, 0.25);
	background: #F1F5F9;
}

.city-honor-card__avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.city-honor-card__avatar-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #0B2545 0%, #134074 100%);
	color: #FFFFFF;
	font-size: 32px;
	font-weight: 800;
}

.city-honor-card__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.city-honor-card__name {
	font-size: 19px !important;
	font-weight: 800 !important;
	color: #0B2545 !important;
	margin: 0 0 6px !important;
}

.city-honor-card__stage {
	display: inline-block;
	background: #F1F5F9;
	color: #475569;
	font-size: 12.5px;
	font-weight: 700;
	padding: 3px 12px;
	border-radius: 50px;
	margin-bottom: 12px;
}

.city-honor-card__summary {
	font-size: 13.5px !important;
	color: #64748B !important;
	line-height: 1.6 !important;
	margin: 0 0 14px !important;
	flex: 1;
}

.city-honor-card__year {
	font-size: 12px;
	color: #94A3B8;
	border-top: 1px dashed #E2E8F0;
	padding-top: 10px;
	width: 100%;
}

.city-honor-card__year strong {
	color: #0B2545;
}

/* Attendance Badges */
.csc-badge {
	display: inline-block;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 12px;
	line-height: 1.4;
}
.csc-badge-present {
	background: #dcfce7;
	color: #15803d;
	border: 1px solid #bbf7d0;
}
.csc-badge-absent {
	background: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}
.csc-badge-late {
	background: #fef3c7;
	color: #b45309;
	border: 1px solid #fde68a;
}
.csc-badge-excused {
	background: #e0f2fe;
	color: #0369a1;
	border: 1px solid #bae6fd;
}
.csc-badge-active {
	background: #f0fdf4;
	color: #166534;
	border: 1px solid #bbf7d0;
}
.csc-badge-archived {
	background: #f1f5f9;
	color: #64748b;
	border: 1px solid #cbd5e1;
}

/* Custom Table in Portal */
.csc-custom-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	margin-top: 10px;
}
.csc-custom-table th {
	background: #f8fafc;
	color: #334155;
	font-weight: 700;
	padding: 12px 16px;
	text-align: right;
	border-bottom: 2px solid #e2e8f0;
	font-size: 13.5px;
}
.csc-custom-table td {
	padding: 12px 16px;
	border-bottom: 1px solid #f1f5f9;
	color: #1e293b;
	font-size: 14px;
	vertical-align: middle;
}
.csc-custom-table tr:hover {
	background: #f8fafc;
}

.csc-btn-outline {
	background: #fff;
	border: 1px solid #cbd5e1;
	color: #334155;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.2s;
}
.csc-btn-outline:hover {
	background: #f1f5f9;
	border-color: #94a3b8;
}
.csc-btn-success {
	background: #16a34a;
	color: #fff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 700;
	transition: background 0.2s;
}
.csc-btn-success:hover {
	background: #15803d;
}

/* ==========================================================================
   Priority 3.1 - Parent Portal & Child Switcher Enhancements
   ========================================================================== */

.csc-child-switcher-wrapper {
	background: #ffffff;
	padding: 16px 20px;
	border-radius: var(--csc-radius-md);
	margin-bottom: 25px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	border: 1px solid var(--csc-border-color);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.csc-child-switcher-label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #1e3a8a;
	font-size: 15px;
}

.csc-child-switcher-label .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.csc-switcher-cards-scroll {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
}

.csc-child-switch-card {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	border-radius: 10px;
	background: #f8fafc;
	border: 2px solid #e2e8f0;
	text-decoration: none;
	color: #1e293b;
	transition: all 0.25s ease;
	position: relative;
	min-width: 220px;
	flex-shrink: 0;
}

.csc-child-switch-card:hover {
	background: #f1f5f9;
	border-color: #cbd5e1;
	transform: translateY(-1px);
}

.csc-child-switch-card.active {
	background: #eff6ff;
	border-color: #2563eb;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

.child-avatar-pill {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #3b82f6;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	flex-shrink: 0;
}

.csc-child-switch-card.active .child-avatar-pill {
	background: #1d4ed8;
}

.child-info-pill {
	display: flex;
	flex-direction: column;
	text-align: right;
}

.child-name {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
}

.child-meta {
	font-size: 12px;
	color: #64748b;
}

.child-active-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2563eb;
	position: absolute;
	top: 10px;
	left: 10px;
}

.csc-tab-header-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 10px;
}

.csc-tab-header-flex h3 {
	margin: 0;
}

.csc-readonly-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f1f5f9;
	color: #475569;
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 12.5px;
	font-weight: 600;
	border: 1px solid #cbd5e1;
}

.csc-empty-state {
	text-align: center;
	padding: 50px 20px;
	background: #f8fafc;
	border-radius: var(--csc-radius-md);
	border: 1px dashed #cbd5e1;
	color: #64748b;
	margin: 15px 0;
}

.csc-empty-state .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	margin-bottom: 12px;
	color: #94a3b8;
}

.csc-empty-state p {
	font-size: 15px;
	font-weight: 600;
	margin: 0;
}

.csc-announcements-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.csc-announcement-card {
	background: #ffffff;
	border: 1px solid var(--csc-border-color);
	border-radius: var(--csc-radius-md);
	padding: 20px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.csc-announcement-card .ann-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid #f1f5f9;
}

.csc-announcement-card .ann-header h4 {
	margin: 0;
	color: #1e3a8a;
	font-size: 16px;
}

.csc-announcement-card .ann-header .ann-date {
	font-size: 12.5px;
	color: #94a3b8;
}

.csc-profile-section-wrapper {
	background: #ffffff;
	border-radius: var(--csc-radius-md);
	padding: 30px;
	border: 1px solid var(--csc-border-color);
	box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.csc-section-intro {
	margin-bottom: 25px;
	border-bottom: 1px solid #f1f5f9;
	padding-bottom: 15px;
}

.csc-section-intro h3 {
	margin: 0 0 6px 0;
	color: #1e3a8a;
}

.csc-input-disabled {
	background: #f1f5f9 !important;
	color: #64748b !important;
	cursor: not-allowed;
	border-color: #e2e8f0 !important;
}

.csc-code-tag {
	background: #eff6ff;
	color: #1d4ed8;
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: 700;
	font-family: monospace;
	font-size: 13px;
	border: 1px solid #bfdbfe;
}

/* ==========================================================================
   Priority 4.4: Student & Teacher Self-Service Styles
   ========================================================================== */

.csc-profile-section-header {
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e2e8f0;
}

.csc-profile-section-header h3 {
	margin: 0 0 6px 0;
	color: #0f172a;
	font-size: 22px;
	font-weight: 700;
}

.csc-profile-section-header .csc-desc {
	margin: 0;
	color: #64748b;
	font-size: 14px;
}

.csc-profile-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-bottom: 30px;
}

.csc-profile-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
}

.csc-profile-card h4 {
	margin: 0 0 16px 0;
	color: #1e293b;
	font-size: 17px;
	font-weight: 700;
	border-bottom: 2px solid #f1f5f9;
	padding-bottom: 10px;
}

.csc-profile-avatar-block {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 16px;
}

.csc-profile-avatar-preview {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	overflow: hidden;
	background: #f8fafc;
	border: 3px solid #0d9488;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.csc-profile-avatar-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.csc-profile-avatar-preview .avatar-circle {
	width: 100%;
	height: 100%;
	font-size: 32px;
	font-weight: 700;
	background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.csc-profile-avatar-preview .avatar-circle.teacher-circle {
	background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
}

.csc-profile-meta-summary h5 {
	margin: 0 0 8px 0;
	font-size: 18px;
	color: #0f172a;
	font-weight: 700;
}

.csc-badge-code {
	background: #f1f5f9;
	color: #334155;
	font-weight: 600;
	font-size: 12px;
	padding: 3px 8px;
	border-radius: 6px;
	border: 1px solid #cbd5e1;
	margin-inline-end: 6px;
}

.csc-badge-status {
	background: #dcfce7;
	color: #15803d;
	font-weight: 600;
	font-size: 12px;
	padding: 3px 8px;
	border-radius: 6px;
	border: 1px solid #bbf7d0;
}

.csc-badge-locked {
	background: #fef3c7;
	color: #92400e;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 20px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.csc-form-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.csc-field {
	margin-bottom: 14px;
}

.csc-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	margin-bottom: 6px;
}

.csc-input,
.csc-textarea,
.csc-file-input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	background: #ffffff;
	color: #0f172a;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

.csc-input:focus-visible,
.csc-textarea:focus-visible,
.csc-file-input:focus-visible {
	outline: none;
	border-color: #0d9488;
	box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

.csc-readonly {
	background: #f8fafc !important;
	color: #64748b !important;
	cursor: not-allowed;
	border-color: #e2e8f0 !important;
}

.csc-help-text {
	display: block;
	font-size: 12px;
	color: #64748b;
	margin-top: 4px;
}

.csc-desc-sub {
	color: #64748b;
	font-size: 13px;
	margin: 0 0 14px 0;
}

.csc-btn-outline {
	background: #ffffff;
	border: 1px solid #cbd5e1;
	color: #334155;
	padding: 10px 16px;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
	transition: all 0.2s;
}

.csc-btn-outline:hover {
	background: #f8fafc;
	border-color: #94a3b8;
}

.csc-btn-secondary {
	background: #0284c7;
	border: none;
	color: #ffffff;
	padding: 11px 18px;
	border-radius: 8px;
	font-weight: 700;
	cursor: pointer;
	min-height: 44px;
	transition: background 0.2s;
}

.csc-btn-secondary:hover {
	background: #0369a1;
}

.csc-btn-primary {
	min-height: 44px;
}

.csc-academic-summary-card .csc-data-table {
	width: 100%;
	border-collapse: collapse;
}

.csc-academic-summary-card .csc-data-table th,
.csc-academic-summary-card .csc-data-table td {
	padding: 10px 12px;
	border-bottom: 1px solid #f1f5f9;
	font-size: 14px;
	text-align: right;
}

.csc-academic-summary-card .csc-data-table th {
	color: #475569;
	font-weight: 600;
	width: 40%;
}

.csc-academic-summary-card .csc-data-table td {
	color: #0f172a;
}

/* Responsive Breakpoints for Self-Service */
@media (max-width: 1023px) {
	.csc-profile-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.csc-form-row-2 {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.csc-profile-card {
		padding: 18px;
	}
	.csc-profile-avatar-block {
		flex-direction: column;
		text-align: center;
	}
}

/* ==========================================================================
   Priority 4.6: Parent Child Switcher AJAX States & Transitions
   ========================================================================== */
.csc-child-content-area {
	position: relative;
	transition: opacity 0.25s ease-in-out;
}

.csc-child-content-area.csc-loading {
	opacity: 0.55;
	pointer-events: none;
}

.csc-child-switch-card.csc-switching {
	opacity: 0.7;
	cursor: wait !important;
	pointer-events: none;
}

.csc-portal-alert--error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
	border-radius: 8px;
	padding: 12px 18px;
	font-weight: 600;
	font-size: 14px;
}

.csc-child-switch-card:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* ==========================================================================
   Mobile Touch Responsiveness & Table Fluidity
   ========================================================================== */
.csc-table-responsive {
	width: 100% !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	margin-bottom: 20px;
	border-radius: 10px;
}

.csc-tabs-nav {
	display: flex !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	white-space: nowrap !important;
	scrollbar-width: none !important;
	padding-bottom: 6px;
	gap: 8px;
}

.csc-tabs-nav::-webkit-scrollbar {
	display: none !important;
}

.csc-tab-btn {
	flex-shrink: 0 !important;
}

@media (max-width: 768px) {
	.csc-dashboard-header {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 14px !important;
	}

	.csc-stats-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}

	.csc-form-row {
		flex-direction: column !important;
	}

	.csc-form-group {
		width: 100% !important;
	}

	.csc-modal-dialog {
		max-width: 94vw !important;
		margin: 20px auto !important;
	}
}

@media (max-width: 480px) {
	.csc-stats-grid {
		grid-template-columns: 1fr !important;
	}

	.csc-tab-btn {
		font-size: 13px !important;
		padding: 8px 12px !important;
	}
}

/* Priority 4.3: Timetable Cell Select Dropdowns - High Contrast & Crisp White */
select.csc-tt-cell,
.csc-custom-table select,
.csc-custom-table td select,
#cscTeacherTimetableBody select {
	background-color: #FFFFFF !important;
	background: #FFFFFF !important;
	color: #0F172A !important;
	-webkit-text-fill-color: #0F172A !important;
	border: 1.5px solid #CBD5E1 !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 8px 10px !important;
}

select.csc-tt-cell option,
.csc-custom-table select option {
	background-color: #FFFFFF !important;
	color: #0F172A !important;
	-webkit-text-fill-color: #0F172A !important;
}

select.csc-tt-cell:focus,
.csc-custom-table select:focus {
	border-color: #0284C7 !important;
	box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
	outline: none !important;
}

/* ==========================================================================
   Mobile Responsive Fixes for Student, Teacher & Parent Portals
   ========================================================================== */
@media (max-width: 768px) {
	.csc-portal-banner {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		padding: 24px 18px !important;
		gap: 18px !important;
	}

	.csc-student-profile-header {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		width: 100% !important;
		gap: 14px !important;
	}

	.csc-student-avatar {
		margin: 0 auto !important;
	}

	.csc-student-title {
		width: 100% !important;
	}

	.csc-student-title h2 {
		font-size: 20px !important;
		margin-bottom: 12px !important;
	}

	.csc-meta-tags {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 8px !important;
		width: 100% !important;
	}

	.csc-meta-tags .badge {
		font-size: 11.5px !important;
		padding: 4px 10px !important;
		white-space: nowrap !important;
	}

	.csc-portal-logout {
		width: 100% !important;
		text-align: center !important;
		margin-top: 6px !important;
	}

	.csc-btn-logout {
		display: inline-block !important;
		width: 100% !important;
		max-width: 220px !important;
		text-align: center !important;
		padding: 10px 16px !important;
	}

	/* Scrollable table container for mobile without crushing columns */
	.csc-tab-content {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.csc-custom-table {
		min-width: 580px !important;
		font-size: 13.5px !important;
	}

	.csc-custom-table th,
	.csc-custom-table td {
		padding: 10px 12px !important;
		white-space: nowrap !important;
	}

	/* Timetable responsive grid */
	.csc-timetable-wrap {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		padding-bottom: 10px !important;
	}

	.csc-timetable-wrap table {
		min-width: 640px !important;
	}
}

/* ==========================================================================
   Universal Select & Combobox Styling for Portals (Fix Arabic Text Vertical Clipping)
   ========================================================================== */
.csc-select,
select.csc-select,
.csc-form-group select,
.csc-field select,
.csc-portal-filter-card select,
.csc-teacher-lessons-filter-bar select {
	height: 38px !important;
	min-height: 38px !important;
	line-height: normal !important;
	font-size: 13.5px !important;
	font-family: inherit !important;
	color: #1e293b !important;
	background-color: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	padding-top: 4px !important;
	padding-bottom: 4px !important;
	padding-inline-start: 12px !important;
	padding-inline-end: 28px !important;
	box-sizing: border-box !important;
	vertical-align: middle !important;
}

body.rtl .csc-select,
body.rtl select.csc-select,
body.rtl .csc-form-group select,
body.rtl .csc-field select,
body.rtl .csc-portal-filter-card select,
body.rtl .csc-teacher-lessons-filter-bar select {
	padding-right: 12px !important;
	padding-left: 28px !important;
	background-position: left 10px center !important;
}

body:not(.rtl) .csc-select,
body:not(.rtl) select.csc-select,
body:not(.rtl) .csc-form-group select,
body:not(.rtl) .csc-field select,
body:not(.rtl) .csc-portal-filter-card select,
body:not(.rtl) .csc-teacher-lessons-filter-bar select {
	padding-left: 12px !important;
	padding-right: 28px !important;
	background-position: right 10px center !important;
}

/* ==========================================================================
   Multi-Child Admissions Repeater & Mobile Optimization
   ========================================================================== */
.csc-child-card {
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: all 0.25s ease;
}

.csc-child-card:hover {
	border-color: #cbd5e1;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

.csc-child-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #f1f5f9;
}

.csc-child-card-header h4 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
	color: #0f172a;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.csc-child-badge {
	background: #e0f2fe;
	color: #0052cc;
	font-size: 0.78rem;
	font-weight: 800;
	padding: 3px 9px;
	border-radius: 9999px;
	display: inline-block;
}

.csc-btn-add-child {
	min-height: 48px !important;
	font-size: 0.95rem !important;
	transition: all 0.2s ease !important;
}

.csc-btn-add-child:hover {
	background: #e0edff !important;
	border-color: #0040a8 !important;
	transform: translateY(-1px);
}

.csc-btn-remove-child {
	min-height: 38px;
	transition: all 0.15s ease;
}

.csc-btn-remove-child:hover {
	background: #fecaca !important;
	border-color: #f87171 !important;
}

/* Responsive Form Adjustments for Small Screens */
@media (max-width: 640px) {
	.csc-child-card {
		padding: 14px;
	}

	.csc-child-card-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.csc-child-card-header .csc-btn-remove-child {
		width: 100%;
		justify-content: center;
	}

	.csc-btn-next,
	.csc-btn-prev,
	.csc-btn-add-child,
	#cscSubmitAppBtn,
	#cscSubmitTeacherAppBtn {
		min-height: 48px !important;
		padding: 12px 16px !important;
		font-size: 0.98rem !important;
	}

	.csc-form-row {
		display: flex !important;
		flex-direction: column !important;
		gap: 14px !important;
	}

	.csc-field input,
	.csc-field select,
	.csc-field textarea {
		min-height: 46px !important;
		font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
	}
}

/* ==========================================================================
   Forced Password Change Modal
   ========================================================================== */
.csc-force-pwd-modal-overlay {
	animation: cscFadeIn 0.3s ease;
}

.csc-force-pwd-card {
	animation: cscSlideUp 0.35s ease;
}

@keyframes cscFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes cscSlideUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Priority Color & Contrast Overhaul for Public Forms
   (/student-register/, /انضمام-الكادر-التعليمي/, /apply/)
   ========================================================================== */
.csc-recruitment-wrap,
.csc-student-register-container,
.csc-admission-wrapper {
	background-color: #ffffff !important;
	color: #0f172a !important;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07) !important;
	border: 1px solid #e2e8f0 !important;
}

.csc-recruitment-wrap h2,
.csc-student-register-container h2,
.csc-admission-wrapper h2,
.csc-recruitment-wrap h3,
.csc-student-register-container h3,
.csc-admission-wrapper h3,
.csc-recruitment-wrap h4,
.csc-student-register-container h4,
.csc-admission-wrapper h4 {
	color: #0f172a !important;
	font-weight: 800 !important;
}

.csc-recruitment-wrap p,
.csc-student-register-container p,
.csc-admission-wrapper p {
	color: #475569 !important;
}

.csc-recruitment-wrap label,
.csc-student-register-container label,
.csc-admission-wrapper label,
.csc-field label {
	color: #0f172a !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	display: block !important;
	margin-bottom: 6px !important;
}

.csc-recruitment-wrap input[type="text"],
.csc-recruitment-wrap input[type="email"],
.csc-recruitment-wrap input[type="tel"],
.csc-recruitment-wrap input[type="date"],
.csc-recruitment-wrap input[type="password"],
.csc-recruitment-wrap select,
.csc-recruitment-wrap textarea,
.csc-student-register-container input[type="text"],
.csc-student-register-container input[type="email"],
.csc-student-register-container input[type="tel"],
.csc-student-register-container input[type="date"],
.csc-student-register-container input[type="password"],
.csc-student-register-container select,
.csc-student-register-container textarea,
.csc-admission-wrapper input[type="text"],
.csc-admission-wrapper input[type="email"],
.csc-admission-wrapper input[type="tel"],
.csc-admission-wrapper input[type="date"],
.csc-admission-wrapper input[type="password"],
.csc-admission-wrapper select,
.csc-admission-wrapper textarea,
.csc-field input,
.csc-field select,
.csc-field textarea {
	color: #0f172a !important;
	-webkit-text-fill-color: #0f172a !important;
	background-color: #ffffff !important;
	border: 1.5px solid #cbd5e1 !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	font-family: inherit !important;
	box-sizing: border-box !important;
	min-height: 48px !important;
	line-height: 1.5 !important;
	opacity: 1 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.csc-recruitment-wrap input:focus,
.csc-recruitment-wrap select:focus,
.csc-recruitment-wrap textarea:focus,
.csc-student-register-container input:focus,
.csc-student-register-container select:focus,
.csc-student-register-container textarea:focus,
.csc-admission-wrapper input:focus,
.csc-admission-wrapper select:focus,
.csc-admission-wrapper textarea:focus,
.csc-field input:focus,
.csc-field select:focus,
.csc-field textarea:focus {
	border-color: #1d4ed8 !important;
	box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15) !important;
	outline: none !important;
	background-color: #ffffff !important;
}

.csc-recruitment-wrap select option,
.csc-student-register-container select option,
.csc-admission-wrapper select option,
.csc-field select option {
	background-color: #ffffff !important;
	color: #0f172a !important;
	-webkit-text-fill-color: #0f172a !important;
	font-size: 15px !important;
	padding: 8px 10px !important;
}

.csc-recruitment-wrap select optgroup,
.csc-student-register-container select optgroup,
.csc-admission-wrapper select optgroup,
.csc-field select optgroup {
	background-color: #f1f5f9 !important;
	color: #1e40af !important;
	-webkit-text-fill-color: #1e40af !important;
	font-weight: 800 !important;
	font-size: 13.5px !important;
	padding: 8px 10px !important;
}

.csc-recruitment-wrap ::placeholder,
.csc-student-register-container ::placeholder,
.csc-admission-wrapper ::placeholder,
.csc-field ::placeholder {
	color: #64748b !important;
	-webkit-text-fill-color: #64748b !important;
	opacity: 1 !important;
}

/* ==========================================================================
   CSC DARK MODE STYLES FOR PORTALS & FORMS
   ========================================================================== */
html.city-dark-mode,
html[data-theme="dark"],
body.city-dark-mode {
	--csc-bg: #0b0f19;
	--csc-card-bg: #111827;
	--csc-border: #1e293b;
	--csc-text-main: #f8fafc;
	--csc-text-muted: #94a3b8;
}

html.city-dark-mode .csc-portal-container,
html[data-theme="dark"] .csc-portal-container {
	color: #f8fafc;
}

html.city-dark-mode .csc-portal-banner,
html[data-theme="dark"] .csc-portal-banner {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
	border: 1px solid #334155 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

html.city-dark-mode .csc-portal-tabs,
html[data-theme="dark"] .csc-portal-tabs {
	border-bottom: 2px solid #1e293b !important;
}

html.city-dark-mode .csc-tab-btn,
html[data-theme="dark"] .csc-tab-btn {
	background: #111827 !important;
	color: #94a3b8 !important;
	border: 1px solid #1e293b !important;
}

html.city-dark-mode .csc-tab-btn:hover,
html[data-theme="dark"] .csc-tab-btn:hover {
	background: #1e293b !important;
	color: #f8fafc !important;
}

html.city-dark-mode .csc-tab-btn.active,
html[data-theme="dark"] .csc-tab-btn.active {
	background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
	color: #ffffff !important;
	border-color: #38bdf8 !important;
	box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
}

html.city-dark-mode .csc-card,
html.city-dark-mode .csc-panel,
html.city-dark-mode .csc-table-container,
html.city-dark-mode .csc-stat-card,
html.city-dark-mode .csc-dashboard-stat,
html.city-dark-mode .csc-form-step,
html.city-dark-mode .csc-kpi-card,
html.city-dark-mode .csc-portal-box,
html.city-dark-mode .csc-profile-section,
html.city-dark-mode .csc-profile-card,
html.city-dark-mode .csc-security-card,
html.city-dark-mode .csc-form-card,
html.city-dark-mode .csc-box,
html.city-dark-mode .csc-student-register-container,
html.city-dark-mode .csc-recruitment-wrap,
html.city-dark-mode .csc-admission-wrapper,
html[data-theme="dark"] .csc-card,
html[data-theme="dark"] .csc-panel,
html[data-theme="dark"] .csc-table-container,
html[data-theme="dark"] .csc-stat-card,
html[data-theme="dark"] .csc-dashboard-stat,
html[data-theme="dark"] .csc-form-step,
html[data-theme="dark"] .csc-kpi-card,
html[data-theme="dark"] .csc-portal-box,
html[data-theme="dark"] .csc-profile-section,
html[data-theme="dark"] .csc-profile-card,
html[data-theme="dark"] .csc-security-card,
html[data-theme="dark"] .csc-form-card,
html[data-theme="dark"] .csc-box,
html[data-theme="dark"] .csc-student-register-container,
html[data-theme="dark"] .csc-recruitment-wrap,
html[data-theme="dark"] .csc-admission-wrapper {
	background: #111827 !important;
	border: 1px solid #1e293b !important;
	color: #f8fafc !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

html.city-dark-mode .csc-student-register-container div[style*="padding: 18px"],
html.city-dark-mode .csc-student-register-container div[style*="padding: 20px"],
html.city-dark-mode .csc-recruitment-wrap div[style*="padding: 18px"],
html.city-dark-mode .csc-recruitment-wrap div[style*="padding: 20px"],
html[data-theme="dark"] .csc-student-register-container div[style*="padding: 18px"],
html[data-theme="dark"] .csc-student-register-container div[style*="padding: 20px"],
html[data-theme="dark"] .csc-recruitment-wrap div[style*="padding: 18px"],
html[data-theme="dark"] .csc-recruitment-wrap div[style*="padding: 20px"] {
	background: #1e293b !important;
	border-color: #334155 !important;
}

html.city-dark-mode .csc-kpi-card .kpi-num,
html[data-theme="dark"] .csc-kpi-card .kpi-num {
	color: #38bdf8 !important;
}
html.city-dark-mode .csc-kpi-card .kpi-label,
html[data-theme="dark"] .csc-kpi-card .kpi-label {
	color: #94a3b8 !important;
}

html.city-dark-mode .csc-portal-box h3,
html[data-theme="dark"] .csc-portal-box h3 {
	color: #f8fafc !important;
	border-bottom-color: #1e293b !important;
}

html.city-dark-mode .csc-data-table,
html[data-theme="dark"] .csc-data-table {
	background: transparent !important;
}
html.city-dark-mode .csc-data-table th,
html[data-theme="dark"] .csc-data-table th {
	background: #1e293b !important;
	color: #cbd5e1 !important;
	border-color: #334155 !important;
}
html.city-dark-mode .csc-data-table td,
html[data-theme="dark"] .csc-data-table td {
	background: #111827 !important;
	color: #f8fafc !important;
	border-color: #1e293b !important;
}

/* Incentive Engagement Banner */
html.city-dark-mode .csc-incentive-card,
html[data-theme="dark"] .csc-incentive-card {
	background: linear-gradient(135deg, #1e1b4b 0%, #311042 50%, #1e1b4b 100%) !important;
	border: 1.5px solid #a21caf !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
html.city-dark-mode .csc-incentive-card h3,
html[data-theme="dark"] .csc-incentive-card h3 {
	color: #f0abfc !important;
}
html.city-dark-mode .csc-incentive-card p,
html[data-theme="dark"] .csc-incentive-card p {
	color: #e9d5ff !important;
}
html.city-dark-mode .csc-incentive-card div[style*="background: rgba(255, 255, 255"],
html.city-dark-mode .csc-incentive-card div[style*="background:rgba(255,255,255"],
html[data-theme="dark"] .csc-incentive-card div[style*="background: rgba(255, 255, 255"],
html[data-theme="dark"] .csc-incentive-card div[style*="background:rgba(255,255,255"] {
	background: rgba(15, 23, 42, 0.85) !important;
	border-color: #a21caf !important;
	color: #f5d0fe !important;
}
html.city-dark-mode .csc-incentive-card a[style*="background: #ffffff"],
html.city-dark-mode .csc-incentive-card a[style*="background:#ffffff"],
html[data-theme="dark"] .csc-incentive-card a[style*="background: #ffffff"],
html[data-theme="dark"] .csc-incentive-card a[style*="background:#ffffff"] {
	background: #111827 !important;
	border-color: #334155 !important;
}

/* Timetable and Tables High Contrast in Dark Mode */
html.city-dark-mode .csc-timetable-container,
html[data-theme="dark"] .csc-timetable-container {
	background: #0f172a !important;
	border-color: #334155 !important;
}

html.city-dark-mode .csc-custom-table,
html[data-theme="dark"] .csc-custom-table {
	background: #0f172a !important;
	border-color: #334155 !important;
}

html.city-dark-mode .csc-custom-table th,
html[data-theme="dark"] .csc-custom-table th {
	background: #1e293b !important;
	color: #38bdf8 !important;
	border-color: #334155 !important;
	font-weight: 800 !important;
}

html.city-dark-mode .csc-custom-table td,
html[data-theme="dark"] .csc-custom-table td {
	background: #0f172a !important;
	color: #f8fafc !important;
	border-color: #1e293b !important;
}

html.city-dark-mode .csc-custom-table td strong,
html[data-theme="dark"] .csc-custom-table td strong {
	color: #38bdf8 !important;
}

html.city-dark-mode .csc-custom-table td span,
html.city-dark-mode .csc-timetable-cell-name,
html[data-theme="dark"] .csc-custom-table td span,
html[data-theme="dark"] .csc-timetable-cell-name {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	font-weight: 700 !important;
}

html.city-dark-mode .csc-custom-table tr:hover td,
html[data-theme="dark"] .csc-custom-table tr:hover td {
	background: #1e293b !important;
}

/* Empty States & Panels in Dark Mode (Fix White-on-White) */
html.city-dark-mode .csc-empty-state,
html.city-dark-mode .csc-homework-empty-state,
html[data-theme="dark"] .csc-empty-state,
html[data-theme="dark"] .csc-homework-empty-state {
	background: #1e293b !important;
	border: 1.5px dashed #334155 !important;
	color: #94a3b8 !important;
}

html.city-dark-mode .csc-empty-state p,
html.city-dark-mode .csc-homework-empty-state p,
html.city-dark-mode .csc-hw-empty-desc,
html[data-theme="dark"] .csc-empty-state p,
html[data-theme="dark"] .csc-homework-empty-state p,
html[data-theme="dark"] .csc-hw-empty-desc {
	color: #94a3b8 !important;
}

html.city-dark-mode .csc-empty-state h4,
html.city-dark-mode .csc-homework-empty-state h4,
html.city-dark-mode .csc-hw-empty-title,
html[data-theme="dark"] .csc-empty-state h4,
html[data-theme="dark"] .csc-homework-empty-state h4,
html[data-theme="dark"] .csc-hw-empty-title {
	color: #f8fafc !important;
}

/* Homework Cards in Dark Mode */
html.city-dark-mode .csc-hw-card,
html[data-theme="dark"] .csc-hw-card {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #f8fafc !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html.city-dark-mode .csc-hw-card h4,
html.city-dark-mode .csc-hw-card h5,
html[data-theme="dark"] .csc-hw-card h4,
html[data-theme="dark"] .csc-hw-card h5 {
	color: #f8fafc !important;
}

html.city-dark-mode .csc-hw-card div,
html[data-theme="dark"] .csc-hw-card div {
	color: #cbd5e1 !important;
}

html.city-dark-mode .csc-hw-desc-box,
html[data-theme="dark"] .csc-hw-desc-box {
	background: #0f172a !important;
	color: #f8fafc !important;
	border-right-color: #38bdf8 !important;
}

/* Class Cards in Dark Mode */
html.city-dark-mode .csc-class-card,
html[data-theme="dark"] .csc-class-card,
body.city-dark-mode .csc-class-card {
	background: #1e293b !important;
	border: 1px solid #334155 !important;
	color: #f8fafc !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
html.city-dark-mode .csc-class-card h3,
html.city-dark-mode .csc-class-card h4,
html.city-dark-mode .csc-class-card h5,
html.city-dark-mode .csc-class-card .csc-class-name,
html[data-theme="dark"] .csc-class-card h3,
html[data-theme="dark"] .csc-class-card h4,
html[data-theme="dark"] .csc-class-card h5,
html[data-theme="dark"] .csc-class-card .csc-class-name {
	color: #f8fafc !important;
}
html.city-dark-mode .csc-class-card p,
html[data-theme="dark"] .csc-class-card p {
	color: #cbd5e1 !important;
}
html.city-dark-mode .csc-class-card p strong,
html[data-theme="dark"] .csc-class-card p strong {
	color: #f1f5f9 !important;
}
html.city-dark-mode .csc-class-card .csc-count-badge,
html[data-theme="dark"] .csc-class-card .csc-count-badge {
	background: #0f172a !important;
	color: #38bdf8 !important;
	border: 1px solid #334155 !important;
}
html.city-dark-mode .csc-class-card div[style*="border-top"],
html.city-dark-mode .csc-class-card .csc-class-card-footer,
html[data-theme="dark"] .csc-class-card div[style*="border-top"],
html[data-theme="dark"] .csc-class-card .csc-class-card-footer {
	border-top-color: #334155 !important;
}

/* Portal Cards, HOD Sections & Filter Bars in Dark Mode */
html.city-dark-mode .csc-portal-card,
html.city-dark-mode .csc-hod-card,
html.city-dark-mode .csc-portal-filter-card,
html.city-dark-mode .csc-hod-students-filter-bar,
html.city-dark-mode .csc-student-guardian-box,
html.city-dark-mode .csc-portal-container div[style*="background: #f8fafc"],
html.city-dark-mode .csc-portal-container div[style*="background:#f8fafc"],
html.city-dark-mode .csc-portal-container div[style*="background: #ffffff"],
html.city-dark-mode .csc-portal-container div[style*="background:#ffffff"],
html.city-dark-mode .csc-portal-container div[style*="background: #fff"],
html.city-dark-mode .csc-portal-container div[style*="background:#fff"],
html.city-dark-mode .csc-portal-container div[style*="background: #f1f5f9"],
html.city-dark-mode .csc-portal-container div[style*="background:#f1f5f9"],
html[data-theme="dark"] .csc-portal-card,
html[data-theme="dark"] .csc-hod-card,
html[data-theme="dark"] .csc-portal-filter-card,
html[data-theme="dark"] .csc-hod-students-filter-bar,
html[data-theme="dark"] .csc-student-guardian-box,
html[data-theme="dark"] .csc-portal-container div[style*="background: #f8fafc"],
html[data-theme="dark"] .csc-portal-container div[style*="background:#f8fafc"],
html[data-theme="dark"] .csc-portal-container div[style*="background: #ffffff"],
html[data-theme="dark"] .csc-portal-container div[style*="background:#ffffff"],
html[data-theme="dark"] .csc-portal-container div[style*="background: #fff"],
html[data-theme="dark"] .csc-portal-container div[style*="background:#fff"],
html[data-theme="dark"] .csc-portal-container div[style*="background: #f1f5f9"],
html[data-theme="dark"] .csc-portal-container div[style*="background:#f1f5f9"] {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #f8fafc !important;
}

html.city-dark-mode .csc-hod-section-title,
html[data-theme="dark"] .csc-hod-section-title {
	color: #f8fafc !important;
}

html.city-dark-mode .csc-modal-dialog,
html[data-theme="dark"] .csc-modal-dialog {
	background: #1e293b !important;
	color: #f8fafc !important;
	border: 1px solid #334155 !important;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}
html.city-dark-mode .csc-modal-dialog h3,
html.city-dark-mode .csc-modal-dialog h4,
html.city-dark-mode .csc-modal-dialog strong,
html[data-theme="dark"] .csc-modal-dialog h3,
html[data-theme="dark"] .csc-modal-dialog h4,
html[data-theme="dark"] .csc-modal-dialog strong {
	color: #f8fafc !important;
}

/* Department Students Table in Light & Dark Mode */
.csc-hod-student-row td {
	color: #0f172a;
}
.csc-hod-student-row code {
	background: #f1f5f9;
	border: 1px solid #cbd5e1;
	color: #0369a1;
}

html.city-dark-mode .csc-hod-student-row,
html[data-theme="dark"] .csc-hod-student-row {
	border-bottom-color: #334155 !important;
}
html.city-dark-mode .csc-hod-student-row td,
html.city-dark-mode .csc-hod-student-name,
html.city-dark-mode .csc-guardian-name,
html.city-dark-mode .csc-guardian-phone,
html[data-theme="dark"] .csc-hod-student-row td,
html[data-theme="dark"] .csc-hod-student-name,
html[data-theme="dark"] .csc-guardian-name,
html[data-theme="dark"] .csc-guardian-phone {
	color: #f8fafc !important;
}
html.city-dark-mode .csc-hod-student-row code,
html[data-theme="dark"] .csc-hod-student-row code {
	background: #0f172a !important;
	color: #38bdf8 !important;
	border-color: #334155 !important;
}

/* CLMS Lessons Filter Bar & Pills */
html.city-dark-mode .csc-student-lessons-filter,
html[data-theme="dark"] .csc-student-lessons-filter {
	background: #1e293b !important;
	border-color: #334155 !important;
}

html.city-dark-mode .csc-student-lessons-filter span,
html[data-theme="dark"] .csc-student-lessons-filter span {
	color: #f8fafc !important;
}

html.city-dark-mode .csc-student-sub-pill,
html[data-theme="dark"] .csc-student-sub-pill {
	background: #0f172a !important;
	color: #cbd5e1 !important;
	border-color: #334155 !important;
}

html.city-dark-mode .csc-student-sub-pill.active,
html[data-theme="dark"] .csc-student-sub-pill.active {
	background: #0284c7 !important;
	color: #ffffff !important;
	border-color: #0284c7 !important;
}

html.city-dark-mode .csc-student-lesson-item,
html[data-theme="dark"] .csc-student-lesson-item {
	background: #1e293b !important;
	border-color: #334155 !important;
}

html.city-dark-mode .csc-student-lesson-item h4,
html.city-dark-mode .csc-student-lesson-item h4 button,
html[data-theme="dark"] .csc-student-lesson-item h4,
html[data-theme="dark"] .csc-student-lesson-item h4 button {
	color: #38bdf8 !important;
}

html.city-dark-mode .csc-student-lesson-item p,
html[data-theme="dark"] .csc-student-lesson-item p {
	color: #cbd5e1 !important;
}

html.city-dark-mode .csc-portal-logout,
html[data-theme="dark"] .csc-portal-logout {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

html.city-dark-mode .csc-portal-theme-toggle,
html[data-theme="dark"] .csc-portal-theme-toggle {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	background: rgba(255, 255, 255, 0.12) !important;
	color: #fbbf24 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	font-size: 16px !important;
}

html.city-dark-mode .csc-btn-logout,
html[data-theme="dark"] .csc-btn-logout {
	background: rgba(225, 29, 72, 0.15) !important;
	border-color: rgba(225, 29, 72, 0.35) !important;
	color: #fda4af !important;
}

html.city-dark-mode .csc-btn-logout:hover,
html[data-theme="dark"] .csc-btn-logout:hover {
	background: #e11d48 !important;
	color: #ffffff !important;
}

/* Selects and Table Form Controls in Dark Mode */
html.city-dark-mode select.csc-tt-cell,
html.city-dark-mode .csc-custom-table select,
html.city-dark-mode .csc-custom-table td select,
html.city-dark-mode #cscTeacherTimetableBody select,
html[data-theme="dark"] select.csc-tt-cell,
html[data-theme="dark"] .csc-custom-table select,
html[data-theme="dark"] .csc-custom-table td select,
html[data-theme="dark"] #cscTeacherTimetableBody select {
	background-color: #1e293b !important;
	background: #1e293b !important;
	color: #f8fafc !important;
	-webkit-text-fill-color: #f8fafc !important;
	border-color: #334155 !important;
}
html.city-dark-mode select.csc-tt-cell option,
html.city-dark-mode .csc-custom-table select option,
html[data-theme="dark"] select.csc-tt-cell option,
html[data-theme="dark"] .csc-custom-table select option {
	background-color: #1e293b !important;
	color: #f8fafc !important;
	-webkit-text-fill-color: #f8fafc !important;
}

/* All Form Controls in Dark Mode */
html.city-dark-mode input[type="text"],
html.city-dark-mode input[type="password"],
html.city-dark-mode input[type="email"],
html.city-dark-mode input[type="number"],
html.city-dark-mode input[type="tel"],
html.city-dark-mode input[type="date"],
html.city-dark-mode textarea,
html.city-dark-mode select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
	background-color: #1e293b !important;
	color: #f8fafc !important;
	-webkit-text-fill-color: #f8fafc !important;
	border-color: #334155 !important;
}

html.city-dark-mode label,
html[data-theme="dark"] label {
	color: #e2e8f0 !important;
}

html.city-dark-mode option,
html[data-theme="dark"] option {
	background-color: #1e293b !important;
	color: #f8fafc !important;
	-webkit-text-fill-color: #f8fafc !important;
}

html.city-dark-mode optgroup,
html[data-theme="dark"] optgroup {
	background-color: #0f172a !important;
	color: #38bdf8 !important;
	-webkit-text-fill-color: #38bdf8 !important;
}

/* Login Card in Dark Mode */
html.city-dark-mode .csc-login-card,
html[data-theme="dark"] .csc-login-card {
	background: #111827 !important;
	border: 1.5px solid #1e293b !important;
	color: #f8fafc !important;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5) !important;
}
html.city-dark-mode .csc-login-card h2,
html.city-dark-mode .csc-login-card h3,
html[data-theme="dark"] .csc-login-card h2,
html[data-theme="dark"] .csc-login-card h3 {
	color: #ffffff !important;
}
html.city-dark-mode .csc-login-card p,
html[data-theme="dark"] .csc-login-card p {
	color: #94a3b8 !important;
}
html.city-dark-mode .csc-login-card form label,
html[data-theme="dark"] .csc-login-card form label {
	color: #cbd5e1 !important;
}
html.city-dark-mode .csc-login-card form input[type="text"],
html.city-dark-mode .csc-login-card form input[type="password"],
html.city-dark-mode .csc-login-card #user_login,
html.city-dark-mode .csc-login-card #user_pass,
html[data-theme="dark"] .csc-login-card form input[type="text"],
html[data-theme="dark"] .csc-login-card form input[type="password"],
html[data-theme="dark"] .csc-login-card #user_login,
html[data-theme="dark"] .csc-login-card #user_pass {
	background: #0f172a !important;
	background-color: #0f172a !important;
	color: #f8fafc !important;
	-webkit-text-fill-color: #f8fafc !important;
	border: 1.5px solid #334155 !important;
}
html.city-dark-mode .csc-login-card form input[type="text"]:focus,
html.city-dark-mode .csc-login-card form input[type="password"]:focus,
html[data-theme="dark"] .csc-login-card form input[type="text"]:focus,
html[data-theme="dark"] .csc-login-card form input[type="password"]:focus {
	border-color: #38bdf8 !important;
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
	background: #0f172a !important;
	background-color: #0f172a !important;
	color: #f8fafc !important;
	-webkit-text-fill-color: #f8fafc !important;
}

/* ==========================================================================
   CSC MOBILE RESPONSIVE AUDIT & DIMENSION SAFEGUARDS
   ========================================================================== */
@media (max-width: 768px) {
	.csc-student-register-container,
	.csc-recruitment-wrap,
	.csc-admission-wrapper,
	.csc-portal-container,
	.csc-login-card {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		margin-left: auto !important;
		margin-right: auto !important;
		border-radius: 14px !important;
	}

	.csc-student-register-container,
	.csc-recruitment-wrap,
	.csc-admission-wrapper {
		padding: 18px 14px !important;
		margin-top: 14px !important;
		margin-bottom: 30px !important;
	}

	.csc-login-card {
		padding: 24px 16px 20px !important;
	}

	.csc-student-register-container div[style*="padding: 18px"],
	.csc-student-register-container div[style*="padding: 20px"],
	.csc-recruitment-wrap div[style*="padding: 18px"],
	.csc-recruitment-wrap div[style*="padding: 20px"],
	.csc-admission-wrapper div[style*="padding: 18px"] {
		padding: 14px 10px !important;
		margin-bottom: 16px !important;
		border-radius: 10px !important;
	}

	.csc-student-register-container div[style*="display: grid"],
	.csc-recruitment-wrap div[style*="display: grid"],
	.csc-admission-wrapper div[style*="display: grid"],
	.csc-grid-2,
	.csc-grid-3,
	.csc-grid-4,
	.csc-form-grid,
	.csc-class-adder-grid,
	.csc-leadership-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	.csc-lead-class-picker-row {
		flex-direction: column !important;
		gap: 8px !important;
	}

	.csc-lead-class-picker-row button,
	.csc-class-adder-grid button,
	.csc-manual-subj-row button {
		width: 100% !important;
		min-height: 44px !important;
		justify-content: center !important;
	}

	.csc-manual-subj-row {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 8px !important;
	}

	.csc-manual-subj-row span {
		white-space: normal !important;
	}

	.csc-student-register-container input[type="text"],
	.csc-student-register-container input[type="email"],
	.csc-student-register-container input[type="tel"],
	.csc-student-register-container input[type="date"],
	.csc-student-register-container input[type="password"],
	.csc-student-register-container select,
	.csc-student-register-container textarea,
	.csc-recruitment-wrap input[type="text"],
	.csc-recruitment-wrap input[type="email"],
	.csc-recruitment-wrap input[type="tel"],
	.csc-recruitment-wrap select,
	.csc-recruitment-wrap textarea,
	.csc-admission-wrapper input,
	.csc-admission-wrapper select,
	.csc-admission-wrapper textarea,
	.csc-form-control,
	.csc-select,
	.csc-input {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 44px !important;
		height: 44px !important;
		padding: 8px 12px !important;
		font-size: 13.5px !important;
		border-radius: 8px !important;
		box-sizing: border-box !important;
	}

	.csc-student-register-container textarea,
	.csc-recruitment-wrap textarea,
	.csc-admission-wrapper textarea {
		min-height: 85px !important;
		height: auto !important;
		line-height: 1.5 !important;
	}

	.csc-student-register-container select,
	.csc-recruitment-wrap select,
	.csc-admission-wrapper select {
		padding-inline-start: 10px !important;
		padding-inline-end: 28px !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
		overflow: hidden !important;
	}

	.csc-student-register-container label,
	.csc-recruitment-wrap label,
	.csc-admission-wrapper label {
		font-size: 13px !important;
		margin-bottom: 5px !important;
		line-height: 1.4 !important;
	}

	.csc-step-pill {
		display: inline-flex !important;
		align-items: center !important;
		background: #eff6ff !important;
		color: #1d4ed8 !important;
		font-size: 11px !important;
		font-weight: 800 !important;
		padding: 2px 7px !important;
		border-radius: 10px !important;
		border: 1px solid #bfdbfe !important;
		white-space: nowrap !important;
	}

	.csc-recruitment-wrap input[type="file"],
	.csc-student-register-container input[type="file"],
	.csc-recruitment-file-input,
	.csc-file-input,
	input[type="file"] {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		display: block !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		font-size: 12.5px !important;
		padding: 10px !important;
		min-height: 44px !important;
		height: auto !important;
	}

	.csc-stepper {
		display: flex !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		gap: 10px !important;
		padding: 6px 2px 14px !important;
		margin-bottom: 20px !important;
		scroll-snap-type: x mandatory !important;
	}

	.csc-stepper::before {
		display: none !important;
	}

	.csc-step {
		flex: 0 0 auto !important;
		min-width: 68px !important;
		text-align: center !important;
		scroll-snap-align: center !important;
	}

	.csc-step .step-title {
		font-size: 11px !important;
		white-space: nowrap !important;
		margin-top: 3px !important;
	}

	.csc-step .step-sub {
		display: none !important;
	}

	.csc-step .step-num {
		width: 32px !important;
		height: 32px !important;
		font-size: 12px !important;
		margin: 0 auto !important;
	}

	#cscBtnSubmitTeacher,
	#cscBtnSubmitStudent,
	.csc-btn-submit,
	button[type="submit"].csc-btn {
		width: 100% !important;
		min-height: 48px !important;
		font-size: 15px !important;
		border-radius: 8px !important;
	}
}

@media (max-width: 480px) {
	.csc-student-register-container,
	.csc-recruitment-wrap,
	.csc-admission-wrapper {
		padding: 14px 10px !important;
	}

	.csc-student-register-container div[style*="padding: 18px"],
	.csc-recruitment-wrap div[style*="padding: 18px"] {
		padding: 12px 8px !important;
	}
}

/* Department HOD Tables & Faculty Contrast in Dark Mode */
.csc-table-custom {
	width: 100%;
	border-collapse: collapse;
	text-align: right;
}
.csc-table-custom thead tr,
.csc-table-custom thead tr.csc-table-head-row {
	background: #f1f5f9;
	border-bottom: 2px solid #cbd5e1;
	color: #0f172a;
}
.csc-table-custom th {
	padding: 12px 16px;
	color: #0f172a;
	font-weight: 800;
}
.csc-table-custom td {
	color: #0f172a;
}
.csc-faculty-name,
.csc-lead-teacher-name,
.csc-hod-student-name {
	font-weight: 800;
	font-size: 14.5px;
	color: #0f172a;
}
.csc-faculty-email {
	font-size: 12px;
	font-weight: 600;
	color: #475569;
}
.csc-lead-teacher-meta {
	font-size: 12px;
	color: #475569;
	font-weight: 600;
}
.csc-faculty-code,
.csc-lead-class-name,
.csc-lead-count,
.csc-faculty-subject {
	color: #0f172a;
}
.csc-hod-prompt-box {
	background: #f8fafc;
	border: 1.5px dashed #94a3b8;
	color: #1e293b;
}
.csc-hod-prompt-title {
	color: #0f172a;
}
.csc-hod-prompt-sub {
	color: #475569;
}

html.city-dark-mode .csc-table-custom,
html[data-theme="dark"] .csc-table-custom,
body.city-dark-mode .csc-table-custom {
	color: #f8fafc !important;
}
html.city-dark-mode .csc-table-custom thead tr,
html.city-dark-mode .csc-table-custom thead tr.csc-table-head-row,
html[data-theme="dark"] .csc-table-custom thead tr,
html[data-theme="dark"] .csc-table-custom thead tr.csc-table-head-row,
body.city-dark-mode .csc-table-custom thead tr,
body.city-dark-mode .csc-table-custom thead tr.csc-table-head-row {
	background: #0f172a !important;
	border-bottom: 2px solid #334155 !important;
	color: #38bdf8 !important;
}
html.city-dark-mode .csc-table-custom th,
html[data-theme="dark"] .csc-table-custom th,
body.city-dark-mode .csc-table-custom th {
	background: #0f172a !important;
	color: #38bdf8 !important;
	border-bottom-color: #334155 !important;
}
html.city-dark-mode .csc-table-custom td,
html[data-theme="dark"] .csc-table-custom td,
body.city-dark-mode .csc-table-custom td {
	color: #f8fafc !important;
	border-bottom-color: #1e293b !important;
}
html.city-dark-mode .csc-table-custom tbody tr,
html[data-theme="dark"] .csc-table-custom tbody tr,
body.city-dark-mode .csc-table-custom tbody tr {
	border-bottom-color: #1e293b !important;
}
html.city-dark-mode .csc-faculty-name,
html.city-dark-mode .csc-faculty-name *,
html.city-dark-mode .csc-lead-teacher-name,
html.city-dark-mode .csc-lead-teacher-name *,
html.city-dark-mode .csc-hod-student-name,
html.city-dark-mode .csc-hod-student-name *,
html.city-dark-mode .csc-lead-class-name,
html.city-dark-mode .csc-lead-count,
html.city-dark-mode .csc-faculty-code,
html.city-dark-mode .csc-faculty-subject,
html[data-theme="dark"] .csc-faculty-name,
html[data-theme="dark"] .csc-faculty-name *,
html[data-theme="dark"] .csc-lead-teacher-name,
html[data-theme="dark"] .csc-lead-teacher-name *,
html[data-theme="dark"] .csc-hod-student-name,
html[data-theme="dark"] .csc-hod-student-name *,
html[data-theme="dark"] .csc-lead-class-name,
html[data-theme="dark"] .csc-lead-count,
html[data-theme="dark"] .csc-faculty-code,
html[data-theme="dark"] .csc-faculty-subject,
body.city-dark-mode .csc-faculty-name,
body.city-dark-mode .csc-faculty-name *,
body.city-dark-mode .csc-lead-teacher-name,
body.city-dark-mode .csc-lead-teacher-name *,
body.city-dark-mode .csc-hod-student-name,
body.city-dark-mode .csc-hod-student-name * {
	color: #f8fafc !important;
	-webkit-text-fill-color: #f8fafc !important;
}
html.city-dark-mode .csc-faculty-email,
html.city-dark-mode .csc-lead-teacher-meta,
html[data-theme="dark"] .csc-faculty-email,
html[data-theme="dark"] .csc-lead-teacher-meta,
body.city-dark-mode .csc-faculty-email,
body.city-dark-mode .csc-lead-teacher-meta {
	color: #94a3b8 !important;
	-webkit-text-fill-color: #94a3b8 !important;
}
html.city-dark-mode .csc-faculty-avatar,
html[data-theme="dark"] .csc-faculty-avatar,
body.city-dark-mode .csc-faculty-avatar {
	background: #334155 !important;
	color: #f8fafc !important;
}
html.city-dark-mode .csc-faculty-mail-btn,
html[data-theme="dark"] .csc-faculty-mail-btn,
body.city-dark-mode .csc-faculty-mail-btn {
	color: #38bdf8 !important;
}
html.city-dark-mode .csc-table-custom code,
html[data-theme="dark"] .csc-table-custom code,
body.city-dark-mode .csc-table-custom code {
	background: #0f172a !important;
	color: #38bdf8 !important;
	border-color: #334155 !important;
}
html.city-dark-mode .csc-hod-prompt-box,
html[data-theme="dark"] .csc-hod-prompt-box,
body.city-dark-mode .csc-hod-prompt-box {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #f8fafc !important;
}
html.city-dark-mode .csc-hod-prompt-title,
html[data-theme="dark"] .csc-hod-prompt-title,
body.city-dark-mode .csc-hod-prompt-title {
	color: #f8fafc !important;
}
html.city-dark-mode .csc-hod-prompt-sub,
html[data-theme="dark"] .csc-hod-prompt-sub,
body.city-dark-mode .csc-hod-prompt-sub {
	color: #94a3b8 !important;
}

/* ==========================================================================
   Comprehensive Mobile Responsiveness Across School Portals & Tables
   ========================================================================== */
.csc-table-responsive-wrapper,
.csc-table-responsive,
.csc-table-container,
#cscHodStudentsListWrap,
.csc-tab-content > div[style*="overflow-x"],
.csc-portal-card > div[style*="overflow-x"] {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	width: 100% !important;
	display: block !important;
	position: relative;
}

.csc-scroll-hint {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 700;
	color: #0284c7;
	background: #f0f9ff;
	border: 1px dashed #bae6fd;
	border-radius: 6px;
	padding: 6px 12px;
	margin-bottom: 10px;
}

html.city-dark-mode .csc-scroll-hint,
html[data-theme="dark"] .csc-scroll-hint,
body.city-dark-mode .csc-scroll-hint {
	background: #0f172a !important;
	border-color: #0369a1 !important;
	color: #38bdf8 !important;
}

@media (max-width: 768px) {
	.csc-scroll-hint {
		display: flex !important;
	}

	.csc-portal-card,
	.csc-card,
	.csc-hod-card {
		padding: 14px 12px !important;
		border-radius: 12px !important;
	}

	.csc-table-custom,
	.csc-custom-table,
	.csc-data-table:not(.csc-profile-card .csc-data-table):not(.csc-portal-box .csc-data-table) {
		min-width: 680px !important;
		font-size: 13px !important;
	}

	.csc-table-custom th,
	.csc-table-custom td,
	.csc-custom-table th,
	.csc-custom-table td {
		padding: 10px 12px !important;
		white-space: nowrap !important;
	}

	/* Never wrap codes, phone numbers, buttons or badges on mobile */
	.csc-table-custom code,
	.csc-custom-table code,
	.csc-data-table code,
	.csc-faculty-code code,
	.csc-hod-student-row code,
	span.csc-guardian-phone,
	.csc-lead-teacher-name,
	.csc-faculty-name,
	.csc-hod-student-name {
		white-space: nowrap !important;
	}

	.csc-table-custom code,
	.csc-custom-table code,
	.csc-data-table code {
		display: inline-block !important;
		font-size: 12px !important;
		padding: 3px 8px !important;
	}

	/* Filter bar responsiveness */
	.csc-hod-students-filter-bar {
		padding: 12px !important;
		gap: 10px !important;
	}

	.csc-hod-students-filter-bar > div {
		min-width: 100% !important;
		width: 100% !important;
		flex: 1 1 100% !important;
	}

	.csc-hod-students-filter-bar button {
		width: 100% !important;
		justify-content: center !important;
	}

	/* Modal dialog mobile optimization */
	.csc-modal-dialog {
		width: 95% !important;
		max-width: 95vw !important;
		padding: 16px 14px !important;
	}

	.csc-modal-details-grid {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}

	/* Redundant floating OneSignal bell in mobile portals */
	body.page-template-page-student-portal #onesignal-bell-container,
	body.page-template-page-parent-portal #onesignal-bell-container,
	body.page-template-page-teacher-portal #onesignal-bell-container,
	body.page-template-page-dashboard #onesignal-bell-container,
	.csc-portal-container ~ #onesignal-bell-container {
		display: none !important;
	}
}