/*
 * Child Care Module Styles
 * Extends Foundation + app.css
 */

/* Header styles - shared across all pages */
.site-title-bar {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem;
}
.header-top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 0.25rem;
}
.header-top a {
	display: flex;
	align-items: center;
}
.site-title-bar img {
	height: 50px;
	width: auto;
}
.site-title-bar .site-title {
	margin-left: 0;
	font-size: 1.5rem;
}
.site-subtitle {
	color: #fff;
	font-family: "Noto Serif", serif;
	font-size: 1.25rem;
	font-weight: 500;
	margin: 0;
}

/* Decorative children "standing" on conference card top */
.card-kids {
	position: absolute;
	top: -32px;
	left: 0;
	right: 0;
	height: 30px;
	pointer-events: none;
}
.card-kids i {
	position: absolute;
	font-size: 2rem;
	opacity: 0.9;
	filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
}
.conference-card {
	position: relative;
	margin-top: 1.5rem;
}

/* Scattered background icons */
.scattered-icons {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}
.scattered-icons i {
	position: absolute;
	opacity: 0.5;
}
.landing-page .main-content {
	position: relative;
}
.conference-card, .login-buttons {
	position: relative;
	z-index: 1;
}

/* Landing page layout */
.landing-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.landing-page .main-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
}

