/* Nav links */
.nav-link {
	padding: 0.375rem 0.75rem;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgb(100 116 139);
	transition: all 150ms ease;
}

.nav-link:hover {
	color: rgb(15 23 42);
	background-color: rgb(241 245 249);
}

:is(.dark .nav-link) {
	color: rgb(148 163 184);
}

:is(.dark .nav-link:hover) {
	color: rgb(255 255 255);
	background-color: rgb(30 41 59);
}


/* Cards */
.card {
	background: white;
	border: 1px solid rgb(226 232 240);
	border-radius: 0.75rem;
	transition: box-shadow 150ms ease, border-color 150ms ease;
}

.card:hover {
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
}

:is(.dark .card) {
	background: #0d121e;
	border-color: rgb(30 41 59);
}

:is(.dark .card:hover) {
	border-color: rgb(51 65 85);
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2);
}

/* Stat cards */
.stat-card {
	background: white;
	border: 1px solid rgb(226 232 240);
	border-radius: 0.75rem;
	padding: 1.25rem;
}

:is(.dark .stat-card) {
	background: rgb(15 23 42);
	border-color: rgb(30 41 59);
}

/* Badges */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.5rem;
	border-radius: 5px;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.25rem;
}

.badge-green {
	background: rgb(220 252 231);
	color: rgb(22 101 52);
}

:is(.dark .badge-green) {
	background: rgb(5 46 22 / 0.5);
	color: rgb(134 239 172);
}

.badge-red {
	background: rgb(254 226 226);
	color: rgb(153 27 27);
}

:is(.dark .badge-red) {
	background: rgb(69 10 10 / 0.5);
	color: rgb(252 165 165);
}

.badge-yellow {
	background: rgb(254 249 195);
	color: rgb(133 77 14);
}

:is(.dark .badge-yellow) {
	background: rgb(69 26 3 / 0.5);
	color: rgb(253 224 71);
}

.badge-blue {
	background: rgb(219 234 254);
	color: rgb(30 64 175);
}

:is(.dark .badge-blue) {
	background: rgb(23 37 84 / 0.5);
	color: rgb(147 197 253);
}

.badge-slate {
	background: rgb(241 245 249);
	color: rgb(71 85 105);
}

:is(.dark .badge-slate) {
	background: rgb(30 41 59);
	color: rgb(148 163 184);
}

/* Tag badges — subtle variant for inline tag lists */
.badge-tag {
	background: transparent;
	color: rgb(100 116 139);
	font-weight: 400;
	font-size: 0.6875rem;
	padding: 0 0.375rem;
	border: 1px solid rgb(203 213 225);
}

:is(.dark .badge-tag) {
	color: rgb(100 116 139);
	border-color: rgb(51 65 85);
}

/* Badge icon-only variant — compact sizing for SVG-only badges */
.badge-icon {
	padding: 0.25rem;
	line-height: 0;
}

.badge-icon svg {
	display: block;
}

/* Action toggle buttons — active state */
.action-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.625rem;
	border-radius: 5px;
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 150ms ease;
	border: 1px solid transparent;
	background: transparent;
	color: rgb(148 163 184);
}

.action-toggle:hover {
	background: rgb(241 245 249);
	color: rgb(71 85 105);
}

:is(.dark .action-toggle:hover) {
	background: rgb(30 41 59);
	color: rgb(203 213 225);
}

.action-toggle.active-watch {
	background: rgb(220 252 231);
	color: rgb(22 101 52);
	border-color: rgb(187 247 208);
}

:is(.dark .action-toggle.active-watch) {
	background: rgb(5 46 22 / 0.4);
	color: rgb(134 239 172);
	border-color: rgb(5 46 22);
}

.action-toggle.active-ignore {
	background: rgb(254 226 226);
	color: rgb(153 27 27);
	border-color: rgb(254 202 202);
}

:is(.dark .action-toggle.active-ignore) {
	background: rgb(69 10 10 / 0.4);
	color: rgb(252 165 165);
	border-color: rgb(69 10 10);
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	border-radius: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 500;
	transition: all 150ms ease;
	cursor: pointer;
}

.btn-ghost {
	color: rgb(100 116 139);
	background: transparent;
}

.btn-ghost:hover {
	background: rgb(241 245 249);
	color: rgb(15 23 42);
}

:is(.dark .btn-ghost) {
	color: rgb(148 163 184);
}

:is(.dark .btn-ghost:hover) {
	background: rgb(30 41 59);
	color: rgb(226 232 240);
}

.btn-danger {
	color: rgb(239 68 68);
	background: transparent;
	border: 1px solid rgb(254 202 202);
}

.btn-danger:hover {
	background: rgb(254 242 242);
	border-color: rgb(252 165 165);
}

:is(.dark .btn-danger) {
	border-color: rgb(69 10 10);
}

:is(.dark .btn-danger:hover) {
	background: rgb(69 10 10 / 0.3);
	border-color: rgb(127 29 29);
}

