/* ==========================================================
   WP Go Maps Pro — Atlas Major Styles
   Pro-specific admin component styling for Atlas Major UI
   ========================================================== */

/* ==========================================================
   CATEGORY LIST PAGE
   Mirrors the map list page's structure & styling principles:
   transparent top bar with logo on the left + primary action on
   the right, 24px heading, full-width datatable container in
   the content area (no extra card wrapper).
   All selectors scoped to `.am-categories-page` (set on the
   categories-list template wrapper) so these rules don't leak
   onto other AM pages that use the same `.am-page-shell` /
   `.am-top-bar` classes.
   ========================================================== */

/* Page shell — match map list (transparent, full height) */
.wpgmza-atlas-major.am-categories-page .am-page-shell {
	min-height: 100%;
	padding: 0;
	font-family: var(--am-sans);
	color: var(--am-text-1);
	-webkit-font-smoothing: antialiased;
}

/* Top bar — transparent, no border-bottom (matches map list) */
.wpgmza-atlas-major.am-categories-page .am-top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28px 0 32px;
	height: 54px;
	flex-shrink: 0;
	gap: 20px;
	margin-top: 20px;
}
.wpgmza-atlas-major.am-categories-page .am-top-bar-left {
	display: flex;
	align-items: center;
	gap: 14px;
}
.wpgmza-atlas-major.am-categories-page .am-page-heading {
	font-size: 24px;
	font-weight: 700;
	font-family: var(--am-sans);
	color: var(--am-text-1);
	letter-spacing: -0.02em;
	margin: 0;
	padding: 0;
	border: none;
	display: inline-flex;
	align-items: center;
}
.wpgmza-atlas-major.am-categories-page .am-page-heading-logo {
	height: auto;
	width: 191px;
	display: block;
}
.wpgmza-atlas-major.am-categories-page .am-top-bar-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Content area — same padding as map list */
.wpgmza-atlas-major.am-categories-page .am-content { padding: 24px; }

/* General table styling */
.wpgmza-atlas-major .wpgmza-general-table {
	width: 100% !important;
	border-collapse: collapse;
	font-family: var(--am-sans);
}
.wpgmza-atlas-major .wpgmza-general-table thead th {
	border-bottom: 1px solid var(--am-border);
	border-top: none;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--am-text-3);
	padding: 10px 12px;
	background: var(--am-bg);
	font-family: var(--am-sans);
}
.wpgmza-atlas-major .wpgmza-general-table tbody tr {
	background: none !important;
	transition: background 0.1s;
}
.wpgmza-atlas-major .wpgmza-general-table tbody tr:hover {
	background: var(--am-bg) !important;
}
.wpgmza-atlas-major .wpgmza-general-table tbody tr td {
	padding: 12px;
	font-size: 13px;
	color: var(--am-text-1);
	border-bottom: 1px solid var(--am-border-subtle);
	vertical-align: middle;
	font-family: var(--am-sans);
}

/* Category table — column alignment (all centered except Category) */
.wpgmza-atlas-major #wpgmza-category-table thead th {
	text-align: center;
}
.wpgmza-atlas-major #wpgmza-category-table thead th.column-map_title {
	text-align: left;
}
.wpgmza-atlas-major #wpgmza-category-table tbody td {
	text-align: center;
}
.wpgmza-atlas-major #wpgmza-category-table tbody td.column-map_title {
	text-align: left;
}
.wpgmza-atlas-major #wpgmza-category-table td.column-actions .wpgmza-action-buttons {
	justify-content: center;
}

/* Action buttons row */
.wpgmza-atlas-major .wpgmza-action-buttons {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
}
.wpgmza-atlas-major .wpgmza-action-buttons .wpgmza-button svg {
	width: 14px; height: 14px; stroke: currentColor; fill: none;
	stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}

/* Danger button (Trash) */
.wpgmza-atlas-major .wpgmza-button-danger {
	color: #dc2626 !important;
	border-color: #fecaca !important;
}
.wpgmza-atlas-major .wpgmza-button-danger:hover {
	background: #fef2f2 !important;
	border-color: #dc2626 !important;
}