/* Conference card */
.conference-card {
	max-width: 500px;
	width: 100%;
	text-align: center;
	margin-bottom: 2rem;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.conference-card .conference-name {
	font-family: "Noto Serif", serif;
	font-weight: 500;
	color: #5d3104;
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
}

.conference-card .conference-details {
	font-size: 1.125rem;
	margin-bottom: 1.5rem;
}

/* Status badges */
.status-badge {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	border-radius: 4px;
	font-family: "Noto Sans", sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 1rem;
}
.status-badge.open { background: #219119; color: #fff; }
.status-badge.ongoing { background: #e6aa06; color: #fff; }
.status-badge.upcoming { background: #068ce6; color: #fff; }
.status-badge.completed { background: #999; color: #fff; }

/* Login buttons row */
.login-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}
.login-buttons .button {
	min-width: 160px;
	margin-bottom: 0;
}

/* Animated button icons - show/hide on hover */
.btn-animate .icon-default {
	display: inline;
	margin-right: 0.5rem;
}
.btn-animate .icon-hover {
	display: none;
	margin-right: 0.5rem;
}
.btn-animate:hover .icon-default,
.btn-animate:focus .icon-default {
	display: none;
}
.btn-animate:hover .icon-hover,
.btn-animate:focus .icon-hover {
	display: inline;
}

/* No event message */
.no-event {
	color: #785938;
}
.no-event i {
	font-size: 2.5rem;
	color: #dcd1c4;
	display: block;
	margin-bottom: 1rem;
}

/* ==========================================
   Portal Navigation Bar
   ========================================== */
.portal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #1c6017;
	padding: 0.75rem 1.5rem;
	color: #fff;
}

/* Left: Logo + Titles */
.nav-left {
	display: flex;
	align-items: center;
}
.nav-brand {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	color: #fff;
}
.nav-brand:hover,
.nav-brand:focus {
	color: #fff;
	opacity: 0.9;
}
.nav-brand img {
	height: 55px;
	width: auto;
}
.nav-titles {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.nav-title-main {
	font-family: "Cinzel", serif;
	font-size: 1.25rem;
	font-weight: 500;
}
.nav-title-sub {
	font-family: "Noto Serif", serif;
	font-size: 1rem;
	opacity: 0.9;
}

/* Middle: Navigation Items */
.nav-middle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.nav-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
	border-radius: 4px;
	transition: background 0.2s;
}
.nav-item:hover {
	background: rgba(255,255,255,0.15);
	color: #fff;
}
.nav-item i {
	font-size: 1rem;
}

/* Right: User + Logout */
.nav-right {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.nav-user {
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
}
.nav-user:hover {
	text-decoration: underline;
	color: #fff;
}
.nav-logout {
	color: #fff;
	text-decoration: none;
	font-size: 1.375rem;
	opacity: 0.8;
	transition: opacity 0.2s;
}
.nav-logout:hover {
	opacity: 1;
	color: #fff;
}

/* Hamburger button (hidden on desktop) */
.nav-hamburger {
	display: none;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0.5rem;
}

/* Mobile user section (hidden on desktop) */
.nav-mobile-user {
	display: none;
}

/* Mobile responsive navigation */
@media (max-width: 768px) {
	.portal-nav {
		flex-wrap: wrap;
	}
	
	.nav-hamburger {
		display: block;
		order: 2;
	}
	
	.nav-middle {
		display: none;
		width: 100%;
		order: 4;
		flex-direction: column;
		padding: 0.5rem 0;
		border-top: 1px solid rgba(255,255,255,0.2);
		margin-top: 0.5rem;
	}
	
	.nav-middle.nav-open {
		display: flex;
	}
	
	.nav-item {
		padding: 0.75rem 1rem;
		border-radius: 0;
	}
	
	.nav-right {
		display: none;
	}
	
	.nav-mobile-user {
		display: flex;
		flex-direction: column;
		border-top: 1px solid rgba(255,255,255,0.2);
		margin-top: 0.5rem;
		padding-top: 0.5rem;
	}
	
	.nav-left {
		order: 1;
	}
}

/* ==========================================
   Portal Page Layout
   ========================================== */
.portal-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ==========================================
   Page Content / Forms
   ========================================== */
.page-content {
	padding: 1.5rem 0;
	background: #f4f4f4;
	flex: 1;
}

.page-header {
	margin-bottom: 1.5rem;
}
.page-header h1 {
	font-family: "Noto Serif", serif;
	font-size: 1.75rem;
	font-weight: 500;
	color: #1c6017;
	margin-bottom: 0.25rem;
}
.page-subtitle {
	color: #666;
	margin: 0;
}

/* Form callout sections */
.edit-form .callout,
.page-content > .grid-container .callout {
	background: #fff;
	border: none;
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 1rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.callout h4 {
	font-family: "Noto Sans", sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 1rem;
}
.callout h4 i {
	margin-right: 0.5rem;
	color: #219119;
}

/* Success/Alert callouts */
.callout.success {
	background: #d4edda;
	color: #155724;
	border-left: 4px solid #28a745;
}
.callout.alert {
	background: #f8d7da;
	color: #721c24;
	border-left: 4px solid #dc3545;
}
.callout.success i,
.callout.alert i {
	margin-right: 0.5rem;
}

/* Global Form Input Styles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="number"],
input[type="search"],
select,
textarea {
	background: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 0.625rem 0.75rem;
	font-size: 1rem;
	font-weight: 600;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
/* Ensure select shows native dropdown caret */
select {
	appearance: auto;
	-webkit-appearance: auto;
	-moz-appearance: auto;
	padding-right: 1.5rem;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
	background: #fff;
	border-color: #219119;
	box-shadow: 0 0 0 3px rgba(33, 145, 25, 0.15);
	outline: none;
}

/* Form labels */
.edit-form label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: #333;
}
.edit-form label small {
	font-weight: 400;
	color: #888;
}

/* Form actions */
.form-actions {
	margin-top: 1.5rem;
}
.form-actions .button {
	margin-bottom: 0;
}

/* Page action buttons */
.page-action-buttons {
	margin-top: 1.5rem;
	padding-top: 1rem;
}
.page-action-buttons .button {
	margin-bottom: 0;
	margin-right: 0.5rem;
}

/* Roles display */
.roles-display {
	margin-bottom: 1rem;
}
.roles-display .role-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
}
.roles-display .role-badge small {
	opacity: 0.8;
	font-size: 0.75rem;
}
.roles-display .role-badge i {
	font-size: 0.875rem;
}

/* Help text */
.help-text {
	font-size: 0.875rem;
	color: #666;
	margin: 0;
}
.help-text i {
	margin-right: 0.25rem;
	color: #999;
}

.text-muted {
	color: #999;
}

/* ID/Metadata info row */
.id-info {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.8125rem;
	color: #888;
	margin-bottom: 1rem;
}
.id-info span {
	white-space: nowrap;
}
.id-info strong {
	color: #555;
}

/* Label row with right-aligned content */
.label-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.25rem;
}
.label-row label {
	margin-bottom: 0;
}

/* Input with badge inside */
.input-with-badge {
	position: relative;
}
.input-with-badge input {
	padding-right: 6rem;
}
.input-badge {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 0.125rem 0.5rem;
	border-radius: 3px;
	text-transform: uppercase;
}
.input-badge.verified {
	background: #28a745;
	color: #fff;
}
.input-badge.not-verified {
	background: #fd7e14;
	color: #fff;
}

/* Verify link */
.verify-link {
	font-size: 0.8125rem;
	color: #068ce6;
	text-decoration: none;
}
.verify-link:hover {
	text-decoration: underline;
	color: #0056b3;
}

/* Age display */
.age-display {
	font-size: 0.8125rem;
	color: #666;
	font-weight: 500;
}

/* Inline checkbox */
.checkbox-inline {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 400;
	color: #555;
	cursor: pointer;
}
.checkbox-inline input[type="checkbox"] {
	margin: 0;
	width: auto;
}

/* Verified input indicator */
input.verified {
	border-color: #28a745;
	background: #f8fff8;
}

/* Disabled/readonly input */
input:disabled,
input[readonly] {
	background: #f5f5f5;
	color: #666;
	cursor: not-allowed;
}

/* ==========================================
   Modal Styles - STANDARD PATTERN
   ==========================================
   All modals should follow this structure:
   <div class="modal-overlay" id="my-modal" style="display:none;">
       <div class="modal-content">
           <h3>Modal Title</h3>
           <p>Content...</p>
           <div class="modal-buttons">
               <button class="button secondary">Cancel</button>
               <button class="button">OK</button>
           </div>
       </div>
   </div>
   
   - No icons in titles
   - No borders under titles
   - No X close button (use Cancel button)
   - Centered buttons at bottom
   ========================================== */

/* Overlay backdrop */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

/* Modal box */
.modal-content {
	background: #fff;
	border-radius: 8px;
	padding: 1.5rem;
	width: 100%;
	max-width: 400px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* Modal width modifiers */
.modal-content.modal-narrow { max-width: 350px; }
.modal-content.modal-medium { max-width: 500px; }
.modal-content.modal-wide { max-width: 650px; }

/* Modal title - icon + text, no border */
.modal-content h3 {
	font-family: "Noto Sans", sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: #333;
	margin: 0 0 1rem 0;
}
.modal-content h3 i {
	margin-right: 0.5rem;
}

/* Form elements in modals */
.modal-content label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: #333;
	display: block;
	margin-bottom: 1rem;
}

.modal-content input,
.modal-content select,
.modal-content textarea {
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1rem;
	width: 100%;
	margin-top: 0.25rem;
}

.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
	border-color: #219119;
	box-shadow: 0 0 0 3px rgba(33, 145, 25, 0.15);
	outline: none;
}

/* Modal buttons - centered at bottom */
.modal-buttons {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.modal-buttons .button {
	margin: 0;
}

/* Legacy: modal-actions (same as modal-buttons) */
.modal-actions {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.modal-actions .button {
	margin: 0;
}

/* Legacy: modal-header (deprecated - don't use) */
.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}
.modal-header h3,
.modal-header h4 {
	margin: 0;
	font-family: "Noto Sans", sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: #333;
}
.modal-close {
	background: none;
	border: none;
	font-size: 1.25rem;
	color: #888;
	cursor: pointer;
	padding: 0.25rem;
}
.modal-close:hover {
	color: #333;
}

/* Password Requirements */
.password-requirements {
	background: #f8f9fa;
	border-radius: 4px;
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
}
.password-requirements p {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #555;
	margin-bottom: 0.5rem;
}
.password-requirements ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.password-requirements li {
	font-size: 0.8125rem;
	color: #888;
	padding: 0.125rem 0;
}
.password-requirements li i {
	margin-right: 0.5rem;
	font-size: 0.625rem;
	color: #ccc;
}
.password-requirements li.met {
	color: #28a745;
}
.password-requirements li.met i {
	color: #28a745;
}

/* ==========================================
   Mobile Slide-in Panel for List-Detail
   ========================================== */

/* Floating button to open panel (hidden on desktop) */
.mobile-panel-btn {
	display: none;
}

/* Panel close button (hidden on desktop) */
.panel-close-btn {
	display: none;
}

/* Panel overlay (hidden on desktop) */
.panel-overlay {
	display: none;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
	/* Floating button - visible on mobile */
	.mobile-panel-btn {
		display: inline-block;
		position: fixed;
		bottom: 1.5rem;
		left: 1.5rem;
		z-index: 100;
		padding: 0.75rem 1.25rem;
		background: #068ce6;
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 0.9375rem;
		font-weight: 600;
		box-shadow: 0 3px 10px rgba(0,0,0,0.25);
		cursor: pointer;
		transition: background 0.2s, box-shadow 0.2s;
	}
	.mobile-panel-btn:hover {
		background: #0570b8;
		box-shadow: 0 4px 14px rgba(0,0,0,0.3);
	}
	
	/* Panel overlay */
	.panel-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.5);
		z-index: 200;
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	.panel-overlay.active {
		display: block;
		opacity: 1;
	}
	
	/* Events panel - slide-in from left */
	#events-panel,
	#regions-panel {
		position: fixed;
		top: 0;
		left: 0;
		width: 85%;
		max-width: 320px;
		height: 100vh;
		z-index: 300;
		padding: 0;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
	}
	#events-panel.panel-open,
	#regions-panel.panel-open {
		transform: translateX(0);
	}
	#events-panel .event-list-panel,
	#regions-panel .event-list-panel {
		height: 100%;
		border-radius: 0;
		margin: 0;
		padding-top: 1rem;
		overflow-y: auto;
	}
	
	/* Panel close button */
	.panel-close-btn {
		display: block;
		position: absolute;
		top: 0.75rem;
		left: 0.75rem;
		background: #068ce6;
		border: none;
		color: #fff;
		font-size: 0.875rem;
		font-weight: 700;
		border-radius: 4px;
		cursor: pointer;
		padding: 0.5rem 0.75rem;
		z-index: 10;
	}
	.panel-close-btn:hover {
		background: #0570b8;
	}
	
	/* Prevent body scroll when panel open */
	body.panel-open-body {
		overflow: hidden;
	}
	
	/* Event list adjust for mobile */
	.event-list {
		max-height: calc(100vh - 150px);
	}
	
	/* Mobile: Hide separate Date/Time columns, show combined, hide Duration */
	.sessions-table .col-date,
	.sessions-table .col-time,
	.sessions-table .col-duration,
	.sessions-table .col-notes {
		display: none;
	}
	.sessions-table .col-datetime {
		display: table-cell;
	}
}