/* Tables */
.table-container {
	overflow-x: auto;
	border: 1px solid rgb(226 232 240);
	border-radius: 0.75rem;
	background: white;
}

:is(.dark .table-container) {
	border-color: rgb(30 41 59);
	background: #0d121e;
}

.table-container table {
	width: 100%;
	font-size: 0.875rem;
}

.table-container thead {
	border-bottom: 1px solid rgb(226 232 240);
}

:is(.dark .table-container thead) {
	border-bottom-color: rgb(30 41 59);
}

.table-container th {
	padding: 0.625rem 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgb(100 116 139);
	text-align: left;
}

:is(.dark .table-container th) {
	color: rgb(100 116 139);
}

.table-container td {
	padding: 0.75rem 1rem;
	border-top: 1px solid rgb(241 245 249);
}

:is(.dark .table-container td) {
	border-top-color: rgb(30 41 59 / 0.5);
}

.table-container tbody tr:first-child td {
	border-top: none;
}

/* HTMX transitions */
.htmx-swapping {
	opacity: 0;
	transition: opacity 0.2s ease-out;
}

.htmx-settling {
	opacity: 1;
	transition: opacity 0.2s ease-in;
}

/* Prose — Markdown content */
.prose {
	line-height: 1.55;
	font-size: 0.75rem;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
	font-weight: 600;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	color: rgb(15 23 42);
}

:is(.dark .prose h1),
:is(.dark .prose h2),
:is(.dark .prose h3),
:is(.dark .prose h4) {
	color: rgb(241 245 249);
}

.prose h1 {
	font-size: 1.75rem;
}

.prose h2 {
	font-size: 1.5rem;
	border-bottom: 1px solid rgb(226 232 240);
	padding-bottom: 0.375rem;
}

:is(.dark .prose h2) {
	border-bottom-color: rgb(30 41 59);
}

.prose h3 {
	font-size: 1.25rem;
}

.prose p {
	margin-bottom: 1em;
}

.prose a {
	color: rgb(59 130 246);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.prose a:hover {
	color: rgb(37 99 235);
}

.prose strong {
	font-weight: 600;
}

.prose ul,
.prose ol {
	padding-left: 1.5em;
	margin-bottom: 1em;
}

.prose ul {
	list-style: disc;
}

.prose ol {
	list-style: decimal;
}

.prose li {
	margin-bottom: 0.25em;
}

.prose li > ul,
.prose li > ol {
	margin-top: 0.25em;
	margin-bottom: 0;
}

.prose blockquote {
	border-left: 3px solid rgb(59 130 246);
	padding-left: 1rem;
	color: rgb(100 116 139);
	font-style: italic;
	margin: 1em 0;
}

:is(.dark .prose blockquote) {
	color: rgb(148 163 184);
}

.prose code {
	font-family: 'JetBrains Mono', 'Fira Code', monospace;
	font-size: 0.8125em;
	background: rgb(241 245 249);
	color: rgb(71 85 105);
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
	border: 1px solid rgb(226 232 240);
}

:is(.dark .prose code) {
	background: rgb(30 41 59);
	color: rgb(226 232 240);
	border-color: rgb(51 65 85);
}

.prose pre {
	background: rgb(248 250 252);
	border: 1px solid rgb(226 232 240);
	border-radius: 0.5rem;
	padding: 1rem;
	overflow-x: auto;
	margin: 1em 0;
}

:is(.dark .prose pre) {
	background: rgb(2 6 23);
	border-color: rgb(30 41 59);
}

.prose pre code {
	background: none;
	border: none;
	padding: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
}

.prose img {
	border-radius: 0.5rem;
	margin: 1em 0;
}

.prose hr {
	border: none;
	border-top: 1px solid rgb(226 232 240);
	margin: 2em 0;
}

:is(.dark .prose hr) {
	border-top-color: rgb(30 41 59);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
	font-size: 0.875rem;
}

.prose th,
.prose td {
	border: 1px solid rgb(226 232 240);
	padding: 0.5rem 0.75rem;
	text-align: left;
}

:is(.dark .prose th),
:is(.dark .prose td) {
	border-color: rgb(30 41 59);
}

.prose th {
	background: rgb(248 250 252);
	font-weight: 600;
}

:is(.dark .prose th) {
	background: rgb(15 23 42);
}

/* Tabs */
.tab-btn {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgb(100 116 139);
	border-bottom: 2px solid transparent;
	transition: all 150ms ease;
}

.tab-btn:hover {
	color: rgb(15 23 42);
}

:is(.dark .tab-btn:hover) {
	color: rgb(226 232 240);
}

.tab-btn.active {
	color: rgb(59 130 246);
	border-bottom-color: rgb(59 130 246);
}

/* Empty states */
.empty-state {
	text-align: center;
	padding: 3rem 1rem;
	color: rgb(148 163 184);
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: rgb(148 163 184 / 0.3);
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgb(148 163 184 / 0.5);
}


.prose :first-child {
	margin-top: 0;
}