src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body,
#root {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh;
	min-width: 100vw;
	overflow: hidden;
}

#root {
	display: flex;
	flex-direction: column;
}

:root {
	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	font-weight: 400;

	color-scheme: light dark;
	color: rgba(255, 255, 255, 0.87);
	background-color: #242424;

	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Mobile responsive enhancements */
@media (max-width: 768px) {
	/* Ensure touch targets are large enough */
	.hamburger-btn {
		min-width: 44px;
		min-height: 44px;
	}

	/* Smooth transitions for mobile menu */
	.mobile-menu {
		transition: transform 0.3s ease-in-out;
	}

	/* Better scrolling on mobile */
	.overflow-x-auto {
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	/* Hide desktop scrollbars on mobile */
	.overflow-x-auto::-webkit-scrollbar {
		height: 4px;
	}

	.overflow-x-auto::-webkit-scrollbar-track {
		background: rgba(107, 114, 128, 0.1);
		border-radius: 2px;
	}

	.overflow-x-auto::-webkit-scrollbar-thumb {
		background: rgba(107, 114, 128, 0.5);
		border-radius: 2px;
	}
}

/* Better schedule cards */
.time-group-card {
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.2s ease;
}

.time-group-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	border-color: rgba(255, 255, 255, 0.2);
}

/* Schedule grid improvements */
.schedule-grid {
	border-collapse: separate;
	border-spacing: 0;
}

/* Day header styling */
.day-header {
	background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
	backdrop-filter: blur(10px);
	border-bottom: 2px solid #374151;
}

/* Time column styling */
.time-column {
	background: linear-gradient(90deg, #111827 0%, rgba(17, 24, 39, 0.95) 100%);
	backdrop-filter: blur(10px);
}

a {
	font-weight: 500;
	color: #646cff;
	text-decoration: inherit;
}
a:hover {
	color: #535bf2;
}

h1 {
	font-size: 3.2em;
	line-height: 1.1;
}

button {
	border-radius: 8px;
	border: 1px solid transparent;
	padding: 0.6em 1.2em;
	font-size: 1em;
	font-weight: 500;
	font-family: inherit;
	background-color: #1a1a1a;
	cursor: pointer;
	transition: border-color 0.25s;
}
button:hover {
	border-color: #646cff;
}
button:focus,
button:focus-visible {
	outline: 4px auto -webkit-focus-ring-color;
}

/* Mobile-specific styles */
@media (max-width: 1024px) {
	/* Better touch targets for mobile */
	button {
		min-height: 44px;
		min-width: 44px;
	}

	/* Smooth scrolling for mobile */
	.overflow-x-auto {
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	/* Custom scrollbar for webkit browsers */
	.scrollbar-thin::-webkit-scrollbar {
		height: 4px;
	}

	.scrollbar-thin::-webkit-scrollbar-track {
		background: #374151;
		border-radius: 2px;
	}

	.scrollbar-thin::-webkit-scrollbar-thumb {
		background: #6b7280;
		border-radius: 2px;
	}

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

	/* Prevent text selection on mobile for UI elements */
	.mobile-no-select {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}
}

/* Utility class for hiding scrollbars but keeping functionality */
.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
	display: none;
}

/* Better focus states for accessibility */
@media (max-width: 1024px) {
	button:focus {
		outline: 2px solid #3b82f6;
		outline-offset: 2px;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		color: #213547;
		background-color: #ffffff;
	}
	a:hover {
		color: #747bff;
	}
	button {
		background-color: #f9f9f9;
	}
}