/* ==========================================
   Filter Bar Styles
   ========================================== */
.filter-bar {
	padding: 1rem;
}
.filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}
.filter-event {
	min-width: 160px;
}
.filter-event select {
	margin-bottom: 0;
}
.filter-search {
	flex: 1;
	min-width: 200px;
}
.filter-search .input-group {
	margin-bottom: 0;
}
.filter-status select {
	margin-bottom: 0;
	min-width: 140px;
}
.filter-actions .button {
	margin-bottom: 0;
}

/* Search wrapper with icon and clear button */
.search-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}
.search-wrapper input {
	padding-left: 2.25rem;
	padding-right: 2.25rem;
	margin-bottom: 0;
}
.search-icon {
	position: absolute;
	left: 0.75rem;
	color: #888;
	pointer-events: none;
	z-index: 1;
}
.search-clear {
	position: absolute;
	right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	background: #ddd;
	border: none;
	border-radius: 50%;
	color: #666;
	font-size: 0.75rem;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	z-index: 1;
}
.search-clear:hover {
	background: #ccc;
	color: #333;
}

/* ==========================================
   Data Grid Styles
   ========================================== */
.data-grid-wrapper {
	padding: 0;
	overflow: hidden;
}
.data-grid {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.data-grid thead th,
table.data-grid thead th {
	background: #f5f5f5;
	padding: 0.35rem 0.5rem !important;
	text-align: left;
	font-weight: 600;
	color: #333;
	border-bottom: 2px solid #ddd;
	white-space: nowrap;
	line-height: 1.1 !important;
}
.data-grid tbody td,
table.data-grid tbody td {
	padding: 0.15rem 0.5rem !important;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
	line-height: 1.2 !important;
}
.data-grid tbody td .button.small,
table.data-grid tbody td .button.small {
	padding: 0.15rem 0.4rem !important;
	font-size: 0.8rem;
	margin: 0;
}
.data-grid tbody tr:hover {
	background: #f8f8f8;
}
.data-grid .col-id {
	width: 70px;
	color: #888;
	font-size: 0.8125rem;
}
.data-grid .col-actions {
	width: 90px;
	text-align: right;
	white-space: nowrap;
}
.data-grid .col-login {
	width: 140px;
}
.data-grid .loading-row,
.data-grid .empty-row,
.data-grid .error-row {
	text-align: center;
	padding: 2rem;
	color: #888;
}
.data-grid .error-row {
	color: #dc3545;
}
.data-grid .row-inactive {
	opacity: 0.6;
	background: #fafafa;
}
.data-grid .no-login {
	color: #999;
	font-style: italic;
}
.data-grid .login-active {
	color: #219119;
	font-weight: 500;
}
.data-grid .login-disabled {
	color: #dc3545;
	text-decoration: line-through;
}

/* ==========================================
   Pagination Styles
   ========================================== */
.pagination-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1rem;
	background: #f8f8f8;
	border-top: 1px solid #eee;
}
.pagination-info {
	font-size: 0.875rem;
	color: #666;
}
.pagination-controls {
	display: flex;
	gap: 0.25rem;
	align-items: center;
}
.page-btn {
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	border: 1px solid #ddd;
	background: #fff;
	color: #333;
	font-size: 0.875rem;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}
