.pack485-box {
	max-width: 420px;
	margin: 2em auto;
	padding: 2em;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fafafa;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pack485-box h2 {
	margin-top: 0;
}

.pack485-box p {
	margin: 0.75em 0;
}

.pack485-box label {
	font-weight: 600;
	font-size: 0.9em;
}

.pack485-box input[type="email"],
.pack485-box input[type="password"],
.pack485-box input[type="text"] {
	width: 100%;
	padding: 0.5em;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.pack485-box button {
	background: #2271b1;
	color: #fff;
	border: none;
	padding: 0.6em 1.4em;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1em;
}

.pack485-box button:hover {
	background: #135e96;
}

/* "Continue as..." picker shown in place of the login form when one
   login matches more than one linked account (see the `leaders` table's
   linked_family_id comment in class-pack485-db.php) - buttons already
   pick up .pack485-box button's styling above, this just stacks them. */
#pack485-role-choice {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	align-items: flex-start;
}

#pack485-role-choice .pack485-role-choice-btn {
	width: 100%;
}

#pack485-role-choice .pack485-role-choice-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.pack485-notice {
	padding: 0.75em 1em;
	border-radius: 4px;
	margin-bottom: 1em;
	font-size: 0.9em;
}

.pack485-notice-error {
	background: #fde8e8;
	color: #9b1c1c;
	border: 1px solid #f5c2c2;
}

.pack485-notice-success {
	background: #e8f8ef;
	color: #157347;
	border: 1px solid #b7e4c7;
}

.pack485-password-wrap {
	position: relative;
	display: block;
}

.pack485-password-wrap input {
	padding-right: 2.4em !important;
}

.pack485-toggle-password {
	position: absolute;
	right: 0.4em;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.1em;
	line-height: 1;
	padding: 0.2em;
	opacity: 0.55;
}

.pack485-toggle-password:hover {
	opacity: 0.9;
	background: none;
}

.pack485-toggle-password.is-visible {
	opacity: 1;
}

.pack485-signup h3 {
	margin-top: 1.5em;
	margin-bottom: 0.3em;
	border-bottom: 1px solid #ddd;
	padding-bottom: 0.3em;
}

/* Groups Date of Birth / Grade / Gender onto one line on the Signup
   form, instead of each taking its own full-width row - wraps onto
   multiple lines on narrow screens rather than squeezing. */
.pack485-signup-row-3 {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.pack485-signup-row-3 > p {
	flex: 1 1 140px;
	margin: 0;
}

/* Per-parent Christian / HOC5 member checkboxes on the Signup form -
   same fields as Pack 485 Admin > Families' create/edit form. */
.pack485-signup-checkbox-row {
	display: flex;
	gap: 1.5em;
	align-items: center;
	margin: 0.6em 0 1.2em;
}

.pack485-signup-checkbox-row label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 400;
}

.pack485-fee-summary {
	background: #eef6ff;
	border: 1px solid #b6d8f2;
	border-radius: 4px;
	padding: 0.75em 1em;
	margin: 1em 0;
}

/* ---------- Member Area ---------- */

.pack485-member-area {
	max-width: 800px;
	margin: 2em auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pack485-family-info-box {
	background: #f7f9fb;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	padding: 1em;
	margin-bottom: 1em;
	font-size: 0.92em;
	color: #444;
}

.pack485-family-info-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.pack485-family-info-header h3 {
	margin: 0;
	font-size: 1em;
}

#pack485-family-info-display div {
	margin: 0.2em 0;
}

.pack485-family-info-box h4 {
	margin: 0 0 0.4em 0;
}

.pack485-member-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 1em;
	margin-bottom: 1em;
	border-bottom: 1px solid #ddd;
}

.pack485-scout-picker {
	display: flex;
	gap: 0.75em;
	flex-wrap: wrap;
	margin-bottom: 1.5em;
}

