@charset "UTF-8";

/* ============================================================
   PREVIEW MODAL STYLES
   Plate Preview modal shown when Preview button is clicked
   Shared between admin and user pages
   ============================================================ */

/* ============================================================
   PREVIEW PANEL & CARDS
   ============================================================ */

.selector-card {
	height: 500px;
	min-width: 380px;
	background: white;
	border: 1px solid #ddd;
	border-radius: var(--modal-radius);
	display: flex;
	flex-direction: column;
	overflow: visible;
}

/* Card size variants based on plate density */
.selector-card.size-384 {
	height: 560px;
	min-width: 600px;
}

.selector-card.size-1536 {
	height: 780px;
	min-width: 900px;
}

.selector-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: #f8f8f8;
	border-bottom: 1px solid #ddd;
}

.selector-card-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-body);
}

.selector-card-stats {
	font-size: 12px;
	color: #666;
	min-width: 140px;
	text-align: right;
}

.selector-card-header .close-btn {
	background: none;
	border: none;
	font-size: 20px;
	color: #999;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
	transition: color 0.15s ease;
}

.selector-card-header .close-btn:hover {
	color: var(--text-body);
}

.selector-card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 10px;
	overflow: visible;
}

.plate-grid-container {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.selector-helpers {
	display: flex;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid #eee;
	margin-top: 12px;
}

.helper-btn {
	padding: 6px 12px;
	font-size: 11px;
	font-weight: 500;
	color: #555;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: var(--input-radius);
	cursor: pointer;
	transition: all 0.15s ease;
}

.helper-btn:hover {
	background: #eee;
	border-color: #ccc;
}

.helper-btn:active {
	background: #e0e0e0;
}

/* ============================================================
   PLATE GRID & WELLS (for preview)
   ============================================================ */

.plate-grid {
	display: grid;
	gap: 0;
	width: max-content;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
}

.plate-grid .well {
	width: 20px;
	height: 20px;
	background: white;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	color: #999;
	transition: background-color 0.1s ease;
	user-select: none;
}

.plate-grid .well:hover {
	background: #f0f0f0;
}

.plate-grid .well.selected {
	background: #4292c6;
	color: white;
}

.plate-grid .well.targeted {
	background: #4292c6;
}

/* ============================================================
   PLATE PREVIEW NAVIGATION
   ============================================================ */

.plate-preview-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #eee;
	margin-bottom: 8px;
}

.plate-preview-nav .btn {
	padding: 6px 12px;
	font-size: 12px;
}

.plate-preview-nav .btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.preview-step-info {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-body);
	min-width: 140px;
	text-align: center;
}

/* ============================================================
   PLATE FILL STATS
   ============================================================ */

.plate-fill-stats {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 0;
	font-size: 12px;
	color: #666;
}

.plate-fill-stats .stat-value {
	font-weight: 600;
	color: var(--text-body);
}

.plate-fill-stats .stat-sep {
	color: #999;
}

/* Plate grid cells use inline SVG circles - no background needed */
.plate-grid-container .well {
	border: none;
	background: white;
}

/* ============================================================
   THEMED PREVIEW MODAL STYLES
   Cards, titles, labels, tooltips for plate preview
   ============================================================ */

.preview-card {
	background: var(--card-bg);
	border: 1px solid var(--preview-card-border);
	padding: 25px 25px 25px 25px;
	border-radius: var(--modal-radius);
	width: max-content;
	box-shadow: rgba(50, 50, 50, 0.20) 0px 30px 30px -20px;
}

.preview-title {
	color: var(--text-body);
	font-size: 14px;
	font-weight: 600;
	padding-bottom: 18px;
}

.preview-grid {
	/* No outer border - row/col labels provide visual structure */
}

.preview-header {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	color: #666;
	-webkit-user-select: none;
	user-select: none;
}

.preview-cell {
	background: var(--card-bg);
	border-right: 1px solid var(--preview-cell-border);
	border-bottom: 1px solid var(--preview-cell-border);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-size: var(--cell-font, 10px);
	font-weight: 500;
}

.preview-cell.disabled {
	background: var(--preview-cell-disabled);
}

.legend-label {
	color: var(--text-body);
	font-size: 11px;
	font-weight: 500;
}

.legend-swatch {
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.preview-cell-text {
	color: #000;  /* Black text on white cell background */
}

.preview-tooltip {
	background: var(--tooltip-bg);
	color: var(--text-body);
	position: absolute;
	padding: 8px 12px;
	border-radius: var(--tooltip-radius);
	font-size: 12px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
	z-index: 1000;
}

.preview-tooltip-arrow {
	position: absolute;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--tooltip-bg);
}