/**
 * Plan-It Marina — Admin Styles
 *
 * Complete CSS overhaul using CSS custom properties from PIM_Brand.
 * All rules scoped to .fgm-wrap to avoid WordPress admin conflicts.
 *
 * Sections:
 *  1. Scoped Reset
 *  2. Nav Bar
 *  3. Dashboard
 *  4. Page Layout
 *  5. Buttons
 *  6. Tables
 *  7. Badges
 *  8. Forms
 *  9. Cards / Detail View
 * 10. Detail Actions
 * 11. Search & Filters
 * 12. Active Filter Banner
 * 13. Bulk Actions
 * 14. Pagination
 * 15. AJAX Search Dropdown
 * 16. Confirm Dialog
 * 17. Notices & Warnings
 * 18. File Display
 * 19. Settings & Tabs
 * 20. Audit Log
 * 21. Bulk Add / Swap
 * 22. Renewal Dashboard
 * 23. Lease Template Editor
 * 24. Utility Classes
 * 25. Responsive
 * 26. Print
 */

/* ==========================================================================
   1. Scoped Reset
   ========================================================================== */

.fgm-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--space-9) 60px;
}

/* Override WordPress .wrap a color (0,1,1) — these use (0,2,0), covers all element types */
.fgm-wrap .fgm-btn          { color: var(--fg); text-decoration: none; }
.fgm-wrap .fgm-btn:hover    { color: var(--brand); }
.fgm-wrap .fgm-btn-primary,
.fgm-wrap .fgm-btn-primary:hover,
.fgm-wrap .fgm-btn-primary:focus,
.fgm-wrap .fgm-btn-primary:active  { color: #fff; }
.fgm-wrap .fgm-btn-secondary       { color: var(--brand); }
.fgm-wrap .fgm-btn-secondary:hover { color: #fff; }
.fgm-wrap .fgm-btn-danger,
.fgm-wrap .fgm-btn-danger:hover,
.fgm-wrap .fgm-btn-danger:focus    { color: #fff; }

/* ==========================================================================
   2. Masthead (v8)
   ========================================================================== */

/* ── Onboarding Banner ─────────────────────────────────────────────── */

.fgm-onboarding-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	background: var(--warn-bg);
	color: var(--warn-ink);
	padding: 10px 48px;
	font-size: 13px;
	line-height: 1.4;
	border-bottom: 1px solid var(--warn-stroke);
}

.fgm-onboarding-banner-content {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fgm-onboarding-banner-content svg {
	flex-shrink: 0;
}

.fgm-onboarding-sep {
	margin: 0 2px;
	opacity: 0.6;
}

.fgm-onboarding-banner-link {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--warn-ink);
	text-decoration: none;
}
.fgm-onboarding-banner-link:hover {
	text-decoration: underline;
}

.fgm-onboarding-banner--progress {
	background: var(--brand-soft);
	color: var(--brand);
	border-bottom-color: var(--brand-mid);
}
.fgm-onboarding-banner--progress .fgm-onboarding-banner-link {
	color: var(--brand);
}

/* ── Masthead ──────────────────────────────────────────────────────── */

.fgm-masthead {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	/* The bar sits inside .fgm-wrap, which already has 48px side padding. Keep only a small inset so
	   the full menu fits at desktop widths (48px here too made the bar collapse to the hamburger at 1920). */
	padding: 20px 8px;
	border-bottom: 1px solid var(--line);
	background: #fff;
	position: sticky;
	top: 32px;
	z-index: 100;
}

.fgm-masthead-brand {
	display: flex;
	align-items: center;
	gap: 14px;
}

.fgm-masthead-logo {
	height: 30px;
	width: auto;
	display: block;
}

.fgm-masthead-initials {
	width: 30px;
	height: 30px;
	background: var(--brand);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -0.02em;
	flex-shrink: 0;
}

.fgm-masthead-brand-text {
	display: flex;
	flex-direction: column;
}

.fgm-masthead-name {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--fg);
}

.fgm-masthead-ver {
	font-size: 11px;
	color: var(--fg-3);
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	margin-top: 1px;
}

/* ── Nav links (centered) ──────────────────────────────────────────── */

.fgm-masthead-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	justify-self: center;
}

.fgm-masthead-link {
	padding: 7px 14px;
	font-size: 13px;
	color: var(--fg-2);
	text-decoration: none;
	letter-spacing: -0.005em;
	border-radius: var(--radius-md);
	position: relative;
	cursor: pointer;
	background: none;
	border: none;
	font-family: inherit;
	font-weight: 400;
	transition: color 0.15s;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.fgm-masthead-link:hover {
	color: var(--fg);
}

.fgm-masthead-link.is-active {
	color: var(--fg);
	font-weight: 500;
}

.fgm-masthead-link.is-active::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: -21px;
	height: 2px;
	background: var(--brand);
}

.fgm-masthead-link:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

.fgm-masthead-link svg {
	transition: transform 0.15s;
}

.fgm-masthead-more-btn svg {
	transform: rotate(90deg);
	width: 10px;
	height: 10px;
}

.fgm-masthead-more-btn[aria-expanded="true"] svg {
	transform: rotate(-90deg);
}

/* ── Right section ─────────────────────────────────────────────────── */

.fgm-masthead-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-4);
	font-size: 13px;
	color: var(--fg-2);
}

.fgm-masthead-divider {
	width: 1px;
	height: 14px;
	background: var(--line-strong);
}

/* ── Profile button ────────────────────────────────────────────────── */

.fgm-masthead-profile-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: 13px;
	color: var(--fg);
	transition: background 0.15s;
}
.fgm-masthead-profile-btn:hover {
	background: var(--row-hover);
}
.fgm-masthead-profile-btn:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

.fgm-masthead-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--brand-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 500;
	color: var(--brand-ink);
}

/* ── Dropdowns (shared for More, Settings, Profile) ────────────────── */

.fgm-masthead-dropdown {
	position: relative;
}

.fgm-masthead-dropdown-menu {
	display: none;
	position: absolute;
	left: 0;
	top: calc(100% + 8px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	min-width: 200px;
	z-index: 99999;
	overflow: hidden;
	padding: 4px 0;
}

.fgm-masthead-dropdown-menu--right {
	left: auto;
	right: 0;
}

.fgm-masthead-dropdown-menu.is-open {
	display: block;
}

.fgm-masthead-dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	font-size: 13px;
	color: var(--fg-2);
	text-decoration: none;
	transition: background 0.1s, color 0.1s;
}

.fgm-masthead-dropdown-item:hover {
	background: var(--row-hover);
	color: var(--fg);
}

.fgm-masthead-dropdown-item.is-active {
	color: var(--brand);
	font-weight: 500;
}

.fgm-masthead-dropdown-item svg {
	flex-shrink: 0;
	color: var(--fg-3);
}
.fgm-masthead-dropdown-item:hover svg,
.fgm-masthead-dropdown-item.is-active svg {
	color: var(--brand);
}

.fgm-masthead-dropdown-item--danger {
	color: var(--bad-dot);
	border-top: 1px solid var(--line);
	margin-top: 4px;
	padding-top: 10px;
}
.fgm-masthead-dropdown-item--danger svg {
	color: var(--bad-dot);
}
.fgm-masthead-dropdown-item--danger:hover {
	background: color-mix(in srgb, var(--bad-dot) 6%, white);
	color: var(--bad-dot);
}

/* Profile dropdown header */
.fgm-masthead-profile-header {
	padding: 10px 14px 8px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 4px;
}
.fgm-masthead-profile-header-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--fg);
}
.fgm-masthead-profile-header-email {
	font-size: 12px;
	color: var(--fg-3);
	margin-top: 1px;
}

/* ── Hamburger (mobile) ────────────────────────────────────────────── */

.fgm-masthead-hamburger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: var(--fg);
	border-radius: var(--radius-md);
}
.fgm-masthead-hamburger:hover {
	background: var(--row-hover);
}
.fgm-masthead-hamburger:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: -2px;
}

/* ==========================================================================
   3. Dashboard (v8)
   ========================================================================== */

/* ── Pulse list (hero) ─────────────────────────────────────────────── */

.fgm-pulse-list {
	list-style: none;
	padding: 0;
	margin: var(--space-5) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.fgm-pulse-list li {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	font-size: 15px;
	color: var(--fg-2);
	letter-spacing: -0.005em;
}

.fgm-pulse-num {
	font-size: 18px;
	font-weight: 500;
	color: var(--brand);
	font-variant-numeric: tabular-nums;
	min-width: 20px;
}

.fgm-pulse-body {
	color: var(--fg-2);
}

/* ── Hero stat (right column: occupancy %) ─────────────────────────── */

.fgm-hero-stat {
	display: flex;
	align-items: center;
	gap: var(--space-7);
}

.fgm-hero-stat-divider {
	width: 1px;
	align-self: stretch;
	background: var(--line);
}

.fgm-hero-stat-inner {
	text-align: left;
}

/* ── Stat item links ───────────────────────────────────────────────── */

.fgm-stat-item {
	text-decoration: none;
	color: inherit;
	display: block;
}

.fgm-stat-item:hover {
	text-decoration: none;
}

/* ── Dashboard Mini-Map ──────────────────────────────────────────────── */

.fgm-minimap-wrapper {
	grid-column: 1 / -1;
}

.fgm-dashboard-bottom-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	margin-top: var(--space-6);
}

.fgm-dashboard-bottom-row > .fgm-card {
	display: flex;
	flex-direction: column;
}

.fgm-dashboard-bottom-row .fgm-minimap-canvas-wrap {
	flex: 1;
	min-height: 140px;
}

@media (max-width: 900px) {
	.fgm-dashboard-bottom-row {
		grid-template-columns: 1fr;
	}
}

.fgm-minimap-canvas-wrap {
	position: relative;
	height: 180px;
	background: #e8f4f8;
	border-radius: 0 0 var(--fgm-radius) var(--fgm-radius);
	overflow: hidden;
	cursor: pointer;
}

.fgm-minimap-canvas-wrap canvas {
	display: block;
}

.fgm-minimap-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-6);
}

.fgm-minimap-stats .fgm-stat-card {
	flex: 1 1 60px;
	text-align: center;
	padding: var(--space-2) var(--space-1);
}

.fgm-minimap-stats .fgm-stat-number {
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.fgm-minimap-stats .fgm-stat-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fg-2);
	margin-top: var(--space-1);
}

.fgm-minimap-stats .fgm-stat-danger-if-positive .fgm-stat-number {
	color: var(--num-bad);
}

.fgm-minimap-stats .fgm-stat-warning-if-positive .fgm-stat-number {
	color: var(--num-warn);
}

.fgm-minimap-stats .fgm-stat-success-if-positive .fgm-stat-number {
	color: var(--num-ok);
}

.fgm-minimap-fullmap-btn {
	position: absolute;
	bottom: 12px;
	right: 12px;
	background: rgba(26, 35, 50, 0.85);
	color: #fff;
	padding: 6px 14px;
	border-radius: var(--fgm-radius);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: var(--fgm-transition);
	z-index: 2;
}

.fgm-minimap-fullmap-btn:hover {
	background: var(--fgm-brand);
	color: #fff;
	text-decoration: none;
}