.pack485-scout-picker-btn {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 1em !important;
	border: 1px solid #ccc !important;
	border-radius: 30px !important;
	background: #fff !important;
	color: #333 !important;
	cursor: pointer;
	box-shadow: none !important;
	text-transform: none !important;
	font-weight: 400 !important;
}

.pack485-scout-picker-btn img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}

.pack485-scout-picker-btn.is-active {
	border-color: #2271b1 !important;
	background: #eaf2fa !important;
	color: #2271b1 !important;
	font-weight: 600 !important;
}

.pack485-scout-title {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 1em;
}

.pack485-scout-title-text h2 {
	margin-bottom: 0.15em;
}

.pack485-scout-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.pack485-enroll-next-year-btn {
	margin-left: auto;
	white-space: nowrap;
}

.pack485-enroll-next-year-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.pack485-tab-nav {
	display: flex;
	gap: 0.25em;
	flex-wrap: wrap;
	border-bottom: 2px solid #ddd;
	margin-bottom: 1.5em;
}

.pack485-tab-link {
	background: #f4f4f4 !important;
	border: none !important;
	border-bottom: 2px solid #ccc !important;
	padding: 0.6em 1em !important;
	cursor: pointer;
	font-size: 0.95em !important;
	color: #333 !important;
	margin-bottom: -2px;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	font-weight: 400 !important;
}

.pack485-tab-link:hover {
	background: #e8e8e8 !important;
	color: #222 !important;
}

.pack485-tab-link.is-active {
	background: #e5f1fb !important;
	border-bottom: 3px solid #2271b1 !important;
	color: #135e96 !important;
	font-weight: 700 !important;
	border-radius: 4px 4px 0 0 !important;
}

.pack485-empty-state {
	color: #666;
	font-style: italic;
	padding: 1em 0;
}

.pack485-item-card {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1em;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	padding: 1em;
	margin-bottom: 0.75em;
}

.pack485-item-info {
	flex: 1;
	min-width: 0;
}

.pack485-item-info p {
	margin: 0.3em 0;
	color: #555;
}

.pack485-item-action {
	flex-shrink: 0;
}

.pack485-badge {
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: 20px;
	background: #eee;
	color: #555;
	font-size: 0.8em;
	margin-top: 0.4em;
	margin-right: 0.3em;
}

.pack485-badge-done {
	background: #e8f8ef;
	color: #157347;
}

.pack485-badge-pending {
	background: #fff4e5;
	color: #a35b00;
}

.pack485-badge-rewarded {
	background: #eef0ff;
	color: #3a3aad;
}

.pack485-badge-error {
	background: #fde8e8;
	color: #9b1c1c;
}

.pack485-badge-due {
	background: #eee;
	color: #555;
}

.pack485-badge-overdue {
	background: #fde8e8;
	color: #9b1c1c;
}

.pack485-due-overdue-text {
	color: #9b1c1c;
}

.pack485-simple-table {
	width: 100%;
	border-collapse: collapse;
}

.pack485-simple-table th,
.pack485-simple-table td {
	text-align: left;
	padding: 0.6em 0.8em;
	border-bottom: 1px solid #eee;
}

.pack485-profile-form h3 {
	margin-top: 1.3em;
	margin-bottom: 0.3em;
	border-bottom: 1px solid #ddd;
	padding-bottom: 0.3em;
}

.pack485-profile-columns {
	display: flex;
	gap: 2.5em;
	flex-wrap: wrap;
}

.pack485-profile-col {
	flex: 1 1 300px;
	min-width: 280px;
}

.pack485-profile-col h3:first-child {
	margin-top: 0;
}