/* ==========================================================
   DATATABLE STYLING (shared across Pro list pages)
   ========================================================== */
.wpgmza-atlas-major table.dataTable {
	width: 100% !important;
	border-collapse: collapse;
	font-family: var(--am-sans);
}
.wpgmza-atlas-major table.dataTable thead th,
.wpgmza-atlas-major table.dataTable thead td {
	border-bottom: 1px solid var(--am-border);
	border-top: none;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--am-text-3);
	padding: 10px 12px;
	background: var(--am-bg);
	font-family: var(--am-sans);
}
.wpgmza-atlas-major table.dataTable tbody tr {
	background: none !important;
	transition: background 0.1s;
}
.wpgmza-atlas-major table.dataTable tbody tr:hover {
	background: var(--am-bg) !important;
}
.wpgmza-atlas-major table.dataTable tbody tr td {
	padding: 12px;
	font-size: 13px;
	color: var(--am-text-1);
	border-bottom: 1px solid var(--am-border-subtle);
	vertical-align: middle;
	font-family: var(--am-sans);
}
.wpgmza-atlas-major table.dataTable.no-footer { border-bottom: none; }
.wpgmza-atlas-major table.dataTable.display tbody tr > .dt-ordering-1 { background: none !important; }

/* Search */
.wpgmza-atlas-major .dt-search { margin-bottom: 14px; }
.wpgmza-atlas-major .dt-search input {
	padding: 8px 12px;
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-sm);
	font-size: 13px;
	font-family: var(--am-sans);
	background: var(--am-bg);
	outline: none;
}
.wpgmza-atlas-major .dt-search input:focus {
	border-color: var(--am-text-1);
	background: var(--am-surface);
}
.wpgmza-atlas-major .dt-search label {
	font-size: 12px;
	color: var(--am-text-3);
	font-family: var(--am-sans);
}

/* Pagination */
.wpgmza-atlas-major .dt-paging { margin-top: 14px; text-align: center; }
.wpgmza-atlas-major .dt-paging .dt-paging-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	border: 1px solid var(--am-border);
	background: var(--am-surface);
	border-radius: var(--am-radius-sm);
	font-size: 12px;
	font-weight: 500;
	color: var(--am-text-2);
	cursor: pointer;
	margin: 0 2px;
	font-family: var(--am-sans);
}
.wpgmza-atlas-major .dt-paging .dt-paging-button:hover {
	border-color: var(--am-text-3);
	color: var(--am-text-1);
}
.wpgmza-atlas-major .dt-paging .dt-paging-button.current {
	background: var(--am-text-1);
	border-color: var(--am-text-1);
	color: #fff;
}
.wpgmza-atlas-major .dt-paging .dt-paging-button.disabled {
	opacity: 0.3;
	cursor: default;
}

/* Info/length */
.wpgmza-atlas-major .dt-info,
.wpgmza-atlas-major .dt-length {
	font-size: 12px;
	color: var(--am-text-3);
	font-family: var(--am-sans);
}
.wpgmza-atlas-major .dt-length select {
	padding: 4px 8px;
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-sm);
	font-size: 12px;
	font-family: var(--am-sans);
	background: var(--am-surface);
}

/* Processing */
.wpgmza-atlas-major .dt-processing {
	background: rgba(255,255,255,0.85) !important;
	font-size: 13px;
	color: var(--am-text-2);
}

/* ==========================================================
   PRO COMPONENT STYLES
   ========================================================== */

/* Category picker in marker editor */
.wpgmza-atlas-major .wpgmza-category-picker-container .jstree {
	font-family: var(--am-sans);
	font-size: 13px;
}
.wpgmza-atlas-major .wpgmza-category-picker-container .jstree ul li {
	padding: 2px 0;
}

/* Marker gallery input */
.wpgmza-atlas-major .wpgmza-marker-gallery-input-container {
	min-height: 60px;
}

