/* ============================================
   Client Data Visualizer Tool Styles
   Base: 1.5rem font-size, 2rem line-height, 2rem spacing
   All units in rem
   ============================================ */

.data-controls {
	display: flex;
	gap: var(--space-3);
	margin: var(--space-4) 0;
	flex-wrap: wrap;
}

.data-controls .btn {
	padding: var(--space-3) var(--space-5);
	font-size: var(--font-md);
}

#data-container {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin-top: var(--space-6);
}

.data-section {
	padding: var(--space-4);
	border: var(--border-sm) solid var(--gray);
}

.data-section h2 {
	color: var(--light);
	font-size: var(--font-md);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: var(--border-sm) solid var(--gray);
}

.data-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: var(--space-3);
}

.data-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-3);
	background-color: var(--black);
	min-height: 4rem;
}

.data-label {
	font-size: var(--font-xs);
	color: var(--gray);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
}

.data-value {
	color: var(--light);
	font-family: 'code', monospace;
	font-size: var(--font-sm);
	word-break: break-word;
	line-height: var(--lh-md);
}

.data-value.empty {
	color: var(--gray);
	font-style: italic;
}

/* Storage Data */
.storage-list {
	grid-column: 1 / -1;
	background-color: var(--black);
	padding: var(--space-3);
	max-height: 12rem;
	overflow-y: auto;
}

.storage-item {
	display: flex;
	justify-content: space-between;
	padding: var(--space-2) 0;
	border-bottom: var(--border-sm) solid var(--dark);
	font-size: var(--font-md);
}

.storage-item:last-child {
	border-bottom: none;
}

.storage-key {
	color: var(--light);
	font-family: 'code', monospace;
	max-width: 50%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.storage-value {
	color: var(--gray);
	font-family: 'code', monospace;
	max-width: 50%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: right;
}

.storage-empty {
	color: var(--gray);
	font-style: italic;
	font-size: var(--font-md);
	text-align: center;
	padding: var(--space-4);
}

/* Media Devices */
.device-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2);
	background-color: var(--black);
	font-size: var(--font-md);
	color: var(--light);
}

.device-icon {
	font-size: var(--font-lg);
}

/* Location Data */
#location-data .data-value {
	max-width: 100%;
}

/* Interaction Data */
#interaction-data .data-value {
	min-width: 8rem;
}

/* Data Info Section */
.data-info {
	margin-top: var(--space-8);
	padding: var(--space-4);
	border-left: var(--border-md) solid var(--gray);
}

.data-info h2 {
	color: var(--light);
	font-size: var(--font-md);
	margin-bottom: var(--space-3);
}

.data-info p {
	color: var(--gray);
	font-size: var(--font-md);
	line-height: var(--lh-md);
	margin-bottom: var(--space-4);
}

.data-info ul {
	list-style: disc;
	margin-left: var(--space-5);
}

.data-info li {
	color: var(--gray);
	font-size: var(--font-md);
	line-height: var(--lh-md);
	margin-bottom: var(--space-2);
}

/* Loading State */
.loading {
	opacity: 0.5;
	pointer-events: none;
}

.loading::after {
	content: 'Loading...';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--light);
	font-size: var(--font-sm);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Responsive */
@media screen and (max-width: 48rem) {
	.data-grid {
		grid-template-columns: 1fr;
	}
	
	.data-controls {
		flex-direction: column;
	}
	
	.data-controls .btn {
		width: 100%;
	}
	
	.storage-item {
		flex-direction: column;
		gap: var(--space-1);
	}
	
	.storage-key,
	.storage-value {
		max-width: 100%;
	}
}