/* ============================================
   PyPI Stats - Tabler Theme Customization
   Overrides Tabler dark theme with kopdog colors
   ============================================ */

/* Kopdog Color Palette applied to Tabler CSS variables */
:root,
[data-bs-theme="dark"] {
	/* Background Colors */
	--tblr-body-bg: #171c17;
	--tblr-bg-surface: #1e241e;
	--tblr-bg-surface-secondary: #282f28;
	--tblr-card-bg: #1e241e;
	--tblr-card-cap-bg: #1e241e;
	--tblr-border-color: #3d4a3d;
	--tblr-border-color-translucent: rgba(61, 74, 61, 0.5);

	/* Text Colors - Warm Cream (WCAG AA compliant on dark bg) */
	--tblr-body-color: #faf6f0;
	--tblr-secondary-color: #d0cac0; /* Brightened for 4.5:1 contrast */
	--tblr-muted-color: #b5afa5; /* Brightened for better contrast */
	--tblr-heading-color: #faf6f0;

	/* Primary - PyPI Blue */
	--tblr-primary: #3775a9;
	--tblr-primary-rgb: 55, 117, 169;
	--tblr-primary-fg: #faf6f0;

	/* Status colors */
	--tblr-success: #7b9e7b;
	--tblr-success-rgb: 123, 158, 123;
	--tblr-warning: #d4a855;
	--tblr-warning-rgb: 212, 168, 85;
	--tblr-danger: #c2785c;
	--tblr-danger-rgb: 194, 120, 92;
	--tblr-info: #3775a9;
	--tblr-info-rgb: 55, 117, 169;

	/* Custom accent colors for stats */
	--color-pypi: #3775a9;
	--color-pypi-light: #4a8cc2;
	--color-github: #7b9e7b;
	--color-downloads: #d4a855;
	--color-stars: #e5c76b;
	--color-forks: #9e7b9e;

	/* Typography */
	--tblr-font-sans-serif:
		"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--tblr-font-monospace:
		"JetBrains Mono", "Fira Code", Monaco, Consolas, monospace;

	/* Card styling */
	--tblr-card-border-color: var(--tblr-border-color);
	--tblr-card-border-radius: 0.75rem;

	/* Navbar */
	--tblr-navbar-bg: #1e241e;
	--tblr-navbar-border-color: #3d4a3d;
}

/* Kopdog Light Theme - warm earthy tones */
[data-bs-theme="light"] {
	/* Background Colors - warm off-whites */
	--tblr-body-bg: #f5f5f0;
	--tblr-bg-surface: #ffffff;
	--tblr-bg-surface-secondary: #fafaf8;
	--tblr-card-bg: #ffffff;
	--tblr-card-cap-bg: #ffffff;
	--tblr-border-color: #d8d8d0;
	--tblr-border-color-translucent: rgba(0, 0, 0, 0.08);

	/* Text Colors - warm darks */
	--tblr-body-color: #1a1a18;
	--tblr-secondary-color: #5a5a52;
	--tblr-muted-color: #8a8a82;
	--tblr-heading-color: #1a1a18;

	/* Primary - PyPI Blue (deeper for light bg contrast) */
	--tblr-primary: #2c6693;
	--tblr-primary-rgb: 44, 102, 147;
	--tblr-primary-fg: #ffffff;

	/* Status colors (darkened for light bg contrast) */
	--tblr-success: #4a7a4a;
	--tblr-success-rgb: 74, 122, 74;
	--tblr-warning: #b08030;
	--tblr-warning-rgb: 176, 128, 48;
	--tblr-danger: #b05a45;
	--tblr-danger-rgb: 176, 90, 69;
	--tblr-info: #2c6693;
	--tblr-info-rgb: 44, 102, 147;

	/* Custom accent colors (darkened for light bg) */
	--color-pypi: #2c6693;
	--color-pypi-light: #3775a9;
	--color-github: #4a7a4a;
	--color-downloads: #9a7520;
	--color-stars: #8a6d10;
	--color-forks: #7a5a7a;

	/* Navbar */
	--tblr-navbar-bg: #ffffff;
	--tblr-navbar-border-color: #d8d8d0;
}

