@use 'variables' as *;

// Shared table card used by Top Pages (Figma 0:1344), Referrers, Countries.
// All three share: white card, 1px Light Stroke border, rounded 10, p-1.
// All three share: 20px-padded title header (Body 2/Bold 16/24 neutral/900), then a Stroke Color divider,
// then an optional column-header bar (`__th`), then rows, then an optional view-all footer.
.simplestats-table-card {
	background: #fff;
	border: 1px solid #D0CEBC;              // Light Stroke colour
	border-radius: 10px;
	padding: 1px;
	display: flex;
	flex-direction: column;

	// Card header (0:1345)
	&__header {
		padding: 20px;
	}

	// "Top Pages" (0:1346) — 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
	}

	// Header → list divider (0:1347): 1px Stroke Color #E0E0E0.
	&__divider {
		height: 1px;
		background: $border-light;           // #E0E0E0
	}

	// Column-header bar (0:1349):
	// bg neutral/100 #F4F3EE, border-b Light Stroke #D0CEBC, h-30, px-20, gap-8, items-center.
	// Text "PAGE TITLE" / "VISITORS": 11/16 uppercase weight 500, brand/700 #A16207.
	&__th {
		display: flex;
		align-items: center;
		gap: 8px;
		height: 30px;
		padding: 0 20px;
		background: #F4F3EE;                // neutral/100
		border-bottom: 1px solid #D0CEBC;   // Light Stroke colour

		font-size: 11px;
		font-weight: 500;
		line-height: 16px;
		color: #A16207;                     // brand/700
		text-transform: uppercase;
	}
	&__th-label   { flex: 1; min-width: 0; }
	&__th-metrics {
		display: inline-flex;
		gap: 24px;
		align-items: center;
		flex-shrink: 0;
		white-space: nowrap;
	}

	// Row (0:1353 etc.): h-52, px-20, items-center, justify-between.
	// Typography/Body 3/Regular 14/20, neutral/900 #18191D.
	&__list { list-style: none; margin: 0; padding: 0; flex: 1; }
	&__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 52px;
		padding: 0 20px;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		color: #18191D;                     // neutral/900
	}

	// Left side of a row: optional index, icon, label.
	&__row-label {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
		flex: 1;
		overflow: hidden;
	}
	&__row-index { color: #18191D; flex-shrink: 0; }   // neutral/900
	&__row-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		color: #1E1E1E;
		overflow: hidden;
		border-radius: 50%;
		background: transparent;

		img, svg { display: block; width: 100%; height: 100%; object-fit: cover; }
	}
	&__row-text {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	// Right side of a row: 1-2 metric spans (number + optional change/share).
	&__row-metrics {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		flex-shrink: 0;
		min-width: 102px;
		white-space: nowrap;
	}
	&__row-metric        { color: #18191D; }        // neutral/900
	&__row-metric--up    { color: #16A34A; }        // semantic/success
	&__row-metric--down  { color: #DC2626; }        // semantic/danger
	&__row-metric--share { color: #16A34A; }        // semantic/success (Countries)

	// Footer with view-all CTA (Top Pages).
	&__footer {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64px;
		padding: 12px 16px;
		border-top: 1px solid $border-light;
		margin-top: auto;
	}
	// "View All Pages" (0:1360): Typography/Body 3/SemiBold 14/20, neutral/900 #18191D, button/radius 2.
	&__view-all {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 8px 0;
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		color: #18191D;                     // neutral/900
		text-decoration: none;
		border-radius: 2px;                 // button/radius

		&:hover, &:focus { color: #18191D; }
	}
	&__view-all-icon {
		display: inline-flex;
		width: 12px;
		height: 12px;
		svg { display: block; width: 12px; height: 12px; }
	}

	// Empty-state row.
	&__empty {
		padding: 32px 20px;
		text-align: center;
		color: $muted-text;
		flex: 1;
	}
}