/* ==========================================================================
   4. Page Layout
   ========================================================================== */

.fgm-wrap h1 {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 23px;
	font-weight: 600;
	color: var(--fgm-text);
	margin: 0 0 16px;
	padding: 0;
	line-height: 1.4;
}

.fgm-header-actions {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

/* Page header — eyebrow on own row, then title + actions baseline-aligned */
.fgm-page-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.fgm-page-header .fgm-page-eyebrow {
	flex-basis: 100%;
	margin-bottom: 0;
}

.fgm-page-header .fgm-page-title {
	margin: 0;
	font-size: 23px;
	font-weight: 600;
	color: var(--fgm-text);
	line-height: 1.4;
	/* A long real title (e.g. "Lease: Slip A-01 — Harborview, James") must
	   wrap onto a second line on phone instead of forcing the flex row -
	   and the whole page - wider than the viewport. */
	min-width: 0;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.fgm-page-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.fgm-wrap .button,
.fgm-wrap .button-secondary {
	border-color: var(--fgm-border);
	color: var(--fgm-text);
	background: var(--fgm-bg-card);
	border-radius: var(--fgm-radius);
	transition: var(--fgm-transition);
}

.fgm-wrap .button:hover,
.fgm-wrap .button-secondary:hover {
	border-color: var(--fgm-brand);
	color: var(--fgm-brand);
	background: var(--fgm-brand-lighter);
}

.fgm-wrap .button:focus,
.fgm-wrap .button-secondary:focus {
	border-color: var(--fgm-brand);
	box-shadow: 0 0 0 1px var(--fgm-brand);
}

.fgm-wrap .button-primary {
	background: var(--fgm-brand);
	border-color: var(--fgm-brand);
	color: #ffffff;
	border-radius: var(--fgm-radius);
	transition: var(--fgm-transition);
}

.fgm-wrap .button-primary:hover {
	background: var(--fgm-brand-dark);
	border-color: var(--fgm-brand-dark);
	color: #ffffff;
}

.fgm-wrap .button-primary:focus {
	box-shadow: 0 0 0 1px var(--fgm-brand-dark);
}

.fgm-wrap .page-title-action {
	border-color: var(--fgm-brand);
	color: var(--fgm-brand);
	border-radius: var(--fgm-radius);
	transition: var(--fgm-transition);
}

.fgm-wrap .page-title-action:hover {
	background: var(--fgm-brand);
	color: #ffffff;
}

/* Danger button variant */
.fgm-wrap .button-danger,
.fgm-wrap .button--danger {
	color: var(--fgm-danger);
	border-color: var(--fgm-danger);
}

.fgm-wrap .button-danger:hover,
.fgm-wrap .button--danger:hover {
	background: var(--fgm-danger);
	border-color: var(--fgm-danger);
	color: #ffffff;
}

/* Link-style action buttons in table rows */
.fgm-wrap .fgm-action-link,
.fgm-wrap button.fgm-action-link {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 12px;
	color: var(--fgm-brand);
	text-decoration: none;
	transition: var(--fgm-transition);
}

.fgm-wrap .fgm-action-link:hover,
.fgm-wrap button.fgm-action-link:hover {
	color: var(--fgm-brand-dark);
	text-decoration: underline;
}

.fgm-wrap .fgm-action-link--success { color: var(--fgm-success); }
.fgm-wrap .fgm-action-link--success:hover { color: var(--fgm-success-dark); }
.fgm-wrap .fgm-action-link--danger { color: var(--fgm-danger); }
.fgm-wrap .fgm-action-link--danger:hover { color: var(--fgm-danger-dark); }

/* ==========================================================================
   6. Tables
   ========================================================================== */

.fgm-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--fgm-bg-card);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	box-shadow: var(--fgm-shadow-sm);
}

.fgm-table thead th {
	padding: 10px 12px;
	text-align: left;
	font-weight: 600;
	font-size: 13px;
	color: var(--fgm-text);
	background: var(--fgm-bg);
	border-bottom: 2px solid var(--fgm-border);
	white-space: nowrap;
}

.fgm-table tbody td {
	padding: 10px 12px;
	font-size: 13px;
	color: var(--fgm-text-secondary);
	border-bottom: 1px solid var(--fgm-border);
	vertical-align: top;
	/* VIS-DRB-003: a long unbroken string (e.g. a pasted-in-one-word charge
	   description) must break inside its cell instead of forcing the column
	   — and the whole table — wider than the page. */
	word-break: break-word;
	overflow-wrap: anywhere;
}

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

.fgm-table tbody tr:hover {
	background: var(--fgm-brand-lighter);
}

/* Alternating row colors */
.fgm-table tbody tr:nth-child(even) {
	background: rgba(var(--fgm-brand-rgb), 0.02);
}

.fgm-table tbody tr:nth-child(even):hover {
	background: var(--fgm-brand-lighter);
}

/* Checkbox column */
.fgm-table .fgm-col-cb {
	width: 30px;
	padding-left: 10px;
	padding-right: 4px;
}

/* Actions column */
.fgm-table .fgm-col-actions {
	white-space: nowrap;
}

/* Sortable column headers */
.fgm-table thead th.fgm-sortable {
	cursor: pointer;
	user-select: none;
	transition: var(--fgm-transition);
}

.fgm-table thead th.fgm-sortable:hover {
	color: var(--fgm-brand);
}

.fgm-table thead th.fgm-sortable .fgm-sort-icon {
	font-size: 11px;
	margin-left: 4px;
	opacity: 0.4;
	transition: var(--fgm-transition);
}

.fgm-table thead th.fgm-sortable.fgm-sorted-asc .fgm-sort-icon,
.fgm-table thead th.fgm-sortable.fgm-sorted-desc .fgm-sort-icon {
	opacity: 1;
	color: var(--fgm-brand);
}

/* Primary column: the main link in each row */
.fgm-table .fgm-col-primary a {
	font-weight: 600;
	text-decoration: none;
	color: var(--fgm-brand);
	transition: var(--fgm-transition);
}

.fgm-table .fgm-col-primary a:hover {
	color: var(--fgm-brand-dark);
	text-decoration: underline;
}

/* Row action links */
.fgm-row-actions {
	display: flex;
	gap: 4px;
	font-size: 12px;
}

.fgm-row-actions a {
	text-decoration: none;
	color: var(--fgm-brand);
	transition: var(--fgm-transition);
}

.fgm-row-actions a:hover {
	color: var(--fgm-brand-dark);
}

.fgm-row-actions .fgm-action-delete,
.fgm-row-actions .fgm-action-cancel {
	color: var(--fgm-danger);
}

.fgm-row-actions .fgm-action-delete:hover,
.fgm-row-actions .fgm-action-cancel:hover {
	color: var(--fgm-danger-dark);
}

.fgm-row-actions .fgm-action-sep {
	color: var(--fgm-text-light);
}

/* Empty state */
.fgm-table .fgm-empty-row td {
	text-align: center;
	padding: 40px 12px;
	color: var(--fgm-text-secondary);
	font-style: italic;
}

/* Table wrap for horizontal scroll on mobile */
.fgm-table-wrap {
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
}


/* Nested tables within detail sections */
.fgm-detail-section .fgm-table {
	border: none;
	box-shadow: none;
	border-radius: 0;
}

/* ==========================================================================
   8. Forms
   ========================================================================== */

.fgm-form {
	max-width: 800px;
}

.fgm-form-section {
	background: var(--fgm-bg-card);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	box-shadow: var(--fgm-shadow-sm);
	margin-bottom: 20px;
}

.fgm-form-section-header {
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fgm-text);
	background: var(--fgm-bg);
	border-bottom: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius) var(--fgm-radius) 0 0;
}

.fgm-form-section-body {
	padding: 20px;
}

.fgm-form-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
}

.fgm-form-row:last-child {
	margin-bottom: 0;
}

.fgm-form-row label {
	font-size: 13px;
	font-weight: 600;
	color: var(--fgm-text);
}

.fgm-form-row label .fgm-required {
	color: var(--fgm-danger);
	margin-left: 2px;
}

.fgm-form-row input[type="text"],
.fgm-form-row input[type="email"],
.fgm-form-row input[type="tel"],
.fgm-form-row input[type="number"],
.fgm-form-row input[type="date"],
.fgm-form-row input[type="search"],
.fgm-form-row select {
	height: 38px;
	min-height: 38px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.5;
	max-width: 400px;
	width: 100%;
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	box-sizing: border-box;
	transition: var(--fgm-transition);
}

.fgm-form-row textarea {
	max-width: 400px;
	width: 100%;
	border-color: var(--fgm-border);
	border-radius: var(--fgm-radius);
	transition: var(--fgm-transition);
}

/* Match browse-search trigger to form input height */
.fgm-form-row .fgm-bs-trigger {
	height: 38px;
	min-height: 38px;
	padding: 6px 12px;
	font-size: 14px;
	max-width: 400px;
}

.fgm-form-row input[type="text"]:focus,
.fgm-form-row input[type="email"]:focus,
.fgm-form-row input[type="tel"]:focus,
.fgm-form-row input[type="number"]:focus,
.fgm-form-row input[type="date"]:focus,
.fgm-form-row input[type="search"]:focus,
.fgm-form-row select:focus,
.fgm-form-row textarea:focus {
	border-color: var(--fgm-brand);
	box-shadow: 0 0 0 1px var(--fgm-brand);
	outline: none;
}

.fgm-form-row .fgm-field-description {
	font-size: 12px;
	color: var(--fgm-text-secondary);
	font-style: italic;
}

.fgm-field-readonly {
	display: inline-block;
	padding: 6px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--fgm-text);
}

.fgm-field-readonly a {
	text-decoration: none;
	color: var(--fgm-brand);
}

.fgm-field-readonly a:hover {
	text-decoration: underline;
	color: var(--fgm-brand-dark);
}

/* Two-column form rows */
.fgm-form-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

/* Inline validation states */
.fgm-form-row.fgm-field-error input,
.fgm-form-row.fgm-field-error select,
.fgm-form-row.fgm-field-error textarea {
	border-color: var(--fgm-danger);
	box-shadow: 0 0 0 1px var(--fgm-danger);
}

.fgm-form-row .fgm-field-error-msg {
	color: var(--fgm-danger);
	font-size: 12px;
}

.fgm-form-row.fgm-field-success input {
	border-color: var(--fgm-success);
	box-shadow: 0 0 0 1px var(--fgm-success);
}

.fgm-form-row .fgm-field-success-msg {
	color: var(--fgm-success);
	font-size: 12px;
}

/* Form submit area */
.fgm-form-submit {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 20px;
}

/* ==========================================================================
   9. Cards / Detail View
   ========================================================================== */

.fgm-detail {
	margin: 20px 0;
}

.fgm-detail-section {
	background: var(--fgm-bg-card);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	box-shadow: var(--fgm-shadow-sm);
	margin-bottom: 20px;
}

.fgm-detail-section-header {
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fgm-text);
	background: var(--fgm-bg);
	border-bottom: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius) var(--fgm-radius) 0 0;
}

.fgm-detail-section-body {
	padding: 20px;
}

.fgm-detail-section-body--flush {
	padding: 0;
}