.page-btn:hover:not(:disabled) {
	background: #e8e8e8;
	border-color: #ccc;
}
.page-btn.active {
	background: #219119;
	border-color: #219119;
	color: #fff;
}
.page-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.page-ellipsis {
	padding: 0 0.5rem;
	color: #888;
}

/* ==========================================
   Login Section in Modal
   ========================================== */
.login-section {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px dashed #ddd;
}
.login-section h4 {
	font-size: 1rem;
	margin-bottom: 0.75rem;
}
.login-details p {
	margin-bottom: 0.75rem;
}
.login-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.login-actions .button {
	margin: 0;
}

/* Medium modal width */
.modal-medium {
	max-width: 550px;
}

/* Required field indicator */
.required {
	color: #dc3545;
}

/* Field Error Styling */
.label-error {
	color: #dc3545;
}

.label-error .field-error {
	display: inline-block;
	margin-left: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #dc3545;
	background: #fff5f5;
	padding: 0.125rem 0.5rem;
	border-radius: 3px;
	border: 1px solid #f5c6cb;
}

.input-error,
input.input-error,
select.input-error,
textarea.input-error {
	border-color: #dc3545 !important;
	background-color: #fff8f8 !important;
}

.input-error:focus {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important;
}

/* Mobile responsive for data grid */
@media (max-width: 768px) {
	.filter-row {
		flex-direction: column;
		align-items: stretch;
	}
	.filter-search {
		width: 100%;
	}
	.filter-status {
		width: 100%;
	}
	.filter-status select {
		width: 100%;
	}
	.filter-actions {
		width: 100%;
	}
	.filter-actions .button {
		width: 100%;
	}
	
	.data-grid .col-email,
	.data-grid .col-phone {
		display: none;
	}
	.data-grid .col-id {
		width: 50px;
	}
	
	.pagination-bar {
		flex-direction: column;
		gap: 0.5rem;
	}
}

/* ==========================================
   Filter Dialog Styles
   ========================================== */
.filter-toggle .button {
	margin-bottom: 0;
}
#filter-label {
	font-weight: 500;
}

.filter-dialog-content {
	margin-bottom: 1rem;
}
.filter-section {
	margin-bottom: 1rem;
}
.filter-section:last-child {
	margin-bottom: 0;
}
.filter-radio,
.filter-checkbox {
	display: block;
	padding: 0.25rem 0.5rem;
	margin: 0;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.2s;
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.4;
	font-style: normal;
}
.filter-radio:hover,
.filter-checkbox:hover {
	background: #f5f5f5;
}
.filter-radio input,
.filter-checkbox input {
	margin-right: 0.5rem;
	margin-bottom: 0;
	width: auto;
}
.filter-role-section {
	padding-top: 1rem;
	border-top: 1px dashed #ddd;
}
.filter-section-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #666;
	margin-bottom: 0.5rem;
}
.filter-section-label i {
	margin-right: 0.375rem;
	color: #888;
}
#role-filter-options {
	max-height: 200px;
	overflow-y: auto;
}

/* Filter row with radio + dropdown */
.filter-role-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.filter-role-row select {
	flex: 1;
	margin: 0;
	min-width: 150px;
}

/* Filter row with locality picker */
.filter-locality-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.filter-locality-row .locality-picker-filter {
	flex: 1;
	min-width: 180px;
	font-style: normal;
}
.filter-locality-row .locality-picker-filter * {
	font-style: normal;
}

/* Action Key Button (green) */
.action-key {
	color: #219119 !important;
}
.action-key:hover {
	color: #1c6017 !important;
}

/* ==========================================
   Manage Login Modal Styles
   ========================================== */
