/*
 * NCS shared design system.
 * Single source of truth for the "modern" visual language introduced across
 * editUserModal, adminDashboard/teacherDashboard, sidebar, toppers, welcome.
 * Any new page revamp should reuse these tokens/classes instead of
 * redeclaring colors, radii, shadows, chips, switches, badges or buttons
 * inside a page-local <style> block.
 */

:root {
	/* accent */
	--ds-accent: #43d5b1;
	--ds-accent-dark: #2fb996;
	--ds-accent-tint: rgba(67, 213, 177, 0.14);
	--ds-accent-tint-strong: rgba(67, 213, 177, 0.24);

	/* text */
	--ds-text: #2d3748;
	--ds-text-muted: #4a5568;
	--ds-text-faint: #a0aec0;

	/* surfaces */
	--ds-border: #e2e8f0;
	--ds-bg: #f9fbfb;
	--ds-surface: #fff;

	/* radius */
	--ds-radius-sm: 8px;
	--ds-radius-md: 12px;
	--ds-radius-lg: 16px;
	--ds-radius-pill: 999px;

	/* shadow */
	--ds-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
	--ds-shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--ds-shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.2);

	/* multi-color gradient palette used for dashboard quick-link tiles */
	--ds-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--ds-gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	--ds-gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	--ds-gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
	--ds-gradient-5: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
	--ds-gradient-6: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
	--ds-gradient-7: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
	--ds-gradient-8: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
	--ds-gradient-9: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

/* ---------- card / section ---------- */

.ds-card {
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
}

.ds-section {
	background: var(--ds-surface);
	border-radius: var(--ds-radius-lg);
	box-shadow: var(--ds-shadow-card);
	padding: 24px;
	margin-bottom: 24px;
}

.ds-section.compact {
	padding: 16px 20px;
}

.ds-section-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 2px solid #f0f0f0;
}

.ds-section.compact .ds-section-header {
	margin-bottom: 12px;
	padding-bottom: 10px;
}

.ds-section-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--ds-radius-md);
	background: var(--ds-gradient-1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 22px;
	flex-shrink: 0;
}

.ds-section-title {
	font-size: 20px;
	font-weight: 700;
	color: #333;
	margin: 0;
}

.ds-section-subtitle {
	margin: -12px 0 16px;
	color: #999;
	font-size: 13px;
}

.ds-section.compact .ds-section-subtitle {
	margin: -8px 0 10px;
	font-size: 12px;
}

.ds-section-badge {
	margin-left: auto;
	background: #f44336;
	color: #fff;
	border-radius: var(--ds-radius-pill);
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 700;
}

/* ---------- modal header ---------- */

.ds-modal-content {
	border: none;
	border-radius: var(--ds-radius-lg);
	overflow: hidden;
	box-shadow: var(--ds-shadow-modal);
}

.ds-modal-header-gradient {
	background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-dark));
	border: none;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ds-modal-header-gradient .modal-title {
	color: #fff;
	font-weight: 600;
	margin: 0;
}

.ds-modal-header-gradient .modal-title i {
	margin-right: 8px;
}

.ds-modal-header-gradient small {
	color: rgba(255, 255, 255, 0.85);
}

.ds-modal-header-gradient .close {
	color: #fff;
	opacity: 0.85;
	text-shadow: none;
}

.ds-modal-header-gradient .close:hover {
	opacity: 1;
}

.ds-modal-body {
	background: var(--ds-bg);
	padding: 24px;
}

.ds-modal-footer {
	border-top: 1px solid #edf2f7;
	background: #fff;
	padding: 16px 24px;
}

/* ---------- profile / avatar strip ---------- */

.ds-profile-strip {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	padding: 14px 16px;
	margin-bottom: 20px;
}

.ds-avatar {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	background: var(--ds-accent-tint);
	color: var(--ds-accent-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.ds-profile-name {
	font-weight: 600;
	color: var(--ds-text);
	font-size: 15px;
}

.ds-profile-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
}

.ds-profile-meta .ds-meta-muted {
	color: #888;
	font-size: 12px;
}

/* ---------- badge ---------- */

.ds-badge {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ds-accent-dark);
	background: var(--ds-accent-tint);
	padding: 2px 8px;
	border-radius: var(--ds-radius-pill);
}