/* Directions box settings */
.wpgmza-atlas-major .wpgmza-directions-box-settings-panel fieldset {
	margin-top: 14px;
	border: none;
	padding: 0;
}
.wpgmza-atlas-major .wpgmza-directions-box-settings-panel fieldset legend {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 5px;
}

/* Pro store locator extensions */
.wpgmza-atlas-major .wpgmza-pro-store-locator fieldset {
	margin-top: 14px;
}

/* License manager panel */
.wpgmza-atlas-major .wpgmza-license-manager {
	padding: 14px 16px;
}
.wpgmza-atlas-major .wpgmza-license-manager input[type="text"] {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-sm);
	font-size: 13px;
	font-family: var(--am-sans);
}

/* Marker icon editor */
.wpgmza-atlas-major .wpgmza-marker-icon-editor {
	font-family: var(--am-sans);
}

/* Compact <select> styling inside the marker icon editor panels
   (Templates / Image source dropdown, Fill style dropdown, etc.).
   The marker icon editor is a tight floating editor — under Atlas
   Major's baseline form-element padding (~`8px 12px` from
   `.wpgmza-atlas-major.wpgmza-tabs-container select` and similar)
   plus the chevron padding-right: 36px from the global
   chevron-restoration rule (atlas-major.css ~L1486), the
   "Bundled" / "Solid" dropdowns rendered noticeably taller than
   the rest of the panel rows. WordPress 7's default form-element
   height bump compounded that.
   Override here scopes a smaller box, font, and chevron offset to
   any <select> inside the icon editor. `!important` on padding-
   right + background-position is required to beat the global
   chevron rule's `!important` longhands; otherwise the chevron
   would still sit 12px from the right edge with 36px of right
   padding, defeating the compact size. Keeps the chevron visible
   (slightly smaller SVG via background-size) but tucks it tight
   against the right edge so the box can stay 24px tall. */
.wpgmza-atlas-major .wpgmza-marker-icon-editor select {
	max-height: 24px;
	min-height: 0;
	height: 24px;
	padding: 2px 22px 2px 8px !important;
	line-height: 17px;
	font-size: 11px;
	font-weight: 500;
	border-radius: var(--am-radius-sm);
	background-position: right 6px center !important;
	background-size: 10px !important;
}

/* Marker icon picker — used by the Default Marker, Default User
   Location, Default Store Locator marker icon controllers across
   the map editor and global settings.
   The template (html/atlas-major/marker-icon-picker.html.php) lays
   children out as: [preview] [retina label] [Upload] [Create] [Reset].
   Atlas Novus relied on `display: inline-block` on the preview and
   inherent-inline buttons/labels to flow horizontally. Under Atlas
   Major's stricter CSS scope these rules weren't ported, leaving
   the picker as a vertical stack with a tight dashed-bordered icon
   preview that didn't match Novus's clean row. Restored with an
   explicit flex layout using Atlas Major tokens. */
.wpgmza-atlas-major .wpgmza-marker-icon-picker {
	font-family: var(--am-sans);
	/* `!important` defeats the sweeping base rule
	   `.sidebar .settings fieldset > * { display: block }`
	   (atlas-major.css line ~1383) which otherwise wins on
	   specificity when the picker is a direct child of a
	   <fieldset> (User Location, Store Locator). The new/edit
	   marker picker sits inside extra <div> wrappers so the
	   base rule doesn't apply there — but for fieldset-direct
	   pickers we need to force flex back on. */
	display: flex !important;
	align-items: center;
	/* No wrap: the picker MUST stay on one line. The 380px
	   sidebar minus padding leaves ~340px for content; with the
	   compact sizes below the picker's children sum to ~290px,
	   so a single row always fits. Allowing wrap was bumping the
	   Reset button to its own line. */
	flex-wrap: nowrap;
	gap: 6px;
	margin-top: 8px;
}
.wpgmza-atlas-major .wpgmza-marker-icon-picker .wpgmza-marker-icon-preview {
	width: 28px;
	height: 28px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	flex-shrink: 0;
	/* Defensive: kill any inherited border (dashed image-upload
	   border was leaking onto the preview in some panels). The
	   preview is just the icon, no chrome. */
	border: none;
	padding: 0;
}
.wpgmza-atlas-major .wpgmza-marker-icon-picker .wpgmza-retina-ready {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	color: var(--am-text-2);
	cursor: pointer;
	white-space: nowrap;
	margin: 0;
	flex-shrink: 0;
}
.wpgmza-atlas-major .wpgmza-marker-icon-picker .wpgmza-retina-ready input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}
/* Upload / Create buttons — compact pill sizing so the labeled
   buttons + Reset fit on a single row inside the 380px sidebar.
   Default `.wpgmza-button` is 7px×14px, ~66px wide per labeled
   button. Compacting to 4px×10px shaves ~16px per button. */