.manage-login-info {
	background: #f8f9fa;
	border-radius: 4px;
	padding: 1rem;
	margin-bottom: 1rem;
}
.manage-login-info p {
	margin: 0 0 0.5rem 0;
	font-size: 0.9375rem;
}
.manage-login-info p:last-child {
	margin-bottom: 0;
}

/* ==========================================
   Vertical Tabs (Shared Component)
   ========================================== */
.vertical-tabs {
	list-style: none;
	margin: 0;
	padding: 0;
}
.vtab-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #666;
	cursor: pointer;
	border-radius: 4px;
	margin-bottom: 0.25rem;
	transition: background 0.2s, color 0.2s;
}
.vtab-item:hover {
	background: #f5f5f5;
	color: #333;
}
.vtab-item.active {
	background: #e8f5e8;
	color: #1c6017;
	border-left: 3px solid #219119;
}
.vtab-item i {
	width: 1.25rem;
	text-align: center;
	font-size: 1rem;
}
.vtab-panel {
	display: none;
}
.vtab-panel.active {
	display: block;
}
.vtab-content {
	padding-top: 0.5rem;
}

/* ==========================================
   Toast Notifications
   ========================================== */
.toast-container {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.toast {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1.25rem;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	font-size: 0.9375rem;
	font-weight: 500;
	animation: toastSlideIn 0.3s ease-out;
	max-width: 350px;
}
.toast.toast-success {
	background: #219119;
	color: #fff;
}
.toast.toast-error {
	background: #dc3545;
	color: #fff;
}
.toast.toast-warning {
	background: #fd7e14;
	color: #fff;
}
.toast.toast-info {
	background: #068ce6;
	color: #fff;
}
.toast i {
	font-size: 1.125rem;
}
.toast.toast-fade-out {
	animation: toastFadeOut 0.3s ease-out forwards;
}
@keyframes toastSlideIn {
	from {
		opacity: 0;
		transform: translateX(100%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes toastFadeOut {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(100%);
	}
}

/* Mobile responsive for person edit layout */
@media (max-width: 768px) {
	.person-edit-header {
		flex-direction: column;
	}
	.person-edit-header .header-actions {
		width: 100%;
	}
	.person-edit-header .header-actions .button {
		width: 100%;
	}
	
	/* Hide left panel on mobile by default - it will slide in */
	#left-panel-cell {
		position: fixed;
		top: 0;
		left: 0;
		width: 85%;
		max-width: 320px;
		height: 100vh;
		z-index: 300;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		margin: 0 !important;
		padding: 0;
	}
	#left-panel-cell.panel-open {
		transform: translateX(0);
	}
	#left-panel-cell .left-panel.callout {
		height: 100%;
		border-radius: 0;
		margin: 0;
		padding: 1rem;
		padding-top: 3.5rem;
		overflow-y: auto;
	}
	
	/* Close button visible on mobile */
	#left-panel-cell .panel-close-btn {
		display: block;
		position: absolute;
		top: 0.75rem;
		right: 0.75rem;
		background: #dc3545;
		border: none;
		color: #fff;
		font-size: 1rem;
		border-radius: 4px;
		cursor: pointer;
		padding: 0.5rem 0.75rem;
		z-index: 10;
	}
	#left-panel-cell .panel-close-btn:hover {
		background: #c82333;
	}
	
	/* Vertical tabs stay vertical on mobile in the panel */
	.vertical-tabs {
		display: block;
	}
	.vtab-item {
		padding: 0.75rem 1rem;
		font-size: 0.9375rem;
		border-radius: 4px;
		border-left: none;
	}
	.vtab-item.active {
		border-left: 3px solid #219119;
		border-bottom: none;
	}
	
	/* Photo in mobile panel */
	.left-panel .photo-preview {
		max-width: 150px;
		margin: 0 auto 1rem;
	}
	
	.repeater-fields {
		flex-direction: column;
	}
	
	/* Record meta - hide Changed, keep ID and Added on one line */
	.record-meta {
		flex-direction: row;
		justify-content: space-between;
		gap: 1rem;
	}
	.record-meta .meta-changed {
		display: none;
	}
}

/* Hide close button on desktop */
#left-panel-cell .panel-close-btn {
	display: none;
}

/* ==========================================
   Cruditor Component Styles
   ========================================== */
.cruditor {
	background: #f8f8f8;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	overflow: hidden;
}

.cruditor-table-wrap {
	overflow-x: auto;
}

.cruditor-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	margin: 0;
}

.cruditor-table thead th {
	background: #f0f0f0;
	padding: 0.625rem 0.75rem;
	text-align: left;
	font-weight: 500;
	color: #666;
	border-bottom: 1px solid #ddd;
	font-size: 0.875rem;
}

.cruditor-table tbody td {
	padding: 0.625rem 0.75rem;
	background: #fff;
	border-bottom: 1px solid #eee;
	font-weight: 600;
	color: #333;
}

.cruditor-table tbody tr:hover td {
	background: #f8f8f8;
}

.cruditor-table tbody tr:last-child td {
	border-bottom: none;
}

/* Actions column */
.cruditor-actions-col {
	width: 90px;
	text-align: center;
}

.cruditor-actions {
	text-align: center;
	white-space: nowrap;
}

.cruditor-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	background: transparent;
	border: none;
	border-radius: 4px;
	color: #666;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	margin: 0 0.125rem;
}

.cruditor-btn:hover {
	background: #e8e8e8;
}

.cruditor-btn-edit:hover {
	color: #219119;
}

.cruditor-btn-delete:hover {
	color: #dc3545;
}

