/* Modern iPhone-Style Modal Variables */
:root {
	--modal-bg: #ffffff;
	--modal-content-bg: #ffffff;
	--modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.1);
	--modal-border-radius: 16px;
	--modal-header-bg: #f8f9fa;
	--modal-header-text: #333333;
	--modal-button-primary-bg: #007bff;
	--modal-button-primary-text: #ffffff;
	--modal-button-secondary-bg: #6c757d;
	--modal-button-secondary-text: #ffffff;
	--modal-button-danger-bg: #dc3545;
	--modal-button-danger-text: #ffffff;
	--modal-input-border: #dee2e6;
	--modal-input-focus-border: #007bff;
	--modal-input-bg: #ffffff;
	--icon-info-size: clamp(1.2rem, 1.2rem + 0.5vw, 1.5rem);
}


/* === Modal Container === */
#superModal {
	position: fixed;
	/* Fixed to viewport, not affected by page scroll */
	top: 0;
	left: 0;
	z-index: var(--z-index-modal);
	/* Modal overlay */
	width: 100%;
	height: 100%;
	display: none;
	background-color: rgba(0, 0, 0, 0.5);
	/* Default overlay for non-fullscreen modals */
	pointer-events: none;
	/* Block all pointer events by default */
}

/* For fullscreen modals - remove all overlays and start below title bar */
#superModal.fullscreen-modal {
	background: var(--page-header-gradient);
	top: var(--title-bar-icons-height);
	height: calc(100vh - var(--title-bar-icons-height));
	z-index: var(--z-index-modal);
	pointer-events: none;
}

/* Allow pointer events only on the modal itself, not the backdrop */
#superModal.active {
	pointer-events: auto;
	/* Enable backdrop to catch clicks */
}

/* === Modal Container === */
.modal {
	position: absolute;
	/* Positioned within fixed #superModal container */
	top: 0;
	/* Position at top of container (viewport since parent is fixed) */
	left: 0;
	right: 0;
	margin: 0 auto;
	/* Center horizontally */
	width: calc(100% - 6px);
	/* Reduced from 20px to 6px (3px each side) */
	max-width: var(--app-max-width);
	box-sizing: border-box;
	max-height: 90%;
	overflow-y: auto;
	padding: 16px 3px;
	/* Reduced left/right padding from 16px to 3px */
	background-color: var(--modal-bg);
	border-radius: var(--modal-border-radius);
	box-shadow: var(--modal-shadow);
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.21rem);
	z-index: calc(var(--z-index-modal) + 1);
	/* Above backdrop */
	pointer-events: auto;
	/* Allow interactions with modal content */

	/* Transitions disabled to prevent animation when nested modals (like info alerts) open */
	/* transition: top 0.2s ease-in-out, left 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out, transform 0.2s ease-in-out; */
}

/* Ensure all modal content and buttons are clickable */
.modal * {
	pointer-events: auto;
	/* Modal content is interactive */
}

/* Fullscreen modal styling is handled in the dedicated section below */

/* Disable transition when modal is being closed (to prevent shrinking effect) */
.modal.closing-fullscreen {
	transition: none !important;
}

/* === Modal Header === */
#modalTitle {
	font-size: var(--font-size-xl);
	font-weight: 600;
	text-align: center;
	padding: 8px 12px;
	color: var(--modal-header-text);
	background: var(--modal-header-bg);
	border-radius: 8px;
	margin: -16px -16px 12px -16px;
}

#modalHeader {
	font-size: var(--font-size-l);
	margin-bottom: 12px;
	color: var(--modal-header-text);
}

/* === Modal Buttons === */
.modal-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	/* Default: align to left (for back button only) */
	align-items: center;
	gap: clamp(2px, 0.2rem + 0.3vw, 4px);
	margin: 12px;
	position: relative;
	/* Allow pseudo-elements to extend beyond */
	overflow: visible;
	/* Don't clip the enlarged touch zones */
}

/* When there are action buttons, use space-between layout */
.modal-buttons:has(button) {
	justify-content: space-between;
	/* Back button left, action buttons right */
}