.ds-badge:empty {
	display: none;
}

.ds-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-right: 6px;
	vertical-align: middle;
}

.ds-tag.tag-warning {
	background: #fff3cd;
	color: #997404;
}

.ds-tag.tag-info {
	background: #cff4fc;
	color: #087990;
}

.ds-tag.tag-success {
	background: var(--ds-accent-tint);
	color: var(--ds-accent-dark);
}

.ds-tag.tag-danger {
	background: #fde2e2;
	color: #c53030;
}

/* ---------- form section / label ---------- */

.ds-form-section {
	margin-bottom: 22px;
}

.ds-form-section:last-child {
	margin-bottom: 0;
}

.ds-label {
	display: block;
	font-weight: 600;
	color: var(--ds-text-muted);
	font-size: 13px;
	letter-spacing: 0.03em;
	margin-bottom: 8px;
}

.ds-label i {
	color: var(--ds-accent);
	margin-right: 6px;
}

.ds-hint {
	display: block;
	color: var(--ds-text-faint);
	font-size: 11px;
	margin-top: 6px;
}

/* ---------- password / input with trailing icon button ---------- */

.ds-input-wrap {
	position: relative;
}

.ds-input-wrap .form-control {
	padding-right: 40px;
}

.ds-input-icon-btn {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: transparent;
	color: var(--ds-text-faint);
	width: 32px;
	height: 32px;
	cursor: pointer;
}

.ds-input-icon-btn:hover {
	color: var(--ds-accent);
}

/* ---------- chip grid (checkbox chips, e.g. role selection) ---------- */

.ds-chip-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}

.ds-chip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
	padding: 10px 32px 10px 12px;
	margin: 0;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ds-chip:hover {
	border-color: var(--ds-accent);
}

.ds-chip input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.ds-chip-check {
	width: 18px;
	height: 18px;
	min-width: 18px;
	border-radius: 5px;
	border: 1.5px solid #cbd5e0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: transparent;
	font-size: 10px;
	transition: all 0.2s ease;
}

.ds-chip-name {
	font-size: 13px;
	color: var(--ds-text);
	font-weight: 500;
	flex: 1;
}

.ds-chip-info {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #cbd5e0;
}

.ds-chip-info:hover {
	color: var(--ds-accent);
}

.ds-chip:has(input:checked) {
	background: var(--ds-accent-tint);
	border-color: var(--ds-accent);
	box-shadow: 0 0 0 3px var(--ds-accent-tint-strong);
}

.ds-chip:has(input:checked) .ds-chip-check {
	background: var(--ds-accent);
	border-color: var(--ds-accent);
	color: #fff;
}

.ds-chip:has(input:focus-visible) {
	outline: 2px solid var(--ds-accent);
	outline-offset: 2px;
}

/* ---------- status row + toggle switch ---------- */

.ds-status-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	padding: 12px 16px;
}

.ds-status-row .ds-label {
	margin-bottom: 0;
}

.ds-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	margin: 0;
}

.ds-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.ds-switch-slider {
	width: 42px;
	height: 24px;
	border-radius: var(--ds-radius-pill);
	background: var(--ds-border);
	position: relative;
	transition: background 0.2s ease;
}

.ds-switch-slider::before {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	top: 3px;
	left: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease;
}

.ds-switch input:checked + .ds-switch-slider {
	background: var(--ds-accent);
}

.ds-switch input:checked + .ds-switch-slider::before {
	transform: translateX(18px);
}

.ds-switch-text {
	margin-left: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ds-text-faint);
}

.ds-switch input:checked ~ .ds-switch-text {
	color: var(--ds-accent-dark);
}

/* ---------- buttons ---------- */

.ds-btn-cancel {
	border: 1px solid var(--ds-border);
	background: #fff;
	color: var(--ds-text-muted);
	border-radius: var(--ds-radius-sm);
	padding: 8px 18px;
	font-weight: 600;
}

.ds-btn-cancel:hover {
	background: #f7fafc;
}