/* Key-value pairs in detail view */
.fgm-detail-fields {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px 24px;
}

.fgm-detail-fields--stacked {
	grid-template-columns: 1fr;
}

.fgm-detail-field {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fgm-detail-field--full {
	grid-column: 1 / -1;
}

.fgm-detail-field .fgm-field-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--fgm-text-light);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.fgm-detail-field .fgm-field-value {
	font-size: 14px;
	color: var(--fgm-text);
}

.fgm-detail-field .fgm-field-value a {
	text-decoration: none;
	color: var(--fgm-brand);
	transition: var(--fgm-transition);
}

.fgm-detail-field .fgm-field-value a:hover {
	text-decoration: underline;
	color: var(--fgm-brand-dark);
}

/* Sub-headers within detail sections (e.g. "Boat Information") */
.fgm-detail-sub-header {
	margin: 20px 0 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fgm-text);
	padding-top: 16px;
	border-top: 1px solid var(--fgm-border);
}

.fgm-detail-sub-header:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* ==========================================================================
   10. Detail Actions
   ========================================================================== */

.fgm-detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0;
}

/* ==========================================================================
   11. Search & Filters
   ========================================================================== */

.fgm-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin: 16px 0;
	padding: 16px 20px;
	background: var(--fgm-bg-card);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	box-shadow: var(--fgm-shadow-sm);
	overflow: visible;
}

.fgm-filter-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fgm-filter-group label {
	font-size: 12px;
	font-weight: 600;
	color: var(--fgm-text);
}

/* Consistent input heights across all filter elements */
.fgm-filters select,
.fgm-filters input[type="text"],
.fgm-filters input[type="search"],
.fgm-filters input[type="number"],
.fgm-filters input[type="date"] {
	height: 38px;
	min-height: 38px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.5;
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	box-sizing: border-box;
	transition: var(--fgm-transition);
}

.fgm-filter-group select,
.fgm-filter-group input[type="text"],
.fgm-filter-group input[type="date"] {
	min-width: 150px;
}

.fgm-filters select:focus,
.fgm-filters input[type="text"]:focus,
.fgm-filters input[type="search"]:focus,
.fgm-filters input[type="number"]:focus,
.fgm-filters input[type="date"]:focus {
	border-color: var(--fgm-brand);
	box-shadow: 0 0 0 1px var(--fgm-brand);
	outline: none;
}

/* Match browse-search trigger to the same height */
.fgm-filters .fgm-bs-trigger {
	height: 38px;
	min-height: 38px;
	padding: 6px 12px;
	font-size: 14px;
}

/* Filter/Reset buttons match input height */
.fgm-filters .button {
	height: 38px;
	padding: 6px 16px;
	line-height: 1.5;
	box-sizing: border-box;
}

.fgm-search-group {
	flex: 0 0 250px;
	min-width: 200px;
	max-width: 300px;
}

.fgm-search-group input[type="search"] {
	width: 100%;
}

.fgm-filter-actions {
	display: flex;
	gap: 6px;
	align-self: flex-end;
}

/* ==========================================================================
   12. Active Filter Banner
   ========================================================================== */

.fgm-active-filter-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	margin-bottom: 16px;
	background: var(--fgm-brand-light);
	border: 1px solid var(--fgm-brand);
	border-radius: var(--fgm-radius);
	font-size: 13px;
	font-weight: 500;
	color: var(--fgm-brand-dark);
}

.fgm-clear-filter {
	text-decoration: none;
	color: var(--fgm-brand);
	font-weight: 600;
	transition: var(--fgm-transition);
}

.fgm-clear-filter:hover {
	color: var(--fgm-danger);
	text-decoration: none;
}

/* ==========================================================================
   13. Bulk Actions
   ========================================================================== */

.fgm-bulk-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0;
}

.fgm-bulk-bar select {
	min-width: 140px;
	border-color: var(--fgm-border);
	border-radius: var(--fgm-radius);
}

/* ==========================================================================
   14. Pagination
   ========================================================================== */

.fgm-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 16px 0;
	font-size: 13px;
	color: var(--fgm-text-secondary);
}

.fgm-pagination-info {
	white-space: nowrap;
}

.fgm-pagination-links {
	display: flex;
	gap: 4px;
}

.fgm-pagination-links a,
.fgm-pagination-links span {
	display: inline-block;
	min-width: 32px;
	padding: 4px 8px;
	text-align: center;
	text-decoration: none;
	background: var(--fgm-bg-card);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	font-size: 13px;
	color: var(--fgm-brand);
	transition: var(--fgm-transition);
}

.fgm-pagination-links span.fgm-current-page {
	background: var(--fgm-brand);
	border-color: var(--fgm-brand);
	color: #ffffff;
	font-weight: 600;
}

.fgm-pagination-links a:hover {
	background: var(--fgm-brand-lighter);
	border-color: var(--fgm-brand);
}

.fgm-pagination-links .fgm-disabled {
	color: var(--fgm-text-light);
	cursor: default;
	pointer-events: none;
	background: var(--fgm-bg);
}

/* ==========================================================================
   15. AJAX Search Dropdown
   ========================================================================== */

.fgm-ajax-search-wrap {
	position: relative;
	max-width: 400px;
}

.fgm-ajax-search-wrap input[type="search"] {
	width: 100%;
	border-color: var(--fgm-border);
	border-radius: var(--fgm-radius);
	transition: var(--fgm-transition);
}

.fgm-ajax-search-wrap input[type="search"]:focus {
	border-color: var(--fgm-brand);
	box-shadow: 0 0 0 1px var(--fgm-brand);
	outline: none;
}

.fgm-ajax-search-results {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 100;
	max-height: 240px;
	overflow-y: auto;
	background: var(--fgm-bg-card);
	border: 1px solid var(--fgm-border);
	border-top: none;
	border-radius: 0 0 var(--fgm-radius) var(--fgm-radius);
	box-shadow: var(--fgm-shadow-md);
}

.fgm-ajax-search-results.fgm-visible {
	display: block;
}

.fgm-ajax-search-result {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 13px;
	border-bottom: 1px solid var(--fgm-border);
	transition: var(--fgm-transition);
}

.fgm-ajax-search-result:last-child {
	border-bottom: none;
}

.fgm-ajax-search-result:hover,
.fgm-ajax-search-result.fgm-active {
	background: var(--fgm-brand-lighter);
}

.fgm-ajax-search-result .fgm-search-result-label {
	font-weight: 600;
	color: var(--fgm-text);
}

.fgm-ajax-search-result .fgm-search-result-meta {
	font-size: 12px;
	color: var(--fgm-text-secondary);
}

.fgm-ajax-search-selected {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	padding: 8px 12px;
	background: var(--fgm-brand-lighter);
	border: 1px solid var(--fgm-brand-light);
	border-radius: var(--fgm-radius);
	font-size: 13px;
	color: var(--fgm-text);
}

.fgm-ajax-search-selected .fgm-search-selected-remove {
	margin-left: auto;
	cursor: pointer;
	color: var(--fgm-danger);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: var(--fgm-transition);
}

.fgm-ajax-search-selected .fgm-search-selected-remove:hover {
	color: var(--fgm-danger-dark);
}

.fgm-ajax-search-no-results {
	padding: 12px;
	font-size: 13px;
	color: var(--fgm-text-secondary);
	font-style: italic;
}

.fgm-ajax-search-loading {
	padding: 12px;
	font-size: 13px;
	color: var(--fgm-text-secondary);
}

/* ==========================================================================
   16. Confirm Dialog
   ========================================================================== */

.fgm-confirm-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.5);
	align-items: center;
	justify-content: center;
}

.fgm-confirm-overlay.fgm-visible {
	display: flex;
}

.fgm-confirm-dialog {
	background: var(--fgm-bg-card);
	border-radius: var(--fgm-radius-lg);
	padding: 28px;
	max-width: 460px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.fgm-confirm-dialog h2 {
	margin: 0 0 12px;
	font-size: 16px;
	color: var(--fgm-text);
	display: flex;
	align-items: center;
	gap: 10px;
}

/* VIS-DRB-006: destructive confirm dialogs (delete/remove) prefix the title
   with a circular red icon, per spec §7.7 — previously every confirm dialog
   used the same plain brand-blue Confirm button with no visual distinction
   from a routine (non-destructive) confirm. */
.fgm-confirm-dialog-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--fgm-danger) 14%, white);
	color: var(--fgm-danger);
}

/* The confirm dialog is appended to <body>, OUTSIDE .fgm-wrap — the
   existing .fgm-wrap .fgm-btn-danger{color:#fff} override (and its
   background) never reaches it, leaving only the unscoped .fgm-btn-danger
   outline variant (red text, no fill). Give this specific button its own
   complete filled style so it isn't white-text-on-transparent. */
.fgm-confirm-dialog--danger .fgm-confirm-dialog-actions .fgm-btn-danger {
	background: var(--fgm-danger);
	color: #fff;
	border-color: var(--fgm-danger);
}

.fgm-confirm-dialog--danger .fgm-confirm-dialog-actions .fgm-btn-danger:hover {
	background: color-mix(in srgb, var(--fgm-danger) 85%, black);
	border-color: color-mix(in srgb, var(--fgm-danger) 85%, black);
	color: #fff;
}

.fgm-confirm-dialog p {
	margin: 0 0 20px;
	font-size: 13px;
	color: var(--fgm-text-secondary);
}

.fgm-confirm-dialog-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

/* ==========================================================================
   17. Notices & Warnings
   ========================================================================== */

.fgm-notice {
	padding: 12px 16px;
	border-left: 4px solid;
	border-radius: var(--fgm-radius);
	margin: 12px 0;
	font-size: 13px;
}

.fgm-notice--info {
	background: rgba(37, 99, 235, 0.06);
	border-color: var(--fgm-info);
	color: var(--fgm-text);
}

.fgm-notice--warning {
	background: rgba(217, 119, 6, 0.06);
	border-color: var(--fgm-warning);
	color: var(--fgm-text);
}

.fgm-notice--error {
	background: rgba(220, 38, 38, 0.06);
	border-color: var(--fgm-danger);
	color: var(--fgm-text);
}

.fgm-notice--success {
	background: rgba(22, 163, 74, 0.06);
	border-color: var(--fgm-success);
	color: var(--fgm-text);
}

/* Dimension warning in lease form */
.fgm-dimension-warning {
	display: none;
	padding: 10px 14px;
	background: rgba(217, 119, 6, 0.08);
	border: 1px solid var(--fgm-warning);
	border-radius: var(--fgm-radius);
	font-size: 12px;
	color: var(--fgm-warning);
	margin-top: 6px;
}

.fgm-dimension-warning.fgm-visible {
	display: block;
}

/* Empty state */
.fgm-empty-state {
	text-align: center;
	padding: 48px 20px;
	color: var(--fgm-text-secondary);
	font-size: 14px;
	background: var(--fgm-bg-card);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
}

/* ==========================================================================
   18. File Display
   ========================================================================== */

.fgm-file-upload {
	margin-top: 4px;
}

.fgm-file-current {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding: 10px 14px;
	background: var(--fgm-bg);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	font-size: 13px;
}