.modal-buttons:has(button:first-child + button) {
	justify-content: space-between;
	/* Multiple buttons: back left, others on right with minimal gap */
	gap: clamp(2px, 0.2rem + 0.3vw, 4px);
}

/* Center single button when there's no back button */
.modal-buttons:not(:has(.back-button)):has(button):not(:has(button:first-child + button)) {
	justify-content: center;
}

/* === Vertical Layout for Full-Width Buttons === */
.modal-buttons.vertical {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	/* Buttons fill available width */
	gap: clamp(6px, 1vw, 12px);
	margin: 12px;
}

.modal-buttons.vertical button {
	width: 100%;
	/* Full width buttons */
	flex: 1;
	/* Equal height distribution */
	min-width: unset;
	/* Override min-width from regular buttons */
	white-space: normal;
	/* Allow text wrapping */
	line-height: 1.4;
	min-height: clamp(40px, 8vw, 50px);
	text-align: left;
	justify-content: flex-start;
	align-items: center;
	padding: clamp(6px, 1.5vw, 10px) clamp(10px, 2.5vw, 14px);
}

.modal-buttons.vertical .back-button {
	order: 1;
	/* Back button at bottom */
	width: 100%;
	margin-top: clamp(6px, 1vw, 12px);
	padding: 6px 12px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	background: #28a745;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: var(--font-size-modal-button);
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s, box-shadow 0.2s;
}

.modal-buttons.vertical .back-button:hover {
	background: #218838;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.modal-buttons.vertical .back-button:active {
	background: #1e7e34;
	transform: translateY(0);
}

.modal-buttons-center {
	display: flex;
	justify-content: flex-end;
	gap: var(--spacing-small);
	margin-top: 16px;
	align-items: center;
	flex: 1;
	/* Take up remaining space, pushing back button to the left */
}

/* Highlight for default modal button (mobile style) */
.modal-default-button {
	outline: 2px solid #007bff;
	outline-offset: 2px;
}

.modal-default-button:active {
	outline: 2px solid #0056b3;
}


/* === Modal Footer === */
.modal-footer {
	display: none;
	/* Hidden by default */
	margin-top: 12px;
	padding-top: 10px;
	text-align: center;
	font-size: var(--font-size-m);
	color: #6c757d;
	border-top: 2px solid var(--modal-input-border);
}

.modal-footer:not(:empty) {
	display: block;
	/* Show when it has content */
}

.modal button {
	padding: clamp(2px, 0.2rem + 0.2vw, 4px) clamp(4px, 0.4rem + 0.3vw, 8px);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	background-color: var(--modal-button-primary-bg);
	color: var(--modal-button-primary-text);
	justify-content: center;
	align-items: center;
	text-align: center;
	cursor: pointer;
	flex: 0 1 auto;
	min-width: clamp(35px, 3.5rem + 0.5vw, 70px);
	font-size: var(--font-size-modal-button);
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	white-space: nowrap;
	display: flex;
	flex-direction: row;
	gap: 8px;
}

/* Button text and description styling */
.modal button .button-text {
	display: block;
	font-weight: 600;
}

.modal button .button-description {
	display: block;
	font-size: clamp(0.65rem, 0.65rem + 0.5vw, 0.85rem);
	font-weight: 400;
	color: #ffffff;
	white-space: nowrap;
}

/* Hide empty description spans - only show if there's actual content */
.modal button .button-description:empty {
	display: none;
}

/* For vertical layout buttons, adjust padding and text alignment */
.modal-buttons.vertical button {
	text-align: left;
	justify-content: flex-start;
	align-items: center;
	padding: clamp(6px, 1.5vw, 10px) clamp(10px, 2.5vw, 14px);
}

/* Exclude info buttons from modal button styling */
.modal button.info-button {
	padding: 8px;
	background-color: transparent;
	color: var(--info-button-color);
	box-shadow: none;
	min-width: 32px;
	font-size: var(--info-button-size);
	font-weight: normal;
}

.modal button.info-button:hover {
	transform: none;
	box-shadow: none;
	background-color: rgba(0, 0, 0, 0.05);
}

