/* ==========================================================================
   MasarPlus Device & Session Management Stylesheet
   ========================================================================== */

.mp-device-card {
	background: var(--mp-surface-light, #ffffff);
	border: 1px solid var(--mp-gray-200, #e2e8f0);
	border-radius: var(--mp-radius-xl, 20px);
	padding: var(--mp-spacing-6, 24px);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.mp-device-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 30px -5px rgba(0, 146, 166, 0.1);
	border-color: var(--mp-primary-300, #93c5fd);
}

.mp-device-card.is-current {
	border-color: var(--mp-success-500, #10b981);
	background: linear-gradient(180deg, rgba(16, 185, 129, 0.03) 0%, #ffffff 100%);
}

.mp-device-icon-box {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--mp-primary-50, #f0f9ff);
	color: var(--mp-primary-600, #0284c7);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.mp-device-card.is-current .mp-device-icon-box {
	background: rgba(16, 185, 129, 0.1);
	color: var(--mp-success-600, #059669);
}

.mp-device-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--mp-gray-900, #0f172a);
	margin-bottom: 4px;
}

.mp-device-meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: var(--mp-gray-600, #475569);
	margin-bottom: 6px;
}

.mp-device-meta-item .material-icons {
	font-size: 16px;
	color: var(--mp-gray-400, #94a3b8);
}

@media (max-width: 600px) {
	.mp-device-card {
		padding: var(--mp-spacing-4, 16px);
	}
	.mp-device-icon-box {
		width: 44px;
		height: 44px;
		border-radius: 12px;
	}
	.mp-device-title {
		font-size: 0.9375rem;
	}
}