/* ==================== Root Variables ==================== */
:root {
	--ek-red: #D42228;
	--ek-red-dark: #87242B;
	--ek-red-ghost: #FFF5F5;
	--ek-light-grey: #E2E2E2;
	--ek-bg-color: #e89994;
	--ek-item-bg: #f9f9f9;
	--layout-bg-color: #fafafa;
	--sidebar-bg: var(--ek-red);
	--bs-body-font-family: "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif !important;

	/* Table/Theming surface variables */
	--ek-surface: #ffffff;
	--ek-surface-alt: #f9f9f9;
	--ek-border-color: #eee;
	--ek-table-header-bg: var(--ek-red-ghost);
	--ek-table-header-color: #333;
	--ek-table-hover-bg: var(--ek-red-ghost);
	--ek-table-active-bg: #ffeaea; 
}

/*Preset : red (default ECKOO color)*/
html {
	background: var(--ek-bg-color);
}
	/* Preset : "Black*/
	html[data-theme="black"] {
		--ek-red: #000000;
		--ek-red-dark: #000000;
		--ek-red-ghost: #E5E5E5;
		--ek-light-grey: #cccccc;
		--ek-bg-color: #D3D3D3;
		--ek-item-bg: #f7f7f7;
		--layout-bg-color: #ffffff;
		--sidebar-bg: #000000;
	}
	/* Preset: "Blue" */
	html[data-theme="blue"] {
		--ek-red: #1976d2;
		--ek-red-dark: #125ea2;
		--ek-red-ghost: rgba(25,118,210,.12);
		--ek-light-grey: #E2E2E2;
		--ek-bg-color: #cfe8ff;
		--ek-item-bg: #E1F5FE;
		--sidebar-bg: var(--ek-red);
	}

	/* Preset: "Green" */
	html[data-theme="green"] {
		--ek-red: #2e7d32;
		--ek-red-dark: #1b5e20;
		--ek-red-ghost: rgba(46,125,50,.12);
		--ek-light-grey: #E2E2E2;
		--ek-bg-color: #d9f2e1;
		--ek-item-bg: #E7FFCE;
		--sidebar-bg: var(--ek-red);
	}

	/* Dynamic custom theme — values are overridden via JS/Blazor */
	html[data-theme="custom"] {
		/* Provide safe fallbacks; will be overwritten */
		--ek-red: #7b1fa2;
		--ek-red-dark: #5a137a;
		--ek-red-ghost: rgba(123,31,162,.12);
		--ek-light-grey: #E2E2E2;
		--ek-bg-color: #eadcf5;
		--ek-item-bg: #E7FFCE;
		--sidebar-bg: var(--ek-red);
	}


/* ==================== Global Styles ==================== */
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background: var(--ek-bg-color);
	position: relative;
	z-index: 1;
	font-weight: 400;
}

/* ==================== Primary Button ==================== */
.btn-primary {
	background-color: var(--ek-red);
	border: 2px solid var(--ek-red);
	color: white;
	padding: 0.5rem 1.5rem;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.9rem;
}

	.btn-primary:hover,
	.btn-primary:focus {
		background: var(--ek-red-dark);
		border-color: var(--ek-red-dark);
	}

/* ==================== Outline Buttons ==================== */
.btn-outline {
	background: transparent;
	color: var(--ek-red);
	border: 2px solid var(--ek-red);
	padding: 0.4rem 1.2rem;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.85rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

	.btn-outline:hover {
		background-color: var(--ek-red);
		color: #fff;
	}

/* Themed red outline */
.btn-outline-red {
	align-items: center;
	gap: 6px;
	background-color: #fff;
	color: var(--ek-red);
	border: 2px solid var(--ek-red);
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	font-size: 0.9rem;
}

	.btn-outline-red:hover {
		background-color: var(--ek-red-ghost);
		color: var(--ek-red-dark);
		border-color: var(--ek-red-dark);
	}

	.btn-outline-red i {
		font-size: 0.85rem;
	}

.btn-outline-dark {
	padding: 0.5rem 2rem 0.5rem 0.8rem;
	border: 1px solid #ccc;
	border-radius: 6px;
	position: relative;
	display: flex;
	align-items: center;
}

.btn-gray {
	background-color: #eee;
	color: #333;
	border: none;
	border-radius: 6px;
	padding: 0.45rem 0.7rem;
	font-weight: 600;
	cursor: pointer;
	font-size: 0.82rem;
	transition: background 0.2s ease;
}

	.btn-gray:hover {
		background-color: #ddd;
	}


/* ==================== Admin Sidebar: Management Buttons ==================== */
.admin-sidebar .management-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

	.admin-sidebar .management-card .btn-primary,
	.btn-primary.full {
		display: block;
		width: 100%;
		text-align: center;
	}


/* ===================== Search Bar & Pagination Layout ===================== */



.search-row {
	display: flex;
	gap: 0.8rem;
	width: fit-content;
	min-width: 200px;
	max-width: 100%;
}
.search-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	margin-bottom: 0.6rem;
	width:100%;
}

	.search-bar .search-input {
		flex: 1;
		padding: 0.4rem 0.6rem;
		border: 1px solid #ccc;
		border-radius: 6px;
		font-size: 0.9rem;
		width: fit-content;
		min-width: 200px;
		max-width: 100%;
		flex-grow: 1;
	}

	.search-bar .item-count {
		font-size: 0.9rem;
		color: #666;
		min-width: 40px;
		text-align: right;
	}
.inactive-toggle {
	display: flex;
	width: 100%;
	gap: 0.5rem;
	margin-bottom: 0.8rem;
}

.inactive-row {
	background-color: #0000008c !important;
	opacity: 0.7;
}
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin-top: 0.8rem;
}

	.pagination button {
		padding: 0.4rem 0.9rem;
		border: 1px solid #ccc;
		background: white;
		border-radius: 6px;
		cursor: pointer;
	}

		.pagination button:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}

/*Login, Reset/Forgot password */

.warning-change-password {
	background: #fff3cd;
	color: #664d03;
	border: 1px solid #ffecb5;
	padding: 8px 12px;
	margin: 0 0 8px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.backto-login,
.forgot-password-page {
	margin-top: 10px;
}


.login-page {
	background-color: var(--ek-bg-color);
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}


.login-card {
	background-color: #fff;
	padding: 2rem 2.5rem;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	width: 320px;
	animation: fadeIn 0.4s ease-in-out;
}


	.login-card h4 {
		color: #222;
		font-weight: 600;
	}


@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}