.modal button.info-button:active {
	transform: none;
	background-color: rgba(0, 0, 0, 0.08);
}

.modal button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.modal button:active {
	transform: translateY(0);
}

.modal button.secondary-button {
	background-color: var(--modal-button-secondary-bg);
	color: var(--modal-button-secondary-text);
}

.modal button.danger-button,
.modal button[id*="delete"],
.modal button[id*="cancel"] {
	background-color: var(--modal-button-danger-bg);
	color: var(--modal-button-danger-text);
}

.close-button {
	position: absolute;
	top: 0px;
	right: 16px;
	font-size: 28px;
	border: none;
	background: none;
	padding: 8px;
	color: #6c757d;
	cursor: pointer;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.close-button:hover {
	background: rgba(0, 0, 0, 0.05);
	color: #333;
}

.close-button:focus {
	color: var(--primary-color);
}

/* === Back Button === */
.back-button {
	padding: 6px 12px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	background: #28a745;
	color: white;
	display: flex;
	align-items: center;
	gap: 6px;
	order: -1;
	/* Always appear first (leftmost) in flex container */
	font-size: var(--font-size-modal-button);
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	min-width: 60px;
	transition: transform 0.2s, box-shadow 0.2s;
	position: relative;
	pointer-events: auto;
}

/* Enlarged touch zone using pseudo-element */
.back-button::before {
	content: '';
	position: absolute;
	top: -12px;
	left: -12px;
	right: -12px;
	bottom: -12px;
	z-index: -1;
	pointer-events: auto;
}

.back-button:hover {
	background: #218838;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.back-button:active {
	background: #1e7e34;
	transform: translateY(0);
}

.back-label {
	font-size: var(--font-size-modal-button);
	font-weight: 600;
	display: inline-block;
	white-space: nowrap;
}

/* Hide label when empty */
.back-button:has(.back-label:empty) .back-label {
	display: none;
}

/* === Modal Message and Error === */
.modal-message {
	overflow: hidden;
	overflow-wrap: break-word;
}

.modal-error {
	margin-top: var(--spacing-small);
	color: var(--error-color);
	text-align: center;
	font-size: var(--font-size-xl);
}


.modal-message {
	overflow: hidden;
	overflow-wrap: break-word;
}

/* Form Layout */
.grid-container {
	display: grid;
	gap: 10px;
	width: calc(100% - 10px);
	/* full width minus gap */
}

.form-group {
	display: flex;
	align-items: center;
	gap: 4px;
}

.form-label {
	flex: 0 0 auto;
	min-width: 80px;
	text-align: left;
	color: var(--modal-header-text);
	font-weight: 600;
}

.modal-row .form-label {
	min-width: 0;
}

.input-wrapper {
	flex: 1;
	min-width: 100px;
	display: flex;
	align-items: center;
}

.field-info-arrow {
	margin-left: 3px;
	cursor: pointer;
	color: var(--primary-color, #007bff);
	font-size: 0.6em;
	opacity: 0.5;
	transition: opacity 0.2s;
}

.field-info-arrow:hover {
	opacity: 1;
}

.grid-checkbox-info-arrow {
	margin-left: 3px;
	cursor: pointer;
	color: var(--primary-color, #007bff);
	font-size: 0.6em;
	opacity: 0.5;
	transition: opacity 0.2s;
}

.grid-checkbox-info-arrow:hover {
	opacity: 1;
}

.input-wrapper input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0 var(--spacing-small) 0 0;
	accent-color: var(--accent-color);
	cursor: pointer;
}

/* Red checkbox variant for dangerous actions */
.red-checkbox input[type="checkbox"] {
	accent-color: #dc3545;
}



/* === Form Field Defaults === */
.modal input,
.modal select,
.modal textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 4px 12px;
	font-size: var(--font-size-m);
	border: 2px solid var(--modal-input-border);
	border-radius: 8px;
	text-align: left;
	text-align-last: left;
	background-color: var(--modal-input-bg);
}

.modal input:focus,
.modal select:focus,
.modal textarea:focus {
	outline: none;
	border-color: var(--modal-input-focus-border);
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.modal select {
	background-color: white;
	cursor: pointer;
}

.modal-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 4px;
	margin-top: 4px;
}

.modal-row .form-label {
	font-style: italic;
	color: gray;
}

.modal-field {
	/* make each field a mini-flex of [label][input] */
	display: flex;
	align-items: center;
	gap: 0.5rem;
	/* space between label & input */
	flex: 1 1 calc((100% - 2 * 0.75rem) / 3);
	min-width: 180px;
	/* when it hits this, it wraps */
	box-sizing: border-box;
}

/* force all labels to be inline-blocks so width/white-space work */
.modal-field .form-label {
	display: inline-block;
	white-space: nowrap;
	/* prevent wrapping inside the label */
	margin: 0;
	/* clear any browser default margins */
}

/* only the "first-in-line" ones never shrink smaller */
.modal-field.first-in-line .form-label {
	flex-shrink: 0;
}

/* Label widths are controlled by inline styles from modal.js */


/* allow the label + input to wrap onto multiple lines */
.modal-body .form-group {
	display: flex;
	flex-wrap: wrap;
	/* ← let children wrap */
	align-items: flex-start;
	/* so wrapped inputs don’t get vertically centered */
}

/* allow the label itself to break and wrap */
.modal-body .form-label {
	flex: 0 0 auto;
	/* keep its own width behavior */
	align-self: center;
	white-space: normal;
	/* ← allow wrapping */
	word-break: break-word;
	/* ← break long words if needed */
}

/* === Profile Dialog Footer === */
.profile-dialog-footer {
	text-align: center;
}

.delete-account-link {
	color: #dc3545;
	text-decoration: none;
	font-size: var(--font-size-m);
	cursor: pointer;
	transition: color 0.2s ease;
}

.delete-account-link:hover {
	color: #c82333;
	text-decoration: underline;
}

.delete-account-link:active {
	color: #a71e2a;
}

/* Player statistics footer */
.player-stats-footer {
	text-align: center;
	padding: var(--spacing-small);
	font-size: var(--font-size-ms);
	color: var(--secondary-color);
	font-style: italic;
	background-color: var(--secondary-bg-color);
	border-top: 1px solid var(--border-color);
	margin-top: var(--spacing-small);
}

/* === Grid Field System === */
/* Grid field container for horizontal layout of sub-fields */
.grid-field {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
	margin-bottom: var(--spacing-medium);
}

.grid-main-label {
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: var(--spacing-small);
}

.grid-container {
	display: grid;
	gap: var(--spacing-small);
	align-items: start;
	padding: var(--spacing-small);
	background-color: var(--secondary-bg-color, #f8f9fa);
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color, #dee2e6);
}

.grid-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
}

/* Checkbox items in grid - styles moved to responsive section below */

.grid-item .checkbox-wrapper input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--accent-color);
	cursor: pointer;
}

