@use 'variables' as *;

// Devices card (Figma 0:1363): 584 × 377, white bg, 1px Light Stroke colour, radius 10.
.simplestats-devices {
	background: #fff;
	border: 1px solid #D0CEBC;              // Light Stroke colour
	border-radius: 10px;
	display: flex;
	flex-direction: column;

	// Header (0:1364): padding 20.
	&__header {
		padding: 20px;
	}
	// "Devices" (0:1365): Typography/Body 2/Bold 16/24, neutral/900 #18191D.
	&__title {
		margin: 0;
		font-size: 16px;
		font-weight: 700;
		line-height: 24px;
		color: #18191D;                     // neutral/900
	}

	// Divider (0:1366): 1px Stroke Color #E0E0E0.
	&__divider {
		height: 1px;
		background: $border-light;
	}

	// Donut row (240:1090): donut centered + legend below, 312px tall.
	&__body {
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	&__donut {
		position: relative;
		width: 200px;
		height: 200px;
	}

	// Center text overlay — sits over the donut.
	&__center {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		pointer-events: none;
	}

	// "23,917" (0:1374): bold center total, neutral/900 #18191D.
	&__total {
		font-size: 24px;
		font-weight: 700;
		line-height: 32px;
		color: #18191D;                     // neutral/900
	}
	// "Total" (0:1375): Typography/Body 2/Regular 16/24, Text Secondary #8A90A0.
	&__total-label {
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		color: $text-secondary;             // Text Secondary #8A90A0
	}

	// Legend (240:1099): 3 rows, 24px each, 12px gap, full width.
	&__legend {
		list-style: none;
		margin: 0;
		padding: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	// legend-item (240:1100): 24px tall, dot + name (flex) + count + percent.
	&__legend-item {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 24px;
	}

	&__dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		flex-shrink: 0;
	}

	// Device name (0:1379 etc.): Typography/Body 2/Regular 16/24, neutral/900 #18191D.
	&__name {
		flex: 1;
		min-width: 0;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		color: #18191D;                     // neutral/900
	}

	// Count "12,847" (0:1380 etc.): Typography/Body 2/Regular 16/24, neutral/900 #18191D.
	&__count {
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		color: #18191D;                     // neutral/900
		text-align: right;
	}

	// "54%": Caption-style smaller muted (~12-13/15 from Figma height 15).
	&__pct {
		min-width: 32px;
		font-size: 12px;
		font-weight: 400;
		line-height: 15px;
		color: $text-secondary;
		text-align: right;
	}

	&__empty {
		padding: 60px 20px;
		text-align: center;
		color: $muted-text;
	}
}
