/*
 * components.css
 * Shared UI components (buttons, cards, badges, form controls).
 */

/* ======================
   CARD
   ====================== */

.card {
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-xs);
	font-family: var(--font-sans);
}

.card-sm {
	padding: var(--space-4);
}

.card-header {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-6);
}

.card-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.card-title {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--card-foreground);
	margin: 0;
}

.card-description {
	font-size: 0.875rem;
	color: var(--muted-foreground);
	line-height: 1.5;
	margin: 0;
}

.card-content {
	padding: 0 var(--space-6) var(--space-6);
}

.card-footer {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: 0 var(--space-6) var(--space-6);
}

/* ======================
   BUTTON
   ====================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: var(--radius);
	padding: 0.625rem 1rem;
	cursor: pointer;
	user-select: none;
	text-decoration: none;
	transition:
		background var(--transition-fast),
		color var(--transition-fast),
		border-color var(--transition-fast),
		box-shadow var(--transition-fast);
}

.btn:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px var(--background),
		0 0 0 4px var(--ring);
}

.btn:disabled,
.btn[disabled] {
	opacity: 0.5;
	pointer-events: none;
}

/* Default / Primary */
.btn-primary {
	background: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
}

.btn-primary:hover {
	background: color-mix(in srgb, var(--primary) 90%, black);
	text-decoration: none;
	color: var(--primary-foreground);
}

/* Secondary */
.btn-secondary {
	background: var(--secondary);
	color: var(--secondary-foreground);
}

.btn-secondary:hover {
	background: color-mix(in srgb, var(--secondary) 80%, var(--foreground));
	text-decoration: none;
	color: var(--secondary-foreground);
}

/* Outline */
.btn-outline {
	background: transparent;
	color: var(--foreground);
	border-color: var(--input);
}

.btn-outline:hover {
	background: var(--accent);
	color: var(--accent-foreground);
	text-decoration: none;
}

/* Ghost */
.btn-ghost {
	background: transparent;
	color: var(--foreground);
}

.btn-ghost:hover {
	background: var(--accent);
	color: var(--accent-foreground);
	text-decoration: none;
}

/* Destructive */
.btn-destructive {
	background: var(--destructive);
	color: var(--destructive-foreground);
	border-color: var(--destructive);
}

.btn-destructive:hover {
	background: color-mix(in srgb, var(--destructive) 90%, black);
	text-decoration: none;
	color: var(--destructive-foreground);
}

/* Link */
.btn-link {
	background: transparent;
	color: var(--primary);
	border-color: transparent;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.btn-link:hover {
	color: color-mix(in srgb, var(--primary) 80%, black);
}

/* ---- Button Sizes ---- */

.btn-xs {
	font-size: 0.75rem;
	padding: 0.375rem 0.625rem;
	border-radius: calc(var(--radius) - 2px);
}

.btn-sm {
	font-size: 0.8125rem;
	padding: 0.5rem 0.75rem;
	border-radius: calc(var(--radius) - 2px);
}

.btn-lg {
	font-size: 1rem;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius);
}

.btn-icon {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
}

.btn-icon-sm {
	width: 2rem;
	height: 2rem;
	padding: 0;
	font-size: 0.875rem;
}

/* ======================
   BADGE
   ====================== */

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.25rem 0.625rem;
	border-radius: calc(var(--radius) - 2px);
	border: 1px solid transparent;
	white-space: nowrap;
	text-decoration: none;
	transition:
		background var(--transition-fast),
		color var(--transition-fast);
}

/* Default */
.badge-default {
	background: var(--primary);
	color: var(--primary-foreground);
}

/* Secondary */
.badge-secondary {
	background: var(--secondary);
	color: var(--secondary-foreground);
}

/* Outline */
.badge-outline {
	background: transparent;
	color: var(--foreground);
	border-color: var(--border);
}

/* Destructive */
.badge-destructive {
	background: var(--destructive);
	color: var(--destructive-foreground);
}

/* Ghost */
.badge-ghost {
	background: transparent;
	color: var(--muted-foreground);
}

/* ======================
   INPUT
   ====================== */

.input {
	display: block;
	width: 100%;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--foreground);
	background: transparent;
	border: 1px solid var(--input);
	border-radius: var(--radius);
	padding: 0.5rem 0.75rem;
	transition:
		border-color var(--transition-fast),
		box-shadow var(--transition-fast);
}

.input::placeholder {
	color: var(--muted-foreground);
}

.input:focus {
	outline: none;
	border-color: var(--ring);
	box-shadow: 0 0 0 2px rgba(99, 102, 168, 0.15);
}

.input:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ======================
   TEXTAREA
   ====================== */

.textarea {
	display: block;
	width: 100%;
	min-height: 5rem;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--foreground);
	background: transparent;
	border: 1px solid var(--input);
	border-radius: var(--radius);
	padding: 0.5rem 0.75rem;
	resize: vertical;
	transition:
		border-color var(--transition-fast),
		box-shadow var(--transition-fast);
}

.textarea:focus {
	outline: none;
	border-color: var(--ring);
	box-shadow: 0 0 0 2px rgba(99, 102, 168, 0.15);
}

/* ======================
   LABEL
   ====================== */