/* Checkbox label styles moved to responsive section below */

/* Sub-labels for other field types in grid */
.grid-sub-label {
	font-size: var(--font-size-s);
	font-weight: 500;
	color: var(--text-color);
	margin-bottom: 2px;
	display: block;
}

/* Grid inputs and selects */
.grid-input,
.grid-select {
	width: 100%;
	font-size: var(--font-size-s);
	padding: 4px 6px;
	border: 1px solid var(--border-color);
	border-radius: calc(var(--border-radius) / 2);
	background-color: white;
}

.grid-input:focus,
.grid-select:focus {
	outline: none;
	border-color: var(--accent-color);
	box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb, 0, 123, 255), 0.25);
}

/* 1) Let the grid cell shrink */
.grid-container .grid-item {
	min-width: 0;
}

/* 2) Let the flex row shrink too */
.grid-item .checkbox-wrapper {
	min-width: 0;
	width: 100%;
	/* optional but helps */
}

/* 3) Make the label the flexible, truncating item */
.grid-item .checkbox-label {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	/* safest for ellipsis */
}

/* keep the checkbox from stealing space */
.grid-item .checkbox-wrapper input[type="checkbox"] {
	flex: 0 0 auto;
}

/* Tighter spacing for checkbox-only grids */
.grid-container {
	min-width: 0;
	/* Allow shrinking */
}

