/* ==========================================================
	Extendmate Session Manager – Frontend Styles
	==========================================================

	TABLE OF CONTENTS
	----------------------------------------------------------
	1. Base Session List Styles
	2. Session List Header & Layout
	3. Session Card Styles
	4. Current Session Highlight
	5. Session Meta Information
	6. Session Actions
	7. Animations
	8. Visibility Helpers
	9. Pagination Container
	10. Session Header
	11. Generic Button Styles
	12. Responsive Adjustments

	========================================================== */

/* ==========================================================
	1. Base Session List Styles
	========================================================== */

.emsm-session-list {
	font-family: "Segoe UI", Roboto, -apple-system, sans-serif;
	color: #333;
	max-width: 100%;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
}

.emsm-session-list__title {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
	color: #1a1a1a;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #f0f0f0;
}

.emsm-session-list__container {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

/* ==========================================================
	2. Session Card Styles
	========================================================== */

.emsm-session-card {
	display: flex;
	background: white;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	padding: 1.25rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	align-items: flex-start;
	position: relative;
	overflow: hidden;
}

.emsm-session-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ==========================================================
	3. Current Session Highlight
	========================================================== */

.emsm-current-session {
	border-left: 4px solid #4caf50;
	order: -1;
	background-color: #f8f9fa;
}

/* ==========================================================
	4. Session Icon & Details
	========================================================== */

.emsm-session-icon {
	font-size: 1.75rem;
	color: #5f6368;
	margin-right: 1.25rem;
	flex-shrink: 0;
}

.emsm-session-details {
	flex-grow: 1;
	min-width: 0;
}

.emsm-session-device strong {
	display: block;
	font-size: 1.1rem;
	color: #202124;
	margin-bottom: 0.25rem;
}

.emsm-session-device span {
	font-size: 0.9rem;
	color: #5f6368;
}

/* ==========================================================
	5. Session Meta Information
	========================================================== */

.emsm-session-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.75rem;
	margin-top: 1rem;
}

.emsm-meta-item {
	display: flex;
	align-items: center;
	font-size: 0.875rem;
	color: #5f6368;
	white-space: nowrap;
}

.emsm-meta-item i {
	margin-right: 0.5rem;
	color: #5f6368;
	width: 16px;
	text-align: center;
}

/* ==========================================================
	6. Session Actions
	========================================================== */

.emsm-session-actions {
	margin-left: 1rem;
	flex-shrink: 0;
	align-self: center;
}

.emsm-current-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #4caf50;
	font-weight: 500;
	font-size: 0.875rem;
}

.emsm-current-label i {
	font-size: 1rem;
}

/* ==========================================================
	7. Animations
	========================================================== */

@keyframes pulse {
	0% {
	box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
	}
	70% {
	box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
	}
	100% {
	box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
	}
}

.emsm-current-session {
	animation: pulse 2s infinite;
}

/* ==========================================================
	8. Visibility Helpers
	========================================================== */

.emsm-hide {
	display: none;
}

/* ==========================================================
	9. Pagination Container
	========================================================== */

.emsm-pagination-container {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #f0f0f0;
}

/* ==========================================================
	10. Session Header
	========================================================== */

.emsm-session-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
	gap: 1rem;
}

/* ==========================================================
	11. Generic Button Styles
	========================================================== */

.emsm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	position: relative;
	padding: 0.75rem 1.5rem;
	margin: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	background-color: #4caf50;
	color: white;
	cursor: pointer;
	user-select: none;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.emsm-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.emsm-btn:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.emsm-btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
}

.emsm-btn:disabled {
	background-color: #e0e0e0;
	color: #9e9e9e;
	cursor: not-allowed;
	opacity: 0.8;
	transform: none !important;
	box-shadow: none !important;
}

.emsm-btn-sm {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

.emsm-btn-lg {
	padding: 1rem 2rem;
	font-size: 1.125rem;
}

.emsm-btn-primary {
	background-color: #4caf50;
}
.emsm-btn-secondary {
	background-color: #f5f5f5;
	color: #333;
	border-color: #e0e0e0;
}
.emsm-btn-danger {
	background-color: #e53935;
}
.emsm-btn-outline {
	background-color: transparent;
	color: #4caf50;
	border-color: #4caf50;
}

.emsm-btn i {
	font-size: 0.9em;
	transition: transform 0.2s ease;
}

.emsm-btn:hover i {
	transform: scale(1.05);
}

.emsm-btn-loading {
	color: transparent !important;
}

.emsm-btn-loading::after {
	content: "";
	position: absolute;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: emsm-spin 0.8s linear infinite;
}

/* ==========================================================
	12. Responsive Adjustments
	========================================================== */

@media (max-width: 480px) {
	.emsm-meta-item {
	white-space: normal;
	}

	.emsm-session-list {
	padding: 15px;
	}

	.emsm-session-list__title {
	font-size: 1.3rem;
	}

	.emsm-session-header {
	justify-content: center;
	}
}

@media (max-width: 768px) {
	.emsm-session-card {
	flex-direction: column;
	padding: 1rem;
	}

	.emsm-session-icon {
	margin-right: 0;
	margin-bottom: 1rem;
	}

	.emsm-session-meta {
	grid-template-columns: 1fr;
	}

	.emsm-session-actions {
	margin-left: 0;
	margin-top: 1rem;
	width: 100%;
	}

	.emsm-pagination-container {
	margin-top: 1.5rem;
	}

	.emsm-pagination-container button {
	padding: 0.65rem 1.25rem;
	font-size: 0.9rem;
	}

	.emsm-btn {
	padding: 0.65rem 1.25rem;
	}

	.emsm-btn-lg {
	padding: 0.875rem 1.75rem;
	}
}