.wpgmza-atlas-major .wpgmza-marker-icon-picker .wpgmza-button {
	margin: 0;
	padding: 5px 10px;
	font-size: 11px;
	flex-shrink: 0;
}
/* Reset button — icon-only circular button to differentiate it
   from the labeled Upload / Create pills. The <i> inside is a
   FontAwesome undo icon (fa-undo). Smaller than the other two
   so it reads as a secondary action and the row stays compact. */
.wpgmza-atlas-major .wpgmza-marker-icon-picker .wpgmza-reset {
	width: 28px;
	height: 28px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
}
.wpgmza-atlas-major .wpgmza-marker-icon-picker .wpgmza-reset i {
	margin: 0;
	font-size: 10px;
}

/* Category table in editor */
.wpgmza-atlas-major .wpgmza-category-table {
	font-family: var(--am-sans);
	font-size: 13px;
}

/* Import/Export page */
.wpgmza-atlas-major .wpgmza-import-export {
	font-family: var(--am-sans);
}

/* ==========================================================
   CUSTOM FIELDS (MARKER FIELDS) PAGE
   ========================================================== */
.wpgmza-atlas-major #wpgmza-custom-fields {
	font-family: var(--am-sans);
	max-width: 800px;
}
.wpgmza-atlas-major > h1,
.wpgmza-atlas-major #wpgmza-custom-fields h1 {
	font-family: var(--am-sans);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--am-text-1);
	margin: 0 0 20px;
	padding: 0;
	border: none;
}

/* "Add Field" dashed control */
.wpgmza-atlas-major .custom-field-new-row-control {
	text-align: center;
	font-size: 14px;
	border: 2px dashed var(--am-border);
	border-radius: var(--am-radius-lg);
	padding: 14px 20px;
	color: var(--am-text-3);
	cursor: pointer;
	transition: all 0.15s ease;
	margin-bottom: 16px;
}
.wpgmza-atlas-major .custom-field-new-row-control:hover {
	border-color: var(--am-text-2);
	color: var(--am-text-1);
}
.wpgmza-atlas-major .custom-field-new-row-control i {
	vertical-align: middle;
	font-size: 20px;
}
.wpgmza-atlas-major .custom-field-new-row-control span {
	font-size: 13px;
	vertical-align: middle;
	margin-left: 4px;
	font-weight: 600;
}

/* Drag handle (shared) */
.wpgmza-atlas-major .wpgmza-drag-handle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	cursor: grab;
	padding: 7px;
	padding-right: 10px;
	flex-shrink: 0;
}
.wpgmza-atlas-major .wpgmza-drag-handle:before,
.wpgmza-atlas-major .wpgmza-drag-handle:after {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	opacity: 0.5;
	background: var(--am-text-1);
	border-radius: 50%;
	transition: 0.2s ease;
}
.wpgmza-atlas-major .wpgmza-drag-handle:hover:before,
.wpgmza-atlas-major .wpgmza-drag-handle:hover:after {
	opacity: 1;
	background: var(--am-accent);
}