.label {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	color: var(--foreground);
	margin-bottom: var(--space-2);
}

/* ======================
   TABLE
   ====================== */

.table-wrapper {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	text-align: left;
}

.table caption {
	padding: var(--space-4);
	color: var(--muted-foreground);
	font-size: 0.875rem;
	caption-side: bottom;
}

.table thead {
	border-bottom: 1px solid var(--border);
}

.table th {
	padding: var(--space-3) var(--space-4);
	font-weight: 600;
	color: var(--muted-foreground);
	white-space: nowrap;
	background: transparent;
}

.table td {
	padding: var(--space-3) var(--space-4);
	color: var(--foreground);
	vertical-align: middle;
}

.table tbody tr {
	border-bottom: 1px solid var(--border);
	transition: background var(--transition-fast);
}

.table tbody tr:last-child {
	border-bottom: none;
}

.table tbody tr:hover {
	background: var(--muted);
}

/* ======================
   SEPARATOR
   ====================== */

.separator {
	border: none;
	height: 1px;
	background: var(--border);
	margin: var(--space-4) 0;
}

.separator-vertical {
	display: inline-block;
	width: 1px;
	height: 100%;
	background: var(--border);
	margin: 0 var(--space-4);
}

/* ======================
   AVATAR
   ====================== */

.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	overflow: hidden;
	background: var(--muted);
	color: var(--muted-foreground);
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 600;
	flex-shrink: 0;
}

.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avatar-sm {
	width: 2rem;
	height: 2rem;
	font-size: 0.75rem;
}

.avatar-lg {
	width: 3rem;
	height: 3rem;
	font-size: 1rem;
}

/* ======================
   ALERT
   ====================== */

.alert {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-family: var(--font-sans);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--foreground);
}

.alert-icon {
	flex-shrink: 0;
	margin-top: 1px;
}

.alert-title {
	font-weight: 600;
	margin: 0 0 var(--space-1);
}

.alert-description {
	color: var(--muted-foreground);
	margin: 0;
}

.alert-destructive {
	border-color: var(--destructive);
	color: var(--destructive);
}

.alert-destructive .alert-description {
	color: var(--destructive);
}

/* ======================
   SKELETON (loading)
   ====================== */

.skeleton {
	background: var(--muted);
	border-radius: var(--radius);
	animation: skeleton-pulse 2s ease-in-out infinite;
}

@keyframes skeleton-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

/* ======================
   TOOLTIP (CSS-only)
   ====================== */

[data-tooltip] {
	position: relative;
}

[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	padding: 0.375rem 0.75rem;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--popover-foreground);
	background: var(--foreground);
	color: var(--background);
	border-radius: calc(var(--radius) - 2px);
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--transition-fast);
	z-index: 50;
}

[data-tooltip]:hover::after {
	opacity: 1;
}

/* ======================
   SCROLL-AREA
   ====================== */

.scroll-area {
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--border) transparent;
}

.scroll-area::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.scroll-area::-webkit-scrollbar-track {
	background: transparent;
}

.scroll-area::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 9999px;
}

.scroll-area::-webkit-scrollbar-thumb:hover {
	background: var(--muted-foreground);
}

/* ======================
   PROSE (text content)
   ====================== */

.prose {
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--foreground);
}

.prose p {
	margin: 0 0 var(--space-4);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
	font-weight: 600;
	color: var(--foreground);
	margin: var(--space-6) 0 var(--space-3);
}

.prose a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.prose a:hover {
	color: color-mix(in srgb, var(--primary) 80%, black);
}

/* ======================
   UTILITY CLASSES
   ====================== */

.text-muted {
	color: var(--muted-foreground);
}

.text-primary {
	color: var(--primary);
}

.text-destructive {
	color: var(--destructive);
}

.bg-muted {
	background: var(--muted);
}

.bg-accent {
	background: var(--accent);
}

.border-b {
	border-bottom: 1px solid var(--border);
}

.border-t {
	border-top: 1px solid var(--border);
}

.rounded {
	border-radius: var(--radius);
}

.rounded-sm {
	border-radius: calc(var(--radius) - 2px);
}

.rounded-lg {
	border-radius: calc(var(--radius) + 2px);
}

.rounded-full {
	border-radius: 9999px;
}

.shadow-sm {
	box-shadow: var(--shadow-sm);
}

.shadow-md {
	box-shadow: var(--shadow-md);
}

.ring-offset-background {
	--ring-offset-color: var(--background);
}

.focus-ring:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px var(--background),
		0 0 0 4px var(--ring);
}

/* Truncate */
.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Screen-reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ======================
   CHART COLOR UTILITIES
   ====================== */

.bg-chart-1 {
	background: var(--chart-1);
}

.bg-chart-2 {
	background: var(--chart-2);
}

.bg-chart-3 {
	background: var(--chart-3);
}

.bg-chart-4 {
	background: var(--chart-4);
}

.bg-chart-5 {
	background: var(--chart-5);
}

.text-chart-1 {
	color: var(--chart-1);
}

.text-chart-2 {
	color: var(--chart-2);
}

.text-chart-3 {
	color: var(--chart-3);
}

.text-chart-4 {
	color: var(--chart-4);
}

.text-chart-5 {
	color: var(--chart-5);
}