.fgm-file-current .dashicons {
	color: var(--fgm-text-secondary);
	flex-shrink: 0;
}

.fgm-file-current .fgm-file-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	max-width: 300px;
}

.fgm-file-current .fgm-file-remove {
	margin-left: auto;
	color: var(--fgm-danger);
	text-decoration: none;
	font-size: 12px;
	flex-shrink: 0;
	transition: var(--fgm-transition);
}

.fgm-file-current .fgm-file-remove:hover {
	color: var(--fgm-danger-dark);
}

/* ==========================================================================
   19. Settings & Tabs
   ========================================================================== */

.fgm-wrap .nav-tab-wrapper {
	border-bottom-color: var(--fgm-border);
	margin-bottom: 20px;
}

.fgm-wrap .nav-tab-wrapper .nav-tab {
	border-color: var(--fgm-border);
	border-bottom: none;
	background: var(--fgm-bg);
	color: var(--fgm-text-secondary);
	border-radius: var(--fgm-radius) var(--fgm-radius) 0 0;
	transition: var(--fgm-transition);
	padding: 8px 14px;
	font-size: 13px;
}

.fgm-wrap .nav-tab-wrapper .nav-tab:hover {
	background: var(--fgm-brand-lighter);
	color: var(--fgm-brand);
}

.fgm-wrap .nav-tab-wrapper .nav-tab-active {
	background: var(--fgm-bg-card);
	border-bottom: 1px solid var(--fgm-bg-card);
	color: var(--fgm-brand);
	font-weight: 600;
}

/* Rental Sub-Navigation Tabs */
.fgm-rental-tabs {
	display: flex;
	gap: var(--space-1);
	border-bottom: 1px solid var(--fgm-border);
	margin-bottom: var(--space-5);
	position: sticky;
	top: 105px;
	background: var(--fgm-bg, #fff);
	z-index: 90;
	padding-top: var(--space-3);
	/* Too many tabs to fit a phone width - scroll the tab bar itself
	   instead of forcing the whole page wider. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.fgm-rental-tab {
	flex-shrink: 0;
}

.fgm-rental-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--space-3) var(--space-4);
	font-size: 13px;
	font-weight: 500;
	color: var(--fgm-text-secondary);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: var(--fgm-transition);
	margin-bottom: -1px;
}

.fgm-rental-tab:hover {
	color: var(--fgm-brand);
}

.fgm-rental-tab.is-active {
	color: var(--fgm-brand);
	border-bottom-color: var(--fgm-brand);
	font-weight: 600;
}

.fgm-rental-tab-count {
	font-size: 11px;
	font-weight: 500;
	padding: 2px 8px;
	min-width: 20px;
	text-align: center;
	background: var(--fgm-bg-muted, #f3f4f6);
	border-radius: 999px;
	color: var(--fgm-text-muted);
}

.fgm-rental-tab.is-active .fgm-rental-tab-count {
	background: var(--fgm-brand-lighter);
	color: var(--fgm-brand);
}

/* Settings form tables */
.fgm-wrap .form-table th {
	color: var(--fgm-text);
	font-weight: 600;
}

.fgm-wrap .form-table td .description {
	color: var(--fgm-text-secondary);
}

/* Taxonomy tables */
.fgm-taxonomy-manager {
	margin-top: 20px;
}

.fgm-taxonomy-table .fgm-term-count {
	color: var(--fgm-text-secondary);
	font-size: 12px;
}

.fgm-taxonomy-inline-edit {
	display: flex;
	gap: 6px;
	align-items: center;
}

.fgm-taxonomy-inline-edit input[type="text"] {
	width: 200px;
	border-color: var(--fgm-border);
	border-radius: var(--fgm-radius);
}

.fgm-taxonomy-add-form {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	margin-top: 16px;
}

.fgm-taxonomy-add-form input[type="text"] {
	min-width: 200px;
	border-color: var(--fgm-border);
	border-radius: var(--fgm-radius);
}

.fgm-taxonomy-delete.fgm-disabled {
	color: var(--fgm-text-light);
	cursor: not-allowed;
	pointer-events: none;
}

.fgm-taxonomy-notice {
	margin-top: 12px;
}

.fgm-taxonomy-edit {
	color: var(--fgm-brand);
	transition: var(--fgm-transition);
}

.fgm-taxonomy-edit:hover {
	color: var(--fgm-brand-dark);
}

.fgm-taxonomy-delete {
	color: var(--fgm-danger);
	transition: var(--fgm-transition);
}

.fgm-taxonomy-delete:hover {
	color: var(--fgm-danger-dark);
}

/* ==========================================================================
   20. Audit Log
   ========================================================================== */

.fgm-audit-toggle {
	cursor: pointer;
	color: var(--fgm-brand);
	text-decoration: none;
	font-size: 12px;
	transition: var(--fgm-transition);
}

.fgm-audit-toggle:hover {
	text-decoration: underline;
	color: var(--fgm-brand-dark);
}

.fgm-audit-detail {
	display: none;
	margin-top: 8px;
	padding: 12px;
	background: var(--fgm-bg);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	font-size: 12px;
	font-family: monospace;
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--fgm-text);
}

.fgm-audit-detail.fgm-visible {
	display: block;
}

/* ==========================================================================
   21. Bulk Add / Swap
   ========================================================================== */

/* Bulk Slip Preview */
.fgm-bulk-preview {
	display: none;
	margin: 16px 0;
	padding: 14px 18px;
	background: var(--fgm-brand-lighter);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
}

.fgm-bulk-preview-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.fgm-bulk-preview-item {
	display: inline-block;
	padding: 3px 10px;
	background: var(--fgm-bg-card);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	font-size: 12px;
	font-family: monospace;
	color: var(--fgm-text);
}

.fgm-bulk-preview-item.fgm-duplicate {
	border-color: var(--fgm-danger);
	color: var(--fgm-danger);
	text-decoration: line-through;
}

/* Swap Form */
.fgm-swap-summary {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 16px;
	align-items: center;
	margin: 20px 0;
}

.fgm-swap-summary .fgm-swap-arrow {
	font-size: 24px;
	color: var(--fgm-brand);
}

.fgm-swap-card {
	background: var(--fgm-bg-card);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	box-shadow: var(--fgm-shadow-sm);
	padding: 20px;
	text-align: center;
}

.fgm-swap-card .fgm-swap-slip {
	font-size: 18px;
	font-weight: 600;
	color: var(--fgm-text);
}

.fgm-swap-card .fgm-swap-tenant {
	font-size: 13px;
	color: var(--fgm-text-secondary);
	margin-top: 4px;
}

/* ==========================================================================
   22. Renewal Dashboard
   ========================================================================== */

.fgm-renewal-stats {
	display: flex;
	gap: 16px;
	margin: 16px 0 24px;
	flex-wrap: wrap;
}

.fgm-renewal-stat {
	flex: 1;
	min-width: 120px;
	background: var(--fgm-bg-card);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	box-shadow: var(--fgm-shadow-sm);
	padding: 16px;
	text-align: center;
	transition: var(--fgm-transition);
}

.fgm-renewal-stat:hover {
	box-shadow: var(--fgm-shadow);
}

.fgm-renewal-stat-value {
	display: block;
	font-size: 28px;
	font-weight: 700;
	color: var(--fgm-brand);
	line-height: 1;
	margin-bottom: 6px;
}

.fgm-renewal-stat-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--fgm-text-secondary);
}

.fgm-renewal-stat--alert {
	border-color: var(--fgm-danger);
	border-left: 4px solid var(--fgm-danger);
}

.fgm-renewal-stat--alert .fgm-renewal-stat-value {
	color: var(--fgm-danger);
}

/* Days remaining color coding */
.fgm-days-remaining {
	font-weight: 600;
}

.fgm-days--ok {
	color: var(--fgm-success);
}

.fgm-days--warning {
	color: var(--fgm-warning);
}

.fgm-days--critical {
	color: var(--fgm-danger);
}

.fgm-days--overdue {
	color: var(--fgm-danger);
}

/* Renewal view toggle */
.fgm-view-toggle {
	display: inline-flex;
	gap: 0;
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	overflow: hidden;
	margin-left: auto;
}

.fgm-view-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--fgm-text-secondary);
	background: var(--fgm-bg-card);
	border: none;
	cursor: pointer;
	transition: var(--fgm-transition);
}

.fgm-view-toggle-btn:not(:last-child) {
	border-right: 1px solid var(--fgm-border);
}

.fgm-view-toggle-btn:hover {
	background: var(--fgm-bg);
}

.fgm-view-toggle-btn.is-active {
	background: var(--fgm-brand);
	color: #fff;
}

/* Kanban board — 5 columns for renewal statuses */
.fgm-kanban--renewals {
	display: grid;
	grid-template-columns: repeat(5, minmax(200px, 1fr));
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 4px;
	margin-top: 16px;
}

.fgm-kanban--renewals .fgm-kanban-col {
	background: var(--fgm-bg);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	padding: 16px;
	min-height: 200px;
}

.fgm-kanban--renewals .fgm-kanban-col-title {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--fgm-text-secondary);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.fgm-kanban--renewals .fgm-kanban-col-count {
	font-size: 10px;
	font-weight: 700;
	color: var(--fgm-text-secondary);
	background: var(--fgm-border);
	padding: 2px 7px;
	border-radius: 10px;
}

.fgm-kanban--renewals .fgm-kanban-card {
	background: var(--fgm-bg-card);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	padding: 14px;
	margin-bottom: 10px;
	display: block;
	transition: var(--fgm-transition);
	text-decoration: none;
	color: inherit;
}

.fgm-kanban--renewals .fgm-kanban-card:hover {
	border-color: var(--fgm-brand);
	box-shadow: var(--fgm-shadow);
}

.fgm-kanban--renewals .fgm-kanban-card-slip {
	font-size: 16px;
	font-weight: 600;
	color: var(--fgm-brand);
	margin-bottom: 4px;
}

.fgm-kanban--renewals .fgm-kanban-card-tenant {
	font-size: 13px;
	font-weight: 500;
	color: var(--fgm-text);
	margin-bottom: 8px;
}