/* Empty state row */
.cruditor-empty-row td {
	text-align: center;
	padding: 2rem 1rem;
	color: #999;
	font-weight: 400;
}

.cruditor-empty-row td i {
	display: block;
	font-size: 2rem;
	margin-bottom: 0.5rem;
	color: #ccc;
}

/* Footer row with count and add button */
.cruditor-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1rem;
	background: #f0f0f0;
	border-top: 1px solid #ddd;
}

.cruditor-count {
	font-size: 0.875rem;
	color: #666;
}

.cruditor-count strong {
	color: #219119;
}

.cruditor-footer .button {
	margin: 0;
}

/* Cruditor Modal */
.cruditor-modal .modal-content {
	max-width: 450px;
}

.cruditor-modal .modal-content h3 {
	margin-bottom: 1.25rem;
}

.cruditor-modal .modal-content h3 i {
	margin-right: 0.5rem;
	color: #219119;
}

.cruditor-modal .modal-content label {
	display: block;
	margin-bottom: 1rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #333;
}

.cruditor-modal .modal-content input,
.cruditor-modal .modal-content textarea,
.cruditor-modal .modal-content select {
	display: block;
	width: 100%;
	margin-top: 0.375rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.cruditor-table thead th,
	.cruditor-table tbody td {
		padding: 0.5rem 0.625rem;
		font-size: 0.875rem;
	}
	
	.cruditor-footer {
		flex-direction: column;
		gap: 0.75rem;
		text-align: center;
	}
	
	.cruditor-footer .button {
		width: 100%;
	}
}

/* ===== LOGIN MODAL ===== */
.login-modal-content {
	max-width: 450px;
}

.login-modal-content .modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.25rem;
	background: #f5f5f5;
	border-bottom: 1px solid #e0e0e0;
	margin: -1.5rem -1.5rem 0 -1.5rem;
	border-radius: 8px 8px 0 0;
}

.login-modal-content .modal-header h3 {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: #333;
}

.login-modal-content .modal-header h3 i {
	margin-right: 0.5rem;
	color: #219119;
}

.login-modal-content .modal-close {
	background: none;
	border: none;
	font-size: 1.25rem;
	color: #888;
	cursor: pointer;
	padding: 0.25rem;
	line-height: 1;
}

.login-modal-content .modal-close:hover {
	color: #333;
}

.login-modal-content .modal-body {
	padding: 1.25rem 0;
}

.login-modal-content .modal-subtitle {
	margin: 0 0 1.25rem 0;
	color: #666;
	font-size: 0.9375rem;
}

.login-modal-content .form-group {
	margin-bottom: 1rem;
}

.login-modal-content .form-group:last-of-type {
	margin-bottom: 0;
}

.login-modal-content .form-group label {
	display: block;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #333;
	margin-bottom: 0.375rem;
}

.login-modal-content .form-group input,
.login-modal-content .form-group select {
	width: 100%;
	margin: 0;
}

.login-modal-content .field-note {
	font-size: 0.8125rem;
	color: #888;
	margin: 0.375rem 0 0 0;
}

.login-modal-content .field-note i {
	margin-right: 0.25rem;
}

.login-modal-content .field-note i.fa-triangle-exclamation {
	color: #fd7e14;
}

.login-modal-content .field-note i.fa-envelope {
	color: #068ce6;
}

.login-modal-content .modal-error {
	background: #f8d7da;
	color: #721c24;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	margin-top: 1rem;
	font-size: 0.875rem;
}

.login-modal-content .modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: #f8f8f8;
	border-top: 1px solid #e0e0e0;
	margin: 0 -1.5rem -1.5rem -1.5rem;
	border-radius: 0 0 8px 8px;
}

.login-modal-content .modal-footer .button {
	margin: 0;
}

.login-modal-content .modal-footer .button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Pending Onboarding Banner */
.pending-banner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: #fff3cd;
	border-left: 4px solid #fd7e14;
	border-radius: 4px;
	margin-bottom: 1rem;
	font-size: 0.9375rem;
	color: #856404;
}

.pending-banner i {
	font-size: 1.25rem;
	color: #fd7e14;
}

/* Login Details Display */
.login-details {
	margin-bottom: 1rem;
}

.login-details-row {
	display: flex;
	align-items: baseline;
	padding: 0.25rem 0;
}

.login-details-label {
	flex: 0 0 25%;
	text-align: right;
	padding-right: 1rem;
	font-size: 0.875rem;
	color: #666;
}

.login-details-value {
	flex: 0 0 75%;
	text-align: left;
	font-weight: 600;
	color: #333;
}


/* Login Actions Row */
.login-action-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.login-action-buttons .button {
	margin: 0;
}

/* ===== CREDENTIAL MODALS ===== */

/* Warning text inline */
.warning-text {
	color: #856404;
	background: #fff3cd;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	margin: 0.75rem 0;
	font-size: 0.9375rem;
}

.warning-text i {
	color: #fd7e14;
	margin-right: 0.5rem;
}

/* Modal info row (label: value) */
.modal-info-row {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: #f8f9fa;
	border-radius: 4px;
	margin: 0.75rem 0;
}

.modal-info-label {
	font-weight: 500;
	color: #666;
	min-width: 60px;
}

.modal-info-value {
	font-weight: 600;
	color: #333;
}

/* Warning box (for delete confirmation) */
.warning-box {
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 6px;
	padding: 1rem;
	margin: 1rem 0;
}

.warning-box p {
	margin: 0 0 0.75rem 0;
	color: #856404;
}

.warning-box p:last-child {
	margin-bottom: 0;
}