/* Font Awesome icon picker autocomplete dropdown */
.wpgmza-atlas-major .icon-picker-autocomplete {
	max-height: 150px;
	overflow-y: auto;
	position: absolute;
	padding: 0;
	display: none;
	background: var(--am-surface);
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-sm);
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	z-index: 10;
	font-family: var(--am-sans);
}
.wpgmza-atlas-major .icon-picker-autocomplete.visible {
	display: block;
}
.wpgmza-atlas-major .icon-picker-autocomplete .icon-item {
	padding: 6px 12px;
	cursor: pointer;
	font-size: 13px;
	color: var(--am-text-1);
	transition: background 0.1s ease;
}
.wpgmza-atlas-major .icon-picker-autocomplete .icon-item:hover {
	background: var(--am-bg);
}
.wpgmza-atlas-major .icon-picker-autocomplete .icon-item i {
	margin-right: 10px;
	color: var(--am-text-2);
	width: 16px;
	text-align: center;
}

/* Field row card */
.wpgmza-atlas-major .wpgmza-custom-field-item-row {
	background: var(--am-surface);
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-lg);
	padding: 14px 16px;
	margin-bottom: 12px;
	box-shadow: none;
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row > .wpgmza-flex-row {
	align-items: center;
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row .wpgmza-flex-row > .wpgmza-flex-row:not(.field-actions) {
	flex-grow: 1;
	padding-left: 10px;
	align-items: center;
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row .wpgmza-flex-row > .wpgmza-flex-row strong {
	margin-right: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--am-text-2);
	white-space: nowrap;
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row .wpgmza-flex-row > .wpgmza-flex-row input,
.wpgmza-atlas-major .wpgmza-custom-field-item-row .wpgmza-flex-row > .wpgmza-flex-row select {
	flex-grow: 1;
	padding: 8px 12px;
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-sm);
	font-size: 13px;
	font-family: var(--am-sans);
	color: var(--am-text-1);
	background: #fff;
	/* Explicit line-height so the input/select renders at a known
	   total height regardless of browser default `line-height: normal`
	   interpretation (varies across Chrome/Firefox/Safari for non-system
	   fonts like Plus Jakarta Sans). 20 + 16 (padding) + 2 (border) = 38px.
	   The field-action buttons below match this exact value. */
	line-height: 20px;
	height: auto;
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row .wpgmza-flex-row > .wpgmza-flex-row input:focus,
.wpgmza-atlas-major .wpgmza-custom-field-item-row .wpgmza-flex-row > .wpgmza-flex-row select:focus {
	outline: none;
	border-color: var(--am-text-1);
}

/* Field actions (edit/delete buttons) */
.wpgmza-atlas-major .wpgmza-custom-field-item-row .field-actions {
	margin-left: auto;
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row .field-actions button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Match the input/select rendered height (line-height 20 +
	   padding 16 + border 2 = 38px). Square so the icon stays
	   visually balanced inside the box. */
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-sm);
	background: var(--am-surface);
	color: var(--am-text-3);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row .field-actions button:hover {
	border-color: var(--am-text-3);
	color: var(--am-text-1);
}

/* Field meta (expandable section) */
.wpgmza-atlas-major .wpgmza-custom-field-item-row .field-meta-container {
	border-top: 1px dashed var(--am-border);
	margin-top: 12px;
	padding-top: 4px;
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row .field-meta-container h3 {
	font-size: 13px;
	font-weight: 600;
	font-family: var(--am-sans);
	color: var(--am-text-1);
	margin: 10px 0 8px;
	border: none;
	padding: 0;
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row .field-meta-container > .wpgmza-row:not(:last-child) {
	margin-bottom: 10px;
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row .field-meta-container input {
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-sm);
	padding: 8px 12px;
	font-size: 13px;
	font-family: var(--am-sans);
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row .field-meta-container label {
	font-size: 13px;
	font-family: var(--am-sans);
	color: var(--am-text-1);
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row .field-meta-container .html-attributes .attributes {
	max-width: 70%;
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row .field-meta-container .html-attributes .attributes .wpgmza-row {
	display: flex;
	gap: 8px;
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row .field-meta-container .html-attributes .attributes .wpgmza-row:not(:last-child) {
	margin-bottom: 5px;
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row .field-meta-container .html-attributes .attributes .wpgmza-row .wpgmza-col {
	flex: 1;
	max-width: none;
}
.wpgmza-atlas-major .wpgmza-custom-field-item-row .field-meta-container .html-attributes .attributes .wpgmza-row .wpgmza-col input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-sm);
	font-size: 13px;
	font-family: var(--am-sans);
}

/* Marker filtering tab */
.wpgmza-atlas-major .wpgmza-marker-filtering-tab fieldset {
	margin-top: 14px;
	border: none;
	padding: 0;
}

/* Info window panel styles */
.wpgmza-atlas-major .wpgmza-panel-info-window,
.wpgmza-atlas-major .wpgmza-card-info-window,
.wpgmza-atlas-major .wpgmza-drawer-info-window {
	font-family: var(--am-sans);
}

/* Marker listing panel item */
.wpgmza-atlas-major .wpgmza-marker-listing-panel-item {
	font-family: var(--am-sans);
	font-size: 13px;
}

/* Pro-specific buttons */
.wpgmza-atlas-major .wpgmza-pro-feature .wpgmza-button {
	font-family: var(--am-sans);
}

/* ==========================================================
   LIVE PREVIEW — Marker Listing fixes
   ========================================================== */

/* Live Preview — listing containers need full width.
   The inner-stack child default is width:fit-content which collapses
   carousel, datatable, and grid containers to zero. */
.wpgmza-atlas-major .wpgmza-live-preview-component[data-wpgmza-marker-listing] {
	width: 100% !important;
	min-width: 0;
}
.wpgmza-atlas-major .wpgmza-live-preview-component .owl-carousel {
	width: 100% !important;
}

/* ==========================================================
   IMPORT OPTIONS — JS-built panel shown after the user selects
   a file on the Tools → Import tab. Mirrors Atlas Novus rules at
   wp-google-maps/css/atlas-novus/wp-google-maps-admin.css:2818-2876
   and 4330-4367, but ported to Atlas Major design tokens
   (--am-bg / --am-border / --am-radius / Plus Jakarta Sans).
   Atlas Major doesn't load wp-google-maps-admin.css so these
   were missing — buttons rendered as plain unstyled WP defaults,
   toggle switches stacked vertically with their labels, the
   wpgmza-listing tables had no spacing, and the loader / progress
   bar had no centering or pill styling.
   ========================================================== */

.wpgmza-atlas-major #import_options {
	width: 100%;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	color: var(--am-text-1);
	/* Rows are laid out as `<div.switch> Label <br>` siblings, so the
	   vertical spacing between rows is determined by line-height of
	   this parent. The toggle pill is 20px tall — give each row 32px
	   of line-height so the rows breathe instead of stacking tight. */
	line-height: 32px;
}

/* Toggle switches inline with their text labels */
.wpgmza-atlas-major #import_options > .switch,
.wpgmza-atlas-major #import_options > div > .switch {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}

/* Buttons — port Novus's secondary-button look using AM tokens
   (Select All / Select None / Import / Schedule / Cancel all carry
   .wpgmza_general_btn). Targets `button` broadly so any future JS-
   built button inside #import_options picks it up too. */
.wpgmza-atlas-major #import_options button,
.wpgmza-atlas-major #import_options .wpgmza_general_btn {
	display: inline-block;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	line-height: 1.5;
	min-height: 32px;
	margin: 0 6px 0 0;
	padding: 6px 14px;
	cursor: pointer;
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius-sm);
	background: var(--am-bg);
	color: var(--am-text-2);
	white-space: nowrap;
	box-sizing: border-box;
	-webkit-appearance: none;
	transition: border-color 0.12s var(--am-ease), color 0.12s var(--am-ease), background 0.12s var(--am-ease);
}

.wpgmza-atlas-major #import_options button:hover,
.wpgmza-atlas-major #import_options .wpgmza_general_btn:hover {
	border-color: var(--am-text-3);
	color: var(--am-text-1);
	background: var(--am-surface);
}

/* Tables — same margin treatment for both import and export */
.wpgmza-atlas-major #import_options table,
.wpgmza-atlas-major #export-tab table {
	margin-bottom: 20px;
}

/* Map / integration select containers — Novus uses flex layout
   for the inline "apply to map" select. */
.wpgmza-atlas-major #import_options #map-select-container,
.wpgmza-atlas-major #import_options .integration_options_block {
	display: flex;
	margin-top: 10px;
	align-items: center;
}

.wpgmza-atlas-major #import_options #map-select-container span,
.wpgmza-atlas-major #import_options #map-select-container select,
.wpgmza-atlas-major #import_options .integration_options_block span,
.wpgmza-atlas-major #import_options .integration_options_block select {
	flex: 1;
	max-width: 50%;
}

