/**
 * Mobile Simplified View
 * Shows only: Logo, Slogan, Upload, Latest Transaction Status
 */

@media (max-width: 768px) {
	/* ============================================
	   HEADER: Center logo/slogan, hide navigation
	   ============================================ */
	header > div {
		flex-direction: column;
		text-align: center;
		gap: 0.5rem;
	}

	header nav {
		display: none !important;
	}

	header > div > div:first-child {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Add spacing between header and upload section */
	header.mb-8 {
		margin-bottom: 2rem;
	}

	/* ============================================
	   UPLOAD SECTION: Touch-friendly adjustments
	   ============================================ */
	#audioDropZone {
		padding: 3rem 1.5rem;
	}

	#audioDropZone i {
		font-size: 3rem;
	}

	/* ============================================
	   RESULTS TABLE: Show only latest transaction
	   ============================================ */
	
	/* Hide the "Transcription History" heading */
	.bg-white.rounded-lg.border.border-slate-200.overflow-hidden > .px-6.py-4.border-b h2 {
		font-size: 0.875rem;
	}

	/* Hide table header */
	table thead {
		display: none;
	}

	/* Hide all rows except the first one (latest) */
	#transcriptionsTable tr:not(:first-child) {
		display: none;
	}

	/* Transform first row into a card layout */
	#transcriptionsTable tr:first-child {
		display: flex;
		flex-wrap: wrap;
		padding: 1rem;
		gap: 0.75rem;
		align-items: center;
	}

	/* Hide all cells by default */
	#transcriptionsTable tr:first-child td {
		display: none;
		padding: 0;
	}

	/* Show only filename (2nd column) and status (3rd column) */
	#transcriptionsTable tr:first-child td:nth-child(2) {
		display: block;
		flex: 1;
		font-weight: 500;
		font-size: 0.875rem;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	#transcriptionsTable tr:first-child td:nth-child(3) {
		display: block;
		flex-shrink: 0;
	}

	/* ============================================
	   MODALS: Hide on mobile (not needed)
	   ============================================ */
	#transcriptionModal,
	#jsonModal,
	#teethModal,
	#treatmentPlanModal,
	#patientModal {
		display: none !important;
	}

	/* ============================================
	   GENERAL: Reduce padding for mobile
	   ============================================ */
	.max-w-6xl {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}