.warning-box p strong i {
	color: #fd7e14;
	margin-right: 0.5rem;
}

.warning-box ul {
	margin: 0 0 0.75rem 1.5rem;
	padding: 0;
}

.warning-box ul li {
	color: #856404;
	margin-bottom: 0.375rem;
}

.warning-box ul li:last-child {
	margin-bottom: 0;
}

.warning-box .warning-final {
	font-weight: 600;
	color: #dc3545;
	margin-top: 0.75rem;
}

/* =============================================
   SMART ADD MODAL
   ============================================= */
.smart-add-overlay {
	z-index: 2000;
}

.smart-add-content {
	max-width: 550px;
	width: 100%;
	min-height: 450px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
}

.smart-add-content .modal-body {
	flex: 1;
	overflow-y: auto;
	position: relative;
}

.smart-add-content .modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.smart-add-content .modal-header h3 {
	margin: 0;
	font-family: "Noto Serif", serif;
	font-size: 1.25rem;
	font-weight: 500;
	color: #1c6017;
}

.smart-add-content .modal-header h3 i {
	margin-right: 0.5rem;
}

.smart-add-content .modal-close {
	background: none;
	border: none;
	font-size: 1.25rem;
	color: #888;
	cursor: pointer;
	padding: 0.25rem;
}

.smart-add-content .modal-close:hover {
	color: #333;
}

.smart-add-content .modal-body {
	padding: 0;
}