/* Light theme component overrides */
[data-bs-theme="light"] .navbar .nav-link {
	color: #5a5a52 !important;
}

[data-bs-theme="light"] .navbar .nav-link:hover,
[data-bs-theme="light"] .navbar .nav-link.active {
	color: #1a1a18 !important;
	background-color: var(--tblr-bg-surface-secondary);
}

[data-bs-theme="light"] .navbar .nav-link.active {
	color: #2c6693 !important;
}

[data-bs-theme="light"] .card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-bs-theme="light"] .btn-ghost-primary {
	color: #2c6693;
}

[data-bs-theme="light"] .btn-ghost-primary:hover {
	background-color: rgba(44, 102, 147, 0.08);
	color: #1d4f73;
}

[data-bs-theme="light"] .btn-ghost-secondary {
	color: #5a5a52;
}

[data-bs-theme="light"] .btn-ghost-secondary:hover {
	background-color: rgba(0, 0, 0, 0.05);
	color: #1a1a18;
}

[data-bs-theme="light"] .btn-outline-secondary {
	--tblr-btn-color: #5a5a52;
	--tblr-btn-border-color: #b5b0a8;
	--tblr-btn-hover-color: #1a1a18;
	--tblr-btn-hover-bg: rgba(0, 0, 0, 0.05);
	--tblr-btn-hover-border-color: #5a5a52;
}

[data-bs-theme="light"] .footer .link-secondary {
	color: #2c6693 !important;
}

[data-bs-theme="light"] .footer .link-secondary:hover {
	color: #1d4f73 !important;
}