.ds-btn-primary {
	background: var(--ds-accent);
	border: 1px solid var(--ds-accent);
	color: #fff;
	border-radius: var(--ds-radius-sm);
	padding: 8px 20px;
	font-weight: 600;
}

.ds-btn-primary:hover {
	background: var(--ds-accent-dark);
	border-color: var(--ds-accent-dark);
	color: #fff;
}

/* ---------- gradient quick-link tiles (dashboards) ---------- */

.ds-tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 15px;
	margin-bottom: 30px;
}

.ds-gradient-tile {
	background: var(--ds-gradient-1);
	border-radius: var(--ds-radius-md);
	padding: 16px;
	text-align: center;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	text-decoration: none;
	display: block;
	color: #fff;
}

.ds-gradient-tile::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.1);
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.ds-gradient-tile:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: var(--ds-shadow-hover);
	color: #fff;
	text-decoration: none;
}

.ds-gradient-tile:hover::before {
	transform: translateY(0);
}

.ds-gradient-tile.ds-gradient-1 { background: var(--ds-gradient-1); }
.ds-gradient-tile.ds-gradient-2 { background: var(--ds-gradient-2); }
.ds-gradient-tile.ds-gradient-3 { background: var(--ds-gradient-3); }
.ds-gradient-tile.ds-gradient-4 { background: var(--ds-gradient-4); }
.ds-gradient-tile.ds-gradient-5 { background: var(--ds-gradient-5); }
.ds-gradient-tile.ds-gradient-6 { background: var(--ds-gradient-6); }
.ds-gradient-tile.ds-gradient-7 { background: var(--ds-gradient-7); }
.ds-gradient-tile.ds-gradient-8 { background: var(--ds-gradient-8); }
.ds-gradient-tile.ds-gradient-9 { background: var(--ds-gradient-9); }

.ds-tile-icon {
	font-size: 28px;
	margin-bottom: 8px;
	position: relative;
	z-index: 1;
	display: inline-block;
}

.ds-tile-text {
	font-size: 12px;
	font-weight: 600;
	position: relative;
	z-index: 1;
	line-height: 1.3;
}

.ds-tile-notification-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	background: #f44336;
	color: #fff;
	border-radius: 20px;
	padding: 3px 8px;
	font-size: 10px;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(244, 67, 54, 0.4);
	z-index: 2;
	animation: ds-pulse 2s infinite;
}

@keyframes ds-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

/* ---------- list item (e.g. pending tasks, notifications) ---------- */

.ds-list {
	list-style: none;
	padding: 0;
	margin: 0;
	max-height: 350px;
	overflow-y: auto;
}

.ds-list.ds-scroll::-webkit-scrollbar {
	width: 8px;
}

.ds-list.ds-scroll::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 10px;
}

.ds-list.ds-scroll::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 10px;
}

.ds-list-item {
	width: 99%;
	padding: 12px;
	margin-bottom: 12px;
	background: linear-gradient(to right, #f8f9fa, #fff);
	border-radius: 10px;
	border-left: 4px solid #667eea;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ds-list-item:hover {
	background: linear-gradient(to right, #e9ecef, #f8f9fa);
	transform: translateX(6px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ds-list-item a {
	color: #333;
	text-decoration: none;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.ds-list-item a:hover {
	color: #667eea;
}

.ds-list-icon {
	color: #667eea;
	font-size: 18px;
	flex-shrink: 0;
}

/* ---------- empty state ---------- */

.ds-empty-state {
	text-align: center;
	padding: 60px 20px;
	color: #999;
}

.ds-empty-state i {
	font-size: 64px;
	margin-bottom: 20px;
	color: #e0e0e0;
}

.ds-empty-state h4 {
	font-size: 18px;
	color: #666;
	margin: 0;
}

/* ---------- centered auth card (login / password screens) ---------- */

.ds-auth-shell {
	min-height: calc(100vh - 260px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 16px;
}

.ds-auth-card {
	width: 100%;
	max-width: 420px;
	background: var(--ds-surface);
	border-radius: var(--ds-radius-lg);
	box-shadow: var(--ds-shadow-modal);
	overflow: hidden;
}

.ds-auth-header {
	background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-dark));
	padding: 32px 32px 24px;
	text-align: center;
	color: #fff;
}

.ds-auth-header .ds-auth-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.ds-auth-header h1 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 4px;
}

.ds-auth-header p {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
}

.ds-auth-body {
	padding: 28px 32px 32px;
}

.ds-auth-body .form-group {
	margin-bottom: 18px;
}

.ds-auth-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 13px;
	color: var(--ds-text-muted);
}

.ds-auth-remember input {
	margin: 0;
}

.ds-btn-primary.ds-btn-block {
	width: 100%;
	padding: 11px 20px;
	font-size: 14px;
}

/* ---------- bill / list card with header row (fee payment pages) ---------- */

.ds-bill-card {
	margin-bottom: 20px;
}

.ds-bill-card-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 2px solid #f0f0f0;
}

.ds-bill-card-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--ds-text);
}