/* Headings inside the panel — match AM scale instead of WP defaults */
.wpgmza-atlas-major #import_options h2 {
	font-size: 18px;
	font-weight: 700;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	color: var(--am-text-1);
	margin: 18px 0 8px 0;
	letter-spacing: -0.01em;
}
.wpgmza-atlas-major #import_options h4 {
	font-size: 13px;
	font-weight: 500;
	font-family: 'IBM Plex Mono', monospace;
	color: var(--am-text-2);
	margin: 0 0 12px 0;
}

/* Help link [?] next to the address-provider requirement note */
.wpgmza-atlas-major #import_options a {
	color: var(--am-accent);
	text-decoration: none;
}
.wpgmza-atlas-major #import_options a:hover {
	text-decoration: underline;
}

/* Loader card shown while the import runs */
.wpgmza-atlas-major .wpgmza-tabs-container .ui-tabs-panel .tab-row .wpgmza-import-loader,
.wpgmza-atlas-major .wpgmza-import-loader {
	text-align: center;
	padding: 20px 0;
}
.wpgmza-atlas-major .wpgmza-tabs-container .ui-tabs-panel .tab-row .wpgmza-import-loader .wpgmza-loader-message,
.wpgmza-atlas-major .wpgmza-import-loader .wpgmza-loader-message {
	margin-bottom: 10px;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	color: var(--am-text-2);
}