[data-bs-theme="light"] .apexcharts-tooltip {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Insight colors adjusted for light bg contrast */
[data-bs-theme="light"] .text-purple {
	color: #6b4a6b !important;
}

[data-bs-theme="light"] .text-orange {
	color: #b05a45 !important;
}

[data-bs-theme="light"] .text-pink {
	color: #9e5a7a !important;
}

[data-bs-theme="light"] .text-lime {
	color: #5a8a10 !important;
}

/* ============================================
   Global Overrides
   ============================================ */

body {
	font-family: var(--tblr-font-sans-serif);
	background-color: var(--tblr-body-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Override Tabler's .text-secondary for WCAG AA contrast */
.text-secondary {
	color: var(--tblr-secondary-color) !important;
}

/* Links */
a {
	color: var(--color-pypi);
}

a:hover {
	color: var(--color-pypi-light);
}

/* ============================================
   Navbar Enhancements
   ============================================ */

.navbar {
	background-color: var(--tblr-navbar-bg) !important;
	border-bottom: 1px solid var(--tblr-navbar-border-color);
}

.navbar-brand {
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.navbar-brand-icon {
	width: 28px;
	height: 28px;
	color: var(--color-pypi);
}

.navbar .nav-link {
	color: #d0cac0 !important; /* WCAG AA compliant */
	border-radius: 0.375rem;
	transition: all 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
	color: var(--tblr-body-color) !important;
	background-color: var(--tblr-bg-surface-secondary);
}

.navbar .nav-link.active {
	color: #5ba8e0 !important; /* Brighter primary for contrast */
}

/* Mobile menu dropdown background */
@media (max-width: 767.98px) {
	.navbar-collapse {
		background-color: var(--tblr-navbar-bg);
		border-radius: 0.5rem;
		padding: 0.5rem;
		margin-top: 0.5rem;
		border: 1px solid var(--tblr-navbar-border-color);
	}
}

/* ============================================
   Card Enhancements
   ============================================ */

.card {
	background-color: var(--tblr-card-bg);
	border: 1px solid var(--tblr-border-color);
	border-radius: var(--tblr-card-border-radius);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.card:hover {
	border-color: var(--color-pypi);
	box-shadow: 0 4px 12px rgba(23, 28, 23, 0.35);
}

.card-header {
	background-color: transparent;
	border-bottom: 1px solid var(--tblr-border-color);
}

.card-stacked {
	--tblr-card-stacked-bg: var(--tblr-bg-surface-secondary);
}

/* ============================================
   Stat Cards - Custom Styling
   ============================================ */

.card-sm .card-body {
	padding: 1rem;
}

.stat-card-value {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0.25rem;
}

.stat-card-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tblr-muted-color);
}

/* Colored stat values */
.text-pypi {
	color: var(--color-pypi) !important;
}
.text-downloads {
	color: var(--color-downloads) !important;
}
.text-stars {
	color: var(--color-stars) !important;
}
.text-github {
	color: var(--color-github) !important;
}
.text-forks {
	color: var(--color-forks) !important;
}

/* Background variations for ribbons/badges */
.bg-pypi {
	background-color: var(--color-pypi) !important;
}
.bg-downloads {
	background-color: var(--color-downloads) !important;
}
.bg-stars {
	background-color: var(--color-stars) !important;
}
.bg-github {
	background-color: var(--color-github) !important;
}

/* ============================================
   Insight Colors
   ============================================ */

/* Purple for hidden gems */
.text-purple {
	color: #9e7b9e !important;
}
.bg-purple {
	background-color: #9e7b9e !important;
}
.bg-purple-lt {
	background-color: rgba(158, 123, 158, 0.15) !important;
}

/* Orange for at-risk / fair health (WCAG AA compliant) */
.text-orange {
	color: #e8a070 !important;
} /* Brightened for contrast */
.bg-orange {
	background-color: #d4885c !important;
}
.bg-orange-lt {
	background-color: rgba(212, 136, 92, 0.2) !important;
} /* Slightly more opaque */

/* Pink for community favorites */
.text-pink {
	color: #c27b9e !important;
}
.bg-pink {
	background-color: #c27b9e !important;
}
.bg-pink-lt {
	background-color: rgba(194, 123, 158, 0.15) !important;
}

/* Lime for "Coming Soon" badges */
.text-lime {
	color: #84cc16 !important;
}
.bg-lime {
	background-color: #84cc16 !important;
}
.bg-lime-lt {
	background-color: rgba(132, 204, 22, 0.15) !important;
}

/* ============================================
   Table Enhancements
   ============================================ */

.table {
	--tblr-table-bg: transparent;
	--tblr-table-striped-bg: var(--tblr-bg-surface-secondary);
	--tblr-table-hover-bg: var(--tblr-bg-surface-secondary);
	color: var(--tblr-body-color);
}

.table > thead {
	color: var(--tblr-muted-color);
}

.table > :not(caption) > * > * {
	border-color: var(--tblr-border-color);
}

/* Leaderboard rank styling */
.rank-gold {
	color: #e5c76b;
}
.rank-silver {
	color: #b8b8b8;
}
.rank-bronze {
	color: #cd7f32;
}

/* ============================================
   Form Controls
   ============================================ */

.form-control,
.form-select {
	background-color: var(--tblr-bg-surface);
	border-color: var(--tblr-border-color);
	color: var(--tblr-body-color);
}

.form-control:focus,
.form-select:focus {
	background-color: var(--tblr-bg-surface);
	border-color: var(--color-pypi);
	box-shadow: 0 0 0 0.25rem rgba(55, 117, 169, 0.25);
	color: var(--tblr-body-color);
}

.form-control::placeholder {
	color: var(--tblr-muted-color);
}

/* ============================================
   Buttons
   ============================================ */

.btn-primary {
	--tblr-btn-bg: var(--color-pypi);
	--tblr-btn-border-color: var(--color-pypi);
	--tblr-btn-hover-bg: var(--color-pypi-light);
	--tblr-btn-hover-border-color: var(--color-pypi-light);
}

.btn-ghost-primary {
	color: #5ba8e0; /* Brightened for WCAG AA contrast on dark bg */
}

.btn-ghost-primary:hover {
	background-color: rgba(55, 117, 169, 0.1);
	color: #7fbfef; /* Even brighter on hover */
}

.btn-ghost-secondary {
	color: #d0cac0; /* WCAG AA compliant on dark bg */
}

.btn-ghost-secondary:hover {
	background-color: rgba(208, 202, 192, 0.1);
	color: #faf6f0;
}

.btn-outline-secondary {
	--tblr-btn-color: #d0cac0; /* WCAG AA compliant on dark bg */
	--tblr-btn-border-color: #d0cac0;
	--tblr-btn-hover-color: #faf6f0;
	--tblr-btn-hover-bg: rgba(208, 202, 192, 0.15);
	--tblr-btn-hover-border-color: #faf6f0;
}

/* ============================================
   Nav Pills / Tabs
   ============================================ */

.nav-pills .nav-link {
	color: var(--tblr-secondary-color);
	border-radius: 0.375rem;
}

.nav-pills .nav-link:hover {
	color: var(--tblr-body-color);
	background-color: var(--tblr-bg-surface-secondary);
}

.nav-pills .nav-link.active {
	background-color: var(--color-pypi);
	color: var(--tblr-body-color);
}

/* ============================================
   Badges & Tags
   ============================================ */

.badge {
	font-weight: 500;
}

.tag {
	background-color: var(--tblr-bg-surface-secondary);
	color: var(--tblr-muted-color);
}

/* ============================================
   Avatar Colors
   ============================================ */

.avatar-list-stacked .avatar {
	box-shadow: 0 0 0 2px var(--tblr-card-bg);
}

/* ============================================
   Dropdown
   ============================================ */

.dropdown-menu {
	background-color: var(--tblr-bg-surface);
	border-color: var(--tblr-border-color);
}

.dropdown-item {
	color: var(--tblr-secondary-color);
}

.dropdown-item:hover,
.dropdown-item:focus {
	background-color: var(--tblr-bg-surface-secondary);
	color: var(--tblr-body-color);
}

/* ============================================
   Progress Bars
   ============================================ */

.progress {
	background-color: var(--tblr-bg-surface-secondary);
}

/* ============================================
   Charts Integration (ApexCharts)
   ============================================ */

.apexcharts-canvas {
	background: transparent !important;
}

.apexcharts-tooltip {
	background: var(--tblr-bg-surface) !important;
	border: 1px solid var(--tblr-border-color) !important;
	box-shadow: 0 4px 12px rgba(23, 28, 23, 0.35) !important;
}

.apexcharts-tooltip-title {
	background: var(--tblr-bg-surface-secondary) !important;
	border-bottom: 1px solid var(--tblr-border-color) !important;
	color: var(--tblr-body-color) !important;
}

.apexcharts-tooltip-text {
	color: var(--tblr-body-color) !important;
}

.apexcharts-xaxis-label,
.apexcharts-yaxis-label {
	fill: var(--tblr-muted-color) !important;
}

.apexcharts-gridline {
	stroke: var(--tblr-border-color) !important;
}

.apexcharts-legend-text {
	color: var(--tblr-secondary-color) !important;
}

/* ============================================
   Scrollbar Styling
   ============================================ */

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--tblr-bg-surface);
}

::-webkit-scrollbar-thumb {
	background: var(--tblr-border-color);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--tblr-bg-surface-secondary);
}