.grid-item .checkbox-wrapper {
	display: flex;
	align-items: center;
	gap: 4px;
	/* Reduced from 6px */
	cursor: pointer;
	padding: 1px;
	/* Reduced from 2px */
	white-space: nowrap;
	/* Prevent label wrapping */
}

/* Right-aligned checkbox variant */
.grid-item .checkbox-wrapper.checkbox-right {
	justify-content: flex-start;
	/* Align to left (since we're reversing) */
	flex-direction: row-reverse;
	/* Checkbox on right, label on left */
}

.grid-item .checkbox-label {
	font-size: var(--font-size-m);
	cursor: pointer;
	user-select: none;
	margin: 0;
	min-width: 0;
	flex: none;
	white-space: nowrap;
	/* Prevent text wrapping */
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Grid variations */
.grid-container.compact {
	gap: 6px;
	padding: 6px;
}

.grid-container.spacious {
	gap: var(--spacing-medium);
	padding: var(--spacing-medium);
}

/* Two-column layout for common use cases */
.grid-container.two-columns {
	grid-template-columns: 1fr 1fr;
}

/* Three-column layout */
.grid-container.three-columns {
	grid-template-columns: repeat(3, 1fr);
}

/* Four-column layout */
.grid-container.four-columns {
	grid-template-columns: repeat(4, 1fr);
}

/* Auto-fit columns (default behavior) */
.grid-container.auto-fit {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Special styling for checkbox-only grids */
.grid-container.checkbox-grid {
	background-color: transparent;
	border: none;
	padding: 0;
}

.grid-container.checkbox-grid .grid-item {
	align-items: center;
}

.grid-container.checkbox-grid .checkbox-wrapper {
	padding: var(--spacing-small);
	border-radius: var(--border-radius);
	transition: background-color 0.2s ease;
}

.grid-container.checkbox-grid .checkbox-wrapper:hover {
	background-color: var(--secondary-bg-color, #f8f9fa);
}


/* Fullscreen modal content - starts below title bar */
.modal.fullscreen-display {
	position: absolute;
	/* Positioned within #superModal parent */
	left: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	max-width: none;
	/* Parent already constrains width */
	max-height: none;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	overflow-y: auto;
	background: var(--page-header-gradient);
	/* Light blue gradient matching page header */
	z-index: calc(var(--z-index-dropdown) + 1);
	/* Above backdrop, below menu */
	pointer-events: auto;
	/* Re-enable for modal content */
}

.modal-content {
	border: lightgray solid 2px;
	padding: 4px;
	background-color: var(--modal-content-bg);
}

/* Switch User Section Styling */
.switch-user-header {
	font-weight: bold;
	color: #0066cc;
	background: linear-gradient(90deg, #f0f8ff 0%, #e3f2fd 100%);
	padding: 10px;
	border-radius: 6px;
	border-left: 4px solid #0066cc;
	margin: 15px 0 10px 0;
	text-align: center;
}

.switch-user-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin: 10px 0;
	flex-wrap: wrap;
}

.switch-user-actions .btn {
	padding: 8px 16px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s ease;
}

.switch-user-actions .btn-primary {
	background-color: #0066cc;
	color: white;
}

.switch-user-actions .btn-primary:hover {
	background-color: #0052a3;
}

.switch-user-actions .btn-secondary {
	background-color: #6c757d;
	color: white;
}

.switch-user-actions .btn-secondary:hover {
	background-color: #545b62;
}

.switch-user-status {
	margin-top: 10px;
	padding: 8px;
	border-radius: 4px;
	text-align: center;
	font-size: 14px;
	min-height: 20px;
}

.switch-user-status div {
	margin: 5px 0;
}

/* Responsive switch user section - linear scaling */
.switch-user-actions {
	flex-direction: column;
	align-items: center;
	gap: clamp(8px, 2vw, 12px);
}

.switch-user-actions .btn {
	width: clamp(160px, 40vw, 200px);
	max-width: 100%;
}