.fgm-kanban--renewals .fgm-kanban-card-meta {
	font-size: 12px;
	color: var(--fgm-text-secondary);
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.fgm-kanban--renewals .fgm-kanban-card-foot {
	font-size: 12px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--fgm-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.fgm-kanban-empty {
	font-size: 13px;
	color: var(--fgm-text-secondary);
	text-align: center;
	padding: 24px 8px;
	font-style: italic;
}

@media (max-width: 1200px) {
	.fgm-kanban--renewals {
		grid-template-columns: repeat(5, minmax(180px, 1fr));
	}
}

/* Manual renewal inline form */
.fgm-manual-renew-form {
	margin-top: 10px;
	padding: 12px;
	background: var(--fgm-bg);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
}

.fgm-manual-renew-fields {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10px;
}

.fgm-manual-renew-fields label {
	font-size: 12px;
	font-weight: 600;
	color: var(--fgm-text);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fgm-manual-renew-fields input {
	border-color: var(--fgm-border);
	border-radius: var(--fgm-radius);
}

.fgm-manual-renew-actions {
	display: flex;
	gap: 6px;
}

/* Renewal section in detail views */
.fgm-renewal-section {
	margin-top: 16px;
}

.fgm-renewal-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.fgm-renewal-offer-form {
	margin-top: 16px;
	padding: 16px;
	background: var(--fgm-bg);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
}

.fgm-renewal-status {
	display: inline-block;
	font-weight: 600;
}

/* Renewal offer form grid */
.fgm-renewal-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.fgm-renewal-form-grid .fgm-form-group-full {
	grid-column: 1 / -1;
}

/* ==========================================================================
   23. Lease Template Editor
   ========================================================================== */

.fgm-lease-template-wrap {
	display: flex;
	gap: 20px;
	margin-top: 20px;
}

.fgm-lease-template-editor {
	flex: 7;
	min-width: 0;
}

.fgm-lease-template-fields {
	flex: 3;
	min-width: 220px;
}

.fgm-lease-template-actions {
	display: flex;
	gap: 10px;
	margin-top: 15px;
}

.fgm-merge-fields-panel {
	position: sticky;
	top: 80px;
	background: var(--fgm-bg);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	padding: 16px;
}

.fgm-merge-fields-panel h3 {
	margin-top: 0;
	font-size: 14px;
	color: var(--fgm-text);
}

.fgm-merge-fields-panel h4 {
	margin: 12px 0 6px;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--fgm-text-secondary);
}

.fgm-merge-field-group {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 8px;
}

.fgm-merge-field-btn {
	font-size: 11px;
}

/* Renewal email editor layout */
.fgm-email-editor-row {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.fgm-email-editor-col {
	flex: 1;
	min-width: 0;
}

.fgm-email-merge-panel {
	flex: 0 0 220px;
	background: var(--fgm-bg);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	padding: 12px;
}

.fgm-email-merge-panel strong {
	display: block;
	margin-bottom: 8px;
	color: var(--fgm-text);
}

.fgm-email-merge-panel ul {
	margin: 0;
	list-style: none;
	padding: 0;
}

.fgm-email-merge-panel li {
	margin-bottom: 4px;
}

.fgm-email-merge-panel code {
	font-size: 12px;
}

.fgm-email-merge-panel .fgm-merge-label {
	font-size: 11px;
	color: var(--fgm-text-secondary);
}

/* Checkbox interval labels */
.fgm-checkbox-inline {
	display: inline-block;
	margin-right: 16px;
	margin-bottom: 8px;
}

/* ==========================================================================
   24. Utility Classes
   ========================================================================== */

/* WordPress p.submit compat — same layout as .fgm-form-submit */
.fgm-wrap p.submit {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 20px;
	padding: 0;
}

/* Short input modifiers */
.fgm-input--state {
	max-width: 80px;
}

.fgm-input--zip {
	max-width: 140px;
}

/* Plain select — native appearance, no custom styling */
.fgm-select-plain {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: var(--fgm-bg-card);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	padding: 6px 28px 6px 10px;
	font-size: 13px;
	color: var(--fgm-text);
	cursor: pointer;
	transition: var(--fgm-transition);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.fgm-select-plain:hover {
	border-color: var(--fgm-brand);
}

.fgm-select-plain:focus {
	border-color: var(--fgm-brand);
	box-shadow: 0 0 0 1px var(--fgm-brand);
	outline: none;
}

/* CSV import row states */
.fgm-import-error-row {
	background-color: var(--fgm-danger-light);
}

.fgm-import-status--error {
	color: var(--fgm-danger);
	font-weight: 500;
}

.fgm-import-status--ok {
	color: var(--fgm-success);
	font-weight: 500;
}

/* Nested detail-actions inside section-body: reduce top margin */
.fgm-detail-section-body .fgm-detail-actions {
	margin: 12px 0 0;
}

/* Swap description centered */
.fgm-swap-description {
	text-align: center;
	margin-top: 8px;
}

/* ── General Utility Classes ─────────────────────────────────────────── */

.fgm-hidden { display: none !important; }

.fgm-flex        { display: flex; }
.fgm-flex-center  { display: flex; align-items: center; }
.fgm-flex-between { display: flex; align-items: center; justify-content: space-between; }

.fgm-gap-sm { gap: 4px; }
.fgm-gap-md { gap: 8px; }
.fgm-gap-lg { gap: 16px; }

.fgm-mt-sm { margin-top: 8px; }
.fgm-mt-md { margin-top: 16px; }
.fgm-mt-lg { margin-top: 24px; }

.fgm-mb-sm { margin-bottom: 8px; }
.fgm-mb-md { margin-bottom: 16px; }
.fgm-mb-lg { margin-bottom: 24px; }

.fgm-text-sm      { font-size: 12px; }
.fgm-text-muted   { color: var(--fgm-text-secondary); }
.fgm-text-danger  { color: var(--fgm-danger); }
.fgm-text-success { color: var(--fgm-success); }

/* ==========================================================================
   25. Browse + Search Dropdown
   ========================================================================== */

.fgm-bs-wrap { position: relative; width: 100%; }

.fgm-bs-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 38px;
	min-height: 38px;
	padding: 6px 12px;
	background: #fff;
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	cursor: pointer;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fgm-text);
	box-sizing: border-box;
	transition: var(--fgm-transition);
}

.fgm-bs-trigger:hover { border-color: var(--fgm-brand); }

.fgm-bs-trigger:focus,
.fgm-bs-trigger.fgm-bs-open {
	border-color: var(--fgm-brand);
	box-shadow: 0 0 0 3px var(--fgm-brand-light);
	outline: none;
}

.fgm-bs-trigger.fgm-bs-disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background: var(--fgm-bg);
}

.fgm-bs-trigger-text {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fgm-bs-trigger-text.fgm-bs-placeholder { color: var(--fgm-text-light); }

.fgm-bs-trigger::after {
	content: '';
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--fgm-text-secondary);
	margin-left: 8px;
	flex-shrink: 0;
}

.fgm-bs-clear {
	background: none;
	border: none;
	color: var(--fgm-text-light);
	cursor: pointer;
	padding: 0 4px;
	font-size: 16px;
	line-height: 1;
	margin-right: 4px;
}

.fgm-bs-clear:hover { color: var(--fgm-danger); }

.fgm-bs-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 100%;
	width: max-content;
	max-width: min(400px, 90vw);
	background: #fff;
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	box-shadow: var(--fgm-shadow-md);
	z-index: 99999;
}

.fgm-bs-dropdown.fgm-bs-open { display: block; }

.fgm-bs-search {
	width: 100%;
	padding: 10px 14px;
	border: none;
	border-bottom: 1px solid var(--fgm-border);
	font-size: 14px;
	outline: none;
}

.fgm-bs-search:focus-visible {
	box-shadow: inset 0 -2px 0 0 var(--brand, #1A3A4A);
}

.fgm-bs-search::placeholder { color: var(--fgm-text-light); }

.fgm-bs-options {
	max-height: 250px;
	overflow-y: auto;
	padding: 4px 0;
	border-radius: 0 0 var(--fgm-radius) var(--fgm-radius);
}

.fgm-bs-option {
	padding: 8px 14px;
	cursor: pointer;
	font-size: 14px;
	color: var(--fgm-text);
	white-space: nowrap;
	transition: background 0.1s;
}

.fgm-bs-option:hover,
.fgm-bs-option.fgm-bs-option-active { background: var(--fgm-brand-light); }

.fgm-bs-option.fgm-bs-option-selected {
	font-weight: 600;
	color: var(--fgm-brand);
}

.fgm-bs-optgroup {
	padding: 8px 14px 4px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--fgm-text-secondary);
}

.fgm-bs-empty {
	padding: 12px 14px;
	color: var(--fgm-text-light);
	font-size: 13px;
	text-align: center;
}

/* ==========================================================================
   26. Inline Cleanup Classes
   ========================================================================== */

/* ── Nav Bar: More Dropdown ───────────────────────────────────────────── */

.fgm-nav-more {
	position: relative;
}

.fgm-nav-more-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.fgm-nav-more-arrow {
	font-size: 10px;
	width: 10px;
	height: 10px;
}

.fgm-nav-more-menu {
	display: none;
	position: absolute;
	right: 0;
	top: 100%;
	margin-top: 4px;
	background: var(--fgm-bg-card);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	min-width: 200px;
	z-index: 9999;
	overflow: hidden;
}

.fgm-nav-dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	color: var(--fgm-gray-700);
	text-decoration: none;
	font-size: 13px;
	transition: background 0.15s;
}

.fgm-nav-dropdown-item:hover {
	background: var(--fgm-gray-100);
	color: var(--fgm-gray-700);
	text-decoration: none;
}

.fgm-nav-dropdown-item--active {
	color: var(--fgm-brand);
	font-weight: 600;
	background: var(--fgm-brand-light);
}

.fgm-nav-dropdown-item--active:hover {
	background: var(--fgm-brand-light);
}

.fgm-nav-dropdown-item--active .dashicons {
	color: var(--fgm-brand);
}

.fgm-nav-dropdown-icon {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: var(--fgm-gray-500);
}

.fgm-nav-separator {
	width: 1px;
	height: 20px;
	background: var(--fgm-border);
	margin: 0 8px;
}

/* ── Password Modal ───────────────────────────────────────────────────── */

.fgm-password-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99999;
	align-items: center;
	justify-content: center;
}

.fgm-password-modal.fgm-visible {
	display: flex;
}

.fgm-password-modal-content {
	background: var(--fgm-bg-card);
	border-radius: 12px;
	padding: 32px;
	max-width: 420px;
	width: 90%;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.fgm-password-modal h3 {
	margin: 0 0 24px;
	font-size: 18px;
	font-weight: 600;
}

.fgm-password-modal-field {
	margin-bottom: 16px;
}

.fgm-password-modal-field:last-of-type {
	margin-bottom: 20px;
}

.fgm-password-modal-hint {
	font-size: 12px;
	color: var(--fgm-text-light);
	margin-top: 4px;
}

.fgm-password-modal-message {
	display: none;
	margin-bottom: 12px;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 13px;
}

.fgm-password-modal-message--error {
	background: #fef2f2;
	color: #dc2626;
	border: 1px solid #fecaca;
}

.fgm-password-modal-message--success {
	background: #f0fdf4;
	color: #16a34a;
	border: 1px solid #bbf7d0;
}

.fgm-password-modal-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
}

/* ── Backup Page ──────────────────────────────────────────────────────── */

.fgm-backup-wrap {
	max-width: 800px;
}

/* Generic card container — used by onboarding, backup, and future pages */
.fgm-card,
.fgm-backup-card {
	background: var(--fgm-bg-card);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	padding: 20px 24px;
	margin-bottom: 20px;
}

.fgm-backup-card h2 {
	margin-top: 0;
}

.fgm-backup-meta {
	color: var(--fgm-text-secondary);
	font-style: italic;
}

.fgm-backup-status-active {
	color: var(--fgm-success-dark);
	font-weight: 600;
}

.fgm-backup-warning {
	background: var(--fgm-danger-bg);
	border: 1px solid var(--fgm-danger-border);
	border-radius: var(--fgm-radius);
	padding: 12px 16px;
	margin-bottom: 16px;
	color: var(--fgm-danger-dark);
}