.pack485-profile-form input[type="text"],
.pack485-profile-form input[type="email"],
.pack485-profile-form input[type="date"],
.pack485-profile-form select {
	width: 100%;
	max-width: 400px;
	padding: 0.5em;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.pack485-patch-requirements {
	font-size: 0.9em;
	color: #444;
	margin: 0.4em 0;
}

/* ---------- Den Leader Dashboard ---------- */

.pack485-dl-dashboard {
	max-width: 900px;
	margin: 2em auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pack485-scout-grid {
	display: grid;
	grid-template-columns: repeat(6, 160px);
	gap: 1em;
	justify-content: flex-start;
}

.pack485-scout-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.35em;
	width: 160px;
	box-sizing: border-box;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	padding: 1em 0.75em;
	background: #fff;
	cursor: pointer;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.pack485-scout-card:hover,
.pack485-scout-card:focus-visible {
	border-color: #2271b1;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
	outline: none;
}

.pack485-scout-card .pack485-scout-avatar {
	width: 64px;
	height: 64px;
}

.pack485-scout-card-info {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	width: 100%;
}

.pack485-scout-card-name {
	font-weight: 600;
	overflow-wrap: break-word;
}

.pack485-scout-card-dob {
	font-size: 0.78em;
	color: #888;
}

@media (max-width: 640px) {
	.pack485-scout-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.pack485-scout-card {
		width: auto;
	}
}

.pack485-scout-grid-sub {
	font-size: 0.82em;
	color: #666;
}

.pack485-adventure-edit-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 0.5em;
}

.pack485-adventure-edit-form input[type="text"] {
	width: 100%;
	max-width: 400px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 0.5em;
}

.pack485-item-action .button {
	margin-left: 0.3em;
}

.pack485-item-action .button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.pack485-patch-complete-label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.pack485-patch-complete-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.pack485-patch-complete-label input[type="checkbox"]:disabled {
	cursor: not-allowed;
}

.pack485-attendance-scroll,
.pack485-patch-progress-scroll {
	overflow-x: auto;
}

.pack485-attendance-grid th,
.pack485-attendance-grid td,
.pack485-patch-progress-grid th,
.pack485-patch-progress-grid td {
	white-space: nowrap;
	padding: 0.5em 0.7em;
	text-align: center;
}

.pack485-attendance-grid th:first-child,
.pack485-attendance-grid td:first-child,
.pack485-patch-progress-grid th:first-child,
.pack485-patch-progress-grid td:first-child {
	position: sticky;
	left: 0;
	background: #fff;
	white-space: normal;
	text-align: left;
}

/* Each Den renders its own separate <table>, so without a fixed layout
   and an explicit first-column width, every table auto-sizes its Scout
   column independently based on that Den's longest name - causing the
   patch/meeting columns to start at different x-positions from one Den
   to the next. table-layout: fixed plus a fixed first-column width
   forces every Den's table (and its remaining, evenly-split columns) to
   line up - shared here between Patch Progress and Attendance since
   both have the same one-table-per-Den structure. */
.pack485-patch-progress-grid,
.pack485-attendance-grid {
	table-layout: fixed;
	width: 100%;
}

.pack485-patch-progress-grid th:first-child,
.pack485-patch-progress-grid td:first-child,
.pack485-attendance-grid th:first-child,
.pack485-attendance-grid td:first-child {
	width: 190px;
}

.pack485-grid-scout-cell {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.pack485-grid-scout-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.pack485-den-accordion-toggle {
	display: flex;
	align-items: center;
	justify-content: flex-start !important;
	gap: 0.5em;
	background: none;
	border: none;
	border-bottom: 1px solid #ddd;
	padding: 0 0 0.4em;
	margin: 0 0 0.4em;
	font-size: 1.3em;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
	width: 100%;
	text-align: left !important;
}

.pack485-den-accordion-chevron {
	display: inline-block;
	transition: transform 0.15s ease;
	font-size: 1em;
	line-height: 1;
}

.pack485-den-accordion-toggle.is-collapsed .pack485-den-accordion-chevron {
	transform: rotate(-90deg);
}

.pack485-attendance-checkbox,
.pack485-patch-checkbox,
.pack485-patch-awarded-checkbox {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.pack485-patch-checkbox:disabled,
.pack485-patch-awarded-checkbox:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.pack485-patch-checkbox-pair {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
}

.pack485-patch-subheader {
	display: flex;
	justify-content: center;
	gap: 0.7em;
	font-size: 0.7em;
	font-weight: normal;
	color: #666;
	margin-top: 2px;
	white-space: nowrap;
}

.pack485-roster-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1em;
}

.pack485-roster-photo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.pack485-roster-name-cell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	line-height: 1.3;
}

/* Table cells default to vertical-align: middle, and a <button>'s own
   line-height makes its box taller than plain text - together that was
   pushing the whole Scout column down relative to Grade/Parent Contact
   (which have no button in them). Anchoring every Roster cell to the
   top, and tightening the button's own line-height, keeps every
   column's content starting at the same vertical position. */
.pack485-roster-table td {
	vertical-align: top;
}

/* Qualified with the parent class (not just .pack485-scout-name-link
   alone) to raise specificity above a theme's generic `button { ... }`
   reset - a single-class selector can still lose to some themes'
   own !important + higher-specificity button rules. The inner span
   (below) is a second, independent backstop: even if the button itself
   stays theme-centered, forcing the span to display:block/text-align:left
   still lines the visible text up correctly. */
.pack485-roster-name-cell .pack485-scout-name-link {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.3 !important;
	color: #2271b1 !important;
	cursor: pointer;
	text-decoration: none !important;
}

.pack485-roster-name-cell .pack485-scout-name-link:hover {
	color: #135e96 !important;
	text-decoration: underline !important;
}

.pack485-roster-name-cell .pack485-scout-name-text {
	display: block !important;
	text-align: left !important;
	width: 100% !important;
}

@media print {
	.pack485-dl-dashboard .pack485-member-header,
	.pack485-dl-dashboard .pack485-tab-nav,
	.pack485-dl-dashboard #pack485-print-roster-btn {
		display: none !important;
	}
	.pack485-dl-dashboard .pack485-tab-panel {
		display: none !important;
	}
	.pack485-dl-dashboard #pack485-dl-roster {
		display: block !important;
	}
}

