/**
 * Student Academic Calculators - Responsive Layout Rules
 */

@media (max-width: 640px) {
	.sac-calculator-wrapper {
		padding: 1rem;
		margin: 1rem 0;
		border-radius: var(--sac-radius);
	}

	.sac-calculator-title {
		font-size: var(--sac-font-size-xl);
	}

	.sac-form-grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.sac-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.sac-actions .sac-btn {
		width: 100%;
	}

	/* Responsive Table Transformation: Stack rows into readable cards */
	.sac-table-container {
		border: none;
		overflow-x: visible;
	}

	.sac-table,
	.sac-table thead,
	.sac-table tbody,
	.sac-table th,
	.sac-table td,
	.sac-table tr {
		display: block;
	}

	.sac-table thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.sac-table tbody tr {
		background: var(--sac-surface);
		border: 1px solid var(--sac-border);
		border-radius: var(--sac-radius);
		padding: 0.875rem;
		margin-bottom: 0.875rem;
		position: relative;
	}

	.sac-table td {
		border: none;
		padding: 0.375rem 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.sac-table td::before {
		content: attr(data-label);
		font-weight: 600;
		font-size: var(--sac-font-size-xs);
		color: var(--sac-text-muted);
		margin-bottom: 0.25rem;
		text-transform: uppercase;
		letter-spacing: 0.025em;
	}

	.sac-table td.sac-col-action {
		width: 100%;
		margin-top: 0.5rem;
		padding-top: 0.5rem;
		border-top: 1px dashed var(--sac-border);
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.sac-table td.sac-col-action::before {
		display: none;
	}

	.sac-table td .sac-input,
	.sac-table td .sac-select {
		height: var(--sac-touch-target);
		font-size: var(--sac-font-size-base);
	}

	.sac-result-primary-number {
		font-size: var(--sac-font-size-2xl);
	}
}