/* ============================================
   Page Specific - Package List Items
   ============================================ */

.package-item {
	display: block;
	padding: 1rem;
	border-radius: 0.5rem;
	transition: background-color 0.2s ease;
	text-decoration: none;
	color: inherit;
}

.package-item:hover {
	background-color: var(--tblr-bg-surface-secondary);
	color: inherit;
}

.package-item .package-name {
	font-weight: 600;
	color: var(--tblr-body-color);
}

.package-item .package-description {
	color: var(--tblr-secondary-color);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ============================================
   Loading States
   ============================================ */

.placeholder-glow .placeholder {
	background-color: var(--tblr-bg-surface-secondary);
}

@keyframes placeholder-glow {
	50% {
		opacity: 0.4;
	}
}

/* Custom skeleton loader */
.skeleton {
	background: linear-gradient(
		90deg,
		var(--tblr-bg-surface) 25%,
		var(--tblr-bg-surface-secondary) 50%,
		var(--tblr-bg-surface) 75%
	);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: 0.25rem;
}

@keyframes shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* ============================================
   Footer
   ============================================ */

.footer {
	background-color: var(--tblr-bg-surface);
	border-top: 1px solid var(--tblr-border-color);
}

/* Footer text contrast (WCAG AA compliant) */
.footer .list-inline-item {
	color: var(--tblr-secondary-color);
}

.footer .link-secondary {
	color: #5ba8e0 !important; /* Brighter for contrast on dark bg */
	text-decoration: underline; /* Required for WCAG - links must be distinguishable */
}

.footer .link-secondary:hover {
	color: #7fbfef !important;
}

/* ============================================
   Table Description Truncation
   ============================================ */

.table .description-truncate {
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 1200px) {
	.table .description-truncate {
		max-width: 200px;
	}
}

@media (max-width: 992px) {
	.table .description-truncate {
		max-width: 150px;
	}
}

@media (max-width: 768px) {
	.table .description-truncate {
		display: none;
	}
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
	.stat-card-value {
		font-size: 1.5rem;
	}

	.page-header h1 {
		font-size: 1.5rem;
	}
}

/* ============================================
   SVG Icon System (replaces Tabler icon font)
   ============================================ */

.icon {
	width: 1.25rem;
	height: 1.25rem;
	stroke-width: 2;
	stroke: currentColor;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -0.2em;
	display: inline-block;
	flex-shrink: 0;
}

/* Size variants matching Tabler icon sizes */
.icon-sm {
	width: 1rem;
	height: 1rem;
}

.icon-md {
	width: 1.5rem;
	height: 1.5rem;
}

.icon-lg {
	width: 2rem;
	height: 2rem;
}

/* Larger sizes for feature icons */
.icon-xl {
	width: 2.5rem;
	height: 2.5rem;
}

.icon-xxl {
	width: 3rem;
	height: 3rem;
}

/* Icon with text spacing */
.icon + span,
span + .icon {
	margin-left: 0.25rem;
}

/* Navbar brand icon */
.navbar-brand .icon {
	width: 28px;
	height: 28px;
}

/* ============================================
   Compare Page
   ============================================ */

.compare-autocomplete {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1050;
	background-color: var(--tblr-bg-surface);
	border: 1px solid var(--tblr-border-color);
	border-top: none;
	border-radius: 0 0 0.375rem 0.375rem;
	max-height: 300px;
	overflow-y: auto;
	box-shadow: 0 4px 12px rgba(23, 28, 23, 0.35);
}

[data-bs-theme="light"] .compare-autocomplete {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.compare-autocomplete-item {
	display: flex;
	align-items: center;
	padding: 0.5rem 0.75rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
	border-bottom: 1px solid var(--tblr-border-color);
}

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

.compare-autocomplete-item:hover,
.compare-autocomplete-item.active {
	background-color: var(--tblr-bg-surface-secondary);
}

.compare-winner {
	color: var(--tblr-success) !important;
	font-weight: 600;
}

.compare-metric-label {
	color: var(--tblr-muted-color);
	font-size: 0.875rem;
}

.compare-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.75rem;
	background-color: var(--tblr-bg-surface-secondary);
	border: 1px solid var(--tblr-border-color);
	border-radius: 0.375rem;
	font-weight: 500;
	width: 100%;
}

.compare-chip .btn-close {
	font-size: 0.5rem;
	margin-left: auto;
}