/* Preloader (the four-dot circular animation) positioning fix.
   The base `.wpgmza-preloader` rule in css/wpgmza_style_pro.css:
   1447-1457 sets `position: absolute; top: 50%; left: 50%;
   transform: translate(-50%, -50%)` — it expects a positioned
   ancestor (.wpgmza_map, a modal, etc.) and centers inside it.
   `#import_loader` is a plain div in the tab-row with no
   positioning, so the absolute preloader anchored to the
   nearest positioned ancestor (typically the viewport) and
   appeared untethered from its container.
   In the import-loader context, drop back to in-flow
   positioning so the preloader sits naturally inside the
   container — the parent's `text-align: center` keeps it
   horizontally centered, and `margin` gives the loader-
   message room to render below it. */
.wpgmza-atlas-major .wpgmza-import-loader .wpgmza-preloader {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	margin: 0 auto 16px auto;
}

/* Native <progress> bar — pill-styled with AM tokens */
.wpgmza-atlas-major progress.wpgmza-progress-bar {
	-webkit-appearance: none;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 200px;
	max-width: 100%;
	height: 12px;
	border: none;
}
.wpgmza-atlas-major progress.wpgmza-progress-bar::-webkit-progress-bar {
	background-color: var(--am-border);
	border-radius: 10px;
	overflow: hidden;
	height: 12px;
}
.wpgmza-atlas-major progress.wpgmza-progress-bar::-webkit-progress-value {
	background-color: var(--am-accent);
	transition: width 0.2s ease;
	border-radius: 10px;
}
.wpgmza-atlas-major progress.wpgmza-progress-bar::-moz-progress-bar {
	background-color: var(--am-accent);
	transition: width 0.2s ease;
}