/* ---------- Front-End Admin Dashboard (Cubmaster/Committee) ---------- */

.pack485-admin-dashboard {
	max-width: 1000px;
	margin: 2em auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pack485-den-block {
	margin-bottom: 2em;
}

/* Sub-heading above each den's own block on the DL Dashboard's
   Adventures/Adventure Progress tabs, only shown at all for a
   grade-scoped leader who manages more than one den (v0.44.0) - a
   normal single-den leader never sees this, so their layout is
   unchanged. */
.pack485-dl-den-subheading {
	margin: 2em 0 0.75em;
	padding-bottom: 0.4em;
	border-bottom: 2px solid #2271b1;
}

.pack485-dl-den-subheading:first-child {
	margin-top: 0;
}

.pack485-den-block h3 {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	flex-wrap: wrap;
	border-bottom: 1px solid #ddd;
	padding-bottom: 0.4em;
	margin-bottom: 1em;
}

.pack485-roster-den-block {
	margin-bottom: 2.5em;
}

.pack485-roster-den-block h4 {
	margin-bottom: 0.5em;
}

@media print {
	.pack485-admin-dashboard .pack485-member-header,
	.pack485-admin-dashboard .pack485-tab-nav,
	.pack485-admin-dashboard #pack485-print-all-rosters-btn {
		display: none !important;
	}
	.pack485-admin-dashboard .pack485-tab-panel {
		display: none !important;
	}
	.pack485-admin-dashboard #pack485-ad-rosters {
		display: block !important;
	}
	.pack485-roster-den-block:not(:first-child) {
		page-break-before: always;
	}
}

/* ---------- Payment Receipt (Member Area) ---------- */

#pack485-receipt-print-container {
	display: none;
}

.pack485-receipt-content {
	max-width: 480px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 2em;
}

