<?php
/**
 * Customize page template
 *
 * Variables provided by Agency_Pulse_Admin_Menu::render_customize_page():
 *
 *   $ao_active  bool  Whether the License & Connection is active.
 *
 * Tab 1 (Colors): Admin Bar Customizer, Admin Footer, Color Customizer.
 * Tab 2 (Layout): Admin Layout settings (sidebar style, typography, etc.).
 *
 * @package Agency_Pulse_Admin_Menu
 * @since   1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$layout_opts = wp_parse_args(
	get_option( Agency_Pulse_Admin_Menu_Constants::OPTION_LAYOUT, array() ),
	array(
		'enabled'             => false,
		'sidebar_style_enabled' => true,
		'content_cards_enabled' => true,
		'interactive_enabled'   => true,
		'typography_enabled'    => true,
		'sidebar_style'       => 'default',
		'sidebar_item_radius' => 6,
		'content_bg'          => '#f0f0f1',
		'card_radius'         => 0,
		'card_shadow'         => false,
		'card_shadow_opacity' => 15,
		'card_shadow_offset'  => 2,
		'card_shadow_blur'    => 8,
		'button_radius'       => 3,
		'input_radius'        => 4,
		'font_source'         => 'system',
		'font_family'         => '',
		'font_url'            => '',
	)
);
?>
<div class="wrap aamo-wrap">

	<h1 class="aamo-page-title">
		<?php esc_html_e( 'Menu Organizer — Customize Admin', 'agency-pulse-admin-menu' ); ?>
	</h1>

	<div class="aamo-tabs-card">
	<nav class="nav-tab-wrapper">
		<a href="#tab-colors" class="nav-tab nav-tab-active" id="aamo-tab-colors">
			<?php esc_html_e( 'Colors', 'agency-pulse-admin-menu' ); ?>
		</a>
		<a href="#tab-layout" class="nav-tab" id="aamo-tab-layout">
			<?php esc_html_e( 'Layout', 'agency-pulse-admin-menu' ); ?>
		</a>
	</nav>

	<div class="aamo-tab-content">

	<?php // ── Tab 1: Colors ────────────────────────────────────────────────── ?>
	<div id="aamo-panel-colors" class="aamo-tab-panel is-active">

	<?php if ( ! $ao_active ) : ?>
	<div class="notice notice-warning inline" style="margin:16px 0 8px">
		<p><?php printf(
			/* translators: %s: link to license settings */
			esc_html__( 'These features require an active License & Connection. %s', 'agency-pulse-admin-menu' ),
			'<a href="' . esc_url( admin_url( 'admin.php?page=aamo_settings#aamo-license-wrap' ) ) . '">' . esc_html__( 'Activate your license &rarr;', 'agency-pulse-admin-menu' ) . '</a>'
		); ?></p>
	</div>
	<?php endif; ?>

	<?php // ── Admin Bar Customizer panel ─────────────────────────────────── ?>
	<?php
	$branding_defaults = array(
		'enabled' => false, 'icon_url' => '', 'icon_alt' => '',
		'link_mode' => 'wordpress', 'link_url' => '', 'link_target' => false,
		'hide_submenu' => false, 'site_name' => '',
	);
	$branding = wp_parse_args(
		get_option( Agency_Pulse_Admin_Menu_Constants::OPTION_BRANDING_ICON, array() ),
		$branding_defaults
	);
	?>
	<div class="aamo-settings-panel<?php echo $ao_active ? '' : ' aamo-panel-locked'; ?>" id="aamo-branding-wrap">

		<h2 class="aamo-settings-panel-title">
			<?php esc_html_e( 'Admin Bar Customizer', 'agency-pulse-admin-menu' ); ?>
		</h2>

		<p class="aamo-settings-description">
			<?php esc_html_e( 'Customize the WordPress admin toolbar — replace the WP logo and override the site name display without changing your site title anywhere else.', 'agency-pulse-admin-menu' ); ?>
		</p>

		<h3 class="aamo-settings-subheading"><?php esc_html_e( 'Site Name', 'agency-pulse-admin-menu' ); ?></h3>

		<div class="aamo-settings-action-row">
			<label for="aamo-branding-site-name" class="aamo-label">
				<?php esc_html_e( 'Admin Bar Label:', 'agency-pulse-admin-menu' ); ?>
			</label>
			<input type="text" id="aamo-branding-site-name" class="regular-text"
				value="<?php echo esc_attr( $branding['site_name'] ); ?>"
				placeholder="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
		</div>
		<p class="aamo-settings-meta">
			<?php esc_html_e( 'Overrides the site name shown in the admin toolbar only. Leave blank to use the real site title.', 'agency-pulse-admin-menu' ); ?>
		</p>

		<hr class="aamo-access-divider">

		<h3 class="aamo-settings-subheading"><?php esc_html_e( 'Admin Icon', 'agency-pulse-admin-menu' ); ?></h3>

		<div class="aamo-dm-toggle-row">
			<label class="aamo-toggle-label">
				<input type="checkbox" id="aamo-branding-enabled" value="1"
					<?php checked( $branding['enabled'] ); ?>>
				<?php esc_html_e( 'Enable Custom Admin Icon', 'agency-pulse-admin-menu' ); ?>
			</label>
		</div>

		<div id="aamo-branding-icon-fields"<?php echo $branding['enabled'] ? '' : ' style="display:none"'; ?>>

			<div class="aamo-settings-action-row">
				<label class="aamo-label"><?php esc_html_e( 'Icon Image:', 'agency-pulse-admin-menu' ); ?></label>
				<div class="aamo-branding-icon-picker">
					<span id="aamo-branding-preview-wrap"<?php echo $branding['icon_url'] ? '' : ' style="display:none"'; ?>>
						<img id="aamo-branding-preview" src="<?php echo esc_url( $branding['icon_url'] ); ?>"
							alt="" class="aamo-icon-preview">
					</span>
					<input type="hidden" id="aamo-branding-icon-url" value="<?php echo esc_attr( $branding['icon_url'] ); ?>">
					<button type="button" id="aamo-branding-choose" class="button">
						<?php esc_html_e( 'Choose from Media Library', 'agency-pulse-admin-menu' ); ?>
					</button>
					<a href="#" id="aamo-branding-clear" class="aamo-settings-meta"<?php echo $branding['icon_url'] ? '' : ' style="display:none"'; ?>>
						<?php esc_html_e( 'Clear', 'agency-pulse-admin-menu' ); ?>
					</a>
				</div>
			</div>

			<div class="aamo-settings-action-row">
				<label for="aamo-branding-alt" class="aamo-label">
					<?php esc_html_e( 'Alt Text:', 'agency-pulse-admin-menu' ); ?>
				</label>
				<input type="text" id="aamo-branding-alt" class="regular-text"
					value="<?php echo esc_attr( $branding['icon_alt'] ); ?>"
					placeholder="<?php esc_attr_e( 'Leave blank to use admin bar site name', 'agency-pulse-admin-menu' ); ?>">
			</div>

			<div class="aamo-settings-action-row">
				<label class="aamo-label"><?php esc_html_e( 'When icon is clicked:', 'agency-pulse-admin-menu' ); ?></label>
				<div>
					<label class="aamo-access-mode-option">
						<input type="radio" name="aamo_link_mode" value="wordpress"
							<?php checked( $branding['link_mode'], 'wordpress' ); ?>>
						<?php esc_html_e( 'WordPress About page', 'agency-pulse-admin-menu' ); ?>
					</label>
					<label class="aamo-access-mode-option">
						<input type="radio" name="aamo_link_mode" value="custom"
							<?php checked( $branding['link_mode'], 'custom' ); ?>>
						<?php esc_html_e( 'Custom URL:', 'agency-pulse-admin-menu' ); ?>
						<input type="url" id="aamo-branding-link-url" class="regular-text"
							value="<?php echo esc_attr( $branding['link_url'] ); ?>"
							placeholder="https://"
							<?php echo 'custom' === $branding['link_mode'] ? '' : ' style="display:none"'; ?>>
						<label id="aamo-branding-link-target-wrap"<?php echo 'custom' === $branding['link_mode'] ? '' : ' style="display:none"'; ?>>
							<input type="checkbox" id="aamo-branding-link-target" value="1"
								<?php checked( $branding['link_target'] ); ?>>
							<?php esc_html_e( 'New tab', 'agency-pulse-admin-menu' ); ?>
						</label>
					</label>
					<label class="aamo-access-mode-option">
						<input type="radio" name="aamo_link_mode" value="none"
							<?php checked( $branding['link_mode'], 'none' ); ?>>
						<?php esc_html_e( 'No link', 'agency-pulse-admin-menu' ); ?>
					</label>
				</div>
			</div>

			<div class="aamo-dm-toggle-row">
				<label class="aamo-toggle-label">
					<input type="checkbox" id="aamo-branding-hide-submenu" value="1"
						<?php checked( $branding['hide_submenu'] ); ?>>
					<?php esc_html_e( 'Hide WordPress submenu (About, Support, Documentation)', 'agency-pulse-admin-menu' ); ?>
				</label>
			</div>

		</div><!-- /#aamo-branding-icon-fields -->

		<div class="aamo-settings-action-row" style="margin-top:16px;">
			<button type="button" id="aamo-branding-save" class="button button-primary">
				<?php esc_html_e( 'Save Admin Bar Settings', 'agency-pulse-admin-menu' ); ?>
			</button>
			<span id="aamo-branding-status" class="aamo-status" aria-live="polite"></span>
		</div>

	</div><!-- /#aamo-branding-wrap -->

	<?php // ── Admin Footer Customizer panel ──────────────────────────────── ?>
	<?php
	$footer_defaults = array( 'enabled' => false, 'left_content' => '', 'show_version' => true, 'right_text' => '' );
	$footer_opts     = wp_parse_args(
		get_option( Agency_Pulse_Admin_Menu_Constants::OPTION_ADMIN_FOOTER, array() ),
		$footer_defaults
	);
	?>
	<div class="aamo-settings-panel<?php echo $ao_active ? '' : ' aamo-panel-locked'; ?>" id="aamo-footer-wrap">

		<h2 class="aamo-settings-panel-title">
			<?php esc_html_e( 'Admin Footer', 'agency-pulse-admin-menu' ); ?>
		</h2>

		<p class="aamo-settings-description">
			<?php esc_html_e( 'Replace the "Thank you for creating with WordPress." footer bar with your own branding. Applies to every admin page.', 'agency-pulse-admin-menu' ); ?>
		</p>

		<div class="aamo-dm-toggle-row">
			<label class="aamo-toggle-label">
				<input type="checkbox" id="aamo-footer-enabled" value="1"
					<?php checked( $footer_opts['enabled'] ); ?>>
				<?php esc_html_e( 'Enable Custom Admin Footer', 'agency-pulse-admin-menu' ); ?>
			</label>
		</div>

		<div id="aamo-footer-fields"<?php echo $footer_opts['enabled'] ? '' : ' style="display:none"'; ?>>

			<div class="aamo-dm-editor-row">
				<label class="aamo-dm-label">
					<?php esc_html_e( 'Left Side Content:', 'agency-pulse-admin-menu' ); ?>
				</label>
				<?php
				wp_editor(
					$footer_opts['left_content'],
					'aamo_footer_content',
					array(
						'media_buttons' => false,
						'textarea_rows' => 5,
						'tinymce'       => false,
						'quicktags'     => true,
						'textarea_name' => 'aamo_footer_content',
					)
				);
				?>
				<p class="aamo-settings-meta">
					<?php esc_html_e( 'Leave blank to show nothing on the left.', 'agency-pulse-admin-menu' ); ?>
				</p>
			</div>

			<div class="aamo-settings-action-row" style="margin-top:12px;">
				<label class="aamo-label"><?php esc_html_e( 'Right Side:', 'agency-pulse-admin-menu' ); ?></label>
				<div>
					<label class="aamo-toggle-label">
						<input type="checkbox" id="aamo-footer-show-version" value="1"
							<?php checked( $footer_opts['show_version'] ); ?>>
						<?php esc_html_e( 'Show WordPress version', 'agency-pulse-admin-menu' ); ?>
					</label>
					<div id="aamo-footer-right-text-row"<?php echo $footer_opts['show_version'] ? ' style="display:none"' : ''; ?>>
						<label for="aamo-footer-right-text" class="aamo-settings-meta">
							<?php esc_html_e( 'Custom text (leave blank for nothing):', 'agency-pulse-admin-menu' ); ?>
						</label>
						<input type="text" id="aamo-footer-right-text" class="regular-text"
							value="<?php echo esc_attr( $footer_opts['right_text'] ); ?>">
					</div>
				</div>
			</div>

		</div><!-- /#aamo-footer-fields -->

		<div class="aamo-settings-action-row" style="margin-top:16px;">
			<button type="button" id="aamo-footer-save" class="button button-primary">
				<?php esc_html_e( 'Save Footer Settings', 'agency-pulse-admin-menu' ); ?>
			</button>
			<span id="aamo-footer-status" class="aamo-status" aria-live="polite"></span>
		</div>

	</div><!-- /#aamo-footer-wrap -->

	<?php // ── Color Customizer panel ────────────────────────────────────── ?>
	<?php
	$color_defaults = array(
		'enabled' => false, 'sidebar_bg' => '#1d2327', 'sidebar_text' => '#a7aaad',
		'sidebar_highlight' => '#2271b1', 'sidebar_hl_text' => '#ffffff',
		'adminbar_bg' => '#1d2327', 'adminbar_text' => '#a7aaad',
		'accent' => '#2271b1', 'bubble_bg' => '#d63638',
	);
	$color_opts = wp_parse_args(
		get_option( Agency_Pulse_Admin_Menu_Constants::OPTION_COLOR_SCHEME, array() ),
		$color_defaults
	);
	?>
	<div class="aamo-settings-panel<?php echo $ao_active ? '' : ' aamo-panel-locked'; ?>" id="aamo-color-wrap">

		<h2 class="aamo-settings-panel-title">
			<?php esc_html_e( 'Color Customizer', 'agency-pulse-admin-menu' ); ?>
		</h2>

		<p class="aamo-settings-description">
			<?php esc_html_e( 'Force a custom color palette across the entire WordPress admin, overriding each user\'s individual color scheme selection.', 'agency-pulse-admin-menu' ); ?>
		</p>

		<div class="aamo-dm-toggle-row">
			<label class="aamo-toggle-label">
				<input type="checkbox" id="aamo-color-enabled" value="1"
					<?php checked( $color_opts['enabled'] ); ?>>
				<?php esc_html_e( 'Enable Custom Color Palette', 'agency-pulse-admin-menu' ); ?>
			</label>
		</div>

		<div id="aamo-color-fields"<?php echo $color_opts['enabled'] ? '' : ' style="display:none"'; ?>>

			<div class="aamo-color-group">
				<p class="aamo-color-group-title"><?php esc_html_e( 'Sidebar', 'agency-pulse-admin-menu' ); ?></p>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Background', 'agency-pulse-admin-menu' ); ?></span>
					<input type="text" id="aamo-color-sidebar-bg" class="aamo-color-input"
						value="<?php echo esc_attr( $color_opts['sidebar_bg'] ); ?>" data-slot="sidebar_bg">
				</div>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Sub-menu Background', 'agency-pulse-admin-menu' ); ?></span>
					<input type="text" id="aamo-color-submenu-bg" class="aamo-color-input"
						value="<?php echo esc_attr( $color_opts['submenu_bg'] ?? '#2c3338' ); ?>" data-slot="submenu_bg">
				</div>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Sub-menu Text', 'agency-pulse-admin-menu' ); ?></span>
					<input type="text" id="aamo-color-submenu-text" class="aamo-color-input"
						value="<?php echo esc_attr( $color_opts['submenu_text'] ?? '#a7aaad' ); ?>" data-slot="submenu_text">
				</div>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Sub-menu Active Text', 'agency-pulse-admin-menu' ); ?></span>
					<input type="text" id="aamo-color-submenu-hl-text" class="aamo-color-input"
						value="<?php echo esc_attr( $color_opts['submenu_hl_text'] ?? '#ffffff' ); ?>" data-slot="submenu_hl_text">
				</div>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Text', 'agency-pulse-admin-menu' ); ?></span>
					<input type="text" id="aamo-color-sidebar-text" class="aamo-color-input"
						value="<?php echo esc_attr( $color_opts['sidebar_text'] ); ?>" data-slot="sidebar_text">
				</div>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Icons', 'agency-pulse-admin-menu' ); ?></span>
					<input type="text" id="aamo-color-sidebar-icon" class="aamo-color-input"
						value="<?php echo esc_attr( $color_opts['sidebar_icon'] ?? '#a7aaad' ); ?>" data-slot="sidebar_icon">
				</div>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Highlight', 'agency-pulse-admin-menu' ); ?></span>
					<input type="text" id="aamo-color-sidebar-hl" class="aamo-color-input"
						value="<?php echo esc_attr( $color_opts['sidebar_highlight'] ); ?>" data-slot="sidebar_highlight">
				</div>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Highlight Text', 'agency-pulse-admin-menu' ); ?></span>
					<input type="text" id="aamo-color-sidebar-hl-text" class="aamo-color-input"
						value="<?php echo esc_attr( $color_opts['sidebar_hl_text'] ); ?>" data-slot="sidebar_hl_text">
				</div>
			</div>

			<div class="aamo-color-group">
				<p class="aamo-color-group-title"><?php esc_html_e( 'Admin Bar', 'agency-pulse-admin-menu' ); ?></p>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Background', 'agency-pulse-admin-menu' ); ?></span>
					<input type="text" id="aamo-color-adminbar-bg" class="aamo-color-input"
						value="<?php echo esc_attr( $color_opts['adminbar_bg'] ); ?>" data-slot="adminbar_bg">
				</div>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Text / Icons', 'agency-pulse-admin-menu' ); ?></span>
					<input type="text" id="aamo-color-adminbar-text" class="aamo-color-input"
						value="<?php echo esc_attr( $color_opts['adminbar_text'] ); ?>" data-slot="adminbar_text">
				</div>
			</div>

			<div class="aamo-color-group">
				<p class="aamo-color-group-title"><?php esc_html_e( 'Accent & Notifications', 'agency-pulse-admin-menu' ); ?></p>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Accent Color', 'agency-pulse-admin-menu' ); ?></span>
					<input type="text" id="aamo-color-accent" class="aamo-color-input"
						value="<?php echo esc_attr( $color_opts['accent'] ); ?>" data-slot="accent">
				</div>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Badge Background', 'agency-pulse-admin-menu' ); ?></span>
					<input type="text" id="aamo-color-bubble" class="aamo-color-input"
						value="<?php echo esc_attr( $color_opts['bubble_bg'] ); ?>" data-slot="bubble_bg">
				</div>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Badge Text', 'agency-pulse-admin-menu' ); ?></span>
					<input type="text" id="aamo-color-bubble-text" class="aamo-color-input"
						value="<?php echo esc_attr( $color_opts['bubble_text'] ?? '#ffffff' ); ?>" data-slot="bubble_text">
				</div>
			</div>

		</div><!-- /#aamo-color-fields -->

		<div class="aamo-settings-action-row" style="margin-top:16px;">
			<button type="button" id="aamo-color-reset" class="button">
				<?php esc_html_e( 'Reset to Default', 'agency-pulse-admin-menu' ); ?>
			</button>
			<button type="button" id="aamo-color-save" class="button button-primary">
				<?php esc_html_e( 'Save Color Scheme', 'agency-pulse-admin-menu' ); ?>
			</button>
			<span id="aamo-color-status" class="aamo-status" aria-live="polite"></span>
		</div>

	</div><!-- /#aamo-color-wrap -->

	</div><!-- /#aamo-panel-colors -->

	<?php // ── Tab 2: Layout ────────────────────────────────────────────────── ?>
	<div id="aamo-panel-layout" class="aamo-tab-panel">

		<?php if ( ! $ao_active ) : ?>
		<div class="notice notice-warning inline" style="margin:16px 0 8px">
			<p><?php printf(
				/* translators: %s: link to license settings */
				esc_html__( 'Admin Layout settings require an active License & Connection. %s', 'agency-pulse-admin-menu' ),
				'<a href="' . esc_url( admin_url( 'admin.php?page=aamo_settings#aamo-license-wrap' ) ) . '">' . esc_html__( 'Activate your license &rarr;', 'agency-pulse-admin-menu' ) . '</a>'
			); ?></p>
		</div>
		<?php endif; ?>

		<div id="aamo-layout-panels"<?php echo $ao_active ? '' : ' class="aamo-panel-locked"'; ?>>

			<!-- Sidebar Style -->
			<div class="aamo-settings-panel">
				<h2 class="aamo-settings-panel-title"><?php esc_html_e( 'Sidebar Style', 'agency-pulse-admin-menu' ); ?></h2>
				<div class="aamo-dm-toggle-row">
					<label class="aamo-toggle-label">
						<input type="checkbox" id="aamo-sidebar-style-enabled" data-layout-field="sidebar_style_enabled" value="1"<?php checked( $layout_opts['sidebar_style_enabled'] ); ?> />
						<?php esc_html_e( 'Enable Sidebar Style', 'agency-pulse-admin-menu' ); ?>
					</label>
				</div>
				<p class="aamo-settings-description"><?php esc_html_e( 'Choose how the active sidebar menu item is visually highlighted.', 'agency-pulse-admin-menu' ); ?></p>

				<div class="aamo-access-modes" style="margin-bottom:16px">
					<label class="aamo-access-mode-option">
						<input type="radio" name="aamo_sidebar_style" value="default"
						       class="aamo-sidebar-style-radio" data-layout-field="sidebar_style"
						       <?php checked( $layout_opts['sidebar_style'], 'default' ); ?> />
						<span class="aamo-access-mode-label"><?php esc_html_e( 'Default', 'agency-pulse-admin-menu' ); ?></span>
						<span class="aamo-access-mode-desc"><?php esc_html_e( 'WordPress default — no change to the active item appearance.', 'agency-pulse-admin-menu' ); ?></span>
					</label>
					<label class="aamo-access-mode-option">
						<input type="radio" name="aamo_sidebar_style" value="border_accent"
						       class="aamo-sidebar-style-radio" data-layout-field="sidebar_style"
						       <?php checked( $layout_opts['sidebar_style'], 'border_accent' ); ?> />
						<span class="aamo-access-mode-label"><?php esc_html_e( 'Left-border Accent', 'agency-pulse-admin-menu' ); ?></span>
						<span class="aamo-access-mode-desc"><?php esc_html_e( 'Shows a colored left border on the active item, using your sidebar highlight color.', 'agency-pulse-admin-menu' ); ?></span>
					</label>
					<label class="aamo-access-mode-option">
						<input type="radio" name="aamo_sidebar_style" value="pill"
						       class="aamo-sidebar-style-radio" data-layout-field="sidebar_style"
						       <?php checked( $layout_opts['sidebar_style'], 'pill' ); ?> />
						<span class="aamo-access-mode-label"><?php esc_html_e( 'Pill', 'agency-pulse-admin-menu' ); ?></span>
						<span class="aamo-access-mode-desc"><?php esc_html_e( 'Rounds the active item highlight into a pill shape with a configurable border radius.', 'agency-pulse-admin-menu' ); ?></span>
					</label>
				</div>

				<div id="aamo-pill-radius-row" class="aamo-color-row"<?php echo 'pill' !== $layout_opts['sidebar_style'] ? ' style="display:none"' : ''; ?>>
					<span class="aamo-color-label"><?php esc_html_e( 'Pill Radius', 'agency-pulse-admin-menu' ); ?></span>
					<input type="number" id="aamo-sidebar-item-radius" data-layout-field="sidebar_item_radius"
					       value="<?php echo esc_attr( $layout_opts['sidebar_item_radius'] ); ?>"
					       min="0" max="24" step="1" class="small-text" /> <?php esc_html_e( 'px', 'agency-pulse-admin-menu' ); ?>
				</div>
			</div>

			<!-- Content & Cards -->
			<div class="aamo-settings-panel">
				<h2 class="aamo-settings-panel-title"><?php esc_html_e( 'Content & Cards', 'agency-pulse-admin-menu' ); ?></h2>
				<div class="aamo-dm-toggle-row">
					<label class="aamo-toggle-label">
						<input type="checkbox" id="aamo-content-cards-enabled" data-layout-field="content_cards_enabled" value="1"<?php checked( $layout_opts['content_cards_enabled'] ); ?> />
						<?php esc_html_e( 'Enable Content & Cards', 'agency-pulse-admin-menu' ); ?>
					</label>
				</div>
				<p class="aamo-settings-description"><?php esc_html_e( 'Style the content area background and admin metabox cards.', 'agency-pulse-admin-menu' ); ?></p>

				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Content Background', 'agency-pulse-admin-menu' ); ?></span>
					<input type="text" id="aamo-content-bg" data-layout-field="content_bg"
					       value="<?php echo esc_attr( $layout_opts['content_bg'] ); ?>"
					       class="aamo-layout-color-input" data-default-color="#f0f0f1" />
				</div>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Card Corner Radius', 'agency-pulse-admin-menu' ); ?></span>
					<input type="number" id="aamo-card-radius" data-layout-field="card_radius"
					       value="<?php echo esc_attr( $layout_opts['card_radius'] ); ?>"
					       min="0" max="16" step="1" class="small-text" /> <?php esc_html_e( 'px', 'agency-pulse-admin-menu' ); ?>
				</div>
				<div class="aamo-color-row">
					<label class="aamo-toggle-label">
						<input type="checkbox" id="aamo-card-shadow" data-layout-field="card_shadow" value="1"<?php checked( $layout_opts['card_shadow'] ); ?> />
						<span><?php esc_html_e( 'Card Drop Shadow', 'agency-pulse-admin-menu' ); ?></span>
					</label>
				</div>
				<div id="aamo-shadow-options"<?php echo empty( $layout_opts['card_shadow'] ) ? ' style="display:none"' : ''; ?>>
					<div class="aamo-color-row aamo-slider-row">
						<span class="aamo-color-label"><?php esc_html_e( 'Opacity', 'agency-pulse-admin-menu' ); ?></span>
						<input type="range" id="aamo-shadow-opacity" data-layout-field="card_shadow_opacity"
						       value="<?php echo esc_attr( $layout_opts['card_shadow_opacity'] ); ?>"
						       min="0" max="50" step="1" class="aamo-slider" />
						<span class="aamo-slider-value"><?php echo esc_html( $layout_opts['card_shadow_opacity'] ); ?>%</span>
					</div>
					<div class="aamo-color-row aamo-slider-row">
						<span class="aamo-color-label"><?php esc_html_e( 'Offset', 'agency-pulse-admin-menu' ); ?></span>
						<input type="range" id="aamo-shadow-offset" data-layout-field="card_shadow_offset"
						       value="<?php echo esc_attr( $layout_opts['card_shadow_offset'] ); ?>"
						       min="0" max="20" step="1" class="aamo-slider" />
						<span class="aamo-slider-value"><?php echo esc_html( $layout_opts['card_shadow_offset'] ); ?>px</span>
					</div>
					<div class="aamo-color-row aamo-slider-row">
						<span class="aamo-color-label"><?php esc_html_e( 'Blur', 'agency-pulse-admin-menu' ); ?></span>
						<input type="range" id="aamo-shadow-blur" data-layout-field="card_shadow_blur"
						       value="<?php echo esc_attr( $layout_opts['card_shadow_blur'] ); ?>"
						       min="0" max="20" step="1" class="aamo-slider" />
						<span class="aamo-slider-value"><?php echo esc_html( $layout_opts['card_shadow_blur'] ); ?>px</span>
					</div>
				</div>
			</div>

			<!-- Interactive Elements -->
			<div class="aamo-settings-panel">
				<h2 class="aamo-settings-panel-title"><?php esc_html_e( 'Interactive Elements', 'agency-pulse-admin-menu' ); ?></h2>
				<div class="aamo-dm-toggle-row">
					<label class="aamo-toggle-label">
						<input type="checkbox" id="aamo-interactive-enabled" data-layout-field="interactive_enabled" value="1"<?php checked( $layout_opts['interactive_enabled'] ); ?> />
						<?php esc_html_e( 'Enable Interactive Elements', 'agency-pulse-admin-menu' ); ?>
					</label>
				</div>
				<p class="aamo-settings-description"><?php esc_html_e( 'Border radius for buttons and form inputs across the admin.', 'agency-pulse-admin-menu' ); ?></p>

				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Button Corner Radius', 'agency-pulse-admin-menu' ); ?></span>
					<input type="number" id="aamo-button-radius" data-layout-field="button_radius"
					       value="<?php echo esc_attr( $layout_opts['button_radius'] ); ?>"
					       min="0" max="12" step="1" class="small-text" /> <?php esc_html_e( 'px', 'agency-pulse-admin-menu' ); ?>
				</div>
				<div class="aamo-color-row">
					<span class="aamo-color-label"><?php esc_html_e( 'Input / Select Radius', 'agency-pulse-admin-menu' ); ?></span>
					<input type="number" id="aamo-input-radius" data-layout-field="input_radius"
					       value="<?php echo esc_attr( $layout_opts['input_radius'] ); ?>"
					       min="0" max="12" step="1" class="small-text" /> <?php esc_html_e( 'px', 'agency-pulse-admin-menu' ); ?>
				</div>
			</div>

			<!-- Typography -->
			<div class="aamo-settings-panel">
				<h2 class="aamo-settings-panel-title"><?php esc_html_e( 'Typography', 'agency-pulse-admin-menu' ); ?></h2>
				<div class="aamo-dm-toggle-row">
					<label class="aamo-toggle-label">
						<input type="checkbox" id="aamo-typography-enabled" data-layout-field="typography_enabled" value="1"<?php checked( $layout_opts['typography_enabled'] ); ?> />
						<?php esc_html_e( 'Enable Typography', 'agency-pulse-admin-menu' ); ?>
					</label>
				</div>
				<p class="aamo-settings-description"><?php esc_html_e( 'Override the default WordPress admin font stack.', 'agency-pulse-admin-menu' ); ?></p>

				<div class="aamo-access-modes" style="margin-bottom:16px">
					<label class="aamo-access-mode-option">
						<input type="radio" name="aamo_font_source" value="system"
						       class="aamo-font-source-radio" data-layout-field="font_source"
						       <?php checked( $layout_opts['font_source'], 'system' ); ?> />
						<span class="aamo-access-mode-label"><?php esc_html_e( 'System Default', 'agency-pulse-admin-menu' ); ?></span>
						<span class="aamo-access-mode-desc"><?php esc_html_e( 'Use the standard WordPress admin font stack — no change.', 'agency-pulse-admin-menu' ); ?></span>
					</label>
					<label class="aamo-access-mode-option">
						<input type="radio" name="aamo_font_source" value="custom"
						       class="aamo-font-source-radio" data-layout-field="font_source"
						       <?php checked( $layout_opts['font_source'], 'custom' ); ?> />
						<span class="aamo-access-mode-label"><?php esc_html_e( 'Custom Font', 'agency-pulse-admin-menu' ); ?></span>
						<span class="aamo-access-mode-desc"><?php esc_html_e( 'Load a web font and apply it across all admin pages.', 'agency-pulse-admin-menu' ); ?></span>
					</label>
				</div>

				<div id="aamo-custom-font-fields"<?php echo 'custom' !== $layout_opts['font_source'] ? ' style="display:none"' : ''; ?>>
					<div class="aamo-color-row">
						<span class="aamo-color-label"><?php esc_html_e( 'Font Family', 'agency-pulse-admin-menu' ); ?></span>
						<input type="text" id="aamo-font-family" data-layout-field="font_family"
						       value="<?php echo esc_attr( $layout_opts['font_family'] ); ?>"
						       class="regular-text"
						       placeholder="<?php esc_attr_e( "'Inter', sans-serif", 'agency-pulse-admin-menu' ); ?>" />
					</div>
					<div class="aamo-color-row" style="align-items:flex-start">
						<span class="aamo-color-label" style="padding-top:4px"><?php esc_html_e( 'Font URL', 'agency-pulse-admin-menu' ); ?></span>
						<div>
							<input type="url" id="aamo-font-url" data-layout-field="font_url"
							       value="<?php echo esc_attr( $layout_opts['font_url'] ); ?>"
							       class="regular-text"
							       placeholder="https://fonts.googleapis.com/css2?family=Inter" />
							<p class="description" style="margin-top:4px"><?php esc_html_e( 'Paste a Google Fonts CSS URL (the /css2 link, not the embed snippet). Must start with https://.', 'agency-pulse-admin-menu' ); ?></p>
						</div>
					</div>
				</div>
			</div>

			<!-- Save / Reset buttons -->
			<div class="aamo-settings-panel">
				<div class="aamo-settings-action-row">
					<button type="button" id="aamo-layout-save" class="button button-primary">
						<?php esc_html_e( 'Save Layout Settings', 'agency-pulse-admin-menu' ); ?>
					</button>
					<button type="button" id="aamo-layout-reset" class="button">
						<?php esc_html_e( 'Reset to Defaults', 'agency-pulse-admin-menu' ); ?>
					</button>
					<span id="aamo-layout-status" class="aamo-status" aria-live="polite"></span>
				</div>
			</div>

		</div><!-- /#aamo-layout-panels -->

	</div><!-- /#aamo-panel-layout -->

	</div><!-- /.aamo-tab-content -->

	</div><!-- /.aamo-tabs-card -->

</div><!-- /.wrap -->

<?php
/*
 * admin_print_footer_scripts does not reliably fire on this page, so the
 * scripts it normally outputs (quicktags init, media modal templates, etc.)
 * are forced here directly while the page is still rendering.
 */
do_action( 'admin_print_footer_scripts' );

if ( function_exists( 'wp_print_media_templates' ) ) {
	wp_print_media_templates();
}
?>