.smart-add-content .modal-footer {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.smart-add-content .modal-footer .button {
	margin: 0;
}

/* Context message */
.smart-add-context {
	background: #e8f5e8;
	color: #155724;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	margin-bottom: 1rem;
	font-size: 0.9375rem;
}

/* Search section */
.smart-add-search-section {
	position: relative;
}

.smart-add-search-section label {
	display: block;
	font-size: 1rem;
	font-weight: 500;
	color: #333;
	margin-bottom: 0.5rem;
}

.smart-add-search-section input {
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 1rem;
}

/* Search results dropdown */
.smart-add-results {
	position: relative;
	margin-top: 0.5rem;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	max-height: 280px;
	overflow-y: auto;
}

.smart-add-loading,
.smart-add-error {
	padding: 1rem;
	text-align: center;
	color: #888;
	font-size: 0.9375rem;
}

.smart-add-error {
	color: #dc3545;
}

/* Individual result item */
.smart-add-result-item {
	padding: 0.75rem 1rem;
	cursor: pointer;
	border-bottom: 1px solid #eee;
	transition: background 0.2s;
}

.smart-add-result-item:last-child {
	border-bottom: none;
}

.smart-add-result-item:hover {
	background: #f5f5f5;
}

.smart-add-result-item.smart-add-new-person {
	background: #f8f9fa;
	border-top: 2px solid #ddd;
}

.smart-add-result-item.smart-add-new-person:hover {
	background: #e8f5e8;
}

.smart-add-result-item.smart-add-new-person .result-name {
	color: #219119;
	font-weight: 600;
}

.result-main {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: baseline;
	margin-bottom: 0.25rem;
}

.result-name {
	font-weight: 600;
	color: #333;
	flex: 1;
	min-width: 120px;
}

.result-age {
	font-size: 0.875rem;
	color: #666;
	width: 30px;
}

.result-email,
.result-phone {
	font-size: 0.8125rem;
	color: #888;
}

.result-badges {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Badges */
.badge {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 0.125rem 0.5rem;
	border-radius: 3px;
}

.badge-login {
	background: #d4edda;
	color: #155724;
}

.badge-no-login {
	background: #f8f9fa;
	color: #666;
}

.badge-in-event {
	background: #cce5ff;
	color: #004085;
}

.badge-not-in-event {
	background: #f8f9fa;
	color: #666;
}

/* Selection locked banner */
.smart-add-selection {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	background: #e8f5e8;
	padding: 1rem;
	border-radius: 6px;
	border-left: 4px solid #219119;
	margin-bottom: 1rem;
}

.smart-add-selection.smart-add-selection-new {
	background: #fff3cd;
	border-left-color: #fd7e14;
}

.selection-info {
	flex: 1;
}

.selection-info > i {
	font-size: 1.5rem;
	color: #fd7e14;
	margin-right: 0.75rem;
	vertical-align: middle;
}

.selection-name {
	font-weight: 600;
	color: #333;
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.selection-contact {
	font-size: 0.875rem;
	color: #666;
	margin-bottom: 0.375rem;
}

.selection-badges {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.selection-change {
	background: transparent;
	border: none;
	font-size: 1.125rem;
	color: #888;
	cursor: pointer;
	padding: 0.25rem;
	border-radius: 4px;
}

.selection-change:hover {
	background: rgba(0,0,0,0.1);
	color: #333;
}

/* Divider */
.smart-add-divider {
	text-align: center;
	font-size: 0.875rem;
	font-weight: 500;
	color: #666;
	margin: 1rem 0;
	position: relative;
}

.smart-add-divider::before,
.smart-add-divider::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 30%;
	height: 1px;
	background: #ddd;
}

.smart-add-divider::before {
	left: 0;
}

.smart-add-divider::after {
	right: 0;
}

/* Form sections */
.smart-add-form .form-section {
	margin-bottom: 1.25rem;
}

.smart-add-form .form-section h4 {
	font-size: 1rem;
	font-weight: 600;
	color: #333;
	margin: 0 0 0.75rem 0;
}

.smart-add-form .form-row {
	display: flex;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.smart-add-form .form-group {
	flex: 1;
}

.smart-add-form .form-group label {
	display: block;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #333;
	margin-bottom: 0.25rem;
}

.smart-add-form .form-group input,
.smart-add-form .form-group select {
	width: 100%;
	margin: 0;
}

.smart-add-form .field-note {
	font-size: 0.8125rem;
	color: #888;
	margin-top: 0.25rem;
}

/* Checkbox options */
.checkbox-option {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: #f8f8f8;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 500;
	color: #333;
	transition: background 0.2s;
}

.checkbox-option:hover {
	background: #f0f0f0;
}

.checkbox-option input[type="checkbox"] {
	margin: 0;
	width: auto;
}

.checkbox-option.nested {
	background: transparent;
	padding: 0.5rem 0;
}

/* Nested login fields */
.nested-fields {
	margin-top: 0.75rem;
	padding: 1rem;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}

/* Already done message */
.smart-add-already-done {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: #d4edda;
	color: #155724;
	border-radius: 4px;
}

.smart-add-already-done i {
	font-size: 1.5rem;
}

/* Confirmation phase */
.smart-add-confirmation {
	text-align: center;
	padding: 1rem 0;
}

.confirmation-icon {
	font-size: 4rem;
	color: #219119;
	margin-bottom: 1rem;
}

.smart-add-confirmation h4 {
	font-size: 1.25rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 0.5rem;
}

.smart-add-confirmation p {
	color: #666;
	margin-bottom: 1rem;
}

.confirmation-actions {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
	background: #f8f9fa;
	border-radius: 6px;
	padding: 1rem;
}

.confirmation-actions li {
	padding: 0.5rem 0;
	border-bottom: 1px dotted #ddd;
	color: #333;
}

.confirmation-actions li:last-child {
	border-bottom: none;
}

.confirmation-actions li i {
	color: #219119;
	margin-right: 0.5rem;
}

/* Mobile responsive */
@media (max-width: 640px) {
	.smart-add-form .form-row {
		flex-direction: column;
		gap: 0.75rem;
	}
	
	.result-main {
		flex-direction: column;
		gap: 0.25rem;
	}
	
	.result-age {
		display: none;
	}
}

/* ==========================================
   Photo Upload Area (Shared)
   ========================================== */
.photo-upload-area {
	text-align: center;
	cursor: pointer;
}

.photo-preview {
	width: 150px;
	height: 150px;
	border: 2px dashed #ccc;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f8f8f8;
	overflow: hidden;
	transition: border-color 0.2s;
}

.photo-upload-area:hover .photo-preview {
	border-color: #219119;
}

.photo-preview.has-photo {
	border: none;
}

.photo-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photo-preview .photo-initials {
	font-size: 3rem;
	font-weight: 600;
	color: #ccc;
}

/* ==========================================
   Profile Page - Photo in Grid Layout
   ========================================== */
/* Profile photo column */
.profile-photo-col .photo-upload-area {
	text-align: left;
}

.profile-photo-col .photo-preview {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	max-width: 200px;
	margin: 0;
}

/* Large photo upload area for profile */
.photo-upload-large .photo-preview {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	max-width: 250px;
}

.photo-upload-large .photo-initials {
	font-size: 5rem;
}

/* Center form actions in callout */
.edit-form .form-actions {
	text-align: center;
}

/* Mobile: center photo above fields */
@media (max-width: 640px) {
	.profile-photo-col {
		text-align: center;
		margin-bottom: 1rem;
	}
	
	.profile-photo-col .photo-upload-area {
		text-align: center;
	}
	
	.profile-photo-col .photo-preview {
		width: 120px;
		height: 120px;
		margin: 0 auto;
	}
}

/* ==========================================
   Locality Picker Component
   ========================================== */
.locality-picker-container {
	position: relative;
}

/* Token (selected value) */
.locality-token {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: #e8f5e9;
	border: 1px solid #a5d6a7;
	border-radius: 4px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #1c6017;
}
.locality-token .token-text {
	flex: 1;
}
.locality-token .token-clear {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	background: rgba(0,0,0,0.1);
	border: none;
	border-radius: 50%;
	color: #666;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s, color 0.15s;
}
.locality-token .token-clear:hover {
	background: #dc3545;
	color: #fff;
}

/* Search input wrapper */
.locality-search-wrap {
	position: relative;
}
.locality-search-input {
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 0.9375rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #f5f5f5;
	transition: border-color 0.2s, background 0.2s;
}
.locality-search-input:focus {
	background: #fff;
	border-color: #219119;
	box-shadow: 0 0 0 3px rgba(33, 145, 25, 0.15);
	outline: none;
}
.locality-search-input::placeholder {
	color: #999;
}

/* Results dropdown */
.locality-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	max-height: 280px;
	overflow-y: auto;
	z-index: 500;
}

.locality-region-header {
	padding: 0.5rem 0.75rem;
	background: #f5f5f5;
	font-size: 0.75rem;
	font-weight: 600;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 1px solid #eee;
	position: sticky;
	top: 0;
}

.locality-result-item {
	padding: 0.625rem 0.75rem;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
	transition: background 0.15s;
}
.locality-result-item:last-child {
	border-bottom: none;
}
.locality-result-item:hover {
	background: #f8f8f8;
}
.locality-result-item .result-loc-name {
	color: #333;
}
.locality-result-item .result-loc-name strong {
	color: #1c6017;
	font-weight: 600;
}

.locality-no-results {
	padding: 1rem;
	text-align: center;
	color: #999;
	font-size: 0.9rem;
}