.pack485-receipt-content h2 {
	margin: 0 0 0.2em;
	text-align: center;
}

.pack485-receipt-subtitle {
	text-align: center;
	color: #666;
	margin: 0 0 1.5em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85em;
}

.pack485-receipt-row {
	display: flex;
	justify-content: space-between;
	padding: 0.5em 0;
	border-bottom: 1px solid #eee;
}

.pack485-receipt-total {
	font-weight: 700;
	font-size: 1.1em;
	border-bottom: none;
	border-top: 2px solid #333;
	margin-top: 0.5em;
	padding-top: 0.7em;
}

.pack485-receipt-footer {
	text-align: center;
	color: #888;
	font-size: 0.8em;
	margin-top: 1.5em;
}

@media print {
	body.pack485-printing-receipt .pack485-member-area > * {
		display: none !important;
	}
	body.pack485-printing-receipt .pack485-member-area > #pack485-receipt-print-container {
		display: block !important;
	}
}

/* ---------- Front-End Modals (Add/Edit Scout) ---------- */

.pack485-fe-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100000;
	display: none;
	align-items: flex-start;
	justify-content: center;
	overflow-y: auto;
	padding: 40px 20px;
}

.pack485-fe-modal {
	background: #fff;
	max-width: 640px;
	width: 100%;
	padding: 24px 32px;
	border-radius: 6px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pack485-fe-modal h2 {
	margin-top: 0;
}

.pack485-fe-modal h3 {
	margin: 1.3em 0 0.4em;
	padding-bottom: 0.3em;
	border-bottom: 1px solid #ddd;
}

.pack485-fe-modal h3:first-of-type {
	margin-top: 0.5em;
}

.pack485-fe-modal table.form-table th {
	width: 160px;
	text-align: left;
	padding: 0.6em 0.5em 0.6em 0;
	vertical-align: top;
}

.pack485-fe-modal table.form-table td {
	padding: 0.6em 0;
}

/* Edit Scout modal (v0.45.0) - large photo + name on the left, the
   actual form narrower on the right, instead of one full-width column.
   #pack485-edit-photo-preview is the exact same element the old
   single-column layout used for its small thumbnail - only its position
   (now here, in the left column) and size (now larger) changed. */
.pack485-edit-scout-modal {
	max-width: 760px;
}

.pack485-edit-scout-columns {
	display: flex;
	gap: 2em;
	align-items: flex-start;
}

.pack485-edit-scout-photo-col {
	flex: 0 0 220px;
	text-align: center;
}

.pack485-edit-scout-photo-col #pack485-edit-photo-preview img {
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	margin: 0 auto 0.75em;
}

.pack485-edit-scout-name-display {
	font-size: 1.15em;
	font-weight: 600;
}

.pack485-edit-scout-form-col {
	flex: 1;
	min-width: 0;
}

.pack485-edit-scout-form-col table.form-table th {
	width: 110px;
}

.pack485-edit-scout-form-col input[type="text"],
.pack485-edit-scout-form-col input[type="date"],
.pack485-edit-scout-form-col select {
	max-width: 220px;
}

@media (max-width: 640px) {
	.pack485-edit-scout-columns {
		flex-direction: column;
		align-items: center;
	}
	.pack485-edit-scout-form-col {
		width: 100%;
	}
}

.pack485-scout-detail-modal {
	max-width: 720px;
	position: relative;
}

.pack485-scout-detail-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 28px !important;
	height: 28px !important;
	line-height: 26px !important;
	text-align: center;
	border-radius: 50%;
	font-size: 16px !important;
	color: #555 !important;
	cursor: pointer;
}

.pack485-scout-detail-close:hover {
	background: #f0f0f1 !important;
	color: #1d2327 !important;
}

.pack485-scout-detail-columns {
	display: flex;
	gap: 2em;
	align-items: flex-start;
}

.pack485-scout-detail-left {
	flex: 0 0 160px;
	text-align: center;
}

