@charset "utf-8";
/* ==========================================================================
   ULTRA-MODERN UI OVERHAUL (GLASS & NEUMORPHISM)
   ========================================================================== */

/** 1. HEADER STYLES (Premium Dark Gradient) **/
.header-color {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
	color: #ffffff;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.schoolinfo-color .school-name {
	color: #f8fafc !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	letter-spacing: -0.5px;
}

.header-color .login-pane a {
	color: #38bdf8 !important;
	background: rgba(56, 189, 248, 0.1);
	padding: 8px 16px;
	border-radius: 30px;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: inline-block;
}

	.header-color .login-pane a:hover {
		background: #38bdf8;
		color: #0f172a !important;
		box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
		transform: translateY(-2px);
		text-decoration: none;
	}

/** 2. FOOTER STYLES (Floating Look) **/
.footer-color {
	background: #ffffff !important;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.02) !important;
	border-top: none !important;
}

/** 3. SEARCH PANEL STYLES (Glassmorphism) **/
.searchpanel-color {
	background: rgba(255, 255, 255, 0.85) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
}

.searchpanel .close-color {
	color: #ef4444 !important;
	background: #fee2e2;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
}

	.searchpanel .close-color:hover {
		background: #ef4444;
		color: #ffffff !important;
		transform: rotate(90deg);
	}

.searchpanel .searchresult-color,
.searchpanel .searchresult-color a {
	color: #1e293b !important;
}

	.searchpanel .searchresult-color a {
		padding: 10px 15px;
		border-radius: 12px;
		display: block;
		margin-bottom: 5px;
		background: #f8fafc;
		border: 1px solid #e2e8f0;
		transition: all 0.2s ease;
	}

		.searchpanel .searchresult-color a:hover {
			background: #1e3a8a;
			color: #ffffff !important;
			transform: translateX(5px);
			box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2);
			text-decoration: none;
		}

/** 4. CONTENT STYLES (Floating Cards) **/
.content-color {
	background: #f1f5f9 !important; /* Soft app-like background */
}

	.content-color .title {
		/* Gradient Text Effect */
		background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: 900 !important;
		border-bottom: none !important;
		padding-bottom: 0;
	}

	.content-color .sub-content {
		color: #334155 !important;
	}

.content .sub-content a {
	color: #2563eb !important;
	font-weight: 600;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s;
}

	.content .sub-content a:hover {
		border-bottom-color: #2563eb;
	}

/* Transform basic tables into floating modern cards */
.content-color .sub-content .tbl-fm,
.content-color .sub-content .tbl-regno {
	background: #ffffff !important;
	border: none !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08) !important;
	padding: 20px;
	overflow: hidden;
}

/** 5. SIDEBAR / LEFT COLUMN (Deep Slate) **/
.left-col-pane-color {
	background: #0f172a !important;
}

	.left-col-pane-color .item {
		border-left: 4px solid transparent !important;
		border-radius: 0 12px 12px 0;
		margin-right: 15px !important;
		transition: all 0.3s ease;
	}

		.left-col-pane-color .item:hover {
			background: rgba(255, 255, 255, 0.05) !important;
			border-left-color: #38bdf8 !important;
			transform: translateX(5px);
		}

/** 6. TAB MENU STYLES (Floating Pill Design) **/
.tab-menu-color {
	border-bottom: none !important;
	background: #e2e8f0;
	padding: 6px;
	border-radius: 12px;
	display: inline-block;
	margin-bottom: 20px;
}

	/* Inactive Tabs */
	.tab-menu-color td.menu {
		background: transparent !important;
		color: #64748b !important;
		border: none !important;
		border-radius: 8px;
		transition: all 0.3s ease;
	}

		.tab-menu-color td.menu a {
			color: #64748b !important;
			padding: 8px 16px;
			display: block;
		}

		.tab-menu-color td.menu:hover {
			background: rgba(255,255,255,0.5) !important;
		}

	/* Active/Selected Tabs */
	.tab-menu-color .selected-menu {
		border: none !important;
		background: #ffffff !important;
		border-radius: 8px !important;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
		transform: translateY(-2px);
	}

		.tab-menu-color .selected-menu a {
			color: #1e3a8a !important;
			font-weight: 800 !important;
		}

.sub-title-color {
	color: #0f172a !important;
	font-weight: 800;
}