/* ==========================================================
   IMPORT SCHEDULE LIST + .wpgmza-listing tables
   The schedule list table (and the file list) renders via
   `<table id="wpgmap_import_schedule_list_table"
   class="wp-list-table widefat fixed striped wpgmza-listing">`.
   Rules ported from the original wp-google-maps-admin.css
   (`.wpgmza-listing` block at 440-1707 and the schedule-list
   block at 1838-1858). Novus's atlas-novus/wp-google-maps-admin.css
   stripped these rules; Atlas Major never had them either since
   it doesn't load either admin stylesheet. AM-token adaptation:
   replaced `border: 4px solid white !important` with `--am-border`
   framing, used `--am-text-2` for the status badge, and styled the
   inline action links (Edit / Delete / View Log / View Response)
   with `--am-accent` hover instead of leaving them as default
   WP-admin blue underlines.
   ========================================================== */

/* Outer container — give it room above when the schedule list shows. */
.wpgmza-atlas-major #wpgmaps_import_schedule_list {
	margin-top: 12px;
}

/* Base wpgmza-listing table styling (mirrors legacy line 440-1707).
   Note: the legacy 7px padding rule on the table element itself is
   intentionally dropped — putting padding on a <table> box adds an
   awkward gap between the table's outer border and its first row.
   Padding belongs on the cells (handled by the WP `widefat fixed
   striped` table styling and our own td/th rules elsewhere). */
.wpgmza-atlas-major .wpgmza-listing {
	border: 1px solid var(--am-border);
	border-radius: var(--am-radius);
	background: var(--am-surface);
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.wpgmza-atlas-major .wpgmza-listing td {
	vertical-align: middle;
	color: var(--am-text-1);
}
.wpgmza-atlas-major .wpgmza-listing a:active,
.wpgmza-atlas-major .wpgmza-listing a:focus {
	outline: none;
	box-shadow: none;
}

/* Schedule + file list tables (also covers #import_options table) */
.wpgmza-atlas-major #wpgmap_import_schedule_list_table,
.wpgmza-atlas-major #wpgmap_import_file_list_table,
.wpgmza-atlas-major #import_options table {
	border: 1px solid var(--am-border);
	box-shadow: none;
}

/* Schedule list — title strong + status badge + inline action links.
   Match Novus's flush-left layout: title, then status on its own
   line with no indent, then the action links inline starting at
   the same x-position. Only `.import_schedule_edit` gets the
   margin-top spacer (mirrors the original legacy rule); the other
   links flow inline after Edit separated by " | ". */
.wpgmza-atlas-major #wpgmap_import_schedule_list_table .import_schedule_title {
	color: var(--am-text-1);
	font-weight: 600;
}
.wpgmza-atlas-major #wpgmap_import_schedule_list_table .import_schedule_edit,
.wpgmza-atlas-major #wpgmap_import_schedule_list_table .import_schedule_delete,
.wpgmza-atlas-major #wpgmap_import_schedule_list_table .import_schedule_view_log,
.wpgmza-atlas-major #wpgmap_import_schedule_list_table .import_schedule_view_response {
	color: var(--am-text-2);
	text-decoration: none;
	font-size: 13px;
	transition: color 0.12s var(--am-ease);
}
.wpgmza-atlas-major #wpgmap_import_schedule_list_table .import_schedule_edit:hover,
.wpgmza-atlas-major #wpgmap_import_schedule_list_table .import_schedule_delete:hover,
.wpgmza-atlas-major #wpgmap_import_schedule_list_table .import_schedule_view_log:hover,
.wpgmza-atlas-major #wpgmap_import_schedule_list_table .import_schedule_view_response:hover {
	color: var(--am-accent);
}
.wpgmza-atlas-major #wpgmap_import_schedule_list_table .import_schedule_delete:hover {
	color: #dc2626;
}

/* Status text — flush-left with the title above, no indent / no
   border-left bar. (The legacy CSS adds a margin-left + border-left,
   but Novus's actual rendered output doesn't show it because the
   status span is empty / rendered without those styles. Matching
   Novus visually here, not the legacy CSS.) */
.wpgmza-atlas-major #wpgmap_import_schedule_list_table span[name="status"] {
	display: inline;
	color: var(--am-text-2);
	font-size: 13px;
	margin: 0;
	padding: 0;
	border: none;
}