.pack485-scout-detail-right {
	flex: 1;
	min-width: 0;
}

.pack485-scout-detail-right h3:first-child {
	margin-top: 0;
}

.pack485-scout-detail-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	margin: 0 auto 0.7em;
}

.pack485-scout-detail-name {
	font-size: 1.1em;
	font-weight: 600;
	margin-bottom: 0.1em;
}

.pack485-scout-detail-chinese-name {
	color: #777;
	font-size: 0.9em;
	margin-bottom: 0.3em;
}

.pack485-scout-detail-line {
	color: #555;
	font-size: 0.95em;
}

.pack485-fe-modal input[type="text"],
.pack485-fe-modal input[type="email"],
.pack485-fe-modal input[type="date"],
.pack485-fe-modal input[type="number"],
.pack485-fe-modal select {
	width: 100%;
	max-width: 320px;
	padding: 0.4em 0.5em;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.pack485-fe-modal-notice:empty {
	display: none;
}

#pack485-add-scout-matches .pack485-item-card {
	margin-bottom: 0.5em;
}

/* ---------- Side Tabs (Adventures - left nav numbered by Order#) ---------- */

.pack485-side-tabs {
	display: flex;
	gap: 1.5em;
	align-items: flex-start;
}

.pack485-side-nav {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.pack485-side-nav-item {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	text-align: left !important;
	padding: 0.7em 0.9em !important;
	border-radius: 4px !important;
	border: 1px solid #ddd !important;
	background: #fff !important;
	cursor: pointer;
	font-size: 0.95em !important;
	color: #333 !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	text-transform: none !important;
}

.pack485-side-nav-item:hover {
	background: #f4f4f4 !important;
	color: #222 !important;
}

.pack485-side-nav-item.is-active {
	border-color: #2271b1 !important;
	background: #135e96 !important;
	color: #fff !important;
	font-weight: 700 !important;
}

.pack485-side-nav-item.is-active:hover {
	background: #135e96 !important;
	color: #fff !important;
}

.pack485-side-nav-add {
	border-style: dashed !important;
	color: #2271b1 !important;
	margin-top: 0.4em;
}

/* Adventure card: the view row (name/description/Edit/Delete) stays a
   simple side-by-side flex row, but the edit form is its own full-width
   block below/instead of it, with Name + Save/Cancel/Delete sharing one
   row at the top and the description editor given the full remaining
   width underneath - previously the description editor was squeezed
   into a narrow column next to a fixed-width action column running the
   full height of the card. */
.pack485-adventure-card {
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	padding: 1em;
	margin-bottom: 0.75em;
}

.pack485-adventure-view-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1em;
}

.pack485-adventure-edit-toprow {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1em;
	flex-wrap: wrap;
	margin-bottom: 1em;
}

.pack485-adventure-edit-name-field {
	flex: 1;
	min-width: 200px;
}

.pack485-adventure-edit-name-field input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 0.5em;
}

.pack485-adventure-edit-buttons {
	display: flex;
	gap: 0.4em;
	flex-shrink: 0;
}

.pack485-side-content {
	flex: 1;
	min-width: 0;
}

.pack485-adventure-description {
	line-height: 1.6;
}

.pack485-adventure-description h1,
.pack485-adventure-description h2,
.pack485-adventure-description h3,
.pack485-adventure-description h4,
.pack485-adventure-description h5,
.pack485-adventure-description h6,
.pack485-patch-requirements h1,
.pack485-patch-requirements h2,
.pack485-patch-requirements h3,
.pack485-patch-requirements h4,
.pack485-patch-requirements h5,
.pack485-patch-requirements h6 {
	margin-top: 1.3em;
	margin-bottom: 0.3em;
}