/* ── Form Field Flex ──────────────────────────────────────────────────── */

.fgm-form-row .fgm-form-field {
	flex: 1;
}

/* ── Radio Groups ─────────────────────────────────────────────────────── */

.fgm-radio-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
}

.fgm-radio-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
}

.fgm-radio-group--row {
	flex-direction: row;
	gap: 16px;
}

/* ── Miscellaneous Inline Cleanup ─────────────────────────────────────── */

.fgm-icon-inline {
	vertical-align: middle;
	margin-right: 4px;
}

.fgm-recipient-preview .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.fgm-field-hint {
	font-size: 12px;
	color: var(--fgm-text-light);
	margin-top: 4px;
}

/* ── Tenant Detail ────────────────────────────────────────────────────── */

.fgm-detail-section-header--with-action {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.fgm-select--narrow {
	max-width: 200px;
}

.fgm-note-delete {
	color: var(--fgm-danger);
	margin-left: 8px;
	font-size: 12px;
	text-decoration: none;
}

.fgm-note-delete:hover {
	text-decoration: underline;
}

/* ── Notification Detail ──────────────────────────────────────────────── */

.fgm-detail-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.fgm-icon-success {
	color: var(--fgm-success);
}

/* ── Lease / Dry Dock Form ────────────────────────────────────────────── */

.fgm-input--narrow {
	max-width: 120px;
}

.fgm-form-columns--wide-narrow {
	grid-template-columns: 2fr 1fr;
}

.fgm-input--capacity {
	max-width: 200px;
}

/* ── Dry Dock Empty State Icon ────────────────────────────────────────── */

.fgm-empty-icon {
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: var(--fgm-text-light);
}

/* ── Settings Page ────────────────────────────────────────────────────── */

.fgm-preserve-data-warning {
	color: #dc2626;
	font-weight: 500;
}

.fgm-logo-preview {
	max-width: 200px;
	height: auto;
}

/* ── Utility Classes ────────────────────────────────────────────────── */

.fgm-mb-24 {
	margin-bottom: 24px;
}

.fgm-empty-message {
	padding: 20px;
	text-align: center;
	color: var(--fgm-text-light);
}

.fgm-text-light {
	color: var(--fgm-text-light);
}

.fgm-btn-danger {
	color: var(--fgm-danger);
	border-color: var(--fgm-danger);
}

.fgm-btn-danger:hover {
	background: var(--fgm-danger);
	color: #fff;
}

.fgm-form-section-body--flush {
	padding: 0;
}

.fgm-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 16px;
}

/* ==========================================================================
   27. Responsive
   ========================================================================== */

@media screen and (max-width: 1200px) {
	.fgm-dashboard-grid {
		gap: 32px 24px;
	}
}

@media (max-width: 900px) {
	.fgm-nav-label {
		display: none;
	}

	.fgm-nav-link {
		padding: 8px 10px;
	}

	.fgm-nav-account-name {
		display: none;
	}

	.fgm-lease-template-wrap {
		flex-direction: column;
	}

	.fgm-lease-template-fields {
		min-width: 0;
	}
}

@media screen and (max-width: 768px) {
	.fgm-dashboard-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.fgm-stat-group {
		flex-direction: column;
		gap: 12px;
	}

	.fgm-filters {
		flex-direction: column;
		align-items: stretch;
	}

	.fgm-search-group {
		flex: 1 1 auto;
		max-width: none;
	}

	.fgm-filter-group select,
	.fgm-filter-group input[type="text"],
	.fgm-filter-group input[type="date"] {
		min-width: 0;
		width: 100%;
	}

	.fgm-detail-fields {
		grid-template-columns: 1fr;
	}

	.fgm-form-columns {
		grid-template-columns: 1fr;
	}

	.fgm-swap-summary {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.fgm-swap-summary .fgm-swap-arrow {
		transform: rotate(90deg);
	}

	.fgm-renewal-stats {
		flex-direction: column;
	}

	.fgm-renewal-stat {
		min-width: 0;
	}

	.fgm-wrap h1,
	.fgm-page-title {
		font-size: 18px;
	}

	.fgm-header-actions {
		margin-left: 0;
		width: 100%;
	}

	.fgm-detail-actions {
		flex-direction: column;
	}

	.fgm-detail-actions .button {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 600px) {
	.fgm-wo-part-row {
		/* 3 flex inputs (name/qty/cost) default to min-width:auto and never
		   shrink below their intrinsic width, forcing the row - and the
		   whole page - wider than a phone viewport. Stack them instead. */
		flex-direction: column !important;
	}

	.fgm-wo-part-row input {
		width: 100% !important;
	}

	.fgm-rentals-kpi-grid {
		grid-template-columns: 1fr 1fr !important;
	}

	.fgm-rentals-kpi-grid > * {
		min-width: 0;
	}

	.fgm-onboarding-banner {
		flex-direction: column;
		text-align: center;
		gap: 8px;
		padding: 10px 14px;
	}

	.fgm-onboarding-banner-content {
		flex-direction: column;
		gap: 4px;
	}

	.fgm-nav-hamburger {
		display: block;
	}

	.fgm-nav-right {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--fgm-bg-card);
		border-bottom: 1px solid var(--fgm-border);
		box-shadow: var(--fgm-shadow-md);
		padding: 8px;
		flex-direction: column;
	}

	.fgm-nav-right.fgm-nav-open {
		display: flex;
	}

	.fgm-nav-link {
		width: 100%;
		padding: 10px 14px;
	}

	.fgm-nav-label {
		display: inline;
	}

	.fgm-nav-account-name {
		display: inline;
	}

	/* ── v8 masthead collapse (VIS nav-collapse): the hamburger + toggle JS
	   (FGM.navBar, fgm-admin.js) and the base .fgm-masthead-hamburger { display:
	   none } style already existed, but no breakpoint rule ever hid the nav
	   links/right-side group or showed the hamburger below 600px — the whole
	   masthead rendered at full desktop width, forcing horizontal scroll on
	   every admin screen on phone. ──────────────────────────────────────── */
	.fgm-masthead {
		grid-template-columns: 1fr auto;
		position: relative;
		padding: 14px 16px;
	}

	.fgm-masthead-hamburger {
		display: block;
	}

	.fgm-masthead-nav,
	.fgm-masthead-right {
		display: none;
	}

	.fgm-masthead-nav.is-open,
	.fgm-masthead-right.is-open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		grid-column: 1 / -1;
		background: var(--fgm-bg-card);
		box-shadow: var(--fgm-shadow-md);
		padding: 8px;
		gap: 2px;
	}

	.fgm-masthead-nav.is-open {
		border-top: 1px solid var(--fgm-border);
	}

	.fgm-masthead-right.is-open {
		border-top: 1px solid var(--fgm-border);
		border-bottom: 1px solid var(--fgm-border);
	}

	.fgm-masthead-nav.is-open .fgm-masthead-link,
	.fgm-masthead-right.is-open .fgm-masthead-link {
		width: 100%;
		justify-content: flex-start;
	}

	.fgm-masthead-nav.is-open .fgm-masthead-dropdown,
	.fgm-masthead-right.is-open .fgm-masthead-dropdown {
		width: 100%;
	}

	.fgm-masthead-nav.is-open .fgm-masthead-dropdown-menu,
	.fgm-masthead-right.is-open .fgm-masthead-dropdown-menu {
		position: static;
		box-shadow: none;
		width: 100%;
	}

	/* The active-link underline (absolute, bottom: -21px, built for the
	   horizontal desktop bar) renders as a stray strikethrough across the
	   next link once stacked vertically in the mobile dropdown — replace it
	   with a left accent bar + tint, same as other active-state patterns. */
	.fgm-masthead-nav.is-open .fgm-masthead-link.is-active::after {
		content: none;
	}

	.fgm-masthead-nav.is-open .fgm-masthead-link.is-active {
		background: color-mix(in srgb, var(--brand) 10%, transparent);
		border-left: 2px solid var(--brand);
		padding-left: 12px;
	}

	.fgm-pagination {
		flex-direction: column;
		gap: 8px;
		align-items: center;
	}

	.fgm-renewal-form-grid {
		grid-template-columns: 1fr;
	}
}

/* Compact masthead: FGM.navBar adds .is-compact whenever the full bar does
   not fit its row (tablets, narrow laptops, marinas with many modules on),
   so the menu collapses to the hamburger instead of running off screen.
   Mirrors the max-width: 600px collapse above. */
.fgm-masthead.is-compact {
	grid-template-columns: 1fr auto;
}

.fgm-masthead.is-compact .fgm-masthead-hamburger {
	display: block;
}

/* Collapsed (phone or compact): keep the hamburger on the brand row and let
   the opened menu use the full width instead of the desktop centering. */
.fgm-masthead-hamburger {
	grid-column: -2;
	grid-row: 1;
	justify-self: end;
}

.fgm-masthead-nav.is-open,
.fgm-masthead-right.is-open {
	justify-self: stretch;
}

.fgm-masthead-right.is-open .fgm-masthead-divider {
	display: none;
}

.fgm-masthead.is-compact .fgm-masthead-nav,
.fgm-masthead.is-compact .fgm-masthead-right {
	display: none;
}

.fgm-masthead.is-compact .fgm-masthead-nav.is-open,
.fgm-masthead.is-compact .fgm-masthead-right.is-open {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	grid-column: 1 / -1;
	background: var(--fgm-bg-card);
	box-shadow: var(--fgm-shadow-md);
	padding: 8px;
	gap: 2px;
}

.fgm-masthead.is-compact .fgm-masthead-nav.is-open {
	border-top: 1px solid var(--fgm-border);
}

.fgm-masthead.is-compact .fgm-masthead-right.is-open {
	border-top: 1px solid var(--fgm-border);
	border-bottom: 1px solid var(--fgm-border);
}

.fgm-masthead.is-compact .fgm-masthead-nav.is-open .fgm-masthead-link,
.fgm-masthead.is-compact .fgm-masthead-right.is-open .fgm-masthead-link {
	width: 100%;
	justify-content: flex-start;
}

.fgm-masthead.is-compact .fgm-masthead-nav.is-open .fgm-masthead-dropdown,
.fgm-masthead.is-compact .fgm-masthead-right.is-open .fgm-masthead-dropdown {
	width: 100%;
}

.fgm-masthead.is-compact .fgm-masthead-nav.is-open .fgm-masthead-dropdown-menu,
.fgm-masthead.is-compact .fgm-masthead-right.is-open .fgm-masthead-dropdown-menu {
	position: static;
	box-shadow: none;
	width: 100%;
}

.fgm-masthead.is-compact .fgm-masthead-nav.is-open .fgm-masthead-link.is-active::after,
.fgm-masthead.is-compact .fgm-masthead-right.is-open .fgm-masthead-link.is-active::after {
	content: none;
}

.fgm-masthead.is-compact .fgm-masthead-nav.is-open .fgm-masthead-link.is-active,
.fgm-masthead.is-compact .fgm-masthead-right.is-open .fgm-masthead-link.is-active {
	background: color-mix(in srgb, var(--brand) 10%, transparent);
	border-left: 2px solid var(--brand);
	padding-left: 12px;
}