/* ---------- status modal (success / error confirmation) ---------- */

.ds-status-modal .modal-content {
	padding: 20px;
	font-size: 16px;
	border-radius: var(--ds-radius-sm);
	border: none;
}

.ds-status-modal .modal-header {
	border-bottom: none;
	position: relative;
	text-align: center;
	margin: -20px -20px 0;
	border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0;
	padding: 35px;
}

.ds-status-modal .close {
	position: absolute;
	top: 15px;
	right: 15px;
	color: #fff;
	text-shadow: none;
	opacity: 0.5;
}

.ds-status-modal .modal-body p {
	font-size: 16px;
}

.ds-status-modal.ds-status-success .modal-header {
	background: var(--ds-accent);
}

.ds-status-modal .ds-status-icon {
	color: #fff;
	width: 95px;
	height: 95px;
	display: inline-block;
	border-radius: 50%;
	z-index: 9;
	border: 5px solid #fff;
	padding: 15px;
	text-align: center;
}

.ds-status-modal.ds-status-success .ds-status-icon i {
	font-size: 64px;
	margin: -4px 0 0 -4px;
}

.ds-status-modal.ds-status-error .ds-status-icon i {
	font-size: 110px;
	margin: -4px 0 0 -4px;
	color: #e53e3e;
}

/* ---------- select (shared dropdown focus/hover treatment) ---------- */

.ds-select.form-control {
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ds-select.form-control:hover:not(:disabled) {
	border-color: var(--ds-accent);
}

.ds-select.form-control:focus {
	border-color: var(--ds-accent);
	box-shadow: 0 0 0 3px var(--ds-accent-tint-strong);
	outline: none;
}

/* ---------- table ---------- */

.ds-table {
	margin: 0;
}

.ds-table thead th {
	border-top: none;
	border-bottom: 2px solid #f0f0f0;
	color: #999;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 700;
	padding: 10px 12px;
}

.ds-table tbody td {
	padding: 14px 12px;
	vertical-align: middle;
	border-top: 1px solid #f4f4f4;
}

.ds-table tbody tr {
	transition: background 0.2s ease;
}

.ds-table tbody tr:hover {
	background: #f8f9fa;
}

/* ---------- consistent vertical rhythm ----------
   Pages mix the legacy .page-row block (30px bottom margin, styles-green.css)
   with .ds-section (24px bottom margin) at different nesting depths. These
   rules keep the spacing between stacked content blocks predictable
   regardless of which wrapper (or combination) a given page uses, instead
   of every page needing its own margin tweaks. */

.dashboard-main-content > *:first-child {
	margin-top: 0;
}

.dashboard-main-content > *:last-child,
.page-row > .ds-section:last-child,
.page-row:last-child {
	margin-bottom: 0;
}

/* ---------- alert / callout card ---------- */

.ds-alert-card {
	background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
	border-radius: var(--ds-radius-md);
	padding: 20px;
	margin-bottom: 24px;
	box-shadow: 0 4px 12px rgba(253, 203, 110, 0.3);
}

.ds-alert-card a {
	color: #2d3436;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 12px;
}

.ds-alert-card a:hover {
	color: #000;
}

.ds-alert-icon {
	font-size: 24px;
}