.pack485-adventure-description h1:first-child,
.pack485-adventure-description h2:first-child,
.pack485-adventure-description h3:first-child,
.pack485-adventure-description h4:first-child,
.pack485-adventure-description h5:first-child,
.pack485-adventure-description h6:first-child,
.pack485-patch-requirements h1:first-child,
.pack485-patch-requirements h2:first-child,
.pack485-patch-requirements h3:first-child,
.pack485-patch-requirements h4:first-child,
.pack485-patch-requirements h5:first-child,
.pack485-patch-requirements h6:first-child {
	margin-top: 0;
}

.pack485-adventure-description p,
.pack485-patch-requirements p {
	margin-top: 0;
	margin-bottom: 0.9em;
}

.pack485-adventure-description img,
.pack485-patch-requirements img {
	max-width: 100%;
	height: auto;
}

.pack485-rte-textarea {
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 640px) {
	.pack485-side-tabs {
		flex-direction: column;
	}
	.pack485-side-nav {
		flex: none;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}
}

/* ---------- TinyMCE (Adventure description editor) reset ----------
   This site's theme applies its own bold, solid-color button styling
   very broadly (it's what makes "Save"/"Cancel"/etc. teal elsewhere on
   the page) - broadly enough that it was also painting over TinyMCE's
   own toolbar buttons, turning their icons into unreadable solid blocks.
   These rules restore TinyMCE's own default look (its icons are an icon
   font, colored via `color`, on a plain white/light background) and are
   scoped to TinyMCE's own container classes so they don't affect any of
   the plugin's real buttons elsewhere. */

.mce-container,
.mce-container *,
.mce-widget,
.mce-widget * {
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
}

.mce-container .mce-btn,
.mce-container .mce-btn button {
	background: #fff !important;
	background-image: none !important;
	border: 1px solid #ccd0d4 !important;
	border-radius: 3px !important;
	color: #333 !important;
	padding: 2px !important;
	min-width: 30px !important;
	height: auto !important;
}

.mce-container .mce-btn:hover button,
.mce-container .mce-btn:hover {
	background: #e5f1fb !important;
	border-color: #2271b1 !important;
}

.mce-container .mce-btn:hover .mce-ico {
	color: #135e96 !important;
}

.mce-container .mce-btn.mce-active,
.mce-container .mce-btn.mce-active button {
	background: #d5e9f8 !important;
	border-color: #2271b1 !important;
}

.mce-container .mce-ico {
	color: #444 !important;
}

.mce-container .mce-btn.mce-active .mce-ico {
	color: #135e96 !important;
}

.mce-container .mce-txt {
	color: #333 !important;
	font-weight: 400 !important;
}

.mce-toolbar-grp,
.mce-statusbar {
	background: #f7f7f7 !important;
	border-color: #ddd !important;
}

/* Let the editor fill the full width of its column instead of the
   ~400px it used to be capped at. */
.pack485-side-content .mce-tinymce,
.pack485-side-content .wp-editor-container,
.pack485-side-content .mce-container {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Same full-width fix as above, for the Newsletter tab's editor (not
   inside .pack485-side-content, since that tab doesn't use the side-nav
   layout the Adventures tab does). */
#pack485-ad-newsletter .mce-tinymce,
#pack485-ad-newsletter .wp-editor-container,
#pack485-ad-newsletter .mce-container {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Newsletter tab - banner radio options (thumbnail + label, click
   anywhere on the card to select, same as a normal radio label). */
.pack485-newsletter-banner-options {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.pack485-newsletter-banner-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
	padding: 0.75em;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.9em;
}

.pack485-newsletter-banner-option:has(input:checked),
.pack485-newsletter-banner-option.is-selected {
	border-color: #2271b1;
	background: #f0f6fc;
}

.pack485-newsletter-banner-option img {
	max-width: 160px;
	max-height: 80px;
	height: auto;
	display: block;
	border: 1px solid #eee;
}

.pack485-newsletter-history-table .button {
	margin-right: 0.4em;
}

.pack485-newsletter-history-empty td {
	color: #666;
	font-style: italic;
}