/* Icon-only Help link in the masthead (keeps the bar from growing wider);
   the opened hamburger menu shows its label. */
.fgm-masthead-help {
	padding-left: var(--space-2, 8px);
	padding-right: var(--space-2, 8px);
}

.fgm-masthead-help.is-active::after {
	left: 2px;
	right: 2px;
}

.fgm-masthead-right.is-open .fgm-masthead-help .screen-reader-text {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* ==========================================================================
   26. Print
   ========================================================================== */

@media print {
	.fgm-onboarding-banner,
	.fgm-nav-bar,
	.fgm-detail-actions,
	.fgm-page-eyebrow,
	.fgm-filters,
	.fgm-bulk-bar,
	.fgm-filter-actions,
	.fgm-pagination,
	.fgm-confirm-overlay,
	.fgm-row-actions,
	.fgm-header-actions {
		display: none !important;
	}

	.fgm-wrap {
		max-width: 100%;
	}

	.fgm-detail-section,
	.fgm-form-section,
	.fgm-table {
		box-shadow: none;
		border: 1px solid var(--line-strong);
		break-inside: avoid;
	}

	.fgm-table tbody tr:hover {
		background: none;
	}

	.fgm-stat-card:hover {
		background: none;
		transform: none;
		box-shadow: none;
	}
}

/* ── Notes Timeline ──────────────────────────────────────────────────── */

.fgm-wrap .fgm-notes-timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.fgm-wrap .fgm-note-card {
	display: flex;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--fgm-border);
}

.fgm-wrap .fgm-note-card:last-child {
	border-bottom: none;
}

.fgm-wrap .fgm-note-icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fgm-brand-light);
	border-radius: 50%;
	color: var(--fgm-brand);
}

.fgm-wrap .fgm-note-icon .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.fgm-wrap .fgm-note-body {
	flex: 1;
	min-width: 0;
}

.fgm-wrap .fgm-note-meta {
	font-size: 12px;
	color: var(--fgm-text-secondary);
	margin-bottom: 4px;
}

.fgm-wrap .fgm-note-meta strong {
	color: var(--fgm-text);
}

.fgm-wrap .fgm-note-content {
	font-size: 14px;
	color: var(--fgm-text);
	line-height: 1.5;
}

/* ==========================================
   NOTIFICATIONS
   ========================================== */

/* Recipient Preview */
.fgm-recipient-preview {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: var(--fgm-brand-lighter);
	border-radius: var(--fgm-radius);
	color: var(--fgm-brand-dark);
	font-size: 13px;
	font-weight: 500;
	margin-top: 12px;
}

/* Target field containers */
.fgm-target-field {
	display: none;
	margin-top: 16px;
}

/* ==========================================
   TENANT NOTES (additional)
   ========================================== */

.fgm-note-form {
	display: none;
	margin-bottom: 24px;
	padding: 20px;
	background: var(--fgm-bg);
	border-radius: var(--fgm-radius);
	border: 1px solid var(--fgm-border);
}

/* Notification type note icons */
.fgm-wrap .fgm-note-card[data-type="notification"] .fgm-note-icon {
	background: rgba(37, 99, 235, 0.1);
	color: var(--fgm-info);
}

/* ==========================================================================
   TENANT DETAIL — Two-Column Layout
   ========================================================================== */

.fgm-tenant-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.fgm-tenant-header-left {
	flex: 1;
	min-width: 0;
}

.fgm-tenant-header h1 {
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--fgm-text);
	line-height: 1.2;
}

.fgm-tenant-summary {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--fgm-text-light);
	flex-wrap: wrap;
}

.fgm-tenant-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}

.fgm-tenant-status-dot--active {
	background: var(--fgm-success);
}

.fgm-tenant-status-dot--inactive {
	background: var(--fgm-text-light);
}

.fgm-tenant-header .fgm-detail-actions {
	flex-shrink: 0;
	margin: 0;
}

.fgm-tenant-grid {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 32px;
	margin: 24px 0;
	padding-top: 24px;
	border-top: 1px solid var(--fgm-border);
}

.fgm-tenant-grid > * {
	/* Grid items default to min-width:auto, which lets their widest
	   unbreakable content (e.g. an uppercase section-label row) push the
	   whole grid - and the page - wider than the viewport on phone. */
	min-width: 0;
}

@media (max-width: 1100px) {
	.fgm-tenant-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Section Labels (uppercase + right count) --- */

.fgm-section-label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 11px;
	font-weight: 700;
	color: var(--fgm-text-light);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--fgm-border);
}

.fgm-section-count {
	font-size: 11px;
	font-weight: 600;
	color: var(--fgm-text-light);
	letter-spacing: 0.5px;
}

/* --- Lease Cards --- */

.fgm-lease-cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fgm-lease-card {
	background: var(--fgm-bg-card);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	box-shadow: var(--fgm-shadow-sm);
	overflow: hidden;
}

.fgm-lease-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
}

.fgm-lease-card-head-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.fgm-lease-card-head-left h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--fgm-text);
}

.fgm-lease-card-body {
	padding: 20px 24px;
	border-top: 1px solid var(--fgm-border);
}

.fgm-lease-card-fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 32px;
}

.fgm-lease-card-fields--2col {
	grid-template-columns: repeat(2, 1fr);
}

.fgm-lease-card-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fgm-lease-card-field .fgm-field-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--fgm-text-light);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.fgm-lease-card-field .fgm-field-value {
	font-size: 14px;
	font-weight: 500;
	color: var(--fgm-text);
}

.fgm-lease-card-field .fgm-field-value--lg {
	font-size: 16px;
	font-weight: 600;
}

.fgm-lease-card-foot {
	display: flex;
	align-items: center;
	padding: 12px 24px;
	border-top: 1px solid var(--fgm-border);
	background: var(--fgm-bg);
}

.fgm-lease-card-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* --- Documents Section --- */

.fgm-doc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fgm-doc-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	border-bottom: 1px solid var(--fgm-border);
	font-size: 13px;
}

.fgm-doc-row:last-child {
	border-bottom: none;
}

.fgm-doc-row-left {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.fgm-doc-row-left .dashicons {
	color: var(--fgm-text-light);
	flex-shrink: 0;
}

.fgm-doc-row-info {
	min-width: 0;
}

.fgm-doc-row-label {
	font-weight: 500;
	color: var(--fgm-text);
}

.fgm-doc-row-meta {
	font-size: 11px;
	color: var(--fgm-text-light);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.fgm-doc-row > a {
	color: var(--fgm-brand);
	text-decoration: none;
	font-weight: 500;
	flex-shrink: 0;
}

.fgm-doc-row > a:hover {
	text-decoration: underline;
}

/* --- Sidebar Sections --- */

.fgm-sidebar-section {
	background: var(--fgm-bg-card);
	border: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius);
	box-shadow: var(--fgm-shadow-sm);
	margin-bottom: 20px;
}

.fgm-sidebar-header {
	padding: 14px 20px;
	font-size: 11px;
	font-weight: 700;
	color: var(--fgm-text-light);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	border-bottom: 1px solid var(--fgm-border);
	border-radius: var(--fgm-radius) var(--fgm-radius) 0 0;
}

.fgm-sidebar-header--split {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.fgm-sidebar-body {
	padding: 16px 20px;
}

.fgm-sidebar-body--flush {
	padding: 0;
}

/* --- Contact Table (horizontal key-value rows) --- */

.fgm-contact-table {
	width: 100%;
	border-collapse: collapse;
}

.fgm-contact-table td {
	padding: 12px 20px;
	border-bottom: 1px solid var(--fgm-border);
	vertical-align: top;
	font-size: 14px;
}

.fgm-contact-table tr:last-child td {
	border-bottom: none;
}

.fgm-contact-label {
	color: var(--fgm-text-light);
	white-space: nowrap;
	width: 1%;
	padding-right: 24px !important;
}

.fgm-contact-value {
	color: var(--fgm-text);
	font-weight: 500;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.fgm-contact-value a {
	color: var(--fgm-text);
	text-decoration: none;
}

.fgm-contact-value a:hover {
	color: var(--fgm-brand);
}

/* --- Communication Log (date-column timeline) --- */

.fgm-comm-log {
	max-height: 500px;
	overflow-y: auto;
}

.fgm-comm-entry {
	display: flex;
	gap: 16px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--fgm-border);
}

.fgm-comm-entry:last-child {
	border-bottom: none;
}

.fgm-comm-date {
	font-size: 11px;
	font-weight: 600;
	color: var(--fgm-text-light);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	white-space: nowrap;
	min-width: 50px;
	padding-top: 2px;
	flex-shrink: 0;
}

.fgm-comm-body {
	flex: 1;
	min-width: 0;
}

.fgm-comm-text {
	font-size: 13px;
	color: var(--fgm-text);
	line-height: 1.5;
	word-break: break-word;
}

.fgm-comm-text strong {
	font-weight: 600;
}

.fgm-comm-body .fgm-note-delete {
	font-size: 11px;
	color: var(--fgm-danger);
	text-decoration: none;
	display: inline-block;
	margin-top: 4px;
}

/* --- Lease History Mini Table --- */

.fgm-history-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.fgm-history-table th {
	text-align: left;
	font-size: 10px;
	font-weight: 600;
	color: var(--fgm-text-light);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--fgm-border);
}

.fgm-history-table td {
	padding: 10px 14px;
	color: var(--fgm-text);
	border-bottom: 1px solid var(--fgm-border);
}

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

.fgm-history-table td a {
	color: var(--fgm-brand);
	text-decoration: none;
	font-weight: 500;
}

.fgm-history-table td a:hover {
	text-decoration: underline;
}

/* --- WP Account Badge --- */

.fgm-wp-account-inline {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border-top: 1px solid var(--fgm-border);
	font-size: 12px;
	color: var(--fgm-text-light);
}

.fgm-wp-account-inline .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* ── Generic Modal Overlay ──────────────────────────────────────────── */

.fgm-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99999;
	align-items: center;
	justify-content: center;
}

