@tailwind base;
@tailwind components;
@tailwind utilities;

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

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

::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background: #9ca3af;
}

/* Sidebar scrollbar */
aside ::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.1);
}

aside ::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* Hide scrollbar for tab navigation on mobile */
.scrollbar-hide::-webkit-scrollbar {
	display: none;
}
.scrollbar-hide {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* Smooth transitions */
* {
	scroll-behavior: smooth;
}

/* Line clamp */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Table row cursor */
table tbody tr {
	cursor: pointer;
}

/* Dark color definitions for non-tailwind CDN */
.bg-dark-700 {
	background-color: #1e293b;
}

.bg-dark-800 {
	background-color: #0f172a;
}

.bg-dark-900 {
	background-color: #020617;
}

.from-dark-800 {
	--tw-gradient-from: #0f172a;
}

.to-dark-900 {
	--tw-gradient-to: #020617;
}

/* Offline indicator - ensure flex when visible */
#offline-indicator:not(.hidden) {
	display: flex;
}

/* PWA standalone mode - hide browser UI hints */
@media (display-mode: standalone) {
	.browser-only {
		display: none;
	}
}

/* ===== Auth Mosaic ===== */
.mosaic-img {
	width: 100%;
	object-fit: cover;
	border-radius: 10px;
	flex-shrink: 0;
	background-color: #1e293b;
}

/* Desktop mosaic (3 columns) */
.mosaic-scroll-up {
	animation: mosaicUp 40s linear infinite;
	will-change: transform;
}

.mosaic-scroll-down {
	animation: mosaicDown 48s linear infinite;
	will-change: transform;
}

.mosaic-scroll-up-slow {
	animation: mosaicUp 55s linear infinite;
	will-change: transform;
}

/* Mobile mosaic (2 columns) */
.mobile-mosaic-up {
	animation: mosaicUp 30s linear infinite;
	will-change: transform;
}

.mobile-mosaic-down {
	animation: mosaicDown 35s linear infinite;
	will-change: transform;
}

@keyframes mosaicUp {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-50%);
	}
}

@keyframes mosaicDown {
	from {
		transform: translateY(-50%);
	}

	to {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.mosaic-scroll-up,
	.mosaic-scroll-down,
	.mosaic-scroll-up-slow,
	.mobile-mosaic-up,
	.mobile-mosaic-down {
		animation: none;
	}
}

/* ===== Auth Glass Card (mobile) ===== */
.auth-glass-card {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.05),
		0 25px 50px -12px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Safe area for notch devices */
.safe-area-inset {
	padding-top: max(2.5rem, env(safe-area-inset-top));
	padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
}

/* Autofill override for dark glass inputs */
@media (max-width: 1023px) {

	.auth-glass-card input:-webkit-autofill,
	.auth-glass-card input:-webkit-autofill:hover,
	.auth-glass-card input:-webkit-autofill:focus {
		-webkit-text-fill-color: #fff;
		-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset;
		transition: background-color 5000s ease-in-out 0s;
	}
}