/* scan_last_scan.css
   Styles for the optional "Last Scanned Card" panel (#lastScanPanel) that
   sits between the picture (#display) and the card list (.control-view) on
   the main scan page, for people with screens wide enough to fit all three
   side by side. Hidden by default; toggled by #showLastScanCompare (see
   scan.html, just above the Auto-crop pictures option) - see
   scan_last_scan.js for the JS.

   The panel's body is just the Quick Review gallery's own ".detail-compare"
   crop grid (defined in scan_gallery.css), reused as-is rather than a
   second set of near-identical rules. --gallery-thumb-height is set here
   purely because .detail-compare's own crop-chip height is derived from it
   (see scan_gallery.css) - nothing in this file renders an actual
   .gallery-thumb, so think of it as "how big would the thumbnails be" for
   sizing purposes only. */

.last-scan-panel {
	--gallery-thumb-height: 260px;
	display: flex;
	flex-direction: column;
	flex: 0 1 420px;
	min-width: 300px;
	max-width: 460px;
	max-height: 88vh;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	text-align: left;
}

.last-scan-panel-header {
	padding: 12px 16px;
	border-bottom: 1px solid #e2e2e2;
	background: #fafafa;
	flex-shrink: 0;
}

.last-scan-panel-title {
	font-size: 1rem;
	font-weight: 700;
	color: #222;
}

.last-scan-panel-body {
	flex: 1;
	overflow-y: auto;
	scrollbar-width: thin;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* The gallery's detail-compare grid is a fixed 380px, sized for sitting
   next to a gallery row's other fixed-width columns - here it's the only
   thing in the column, so it should use the panel's own width instead. */
.last-scan-panel .detail-compare {
	width: 100%;
}

.last-scan-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 160px;
	gap: 8px;
	color: #777;
}

/* Below this, the picture and the list are already tight against each
   other - a third column would either clip or force the other two to
   squeeze. The checkbox preference itself is untouched (so it re-applies
   once the window is wide enough again); this is just a hard safety net
   for whatever width the person's browser happens to be at. */
@media (max-width: 1400px) {
	.last-scan-panel {
		display: none !important;
	}
}