.fgm-modal {
	position: relative;
	background: var(--fgm-bg-card, #fff);
	border-radius: 12px;
	max-width: 520px;
	width: 90%;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
	animation: fgmModalIn 0.15s ease-out;
}

@keyframes fgmModalIn {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.fgm-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px 0;
}

.fgm-modal-eyebrow {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fgm-text-muted, #6b7280);
	margin-bottom: 2px;
}

.fgm-modal-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.fgm-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--fgm-text-muted, #6b7280);
	padding: 4px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fgm-modal-close:hover {
	color: var(--fgm-text, #1f2937);
	background: var(--fgm-bg-muted, #f3f4f6);
}

.fgm-modal-body {
	padding: 20px 24px;
}

.fgm-modal-footer {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	padding: 16px 24px;
	border-top: 1px solid var(--fgm-border, #e5e7eb);
}

/* Reschedule modal — boat availability cards */
.fgm-reschedule-boats {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: 320px;
	overflow-y: auto;
	margin-top: 16px;
}
.fgm-reschedule-boat {
	border: 1px solid var(--fgm-border, #e5e7eb);
	border-radius: 10px;
	padding: 14px;
	transition: border-color 0.15s;
}
.fgm-reschedule-boat.fgm-boat-selected {
	border-color: var(--fgm-brand, #1a3a4a);
	box-shadow: 0 0 0 1px var(--fgm-brand, #1a3a4a);
}
.fgm-reschedule-boat-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}
.fgm-reschedule-boat-thumb {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--fgm-bg-muted, #f3f4f6);
}
.fgm-reschedule-boat-name {
	font-weight: 600;
	font-size: 14px;
}
.fgm-reschedule-boat-meta {
	font-size: 12px;
	color: var(--fgm-text-muted, #6b7280);
}
.fgm-slot-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.fgm-slot-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid var(--fgm-border, #e5e7eb);
	border-radius: 8px;
	background: var(--fgm-bg-card, #fff);
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.15s;
}
.fgm-slot-chip:hover:not(:disabled) {
	border-color: var(--fgm-brand, #1a3a4a);
	background: var(--fgm-brand-light, #e8eef1);
}
.fgm-slot-chip.fgm-chip-selected {
	border-color: var(--fgm-brand, #1a3a4a);
	background: var(--fgm-brand, #1a3a4a);
	color: #fff;
}
.fgm-slot-chip:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
}
.fgm-slot-chip .fgm-chip-price {
	font-weight: 400;
	opacity: 0.8;
}
.fgm-reschedule-summary {
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--fgm-brand-light, #e8eef1);
	font-size: 13px;
	display: none;
}
.fgm-reschedule-summary.visible {
	display: block;
}
.fgm-reschedule-loading {
	text-align: center;
	padding: 24px;
	color: var(--fgm-text-muted, #6b7280);
	font-size: 13px;
}
.fgm-reschedule-empty {
	text-align: center;
	padding: 24px;
	color: var(--fgm-text-muted, #6b7280);
	font-size: 13px;
}

/* ─── Reports ──────────────────────────────────────────────────────── */

.fgm-reports-date-bar {
	padding: var(--space-3, 12px) var(--space-4, 16px);
	margin-bottom: var(--space-4, 16px);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3, 12px);
	align-items: center;
}

.fgm-reports-presets {
	display: flex;
	gap: var(--space-1, 4px);
	flex-wrap: wrap;
}

.fgm-reports-preset.is-active {
	background: var(--fgm-brand, #1a3a4a);
	color: #fff;
	border-color: var(--fgm-brand, #1a3a4a);
}

.fgm-reports-custom {
	display: flex;
	gap: var(--space-2, 8px);
	align-items: center;
	margin-left: auto;
}

.fgm-reports-summary {
	width: 100%;
	font-size: 13px;
	color: var(--fgm-text-secondary, #5F6B72);
	margin-top: var(--space-1, 4px);
}

.fgm-reports-tabs {
	display: flex;
	gap: var(--space-1, 4px);
	margin-bottom: var(--space-4, 16px);
	border-bottom: 1px solid var(--fgm-border, rgba(26,30,33,0.08));
	padding-bottom: 0;
	/* Too many report tabs to fit a phone width - scroll the tab bar
	   itself instead of forcing the whole page wider. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.fgm-reports-tab {
	padding: var(--space-3, 12px) var(--space-4, 16px);
	font-size: 13px;
	font-weight: 500;
	color: var(--fgm-text-secondary, #5F6B72);
	border: none;
	background: none;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: all 0.15s;
	flex-shrink: 0;
	white-space: nowrap;
}

.fgm-reports-tab:hover {
	color: var(--fgm-text, #1A1E21);
}

.fgm-reports-tab.is-active {
	color: var(--fgm-brand, #1a3a4a);
	border-bottom-color: var(--fgm-brand, #1a3a4a);
	font-weight: 600;
}

.fgm-reports-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-4, 16px);
	margin-bottom: var(--space-4, 16px);
}

.fgm-reports-kpi {
	background: #fff;
	border: 1px solid var(--fgm-border, rgba(26,30,33,0.08));
	border-radius: var(--fgm-radius, 6px);
	padding: var(--space-4, 16px) var(--space-5, 20px);
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.fgm-reports-kpi-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fgm-text-muted, #6b7280);
}

.fgm-reports-kpi-value {
	font-size: 28px;
	font-weight: 700;
	margin-top: var(--space-1, 4px);
}

.fgm-reports-kpi-change {
	font-size: 12px;
	font-weight: 600;
	margin-top: 2px;
}

.fgm-reports-kpi-change.up { color: var(--fgm-success, #1F9554); }
.fgm-reports-kpi-change.down { color: var(--fgm-danger, #dc2626); }
.fgm-reports-kpi-change.flat { color: var(--fgm-text-muted, #6b7280); }

.fgm-reports-charts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4, 16px);
	margin-bottom: var(--space-4, 16px);
}

.fgm-reports-chart-card {
	padding: var(--space-4, 16px) var(--space-5, 20px);
}

.fgm-reports-chart-title {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 var(--space-3, 12px);
}

.fgm-reports-chart-wrap {
	position: relative;
	height: 260px;
}

.fgm-reports-chart-wrap--donut {
	height: 220px;
	max-width: 220px;
	margin: 0 auto;
}

.fgm-reports-legend {
	text-align: center;
	font-size: 12px;
	margin-top: var(--space-3, 12px);
	color: var(--fgm-text-secondary, #5F6B72);
}

.fgm-reports-table-wrap {
	overflow-x: auto;
}

.fgm-reports-table-wrap table {
	width: 100%;
}

.fgm-reports-funnel {
	padding: var(--space-4, 16px) var(--space-5, 20px);
}

.fgm-funnel-step {
	display: flex;
	align-items: center;
	gap: var(--space-3, 12px);
	padding: var(--space-3, 12px) 0;
	border-bottom: 1px solid var(--fgm-border, rgba(26,30,33,0.08));
}

.fgm-funnel-step:last-child { border-bottom: none; }

.fgm-funnel-bar-bg {
	flex: 1;
	height: 28px;
	background: #f3f4f6;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
}

.fgm-funnel-bar {
	height: 100%;
	border-radius: 4px;
	transition: width 0.5s ease;
}

.fgm-funnel-label {
	font-size: 13px;
	font-weight: 500;
	min-width: 90px;
}

.fgm-funnel-value {
	font-size: 13px;
	font-weight: 600;
	min-width: 50px;
	text-align: right;
}

.fgm-funnel-pct {
	font-size: 12px;
	color: var(--fgm-text-muted, #6b7280);
	min-width: 50px;
}

.fgm-reports-loading {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(255,255,255,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	font-size: 14px;
	font-weight: 500;
	color: var(--fgm-text-secondary, #5F6B72);
}

@media (max-width: 768px) {
	.fgm-reports-charts {
		/* minmax(0,1fr), not plain 1fr: a bare 1fr track still respects a
		   grid item's default min-width:auto (its content's intrinsic
		   size - e.g. the chart canvas + card padding), so the single
		   column can grow past its own container and force the page
		   wider on phone. minmax(0,1fr) lets it actually shrink to fit. */
		grid-template-columns: minmax(0, 1fr);
	}
	.fgm-reports-custom {
		margin-left: 0;
		width: 100%;
		flex-wrap: wrap;
	}

	.fgm-reports-custom input[type="date"] {
		min-width: 0;
		flex: 1 1 130px;
	}
}

/* ==========================================================================
   27. Responsive fit (8.33.1)
   Several admin screens ran off the side of a phone or tablet: wide tables
   crammed or pushed the page wider, the audit log's row of page numbers,
   rows of inline-styled grids, button rows and settings tables. Nothing here
   changes the desktop look; these rules only let content shrink, wrap or
   scroll inside its own card.
   ========================================================================== */

/* A flex/grid child defaults to min-width:auto, so one wide child (a table, a date
   row) makes its whole column, and then the page, wider than the screen. */
.fgm-wrap,
.fgm-wrap .fgm-card,
.fgm-wrap .fgm-field,
.fgm-wrap .fgm-stat-item {
	min-width: 0;
}

.fgm-wrap .fgm-table-wrap {
	max-width: 100%;
}

/* Pagination: wrap onto lines instead of running off the edge. */
.fgm-pagination {
	flex-wrap: wrap;
	gap: 8px 16px;
}

.fgm-pagination-links {
	flex-wrap: wrap;
	justify-content: flex-end;
	min-width: 0;
	max-width: 100%;
}

.fgm-pagination-links .fgm-page-gap {
	min-width: 0;
	padding: 4px 2px;
	background: none;
	border-color: transparent;
	color: var(--fgm-text-secondary);
}

/* Rental / report date-range row and the lease-template and taxonomy button rows. */
.fgm-reports-custom,
.fgm-lease-template-actions,
.fgm-taxonomy-add-form {
	flex-wrap: wrap;
	max-width: 100%;
}

.fgm-taxonomy-add-form input[type="text"] {
	max-width: 100%;
}

/* Big KPI numbers: let the three/four stat columns shrink and the figures scale down on narrower screens. */
.fgm-stat-block-stats > .fgm-stat-item {
	min-width: 0;
}

.fgm-stat-block-stats .fgm-stat-number {
	font-size: clamp(26px, 4.2vw, 60px);
	overflow-wrap: break-word;
}

@media (max-width: 782px) {
	/* Tables scroll inside their card instead of squeezing every column to a sliver. */
	.fgm-wrap .fgm-table-wrap > .fgm-table {
		min-width: 640px;
	}

	.fgm-pagination-links {
		justify-content: center;
	}

	/* Inline-styled grid rows in settings forms (rate rules, holidays, blackouts, slot times) stack. */
	.fgm-wrap form [style*="grid-template-columns"] {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* WordPress settings tables: fields fit the screen, long text wraps. */
	/* A table's width comes from its widest field (25em for .regular-text), and a percentage
	   max-width on the field cannot shrink it back. WordPress already stacks th/td at this
	   width; make the table and its rows blocks too so the fields size to the card. */
	.fgm-wrap .form-table,
	.fgm-wrap .form-table tbody,
	.fgm-wrap .form-table tr {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	.fgm-wrap .form-table th,
	.fgm-wrap .form-table td {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.fgm-wrap .form-table input[type="text"],
	.fgm-wrap .form-table input[type="email"],
	.fgm-wrap .form-table input[type="url"],
	.fgm-wrap .form-table input[type="number"],
	.fgm-wrap .form-table input[type="date"],
	.fgm-wrap .form-table input[type="time"],
	.fgm-wrap .form-table input[type="file"],
	.fgm-wrap .form-table input[type="password"],
	.fgm-wrap .form-table select,
	.fgm-wrap .form-table textarea,
	.fgm-wrap .form-table .regular-text,
	.fgm-wrap .form-table .large-text {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Tab rows: wide ones scroll inside the row, like .fgm-rental-tabs. */
	.fgm-wrap .nav-tab-wrapper,
	.fgm-wrap .fgm-rental-tabs {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.fgm-wrap .nav-tab-wrapper {
		display: flex;
		flex-wrap: nowrap;
	}

	.fgm-wrap .nav-tab-wrapper .nav-tab {
		flex: 0 0 auto;
	}

	/* Button rows wrap, and a long button label wraps instead of widening the page. */
	.fgm-wrap .fgm-btn {
		max-width: 100%;
		white-space: normal;
	}
}