<?php
// ── Core colors ──────────────────────────────────────────────────────────────
$adminPrimary   = isset($tpl['adminPrimary'])   ? $tpl['adminPrimary']   : '#F97316';
$adminSecondary = isset($tpl['adminSecondary']) ? $tpl['adminSecondary'] : '#64748B';
$adminSidebar   = isset($tpl['adminSidebar'])   ? $tpl['adminSidebar']   : '#FFFFFF';
$adminSuccess   = isset($tpl['adminSuccess'])   ? $tpl['adminSuccess']   : '#10B981';
$adminWarning   = isset($tpl['adminWarning'])   ? $tpl['adminWarning']   : '#F59E0B';
$adminInfo      = isset($tpl['adminInfo'])      ? $tpl['adminInfo']      : '#3B6FA8';
$adminDanger    = isset($tpl['adminDanger'])    ? $tpl['adminDanger']    : '#EF4444';
$tableDensity   = isset($tpl['adminTableDensity']) ? $tpl['adminTableDensity'] : 'default';
// ── Sidebar sub-colors ───────────────────────────────────────────────────────
$adminSidebarSecondary = isset($tpl['adminSidebarSecondary']) ? $tpl['adminSidebarSecondary'] : '#F8FAFC';
$adminSidebarActive    = isset($tpl['adminSidebarActive'])    ? $tpl['adminSidebarActive']    : '#FFF1E6';
$adminSidebarText      = isset($tpl['adminSidebarText'])      ? $tpl['adminSidebarText']      : '#64748B';
$adminSidebarMuted     = isset($tpl['adminSidebarMuted'])     ? $tpl['adminSidebarMuted']     : '#94A3B8';
// ── Content area colors ──────────────────────────────────────────────────────
$adminMainBg      = isset($tpl['adminMainBg'])      ? $tpl['adminMainBg']      : '#F8FAFC';
$adminCardBg2     = isset($tpl['adminCardBg2'])      ? $tpl['adminCardBg2']     : '#FFFFFF';
$adminTableBorder = isset($tpl['adminTableBorder'])  ? $tpl['adminTableBorder'] : '#E2E8F0';
$adminInputBorder = isset($tpl['adminInputBorder'])  ? $tpl['adminInputBorder'] : '#E2E8F0';
$adminMainText    = isset($tpl['adminMainText'])      ? $tpl['adminMainText']    : '#0F172A';
// ── Accent colors ────────────────────────────────────────────────────────────
$adminAccent    = isset($tpl['adminAccent'])    ? $tpl['adminAccent']    : '#F97316';
$adminLinkColor = isset($tpl['adminLinkColor']) ? $tpl['adminLinkColor'] : '#F97316';
// ── Independent table colors ────────────────────────────────────────────────
$adminTableHeaderBg = isset($tpl['adminTableHeaderBg']) ? $tpl['adminTableHeaderBg'] : '#F8FAFC';
$adminTableRowBg    = isset($tpl['adminTableRowBg'])    ? $tpl['adminTableRowBg']    : '#FFFFFF';
$adminTableRowAlt   = isset($tpl['adminTableRowAlt'])   ? $tpl['adminTableRowAlt']   : '#F8FAFC';
$adminTableRowHover = isset($tpl['adminTableRowHover']) ? $tpl['adminTableRowHover'] : '#FFF7ED';
$adminTableText     = isset($tpl['adminTableText'])     ? $tpl['adminTableText']     : '#334155';
// ── Independent typography & icons ──────────────────────────────────────────
$adminHeadingText   = isset($tpl['adminHeadingText'])   ? $tpl['adminHeadingText']   : '#0F172A';
$adminMutedText     = isset($tpl['adminMutedText'])     ? $tpl['adminMutedText']     : '#64748B';
$adminLinkText      = isset($tpl['adminLinkText'])      ? $tpl['adminLinkText']      : '#F97316';
$adminSidebarIcon   = isset($tpl['adminSidebarIcon'])   ? $tpl['adminSidebarIcon']   : '#64748B';
$adminIconColor     = isset($tpl['adminIconColor'])     ? $tpl['adminIconColor']     : '#64748B';
// ── Topbar ───────────────────────────────────────────────────────────────────
$adminTopbarBg      = isset($tpl['adminTopbarBg'])      ? $tpl['adminTopbarBg']      : '#FFFFFF';
// ── Form inputs ──────────────────────────────────────────────────────────────
$adminInputBg       = isset($tpl['adminInputBg'])       ? $tpl['adminInputBg']       : '#FFFFFF';
// ── Card / ibox border ───────────────────────────────────────────────────────
$adminCardBorder    = isset($tpl['adminCardBorder'])    ? $tpl['adminCardBorder']    : '#E2E8F0';
// ── Branding ─────────────────────────────────────────────────────────────────
$adminBrandTitle       = isset($tpl['adminBrandTitle'])    ? $tpl['adminBrandTitle']    : __('script_name', true);
$adminBrandSubtitle    = isset($tpl['adminBrandSubtitle']) ? $tpl['adminBrandSubtitle'] : __('visual_default_brand_subtitle', true);
$adminSidebarLogoUrl   = pjUtil::getAdminSidebarLogoUrl($tpl['option_arr']);
$defaultSidebarLogoUrl = PJ_INSTALL_URL . $controller->getConstant('pjBase', 'PLUGIN_IMG_PATH') . 'logo.png';
$visualSidebarLogoUrl  = !empty($adminSidebarLogoUrl) ? $adminSidebarLogoUrl : $defaultSidebarLogoUrl;
$hasCustomSidebarLogo  = !empty($tpl['option_arr']['o_admin_sidebar_logo']);

if (!function_exists('pjActionVisualContrastColor')) {
	function pjActionVisualContrastColor($hex)
	{
		$r = hexdec(substr($hex, 1, 2)) / 255;
		$g = hexdec(substr($hex, 3, 2)) / 255;
		$b = hexdec(substr($hex, 5, 2)) / 255;
		$rL = $r <= 0.03928 ? $r / 12.92 : pow(($r + 0.055) / 1.055, 2.4);
		$gL = $g <= 0.03928 ? $g / 12.92 : pow(($g + 0.055) / 1.055, 2.4);
		$bL = $b <= 0.03928 ? $b / 12.92 : pow(($b + 0.055) / 1.055, 2.4);
		return (0.2126 * $rL + 0.7152 * $gL + 0.0722 * $bL) > 0.5 ? '#1a1a1a' : '#ffffff';
	}
}
// ── Professional Preset Palettes ────────────────────────────────────────────
$palettes = array(

	array(
		'name' => 'Default',
		'primary' => '#F97316',
		'secondary' => '#64748B',
		'sidebar' => '#FFFFFF',
		'success' => '#10B981',
		'warning' => '#F59E0B',
		'info' => '#3B6FA8',
		'danger' => '#EF4444',

		'sidebar_secondary' => '#F8FAFC',
		'sidebar_active' => '#FFF1E6',
		'sidebar_text' => '#64748B',
		'sidebar_muted' => '#94A3B8',

		'main_bg' => '#F8FAFC',
		'card_bg2' => '#FFFFFF',
		'table_border' => '#E2E8F0',
		'input_border' => '#E2E8F0',

		'main_text' => '#0F172A',
		'accent' => '#F97316',
		'link_color' => '#F97316',

		'table_header_bg' => '#F8FAFC',
		'table_row_bg' => '#FFFFFF',
		'table_row_alt' => '#F8FAFC',
		'table_row_hover' => '#FFF7ED',

		'table_text' => '#334155',
		'heading_text' => '#0F172A',
		'muted_text' => '#64748B',
		'link_text' => '#F97316',

		'sidebar_icon' => '#64748B',
		'icon_color' => '#64748B',

		'topbar_bg' => '#FFFFFF',
		'input_bg' => '#FFFFFF',
		'card_border' => '#E2E8F0'
	),

	array(
		'name' => 'Midnight',
		'primary' => '#334155',
		'secondary' => '#475569',
		'sidebar' => '#0F172A',
		'success' => '#10B981',
		'warning' => '#F59E0B',
		'info' => '#38BDF8',
		'danger' => '#EF4444',

		'sidebar_secondary' => '#1E293B',
		'sidebar_active' => '#334155',
		'sidebar_text' => '#F8FAFC',
		'sidebar_muted' => '#94A3B8',

		'main_bg' => '#F8FAFC',
		'card_bg2' => '#FFFFFF',
		'table_border' => '#E2E8F0',
		'input_border' => '#CBD5E1',

		'main_text' => '#0F172A',
		'accent' => '#334155',
		'link_color' => '#334155',

		'table_header_bg' => '#F1F5F9',
		'table_row_bg' => '#FFFFFF',
		'table_row_alt' => '#F8FAFC',
		'table_row_hover' => '#F1F5F9',

		'table_text' => '#334155',
		'heading_text' => '#0F172A',
		'muted_text' => '#64748B',
		'link_text' => '#334155',

		'sidebar_icon' => '#F8FAFC',
		'icon_color' => '#64748B',

		'topbar_bg' => '#FFFFFF',
		'input_bg' => '#FFFFFF',
		'card_border' => '#E2E8F0'
	),

	array(
		'name' => 'Forest',
		'primary' => '#3F5F45',
		'secondary' => '#6B7280',
		'sidebar' => '#16281D',
		'success' => '#22C55E',
		'warning' => '#EAB308',
		'info' => '#38BDF8',
		'danger' => '#EF4444',

		'sidebar_secondary' => '#1F3327',
		'sidebar_active' => '#2E4A38',
		'sidebar_text' => '#F0FDF4',
		'sidebar_muted' => '#A7BFAE',

		'main_bg' => '#F7F8F7',
		'card_bg2' => '#FFFFFF',
		'table_border' => '#E5E7EB',
		'input_border' => '#D1D5DB',

		'main_text' => '#1F2937',
		'accent' => '#3F5F45',
		'link_color' => '#3F5F45',

		'table_header_bg' => '#F3F4F6',
		'table_row_bg' => '#FFFFFF',
		'table_row_alt' => '#F9FAFB',
		'table_row_hover' => '#F3F4F6',

		'table_text' => '#374151',
		'heading_text' => '#1F2937',
		'muted_text' => '#6B7280',
		'link_text' => '#3F5F45',

		'sidebar_icon' => '#F0FDF4',
		'icon_color' => '#6B7280',

		'topbar_bg' => '#FFFFFF',
		'input_bg' => '#FFFFFF',
		'card_border' => '#E5E7EB'
	),

	array(
		'name' => 'Executive',
		'primary' => '#1E3A5F',
		'secondary' => '#475569',
		'sidebar' => '#0F172A',
		'success' => '#16A34A',
		'warning' => '#F59E0B',
		'info' => '#2563EB',
		'danger' => '#DC2626',

		'sidebar_secondary' => '#172554',
		'sidebar_active' => '#1E3A5F',
		'sidebar_text' => '#F8FAFC',
		'sidebar_muted' => '#94A3B8',

		'main_bg' => '#F8FAFC',
		'card_bg2' => '#FFFFFF',
		'table_border' => '#E2E8F0',
		'input_border' => '#CBD5E1',

		'main_text' => '#0F172A',
		'accent' => '#1E3A5F',
		'link_color' => '#1E3A5F',

		'table_header_bg' => '#F1F5F9',
		'table_row_bg' => '#FFFFFF',
		'table_row_alt' => '#F8FAFC',
		'table_row_hover' => '#F1F5F9',

		'table_text' => '#334155',
		'heading_text' => '#0F172A',
		'muted_text' => '#64748B',
		'link_text' => '#1E3A5F',

		'sidebar_icon' => '#F8FAFC',
		'icon_color' => '#64748B',

		'topbar_bg' => '#FFFFFF',
		'input_bg' => '#FFFFFF',
		'card_border' => '#E2E8F0'
	),

	array(
		'name' => 'Carbon',
		'primary' => '#3F3F46',
		'secondary' => '#71717A',
		'sidebar' => '#18181B',
		'success' => '#22C55E',
		'warning' => '#FACC15',
		'info' => '#60A5FA',
		'danger' => '#F87171',

		'sidebar_secondary' => '#27272A',
		'sidebar_active' => '#3F3F46',
		'sidebar_text' => '#FAFAFA',
		'sidebar_muted' => '#A1A1AA',

		'main_bg' => '#F5F5F5',
		'card_bg2' => '#FFFFFF',
		'table_border' => '#E4E4E7',
		'input_border' => '#D4D4D8',

		'main_text' => '#18181B',
		'accent' => '#3F3F46',
		'link_color' => '#3F3F46',

		'table_header_bg' => '#F4F4F5',
		'table_row_bg' => '#FFFFFF',
		'table_row_alt' => '#FAFAFA',
		'table_row_hover' => '#F4F4F5',

		'table_text' => '#3F3F46',
		'heading_text' => '#18181B',
		'muted_text' => '#71717A',
		'link_text' => '#3F3F46',

		'sidebar_icon' => '#FAFAFA',
		'icon_color' => '#71717A',

		'topbar_bg' => '#FFFFFF',
		'input_bg' => '#FFFFFF',
		'card_border' => '#E4E4E7'
	),

	array(
		'name' => __('visual_palette_custom', true),
		'type' => 'custom'
	),
);

// ── PHP-side palette detection (server-rendered active class) ────────────────
// Compare all current color values against each preset palette.
// This sets the correct active card on page load — no JS timing dependency.
$activePaletteName = null;
$_currentColors = array(
	'primary'          => strtoupper($adminPrimary),
	'secondary'        => strtoupper($adminSecondary),
	'sidebar'          => strtoupper($adminSidebar),
	'success'          => strtoupper($adminSuccess),
	'warning'          => strtoupper($adminWarning),
	'info'             => strtoupper($adminInfo),
	'danger'           => strtoupper($adminDanger),
	'sidebar_secondary' => strtoupper($adminSidebarSecondary),
	'sidebar_active'   => strtoupper($adminSidebarActive),
	'sidebar_text'     => strtoupper($adminSidebarText),
	'sidebar_muted'    => strtoupper($adminSidebarMuted),
	'main_bg'          => strtoupper($adminMainBg),
	'card_bg2'         => strtoupper($adminCardBg2),
	'table_border'     => strtoupper($adminTableBorder),
	'input_border'     => strtoupper($adminInputBorder),
	'main_text'        => strtoupper($adminMainText),
	'accent'           => strtoupper($adminAccent),
	'link_color'       => strtoupper($adminLinkColor),
	'table_header_bg'  => strtoupper($adminTableHeaderBg),
	'table_row_bg'     => strtoupper($adminTableRowBg),
	'table_row_alt'    => strtoupper($adminTableRowAlt),
	'table_row_hover'  => strtoupper($adminTableRowHover),
	'table_text'       => strtoupper($adminTableText),
	'heading_text'     => strtoupper($adminHeadingText),
	'muted_text'       => strtoupper($adminMutedText),
	'link_text'        => strtoupper($adminLinkText),
	'sidebar_icon'     => strtoupper($adminSidebarIcon),
	'icon_color'       => strtoupper($adminIconColor),
	'topbar_bg'        => strtoupper($adminTopbarBg),
	'input_bg'         => strtoupper($adminInputBg),
	'card_border'      => strtoupper($adminCardBorder),
);
foreach ($palettes as $_pal) {
	if (isset($_pal['type']) && $_pal['type'] === 'custom') continue;
	$_match = true;
	foreach ($_currentColors as $_field => $_curVal) {
		// Use same fallback logic as the data-attribute HTML output
		if ($_field === 'table_header_bg') {
			$_pv = isset($_pal['table_header_bg']) ? $_pal['table_header_bg'] : $_pal['primary'];
		} elseif ($_field === 'table_row_bg') {
			$_pv = isset($_pal['table_row_bg'])    ? $_pal['table_row_bg']    : '#FFFFFF';
		} elseif ($_field === 'table_row_alt') {
			$_pv = isset($_pal['table_row_alt'])   ? $_pal['table_row_alt']   : '#FAFAFA';
		} elseif ($_field === 'table_row_hover') {
			$_pv = isset($_pal['table_row_hover']) ? $_pal['table_row_hover'] : '#F3F4F6';
		} elseif ($_field === 'table_text') {
			$_pv = isset($_pal['table_text'])      ? $_pal['table_text']      : $_pal['main_text'];
		} elseif ($_field === 'heading_text') {
			$_pv = isset($_pal['heading_text'])    ? $_pal['heading_text']    : '#111827';
		} elseif ($_field === 'muted_text') {
			$_pv = isset($_pal['muted_text'])      ? $_pal['muted_text']      : '#6B7280';
		} elseif ($_field === 'link_text') {
			$_pv = isset($_pal['link_text'])       ? $_pal['link_text']       : '#2563EB';
		} elseif ($_field === 'sidebar_icon') {
			$_pv = isset($_pal['sidebar_icon'])    ? $_pal['sidebar_icon']    : $_pal['sidebar_text'];
		} elseif ($_field === 'icon_color') {
			$_pv = isset($_pal['icon_color'])      ? $_pal['icon_color']      : '#6B7280';
		} elseif ($_field === 'topbar_bg') {
			$_pv = isset($_pal['topbar_bg'])       ? $_pal['topbar_bg']       : '#F8F9FA';
		} elseif ($_field === 'input_bg') {
			$_pv = isset($_pal['input_bg'])        ? $_pal['input_bg']        : '#FFFFFF';
		} elseif ($_field === 'card_border') {
			$_pv = isset($_pal['card_border'])     ? $_pal['card_border']     : '#E5E7EB';
		} else {
			$_pv = isset($_pal[$_field]) ? $_pal[$_field] : null;
		}
		if ($_pv === null || strtoupper($_pv) !== $_curVal) {
			$_match = false;
			break;
		}
	}
	if ($_match) {
		$activePaletteName = $_pal['name'];
		break;
	}
}
unset($_currentColors, $_pal, $_match, $_field, $_curVal, $_pv);

// Build preview CSS variable inline string for PHP initial render
$pvVars = implode(';', array(
	'--pv-sidebar:' . $adminSidebar,
	'--pv-sidebar-secondary:' . $adminSidebarSecondary,
	'--pv-sidebar-active:' . $adminSidebarActive,
	'--pv-sidebar-text:' . $adminSidebarText,
	'--pv-sidebar-muted:' . $adminSidebarMuted,
	'--pv-main-bg:' . $adminMainBg,
	'--pv-card-bg:' . $adminCardBg2,
	'--pv-table-border:' . $adminTableBorder,
	'--pv-input-border:' . $adminInputBorder,
	'--pv-main-text:' . $adminMainText,
	'--pv-primary:' . $adminPrimary,
	'--pv-accent:' . $adminAccent,
	'--pv-secondary:' . $adminSecondary,
	'--pv-link:' . $adminLinkColor,
	'--pv-success:' . $adminSuccess,
	'--pv-warning:' . $adminWarning,
	'--pv-info:' . $adminInfo,
	'--pv-danger:' . $adminDanger,
	'--pv-table-header-bg:' . $adminTableHeaderBg,
	'--pv-table-row-bg:' . $adminTableRowBg,
	'--pv-table-row-alt:' . $adminTableRowAlt,
	'--pv-table-row-hover:' . $adminTableRowHover,
	'--pv-table-text:' . $adminTableText,
	'--pv-heading-text:' . $adminHeadingText,
	'--pv-muted-text:' . $adminMutedText,
	'--pv-link-text:' . $adminLinkText,
	'--pv-sidebar-icon:' . $adminSidebarIcon,
	'--pv-icon-color:' . $adminIconColor,
	'--pv-topbar-bg:' . $adminTopbarBg,
	'--pv-topbar-text:' . pjActionVisualContrastColor($adminTopbarBg),
	'--pv-input-bg:' . $adminInputBg,
	'--pv-input-text:' . pjActionVisualContrastColor($adminInputBg),
	'--pv-card-border:' . $adminCardBorder,
));
?>

<div class="row wrapper border-bottom white-bg page-heading">
	<div class="col-sm-12">
		<h2><i class="fa fa-paint-brush m-r-xs"></i> <?php __('visual_admin_theme_customization'); ?></h2>
		<p class="m-b-none">
			<i class="fa fa-info-circle"></i>
			<?php __('visual_admin_theme_customization_desc'); ?>
			<?php __('visual_admin_theme_live_desc'); ?>
			<strong><?php __('visual_admin_theme_save_notice'); ?></strong>
		</p>
	</div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">
	<?php
	$error_code = $controller->_get->toString('err');
	if (!empty($error_code)) {
		$titles = __('plugin_base_error_titles', true);
		$bodies = __('plugin_base_error_bodies', true);
		if (in_array($error_code, array('PBS02'))) { ?>
			<div class="alert alert-success"><i class="fa fa-check m-r-xs"></i> <strong><?php echo @$titles[$error_code]; ?></strong> <?php echo @$bodies[$error_code] ?></div>
		<?php }
		if ($error_code === 'logo_upload') {
			$logoError = isset($_SESSION['pj_sidebar_logo_upload_error']) ? $_SESSION['pj_sidebar_logo_upload_error'] : 'Logo upload failed.';
			unset($_SESSION['pj_sidebar_logo_upload_error']); ?>
			<div class="alert alert-danger"><i class="fa fa-exclamation-triangle m-r-xs"></i> <?php echo htmlspecialchars($logoError, ENT_QUOTES, 'UTF-8'); ?></div>
	<?php }
	} ?>

	<div class="pj-admin-theme">
		<div class="row">
			<div class="col-lg-7">

				<!-- ══ HOW IT WORKS BANNER ══ -->
				<div class="pj-visual-help">
					<div class="pj-visual-help-icon"><i class="fa fa-paint-brush"></i></div>
					<div>
						<div class="pj-visual-help-title"><?php __('visual_how_colors_work_title'); ?></div>
						<div class="pj-visual-help-text">
							<strong><?php __('visual_how_colors_work_intro'); ?></strong>
							<?php __('visual_how_colors_work_picker'); ?> &nbsp;|&nbsp;
							<?php __('visual_how_colors_work_hex'); ?> (e.g. <code class="pj-visual-inline-code">#F9761B</code>) &nbsp;|&nbsp;
							<?php __('visual_how_colors_work_preset'); ?><br>
							<?php __('visual_how_colors_work_save'); ?>
						</div>
					</div>
				</div>

				<!-- ══ PALETTES ══ -->
				<div class="pj-section">
					<h3 class="pj-section-title"><i class="fa fa-th-large"></i> <?php __('visual_quick_preset_palettes'); ?></h3>
					<p class="pj-section-desc"><?php __('visual_quick_preset_palettes_desc'); ?></p>
					<div class="pj-admin-palettes">
						<?php foreach ($palettes as $pal): ?>
							<?php if (isset($pal['type']) && $pal['type'] === 'custom'): ?>
								<div class="pj-admin-palette pj-admin-palette--custom<?php echo ($activePaletteName === null) ? ' active' : ''; ?>" data-palette-type="custom">
									<div class="pj-palette-name"><i class="fa fa-paint-brush m-r-xs"></i> <?php __('visual_palette_custom'); ?></div>
									<div class="pj-palette-custom-hint"><?php __('visual_palette_custom_hint'); ?></div>
								</div>
							<?php else: ?>
								<div class="pj-admin-palette<?php echo ($activePaletteName !== null && $pal['name'] === $activePaletteName) ? ' active' : ''; ?>"
									data-primary="<?php echo $pal['primary']; ?>"
									data-secondary="<?php echo $pal['secondary']; ?>"
									data-sidebar="<?php echo $pal['sidebar']; ?>"
									data-success="<?php echo $pal['success']; ?>"
									data-warning="<?php echo $pal['warning']; ?>"
									data-info="<?php echo $pal['info']; ?>"
									data-danger="<?php echo $pal['danger']; ?>"
									data-sidebar-secondary="<?php echo $pal['sidebar_secondary']; ?>"
									data-sidebar-active="<?php echo $pal['sidebar_active']; ?>"
									data-sidebar-text="<?php echo $pal['sidebar_text']; ?>"
									data-sidebar-muted="<?php echo $pal['sidebar_muted']; ?>"
									data-main-bg="<?php echo $pal['main_bg']; ?>"
									data-card-bg2="<?php echo $pal['card_bg2']; ?>"
									data-table-border="<?php echo $pal['table_border']; ?>"
									data-input-border="<?php echo $pal['input_border']; ?>"
									data-main-text="<?php echo $pal['main_text']; ?>"
									data-accent="<?php echo $pal['accent']; ?>"
									data-link-color="<?php echo $pal['link_color']; ?>"
									data-table-header-bg="<?php echo isset($pal['table_header_bg']) ? $pal['table_header_bg'] : $pal['primary']; ?>"
									data-table-row-bg="<?php echo isset($pal['table_row_bg']) ? $pal['table_row_bg'] : '#FFFFFF'; ?>"
									data-table-row-alt="<?php echo isset($pal['table_row_alt']) ? $pal['table_row_alt'] : '#FAFAFA'; ?>"
									data-table-row-hover="<?php echo isset($pal['table_row_hover']) ? $pal['table_row_hover'] : '#F3F4F6'; ?>"
									data-table-text="<?php echo isset($pal['table_text']) ? $pal['table_text'] : $pal['main_text']; ?>"
									data-heading-text="<?php echo isset($pal['heading_text']) ? $pal['heading_text'] : '#111827'; ?>"
									data-muted-text="<?php echo isset($pal['muted_text']) ? $pal['muted_text'] : '#6B7280'; ?>"
									data-link-text="<?php echo isset($pal['link_text']) ? $pal['link_text'] : '#2563EB'; ?>"
									data-sidebar-icon="<?php echo isset($pal['sidebar_icon']) ? $pal['sidebar_icon'] : $pal['sidebar_text']; ?>"
									data-icon-color="<?php echo isset($pal['icon_color']) ? $pal['icon_color'] : '#6B7280'; ?>"
									data-topbar-bg="<?php echo isset($pal['topbar_bg']) ? $pal['topbar_bg'] : '#F8F9FA'; ?>"
									data-input-bg="<?php echo isset($pal['input_bg']) ? $pal['input_bg'] : '#FFFFFF'; ?>"
									data-card-border="<?php echo isset($pal['card_border']) ? $pal['card_border'] : '#E5E7EB'; ?>">
									<div class="pj-palette-name"><?php echo htmlspecialchars($pal['name']); ?></div>
									<div class="pj-palette-swatches">
										<div class="pj-palette-swatch" style="background:<?php echo $pal['sidebar']; ?>" title="<?php __('visual_swatch_sidebar', true, true); ?>"></div>
										<div class="pj-palette-swatch" style="background:<?php echo $pal['sidebar_secondary']; ?>" title="<?php __('visual_swatch_sidebar_secondary', true, true); ?>"></div>
										<div class="pj-palette-swatch" style="background:<?php echo $pal['sidebar_active']; ?>" title="<?php __('visual_swatch_sidebar_active', true, true); ?>"></div>
										<div class="pj-palette-swatch" style="background:<?php echo $pal['sidebar_text']; ?>" title="<?php __('visual_swatch_sidebar_text', true, true); ?>"></div>
										<div class="pj-palette-swatch" style="background:<?php echo $pal['primary']; ?>" title="<?php __('visual_swatch_primary', true, true); ?>"></div>
										<div class="pj-palette-swatch" style="background:<?php echo $pal['accent']; ?>" title="<?php __('visual_swatch_accent', true, true); ?>"></div>
										<div class="pj-palette-swatch pj-palette-swatch--light" style="background:<?php echo $pal['main_bg']; ?>" title="<?php __('visual_swatch_main_bg', true, true); ?>"></div>
										<div class="pj-palette-swatch pj-palette-swatch--light" style="background:<?php echo $pal['card_bg2']; ?>" title="<?php __('visual_swatch_card_bg', true, true); ?>"></div>
										<div class="pj-palette-swatch pj-palette-swatch--light" style="background:<?php echo isset($pal['table_header_bg']) ? $pal['table_header_bg'] : $pal['primary']; ?>" title="<?php __('visual_swatch_table_header', true, true); ?>"></div>
										<div class="pj-palette-swatch pj-palette-swatch--light" style="background:<?php echo isset($pal['table_row_bg']) ? $pal['table_row_bg'] : '#FFFFFF'; ?>" title="<?php __('visual_swatch_table_row', true, true); ?>"></div>
										<div class="pj-palette-swatch pj-palette-swatch--light" style="background:<?php echo isset($pal['table_row_hover']) ? $pal['table_row_hover'] : '#F3F4F6'; ?>" title="<?php __('visual_swatch_table_hover', true, true); ?>"></div>
										<div class="pj-palette-swatch pj-palette-swatch--light" style="background:<?php echo $pal['input_border']; ?>" title="<?php __('visual_swatch_input_border', true, true); ?>"></div>
										<div class="pj-palette-swatch" style="background:<?php echo $pal['secondary']; ?>" title="<?php __('visual_swatch_secondary', true, true); ?>"></div>
										<div class="pj-palette-swatch" style="background:<?php echo $pal['success']; ?>" title="<?php __('visual_swatch_success', true, true); ?>"></div>
										<div class="pj-palette-swatch" style="background:<?php echo $pal['warning']; ?>" title="<?php __('visual_swatch_warning', true, true); ?>"></div>
										<div class="pj-palette-swatch" style="background:<?php echo $pal['info']; ?>" title="<?php __('visual_swatch_info', true, true); ?>"></div>
										<div class="pj-palette-swatch" style="background:<?php echo $pal['danger']; ?>" title="<?php __('visual_swatch_danger', true, true); ?>"></div>
										<div class="pj-palette-swatch" style="background:<?php echo isset($pal['icon_color']) ? $pal['icon_color'] : '#6B7280'; ?>" title="<?php __('visual_swatch_icon', true, true); ?>"></div>
									</div>
								</div>
							<?php endif; ?>
						<?php endforeach; ?>
					</div>
				</div>

				<!-- ══ COLOR PICKERS ══ -->
				<div class="pj-section">
					<h3 class="pj-section-title"><i class="fa fa-sliders"></i> <?php __('visual_sec_finetune'); ?></h3>
					<p class="pj-section-desc"><?php __('visual_secdesc_finetune'); ?></p>

					<!-- GROUP 1: Sidebar -->
					<div class="pj-group-header">
						<div class="pj-group-icon pj-group-icon--sidebar"><i class="fa fa-bars"></i></div>
						<div class="pj-group-info">
							<div class="pj-group-name"><?php __('visual_grp_sidebar_name'); ?></div>
							<div class="pj-group-note"><?php __('visual_grp_sidebar_note'); ?></div>
						</div>
					</div>
					<div class="pj-color-grid">
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_sidebar'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_sidebar'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminSidebar" value="<?php echo htmlspecialchars($adminSidebar); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminSidebarHex" value="<?php echo htmlspecialchars($adminSidebar); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_sidebar_secondary'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_sidebar_secondary'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminSidebarSecondary" value="<?php echo htmlspecialchars($adminSidebarSecondary); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminSidebarSecondaryHex" value="<?php echo htmlspecialchars($adminSidebarSecondary); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_sidebar_active'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_sidebar_active'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminSidebarActive" value="<?php echo htmlspecialchars($adminSidebarActive); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminSidebarActiveHex" value="<?php echo htmlspecialchars($adminSidebarActive); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_sidebar_text'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_sidebar_text'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminSidebarText" value="<?php echo htmlspecialchars($adminSidebarText); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminSidebarTextHex" value="<?php echo htmlspecialchars($adminSidebarText); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_sidebar_muted'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_sidebar_muted'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminSidebarMuted" value="<?php echo htmlspecialchars($adminSidebarMuted); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminSidebarMutedHex" value="<?php echo htmlspecialchars($adminSidebarMuted); ?>" maxlength="7">
						</div>
					</div>

					<!-- GROUP 2: Content -->
					<div class="pj-group-header pj-group-header--content">
						<div class="pj-group-icon pj-group-icon--content"><i class="fa fa-file-text-o"></i></div>
						<div class="pj-group-info">
							<div class="pj-group-name"><?php __('visual_grp_content_name'); ?></div>
							<div class="pj-group-note"><?php __('visual_grp_content_note'); ?></div>
						</div>
					</div>
					<div class="pj-color-grid">
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_main_bg'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_main_bg'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminMainBg" value="<?php echo htmlspecialchars($adminMainBg); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminMainBgHex" value="<?php echo htmlspecialchars($adminMainBg); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_card_bg2'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_card_bg2'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminCardBg2" value="<?php echo htmlspecialchars($adminCardBg2); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminCardBg2Hex" value="<?php echo htmlspecialchars($adminCardBg2); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_table_border'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_table_border'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminTableBorder" value="<?php echo htmlspecialchars($adminTableBorder); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminTableBorderHex" value="<?php echo htmlspecialchars($adminTableBorder); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_input_border'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_input_border'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminInputBorder" value="<?php echo htmlspecialchars($adminInputBorder); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminInputBorderHex" value="<?php echo htmlspecialchars($adminInputBorder); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_main_text'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_main_text'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminMainText" value="<?php echo htmlspecialchars($adminMainText); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminMainTextHex" value="<?php echo htmlspecialchars($adminMainText); ?>" maxlength="7">
						</div>
					</div>

					<!-- GROUP 3: Buttons & Accents -->
					<div class="pj-group-header pj-group-header--accent">
						<div class="pj-group-icon pj-group-icon--accent"><i class="fa fa-star"></i></div>
						<div class="pj-group-info">
							<div class="pj-group-name"><?php __('visual_grp_accent_name'); ?></div>
							<div class="pj-group-note"><?php __('visual_grp_accent_note'); ?></div>
						</div>
					</div>
					<div class="pj-color-grid">
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_primary'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_primary'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminPrimary" value="<?php echo htmlspecialchars($adminPrimary); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminPrimaryHex" value="<?php echo htmlspecialchars($adminPrimary); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_accent'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_accent'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminAccent" value="<?php echo htmlspecialchars($adminAccent); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminAccentHex" value="<?php echo htmlspecialchars($adminAccent); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_secondary'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_secondary'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminSecondary" value="<?php echo htmlspecialchars($adminSecondary); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminSecondaryHex" value="<?php echo htmlspecialchars($adminSecondary); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_link_color'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_link_color'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminLinkColor" value="<?php echo htmlspecialchars($adminLinkColor); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminLinkColorHex" value="<?php echo htmlspecialchars($adminLinkColor); ?>" maxlength="7">
						</div>
					</div>

					<!-- GROUP 4: Status Colors -->
					<div class="pj-group-header pj-group-header--status">
						<div class="pj-group-icon pj-group-icon--status"><i class="fa fa-circle"></i></div>
						<div class="pj-group-info">
							<div class="pj-group-name"><?php __('visual_grp_status_name'); ?></div>
							<div class="pj-group-note"><?php __('visual_grp_status_note'); ?></div>
						</div>
					</div>
					<div class="pj-color-grid">
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_success'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_success'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminSuccess" value="<?php echo htmlspecialchars($adminSuccess); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminSuccessHex" value="<?php echo htmlspecialchars($adminSuccess); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_warning'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_warning'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminWarning" value="<?php echo htmlspecialchars($adminWarning); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminWarningHex" value="<?php echo htmlspecialchars($adminWarning); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_info'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_info'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminInfo" value="<?php echo htmlspecialchars($adminInfo); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminInfoHex" value="<?php echo htmlspecialchars($adminInfo); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_danger'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_danger'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminDanger" value="<?php echo htmlspecialchars($adminDanger); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminDangerHex" value="<?php echo htmlspecialchars($adminDanger); ?>" maxlength="7">
						</div>
					</div>

					<!-- GROUP 5: Table / Datagrid Colors -->
					<div class="pj-group-header pj-group-header--table">
						<div class="pj-group-icon pj-group-icon--table"><i class="fa fa-table"></i></div>
						<div class="pj-group-info">
							<div class="pj-group-name"><?php __('visual_grp_table_name'); ?></div>
							<div class="pj-group-note"><?php __('visual_grp_table_note'); ?></div>
						</div>
					</div>
					<div class="pj-color-grid">
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_table_header_bg'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_table_header_bg'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminTableHeaderBg" value="<?php echo htmlspecialchars($adminTableHeaderBg); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminTableHeaderBgHex" value="<?php echo htmlspecialchars($adminTableHeaderBg); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_table_row_bg'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_table_row_bg'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminTableRowBg" value="<?php echo htmlspecialchars($adminTableRowBg); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminTableRowBgHex" value="<?php echo htmlspecialchars($adminTableRowBg); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_table_row_alt'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_table_row_alt'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminTableRowAlt" value="<?php echo htmlspecialchars($adminTableRowAlt); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminTableRowAltHex" value="<?php echo htmlspecialchars($adminTableRowAlt); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_table_row_hover'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_table_row_hover'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminTableRowHover" value="<?php echo htmlspecialchars($adminTableRowHover); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminTableRowHoverHex" value="<?php echo htmlspecialchars($adminTableRowHover); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_table_text'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_table_text'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminTableText" value="<?php echo htmlspecialchars($adminTableText); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminTableTextHex" value="<?php echo htmlspecialchars($adminTableText); ?>" maxlength="7">
						</div>
					</div>

					<!-- GROUP 6: Typography & Icons -->
					<div class="pj-group-header pj-group-header--typography">
						<div class="pj-group-icon pj-group-icon--typography"><i class="fa fa-font"></i></div>
						<div class="pj-group-info">
							<div class="pj-group-name"><?php __('visual_grp_typography_name'); ?></div>
							<div class="pj-group-note"><?php __('visual_grp_typography_note'); ?></div>
						</div>
					</div>
					<div class="pj-color-grid">
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_heading_text'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_heading_text'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminHeadingText" value="<?php echo htmlspecialchars($adminHeadingText); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminHeadingTextHex" value="<?php echo htmlspecialchars($adminHeadingText); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_muted_text'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_muted_text'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminMutedText" value="<?php echo htmlspecialchars($adminMutedText); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminMutedTextHex" value="<?php echo htmlspecialchars($adminMutedText); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_link_text'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_link_text'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminLinkText" value="<?php echo htmlspecialchars($adminLinkText); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminLinkTextHex" value="<?php echo htmlspecialchars($adminLinkText); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_sidebar_icon'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_sidebar_icon'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminSidebarIcon" value="<?php echo htmlspecialchars($adminSidebarIcon); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminSidebarIconHex" value="<?php echo htmlspecialchars($adminSidebarIcon); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_icon_color'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_icon_color'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminIconColor" value="<?php echo htmlspecialchars($adminIconColor); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminIconColorHex" value="<?php echo htmlspecialchars($adminIconColor); ?>" maxlength="7">
						</div>
					</div>

					<!-- GROUP 7: Topbar, Cards & Forms -->
					<div class="pj-group-header pj-group-header--topbar">
						<div class="pj-group-icon pj-group-icon--topbar"><i class="fa fa-desktop"></i></div>
						<div class="pj-group-info">
							<div class="pj-group-name"><?php __('visual_grp_topbar_name'); ?></div>
							<div class="pj-group-note"><?php __('visual_grp_topbar_note'); ?></div>
						</div>
					</div>
					<div class="pj-color-grid">
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_topbar_bg'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_topbar_bg'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminTopbarBg" value="<?php echo htmlspecialchars($adminTopbarBg); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminTopbarBgHex" value="<?php echo htmlspecialchars($adminTopbarBg); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_input_bg'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_input_bg'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminInputBg" value="<?php echo htmlspecialchars($adminInputBg); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminInputBgHex" value="<?php echo htmlspecialchars($adminInputBg); ?>" maxlength="7">
						</div>
						<div class="pj-color-row">
							<div class="pj-color-label-wrap">
								<span class="pj-color-label"><?php __('visual_lbl_card_border'); ?></span>
								<span class="pj-color-sublabel"><?php __('visual_sub_card_border'); ?></span>
							</div>
							<input type="color" class="pj-color-input" id="pjAdminCardBorder" value="<?php echo htmlspecialchars($adminCardBorder); ?>">
							<input type="text" class="pj-color-hex" id="pjAdminCardBorderHex" value="<?php echo htmlspecialchars($adminCardBorder); ?>" maxlength="7">
						</div>
					</div>

					<div class="pj-contrast-hint">
						<i class="fa fa-magic"></i>
						<strong><?php __('visual_contrast_title'); ?></strong>
						<?php __('visual_contrast_desc'); ?>
					</div>
				</div><!-- /color pickers -->

				<!-- ══ TABLE DENSITY ══ -->
				<div class="pj-section">
					<h3 class="pj-section-title"><i class="fa fa-th-list"></i> <?php __('visual_sec_density'); ?></h3>
					<p class="pj-section-desc"><?php __('visual_secdesc_density'); ?></p>
					<div class="pj-visual-density-list">
						<?php
						$densityOptions = array(
							'compact'  => array('label' => __('visual_density_compact', true),  'icon' => 'fa-compress', 'note' => __('visual_density_compact_note', true)),
							'default'  => array('label' => __('visual_density_default', true),  'icon' => 'fa-minus',    'note' => __('visual_density_default_note', true)),
							'spacious' => array('label' => __('visual_density_spacious', true), 'icon' => 'fa-expand',   'note' => __('visual_density_spacious_note', true)),
						);
						foreach ($densityOptions as $value => $opt): ?>
							<label class="pj-density-option<?php echo $tableDensity === $value ? ' active' : ''; ?>" data-density="<?php echo $value; ?>" title="<?php echo htmlspecialchars($opt['note']); ?>">
								<input type="radio" name="table_density" value="<?php echo $value; ?>" <?php echo $tableDensity === $value ? 'checked' : ''; ?> style="display:none;">
								<i class="fa <?php echo $opt['icon']; ?>"></i>
								<span class="pj-density-label"><?php echo htmlspecialchars($opt['label'], ENT_QUOTES, 'UTF-8'); ?></span>
								<span class="pj-density-note"><?php echo htmlspecialchars($opt['note'], ENT_QUOTES, 'UTF-8'); ?></span>
							</label>
						<?php endforeach; ?>
					</div>
				</div>

				<!-- ══ SIDEBAR BRANDING ══ -->
				<!-- <div class="pj-section">
					<h3 class="pj-section-title"><i class="fa fa-id-card-o"></i> <?php __('visual_sec_branding'); ?></h3>
					<p class="pj-section-desc"><?php __('visual_secdesc_branding'); ?></p>
					<div class="pj-branding-grid">
						<div class="pj-branding-preview" id="pjBrandingPreview">
							<?php if (!empty($visualSidebarLogoUrl)): ?>
								<img src="<?php echo htmlspecialchars($visualSidebarLogoUrl, ENT_QUOTES, 'UTF-8'); ?>" alt="Sidebar logo">
							<?php endif; ?>
							<strong id="pjBrandingPreviewTitle"><?php echo htmlspecialchars($adminBrandTitle, ENT_QUOTES, 'UTF-8'); ?></strong>
							<span id="pjBrandingPreviewSubtitle"><?php echo htmlspecialchars($adminBrandSubtitle, ENT_QUOTES, 'UTF-8'); ?></span>
						</div>
						<div class="pj-branding-fields">
							<div class="form-group">
								<label class="control-label"><?php __('visual_branding_upload_label'); ?></label>
								<form id="frmSidebarLogoUpload" action="<?php echo $_SERVER['PHP_SELF']; ?>?controller=pjBaseOptions&amp;action=pjActionUploadSidebarLogo" method="post" enctype="multipart/form-data">
									<input type="hidden" name="csrf_token" value="<?php echo pjAppController::getCsrfToken(); ?>">
									<div class="input-group">
										<input type="file" name="sidebar_logo" id="pjSidebarLogoFile" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml" required>
										<span class="input-group-btn"><button type="submit" class="btn btn-primary"><i class="fa fa-upload m-r-xs"></i> <?php __('visual_branding_upload_btn'); ?></button></span>
									</div>
								</form>
								<p class="pj-branding-note">
									<?php if ($hasCustomSidebarLogo): ?>
										<?php __('visual_branding_active'); ?>
									<?php else: ?>
										<?php __('visual_branding_none'); ?>
									<?php endif; ?>
								</p>
								<?php if ($hasCustomSidebarLogo): ?>
									<form action="<?php echo $_SERVER['PHP_SELF']; ?>?controller=pjBaseOptions&amp;action=pjActionRemoveSidebarLogo" method="post" class="m-t-xs js-remove-sidebar-logo-form">
										<input type="hidden" name="csrf_token" value="<?php echo pjAppController::getCsrfToken(); ?>">
										<button type="submit" class="btn btn-default btn-sm"><i class="fa fa-times m-r-xs"></i> <?php __('visual_branding_remove_btn'); ?></button>
										<input type="hidden" name="remove_title" value="<?php __('visual_branding_remove_title', true, true); ?>">
										<input type="hidden" name="remove_text" value="<?php __('visual_branding_remove_text', true, true); ?>">
									</form>
								<?php endif; ?>
							</div>
						</div>
					</div>
				</div> -->

				<!-- ══ SAVE ══ -->
				<div class="pj-section">
					<div class="pj-visual-save-row">
						<button type="button" class="pj-admin-btn-save" id="pjAdminSaveColors"
							data-save-label="<?php __('visual_save'); ?>" data-saving-label="<?php __('visual_saving'); ?>">
							<i class="fa fa-save m-r-xs"></i> <?php __('visual_save'); ?>
						</button>
						<span class="pj-admin-save-msg" id="pjAdminSaveMsg"><i class="fa fa-check"></i> <?php __('visual_saved'); ?></span>
						<span class="pj-visual-save-note"><i class="fa fa-info-circle m-r-xs"></i> <?php __('visual_save_effect_notice'); ?></span>
					</div>
				</div>

			</div><!-- /col-lg-7 -->

			<div class="col-lg-5">
				<!-- ══ LIVE PREVIEW ══ -->
				<div class="pj-section pj-section--compact">
					<h3 class="pj-section-title pj-section-title--tight"><i class="fa fa-eye"></i> <?php __('visual_live_preview'); ?></h3>
					<p class="pj-visual-preview-note"><?php __('visual_live_preview_desc'); ?></p>

					<!-- Preview wrapper — ALL colors driven by --pv-* scoped CSS variables -->
					<div id="pjPreviewWrapper" style="<?php echo htmlspecialchars($pvVars, ENT_QUOTES, 'UTF-8'); ?>">
						<div class="pv-layout">

							<!-- ─ Sidebar ─────────────────────────── -->
							<div class="pv-sidebar">
								<div class="pv-sidebar-header">


									<span class="pv-brand-name"><?php __('visual_preview_brand_name'); ?></span>
									<span class="pv-brand-sub"><?php __('visual_preview_brand_sub'); ?></span>

								</div>

								<span class="pv-menu-label"><?php __('visual_preview_main_menu'); ?></span>
								<div class="pv-menu-item"><i class="fa fa-dashboard"></i> <?php __('visual_preview_menu_dashboard'); ?></div>
								<div class="pv-menu-item pv-active"><i class="fa fa-shopping-cart"></i> <?php __('visual_preview_menu_orders'); ?></div>
								<div class="pv-menu-item pv-hover"><i class="fa fa-cube"></i> <?php __('visual_preview_menu_products'); ?></div>
								<div class="pv-submenu">
									<div class="pv-menu-item"><i class="fa fa-list"></i> <?php __('visual_preview_menu_all_products'); ?></div>
									<div class="pv-menu-item"><i class="fa fa-plus"></i> <?php __('visual_preview_menu_add_new'); ?></div>
								</div>
								<div class="pv-menu-item"><i class="fa fa-users"></i> <?php __('visual_preview_menu_clients'); ?></div>
								<div class="pv-menu-item pv-muted"><i class="fa fa-bar-chart"></i> <?php __('visual_preview_menu_reports'); ?></div>

								<span class="pv-menu-label"><?php __('visual_preview_system'); ?></span>
								<div class="pv-menu-item"><i class="fa fa-cog"></i> <?php __('visual_preview_menu_settings'); ?></div>

								<div class="pv-sidebar-footer">
									<span class="pv-sidebar-footer-text"><i class="fa fa-user-circle m-r-xs"></i> <?php __('visual_preview_admin_user'); ?></span>
								</div>
							</div>

							<!-- ─ Content area ───────────────────── -->
							<div class="pv-content">

								<!-- Top bar -->
								<div class="pv-topbar">
									<div>
										<div class="pv-topbar-title"><?php __('visual_preview_menu_orders'); ?></div>
										<div class="pv-breadcrumb"><?php __('visual_preview_breadcrumb'); ?></div>
									</div>
									<div class="pv-topbar-actions">
										<div class="pv-btn pv-btn-primary"><i class="fa fa-plus"></i> <?php __('visual_preview_new_order'); ?></div>
										<div class="pv-topbar-avatar">A</div>
									</div>
								</div>

								<div class="pv-body">
									<!-- Stat cards -->
									<div class="pv-stats">
										<div class="pv-stat">
											<div class="pv-stat-val" style="color:var(--pv-primary)">142</div>
											<div class="pv-stat-lbl"><?php __('visual_preview_total_orders'); ?></div>
										</div>
										<div class="pv-stat">
											<div class="pv-stat-val" style="color:var(--pv-accent)">$4.2k</div>
											<div class="pv-stat-lbl"><?php __('visual_preview_revenue'); ?></div>
										</div>
										<div class="pv-stat">
											<div class="pv-stat-val" style="color:var(--pv-success)">89%</div>
											<div class="pv-stat-lbl"><?php __('visual_preview_fulfillment'); ?></div>
										</div>
									</div>

									<!-- Buttons -->
									<div class="pv-btns">
										<div class="pv-btn pv-btn-primary"><i class="fa fa-save m-r-xs"></i><?php __('visual_preview_save'); ?></div>
										<div class="pv-btn pv-btn-outline"><?php __('visual_preview_cancel'); ?></div>
										<div class="pv-btn pv-btn-accent"><?php __('visual_preview_export'); ?></div>
										<div class="pv-btn pv-btn-danger"><i class="fa fa-trash m-r-xs"></i><?php __('visual_preview_delete'); ?></div>
										<div class="pv-btn pv-btn-link"><?php __('visual_preview_view_details'); ?></div>
									</div>

									<!-- Status badges -->
									<div class="pv-badges">
										<span class="pv-badge pv-badge-success"><i class="fa fa-check m-r-xs"></i><?php __('visual_preview_completed'); ?></span>
										<span class="pv-badge pv-badge-warning"><?php __('visual_preview_pending'); ?></span>
										<span class="pv-badge pv-badge-danger"><?php __('visual_preview_cancelled'); ?></span>
										<span class="pv-badge pv-badge-info"><?php __('visual_preview_new'); ?></span>
										<span class="pv-badge pv-badge-secondary"><?php __('visual_preview_processing'); ?></span>
									</div>

									<!-- Alerts -->
									<div class="pv-alerts">
										<div class="pv-alert pv-alert-success"><i class="fa fa-check m-r-xs"></i><strong><?php __('visual_preview_order_saved'); ?></strong> <?php __('visual_preview_changes_applied'); ?></div>
										<div class="pv-alert pv-alert-warning"><i class="fa fa-exclamation-triangle m-r-xs"></i><?php __('visual_preview_low_stock'); ?></div>
										<div class="pv-alert pv-alert-info"><i class="fa fa-info-circle m-r-xs"></i><?php __('visual_preview_orders_attention'); ?></div>
									</div>

									<!-- Data table -->
									<div class="pv-table-wrap">
										<table class="pv-table">
											<thead>
												<tr>
													<th>#ID</th>
													<th><?php __('visual_preview_customer'); ?></th>
													<th><?php __('visual_preview_status'); ?></th>
													<th class="text-right"><?php __('visual_preview_actions'); ?></th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td><span class="pv-table-link">#1042</span></td>
													<td>John Smith</td>
													<td><span class="pv-badge pv-badge-success"><?php __('visual_preview_paid'); ?></span></td>
													<td>
														<div class="pv-table-actions">
															<div class="pv-tbl-btn pv-tbl-btn-edit"><i class="fa fa-pencil"></i></div>
															<div class="pv-tbl-btn pv-tbl-btn-del"><i class="fa fa-trash"></i></div>
														</div>
													</td>
												</tr>
												<tr>
													<td><span class="pv-table-link">#1041</span></td>
													<td>Mary Jones</td>
													<td><span class="pv-badge pv-badge-warning"><?php __('visual_preview_pending'); ?></span></td>
													<td>
														<div class="pv-table-actions">
															<div class="pv-tbl-btn pv-tbl-btn-edit"><i class="fa fa-pencil"></i></div>
															<div class="pv-tbl-btn pv-tbl-btn-del"><i class="fa fa-trash"></i></div>
														</div>
													</td>
												</tr>
												<tr>
													<td><span class="pv-table-link">#1040</span></td>
													<td>Bob Wilson</td>
													<td><span class="pv-badge pv-badge-danger"><?php __('visual_preview_cancelled'); ?></span></td>
													<td>
														<div class="pv-table-actions">
															<div class="pv-tbl-btn pv-tbl-btn-edit"><i class="fa fa-pencil"></i></div>
															<div class="pv-tbl-btn pv-tbl-btn-del"><i class="fa fa-trash"></i></div>
														</div>
													</td>
												</tr>
											</tbody>
										</table>
										<div class="pv-pagination">
											<div class="pv-pager">« Prev</div>
											<div class="pv-pager active">1</div>
											<div class="pv-pager">2</div>
											<div class="pv-pager">3</div>
											<div class="pv-pager">Next »</div>
										</div>
									</div>

									<!-- Form section -->
									<div class="pv-form-section">
										<div class="pv-form-title"><i class="fa fa-edit m-r-xs"></i> <?php __('visual_preview_edit_order'); ?></div>
										<div class="pv-form-row">
											<div class="pv-form-group">
												<label class="pv-label"><?php __('visual_preview_customer_name'); ?></label>
												<input class="pv-input" type="text" value="John Smith" readonly>
											</div>
											<div class="pv-form-group">
												<label class="pv-label"><?php __('visual_preview_order_status'); ?></label>
												<select class="pv-select">
													<option><?php __('visual_preview_paid'); ?></option>
													<option><?php __('visual_preview_pending'); ?></option>
												</select>
											</div>
										</div>
										<div class="pv-form-row">
											<div class="pv-form-group">
												<label class="pv-label"><?php __('visual_preview_amount'); ?></label>
												<input class="pv-input" type="text" value="$129.00" readonly>
											</div>
											<div class="pv-form-group">
												<label class="pv-label"><?php __('visual_preview_date'); ?></label>
												<input class="pv-input" type="text" value="2026-05-26" readonly>
											</div>
										</div>
										<div class="pv-form-actions">
											<div class="pv-btn pv-btn-primary"><i class="fa fa-save m-r-xs"></i><?php __('visual_preview_save_changes'); ?></div>
											<div class="pv-btn pv-btn-outline"><?php __('visual_preview_cancel'); ?></div>
										</div>
									</div>

								</div><!-- /pv-body -->
							</div><!-- /pv-content -->
						</div><!-- /pv-layout -->
					</div><!-- /pjPreviewWrapper -->

					<!-- Legend -->
					<div class="pv-legend">
						<span><?php __('visual_legend_sidebar_bg'); ?></span>
						<span><?php __('visual_legend_accent_active'); ?></span>
						<span><?php __('visual_legend_content_bg'); ?></span>
						<span><?php __('visual_legend_success'); ?></span>
						<span><?php __('visual_legend_danger'); ?></span>
					</div>
				</div><!-- /sticky section -->
			</div><!-- /col-lg-5 -->

		</div><!-- /row -->
	</div><!-- /pj-admin-theme -->
</div><!-- /wrapper-content -->

<script type="text/javascript">
	var myLabel = myLabel || {};
	myLabel.btn_delete = <?php echo pjAppController::jsonEncode(__('btnDelete', true) ?: 'Delete'); ?>;
	myLabel.btn_cancel = <?php echo pjAppController::jsonEncode(__('btnCancel', true) ?: 'Cancel'); ?>;

	(function() {
		'use strict';

		// ── Math helpers ──────────────────────────────────────────────────────────
		function lighten(hex, factor) {
			var r = parseInt(hex.substr(1, 2), 16),
				g = parseInt(hex.substr(3, 2), 16),
				b = parseInt(hex.substr(5, 2), 16);
			return '#' + [Math.min(255, Math.round(r + (255 - r) * factor)), Math.min(255, Math.round(g + (255 - g) * factor)), Math.min(255, Math.round(b + (255 - b) * factor))]
				.map(function(v) {
					return ('0' + v.toString(16)).slice(-2);
				}).join('');
		}

		function relLuminance(hex) {
			var r = parseInt(hex.substr(1, 2), 16) / 255,
				g = parseInt(hex.substr(3, 2), 16) / 255,
				b = parseInt(hex.substr(5, 2), 16) / 255;
			var f = function(c) {
				return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
			};
			return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
		}

		function contrastColor(hex) {
			return relLuminance(hex) > 0.5 ? '#1a1a1a' : '#ffffff';
		}

		function smartDarken(hex, startFactor) {
			var r = parseInt(hex.substr(1, 2), 16),
				g = parseInt(hex.substr(3, 2), 16),
				b = parseInt(hex.substr(5, 2), 16);
			var factor = startFactor,
				nr, ng, nb, resultHex, iter = 12;

			function h2(n) {
				return ('0' + n.toString(16)).slice(-2);
			}
			do {
				nr = Math.max(0, Math.round(r * factor));
				ng = Math.max(0, Math.round(g * factor));
				nb = Math.max(0, Math.round(b * factor));
				resultHex = '#' + h2(nr) + h2(ng) + h2(nb);
				factor -= 0.10;
			} while (relLuminance(resultHex) > 0.45 && factor > 0.15 && --iter > 0);
			if (nr === ng && ng === nb && nr > 100) resultHex = '#6b7280';
			return resultHex;
		}

		function rgba(hex, a) {
			var r = parseInt(hex.substr(1, 2), 16),
				g = parseInt(hex.substr(3, 2), 16),
				b = parseInt(hex.substr(5, 2), 16);
			return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
		}

		function val(id) {
			var el = document.getElementById(id);
			return el ? el.value : '#000000';
		}

		// ── Collect all current picker values ────────────────────────────────────
		function readAll() {
			return {
				primary: val('pjAdminPrimary'),
				secondary: val('pjAdminSecondary'),
				sidebar: val('pjAdminSidebar'),
				sidebarSecondary: val('pjAdminSidebarSecondary'),
				sidebarActive: val('pjAdminSidebarActive'),
				sidebarText: val('pjAdminSidebarText'),
				sidebarMuted: val('pjAdminSidebarMuted'),
				mainBg: val('pjAdminMainBg'),
				cardBg2: val('pjAdminCardBg2'),
				tableBorder: val('pjAdminTableBorder'),
				inputBorder: val('pjAdminInputBorder'),
				mainText: val('pjAdminMainText'),
				accent: val('pjAdminAccent'),
				linkColor: val('pjAdminLinkColor'),
				success: val('pjAdminSuccess'),
				warning: val('pjAdminWarning'),
				info: val('pjAdminInfo'),
				danger: val('pjAdminDanger'),
				tableHeaderBg: val('pjAdminTableHeaderBg'),
				tableRowBg: val('pjAdminTableRowBg'),
				tableRowAlt: val('pjAdminTableRowAlt'),
				tableRowHover: val('pjAdminTableRowHover'),
				tableText: val('pjAdminTableText'),
				headingText: val('pjAdminHeadingText'),
				mutedText: val('pjAdminMutedText'),
				linkText: val('pjAdminLinkText'),
				sidebarIcon: val('pjAdminSidebarIcon'),
				iconColor: val('pjAdminIconColor'),
				topbarBg: val('pjAdminTopbarBg'),
				inputBg: val('pjAdminInputBg'),
				cardBorder: val('pjAdminCardBorder'),
			};
		}

		// ── Update preview wrapper CSS variables ─────────────────────────────────
		// Using scoped CSS vars on #pjPreviewWrapper means EVERY element in the
		// preview updates automatically — no individual element targeting needed.
		function updatePreview() {
			var c = readAll();
			var w = document.getElementById('pjPreviewWrapper');
			if (!w) return;
			var vars = {
				'--pv-sidebar': c.sidebar,
				'--pv-sidebar-secondary': c.sidebarSecondary,
				'--pv-sidebar-active': c.sidebarActive,
				'--pv-sidebar-text': c.sidebarText,
				'--pv-sidebar-muted': c.sidebarMuted,
				'--pv-main-bg': c.mainBg,
				'--pv-card-bg': c.cardBg2,
				'--pv-table-border': c.tableBorder,
				'--pv-input-border': c.inputBorder,
				'--pv-main-text': c.mainText,
				'--pv-primary': c.primary,
				'--pv-accent': c.accent,
				'--pv-secondary': c.secondary,
				'--pv-link': c.linkColor,
				'--pv-success': c.success,
				'--pv-warning': c.warning,
				'--pv-info': c.info,
				'--pv-danger': c.danger,
				'--pv-table-header-bg': c.tableHeaderBg,
				'--pv-table-header-text': contrastColor(c.tableHeaderBg),
				'--pv-table-row-bg': c.tableRowBg,
				'--pv-table-row-alt': c.tableRowAlt,
				'--pv-table-row-hover': c.tableRowHover,
				'--pv-table-text': c.tableText,
				'--pv-heading-text': c.headingText,
				'--pv-muted-text': c.mutedText,
				'--pv-link-text': c.linkText,
				'--pv-sidebar-icon': c.sidebarIcon,
				'--pv-icon-color': c.iconColor,
				'--pv-topbar-bg': c.topbarBg,
				'--pv-topbar-text': contrastColor(c.topbarBg),
				'--pv-input-bg': c.inputBg,
				'--pv-input-text': contrastColor(c.inputBg),
				'--pv-card-border': c.cardBorder,
			};
			for (var k in vars) {
				w.style.setProperty(k, vars[k]);
			}

			// Also update the branding preview box (outside #pjPreviewWrapper)
			var bp = document.getElementById('pjBrandingPreview');
			if (bp) {
				bp.style.background = c.sidebar;
				bp.style.color = c.sidebarText;
			}
		}

		// ── Apply CSS variables to the live admin page ────────────────────────────
		function applyLiveColors() {
			var c = readAll();
			var r = document.documentElement;
			var primaryDark = smartDarken(c.primary, 0.8);
			var primaryDarker = smartDarken(c.primary, 0.68);

			// Core primary / secondary
			r.style.setProperty('--admin-primary', c.primary);
			r.style.setProperty('--admin-primary-dark', primaryDark);
			r.style.setProperty('--admin-primary-darker', primaryDarker);
			r.style.setProperty('--admin-primary-safe', primaryDark);
			r.style.setProperty('--admin-primary-light', rgba(c.primary, 0.25));
			r.style.setProperty('--admin-primary-lighter', rgba(c.primary, 0.12));
			r.style.setProperty('--admin-card-bg', rgba(c.primary, 0.05));
			r.style.setProperty('--admin-secondary', c.secondary);
			r.style.setProperty('--admin-alert-bg', rgba(c.primary, 0.12));
			r.style.setProperty('--admin-modal-bg', rgba(c.primary, 0.06));

			// Sidebar
			r.style.setProperty('--admin-sidebar', c.sidebar);
			r.style.setProperty('--admin-sidebar-secondary', c.sidebarSecondary);
			r.style.setProperty('--admin-sidebar-active-bg', c.sidebarActive);
			r.style.setProperty('--admin-sidebar-text', c.sidebarText);
			r.style.setProperty('--admin-sidebar-muted', c.sidebarMuted);
			r.style.setProperty('--admin-sidebar-hover', lighten(c.sidebar, 0.05));
			r.style.setProperty('--admin-sidebar-hover-bg', c.sidebarSecondary);
			r.style.setProperty('--admin-on-sidebar', contrastColor(c.sidebar));

			// Content
			r.style.setProperty('--admin-main-bg', c.mainBg);
			r.style.setProperty('--admin-card-bg-solid', c.cardBg2);
			r.style.setProperty('--admin-table-border', c.tableBorder);
			r.style.setProperty('--admin-input-border', c.inputBorder);
			r.style.setProperty('--admin-main-text', c.mainText);
			// Table colors (independent)
			r.style.setProperty('--admin-table-header-bg', c.tableHeaderBg);
			r.style.setProperty('--admin-table-header-text', contrastColor(c.tableHeaderBg));
			r.style.setProperty('--admin-table-row-bg', c.tableRowBg);
			r.style.setProperty('--admin-table-row-alt-bg', c.tableRowAlt);
			r.style.setProperty('--admin-table-row-hover', c.tableRowHover);
			r.style.setProperty('--admin-table-text', c.tableText);
			// Typography (independent)
			r.style.setProperty('--admin-heading-text', c.headingText);
			r.style.setProperty('--admin-muted-text', c.mutedText);
			r.style.setProperty('--admin-link-text', c.linkText);
			r.style.setProperty('--admin-sidebar-icon', c.sidebarIcon);
			r.style.setProperty('--admin-icon-color', c.iconColor);
			r.style.setProperty('--admin-topbar-bg', c.topbarBg);
			r.style.setProperty('--admin-topbar-text', contrastColor(c.topbarBg));
			r.style.setProperty('--admin-input-bg', c.inputBg);
			r.style.setProperty('--admin-input-text', contrastColor(c.inputBg));
			r.style.setProperty('--admin-card-border', c.cardBorder);
			// Accent
			r.style.setProperty('--admin-accent', c.accent);
			r.style.setProperty('--admin-accent-light', rgba(c.accent, 0.15));
			r.style.setProperty('--admin-link', c.linkColor);

			// Status
			r.style.setProperty('--admin-success', c.success);
			r.style.setProperty('--admin-success-light', rgba(c.success, 0.20));
			r.style.setProperty('--admin-success-lighter', rgba(c.success, 0.10));
			r.style.setProperty('--admin-warning', c.warning);
			r.style.setProperty('--admin-warning-light', rgba(c.warning, 0.20));
			r.style.setProperty('--admin-warning-lighter', rgba(c.warning, 0.10));
			r.style.setProperty('--admin-info', c.info);
			r.style.setProperty('--admin-info-light', rgba(c.info, 0.20));
			r.style.setProperty('--admin-info-lighter', rgba(c.info, 0.10));
			r.style.setProperty('--admin-danger', c.danger);
			r.style.setProperty('--admin-danger-light', rgba(c.danger, 0.20));
			r.style.setProperty('--admin-danger-lighter', rgba(c.danger, 0.10));

			// Auto-contrast
			r.style.setProperty('--admin-on-primary', contrastColor(c.primary));
			r.style.setProperty('--admin-on-secondary', contrastColor(c.secondary));
			r.style.setProperty('--admin-on-success', contrastColor(c.success));
			r.style.setProperty('--admin-on-warning', contrastColor(c.warning));
			r.style.setProperty('--admin-on-info', contrastColor(c.info));
			r.style.setProperty('--admin-on-danger', contrastColor(c.danger));

			// pj-* aliases used by datagrid CSS
			// NOTE: --pj-text = mainText (NOT tableText) so form/tab labels decouple from table cells.
			//       --pj-border = cardBorder (NOT tableBorder) so card/input borders decouple from table rows.
			r.style.setProperty('--pj-primary', c.primary);
			r.style.setProperty('--pj-primary-dark', primaryDark);
			r.style.setProperty('--pj-text', c.mainText);
			r.style.setProperty('--pj-text-muted', c.mutedText);
			r.style.setProperty('--pj-border', c.cardBorder);
			r.style.setProperty('--pj-hover-bg', c.tableRowHover);
			r.style.setProperty('--pj-bg', c.mainBg);
			r.style.setProperty('--pj-card-bg', c.cardBg2);
			r.style.setProperty('--pj-accent', c.accent);
		}

		// ── Wire every picker ↔ hex input pair ───────────────────────────────────
		var pairs = [
			['pjAdminPrimary', 'pjAdminPrimaryHex'],
			['pjAdminSecondary', 'pjAdminSecondaryHex'],
			['pjAdminSidebar', 'pjAdminSidebarHex'],
			['pjAdminSidebarSecondary', 'pjAdminSidebarSecondaryHex'],
			['pjAdminSidebarActive', 'pjAdminSidebarActiveHex'],
			['pjAdminSidebarText', 'pjAdminSidebarTextHex'],
			['pjAdminSidebarMuted', 'pjAdminSidebarMutedHex'],
			['pjAdminMainBg', 'pjAdminMainBgHex'],
			['pjAdminCardBg2', 'pjAdminCardBg2Hex'],
			['pjAdminTableBorder', 'pjAdminTableBorderHex'],
			['pjAdminInputBorder', 'pjAdminInputBorderHex'],
			['pjAdminMainText', 'pjAdminMainTextHex'],
			['pjAdminAccent', 'pjAdminAccentHex'],
			['pjAdminLinkColor', 'pjAdminLinkColorHex'],
			['pjAdminSuccess', 'pjAdminSuccessHex'],
			['pjAdminWarning', 'pjAdminWarningHex'],
			['pjAdminInfo', 'pjAdminInfoHex'],
			['pjAdminDanger', 'pjAdminDangerHex'],
			['pjAdminTableHeaderBg', 'pjAdminTableHeaderBgHex'],
			['pjAdminTableRowBg', 'pjAdminTableRowBgHex'],
			['pjAdminTableRowAlt', 'pjAdminTableRowAltHex'],
			['pjAdminTableRowHover', 'pjAdminTableRowHoverHex'],
			['pjAdminTableText', 'pjAdminTableTextHex'],
			['pjAdminHeadingText', 'pjAdminHeadingTextHex'],
			['pjAdminMutedText', 'pjAdminMutedTextHex'],
			['pjAdminLinkText', 'pjAdminLinkTextHex'],
			['pjAdminSidebarIcon', 'pjAdminSidebarIconHex'],
			['pjAdminIconColor', 'pjAdminIconColorHex'],
			['pjAdminTopbarBg', 'pjAdminTopbarBgHex'],
			['pjAdminInputBg', 'pjAdminInputBgHex'],
			['pjAdminCardBorder', 'pjAdminCardBorderHex'],
		];

		pairs.forEach(function(pair) {
			var picker = document.getElementById(pair[0]);
			var hex = document.getElementById(pair[1]);
			if (!picker || !hex) return;
			// Color swatch click/drag
			picker.addEventListener('input', function() {
				hex.value = picker.value.toUpperCase();
				updatePreview();
				applyLiveColors();
				markCustom();
			});
			// Manual hex typing
			hex.addEventListener('input', function() {
				var v = hex.value.trim();
				if (!v.startsWith('#')) v = '#' + v;
				if (/^#[0-9a-fA-F]{6}$/.test(v)) {
					picker.value = v;
					hex.value = v.toUpperCase();
					updatePreview();
					applyLiveColors();
					markCustom();
				}
			});
			// Allow typing without # prefix
			hex.addEventListener('blur', function() {
				var v = hex.value.trim();
				if (v && !v.startsWith('#')) v = '#' + v;
				if (/^#[0-9a-fA-F]{6}$/.test(v)) {
					hex.value = v.toUpperCase();
					picker.value = v;
					updatePreview();
					applyLiveColors();
				}
			});
		});

		// ── Palette card clicks ───────────────────────────────────────────────────
		function markCustom() {
			var customCard = document.querySelector('.pj-admin-palette--custom');
			if (customCard && !customCard.classList.contains('active')) {
				document.querySelectorAll('.pj-admin-palette').forEach(function(c) {
					c.classList.remove('active');
				});
				customCard.classList.add('active');
			}
		}

		document.querySelectorAll('.pj-admin-palette').forEach(function(card) {
			card.addEventListener('click', function() {
				// Deactivate all
				document.querySelectorAll('.pj-admin-palette').forEach(function(c) {
					c.classList.remove('active');
				});
				card.classList.add('active');

				// Custom palette — just mark, don't change pickers
				if (card.getAttribute('data-palette-type') === 'custom') return;

				// Map of picker-id → data-attribute
				var map = [
					['pjAdminPrimary', 'pjAdminPrimaryHex', 'data-primary'],
					['pjAdminSecondary', 'pjAdminSecondaryHex', 'data-secondary'],
					['pjAdminSidebar', 'pjAdminSidebarHex', 'data-sidebar'],
					['pjAdminSidebarSecondary', 'pjAdminSidebarSecondaryHex', 'data-sidebar-secondary'],
					['pjAdminSidebarActive', 'pjAdminSidebarActiveHex', 'data-sidebar-active'],
					['pjAdminSidebarText', 'pjAdminSidebarTextHex', 'data-sidebar-text'],
					['pjAdminSidebarMuted', 'pjAdminSidebarMutedHex', 'data-sidebar-muted'],
					['pjAdminMainBg', 'pjAdminMainBgHex', 'data-main-bg'],
					['pjAdminCardBg2', 'pjAdminCardBg2Hex', 'data-card-bg2'],
					['pjAdminTableBorder', 'pjAdminTableBorderHex', 'data-table-border'],
					['pjAdminInputBorder', 'pjAdminInputBorderHex', 'data-input-border'],
					['pjAdminMainText', 'pjAdminMainTextHex', 'data-main-text'],
					['pjAdminAccent', 'pjAdminAccentHex', 'data-accent'],
					['pjAdminLinkColor', 'pjAdminLinkColorHex', 'data-link-color'],
					['pjAdminSuccess', 'pjAdminSuccessHex', 'data-success'],
					['pjAdminWarning', 'pjAdminWarningHex', 'data-warning'],
					['pjAdminInfo', 'pjAdminInfoHex', 'data-info'],
					['pjAdminDanger', 'pjAdminDangerHex', 'data-danger'],
					['pjAdminTableHeaderBg', 'pjAdminTableHeaderBgHex', 'data-table-header-bg'],
					['pjAdminTableRowBg', 'pjAdminTableRowBgHex', 'data-table-row-bg'],
					['pjAdminTableRowAlt', 'pjAdminTableRowAltHex', 'data-table-row-alt'],
					['pjAdminTableRowHover', 'pjAdminTableRowHoverHex', 'data-table-row-hover'],
					['pjAdminTableText', 'pjAdminTableTextHex', 'data-table-text'],
					['pjAdminHeadingText', 'pjAdminHeadingTextHex', 'data-heading-text'],
					['pjAdminMutedText', 'pjAdminMutedTextHex', 'data-muted-text'],
					['pjAdminLinkText', 'pjAdminLinkTextHex', 'data-link-text'],
					['pjAdminSidebarIcon', 'pjAdminSidebarIconHex', 'data-sidebar-icon'],
					['pjAdminIconColor', 'pjAdminIconColorHex', 'data-icon-color'],
					['pjAdminTopbarBg', 'pjAdminTopbarBgHex', 'data-topbar-bg'],
					['pjAdminInputBg', 'pjAdminInputBgHex', 'data-input-bg'],
					['pjAdminCardBorder', 'pjAdminCardBorderHex', 'data-card-border'],
				];

				map.forEach(function(m) {
					var hexVal = card.getAttribute(m[2]);
					if (!hexVal) return;
					var picker = document.getElementById(m[0]);
					var hex = document.getElementById(m[1]);
					if (picker) picker.value = hexVal;
					if (hex) hex.value = hexVal.toUpperCase();
				});

				updatePreview();
				applyLiveColors();
			});
		});

		// ── Density toggle ────────────────────────────────────────────────────────
		document.querySelectorAll('.pj-density-option').forEach(function(opt) {
			opt.addEventListener('click', function() {
				document.querySelectorAll('.pj-density-option').forEach(function(o) {
					o.classList.remove('active');
				});
				this.classList.add('active');
				this.querySelector('input').checked = true;
				document.body.setAttribute('data-table-density', this.getAttribute('data-density'));
			});
		});

		// ── Logo file preview ─────────────────────────────────────────────────────
		var sidebarLogoForm = document.getElementById('frmSidebarLogoUpload');
		var sidebarLogoFile = document.getElementById('pjSidebarLogoFile');
		if (sidebarLogoFile) {
			sidebarLogoFile.addEventListener('change', function() {
				var img = document.querySelector('#pjBrandingPreview img');
				if (!img || !this.files || !this.files.length || typeof FileReader === 'undefined') return;
				var reader = new FileReader();
				reader.onload = function(e) {
					img.src = e.target.result;
				};
				reader.readAsDataURL(this.files[0]);
			});
		}

		// ── Logo remove confirmation ──────────────────────────────────────────────
		Array.prototype.forEach.call(document.querySelectorAll('.js-remove-sidebar-logo-form'), function(form) {
			form.addEventListener('submit', function(e) {
				if (e && e.preventDefault) e.preventDefault();
				var title = (form.querySelector('input[name="remove_title"]') || {}).value || 'Delete logo';
				var text = (form.querySelector('input[name="remove_text"]') || {}).value || 'Remove this logo?';
				if (typeof swal === 'function') {
					swal({
						title: title,
						text: text,
						type: 'warning',
						showCancelButton: true,
						confirmButtonColor: '#DD6B55',
						confirmButtonText: myLabel.btn_delete || 'Delete',
						cancelButtonText: myLabel.btn_cancel || 'Cancel',
						closeOnConfirm: false,
						showLoaderOnConfirm: true
					}, function() {
						form.submit();
					});
				} else if (window.confirm(text)) {
					form.submit();
				}
			});
		});

		// ── Save button ───────────────────────────────────────────────────────────
		document.getElementById('pjAdminSaveColors').addEventListener('click', function() {
			if (sidebarLogoFile && sidebarLogoFile.files && sidebarLogoFile.files.length && sidebarLogoForm) {
				sidebarLogoForm.submit();
				return;
			}
			var btn = this;
			btn.disabled = true;
			btn.innerHTML = '<i class="fa fa-spinner fa-spin m-r-xs"></i> ' + (btn.getAttribute('data-saving-label') || 'Saving...');

			var form = document.createElement('form');
			form.method = 'POST';
			form.action = 'index.php?controller=pjBaseOptions&action=pjActionVisual';
			form.style.display = 'none';

			var fields = {
				'csrf_token': getCsrfToken(),
				'o_admin_primary': val('pjAdminPrimary'),
				'o_admin_secondary': val('pjAdminSecondary'),
				'o_admin_sidebar': val('pjAdminSidebar'),
				'o_admin_success': val('pjAdminSuccess'),
				'o_admin_warning': val('pjAdminWarning'),
				'o_admin_info': val('pjAdminInfo'),
				'o_admin_danger': val('pjAdminDanger'),
				'o_admin_sidebar_secondary': val('pjAdminSidebarSecondary'),
				'o_admin_sidebar_active': val('pjAdminSidebarActive'),
				'o_admin_sidebar_text': val('pjAdminSidebarText'),
				'o_admin_sidebar_muted': val('pjAdminSidebarMuted'),
				'o_admin_main_bg': val('pjAdminMainBg'),
				'o_admin_card_bg2': val('pjAdminCardBg2'),
				'o_admin_table_border': val('pjAdminTableBorder'),
				'o_admin_input_border': val('pjAdminInputBorder'),
				'o_admin_main_text': val('pjAdminMainText'),
				'o_admin_accent': val('pjAdminAccent'),
				'o_admin_link_color': val('pjAdminLinkColor'),
				'o_admin_table_header_bg': val('pjAdminTableHeaderBg'),
				'o_admin_table_row_bg': val('pjAdminTableRowBg'),
				'o_admin_table_row_alt': val('pjAdminTableRowAlt'),
				'o_admin_table_row_hover': val('pjAdminTableRowHover'),
				'o_admin_table_text': val('pjAdminTableText'),
				'o_admin_heading_text': val('pjAdminHeadingText'),
				'o_admin_muted_text': val('pjAdminMutedText'),
				'o_admin_link_text': val('pjAdminLinkText'),
				'o_admin_sidebar_icon': val('pjAdminSidebarIcon'),
				'o_admin_icon_color': val('pjAdminIconColor'),
				'o_admin_topbar_bg': val('pjAdminTopbarBg'),
				'o_admin_input_bg': val('pjAdminInputBg'),
				'o_admin_card_border': val('pjAdminCardBorder'),
				'o_admin_brand_title': '',
				'o_admin_brand_subtitle': '',
				'pj_save_colors': '1',
			};
			var da = document.querySelector('.pj-density-option.active');
			fields['o_admin_table_density'] = da ? da.getAttribute('data-density') : 'default';

			for (var k in fields) {
				var inp = document.createElement('input');
				inp.type = 'hidden';
				inp.name = k;
				inp.value = fields[k];
				form.appendChild(inp);
			}
			document.body.appendChild(form);
			form.submit();
		});

		// ── Auto-detect and highlight the active palette preset on page load ────────
		function detectActivePalette() {
			// The same picker→data-attribute map used by the palette click handler
			var map = [
				['pjAdminPrimary', 'data-primary'],
				['pjAdminSecondary', 'data-secondary'],
				['pjAdminSidebar', 'data-sidebar'],
				['pjAdminSidebarSecondary', 'data-sidebar-secondary'],
				['pjAdminSidebarActive', 'data-sidebar-active'],
				['pjAdminSidebarText', 'data-sidebar-text'],
				['pjAdminSidebarMuted', 'data-sidebar-muted'],
				['pjAdminMainBg', 'data-main-bg'],
				['pjAdminCardBg2', 'data-card-bg2'],
				['pjAdminTableBorder', 'data-table-border'],
				['pjAdminInputBorder', 'data-input-border'],
				['pjAdminMainText', 'data-main-text'],
				['pjAdminAccent', 'data-accent'],
				['pjAdminLinkColor', 'data-link-color'],
				['pjAdminSuccess', 'data-success'],
				['pjAdminWarning', 'data-warning'],
				['pjAdminInfo', 'data-info'],
				['pjAdminDanger', 'data-danger'],
				['pjAdminTableHeaderBg', 'data-table-header-bg'],
				['pjAdminTableRowBg', 'data-table-row-bg'],
				['pjAdminTableRowAlt', 'data-table-row-alt'],
				['pjAdminTableRowHover', 'data-table-row-hover'],
				['pjAdminTableText', 'data-table-text'],
				['pjAdminHeadingText', 'data-heading-text'],
				['pjAdminMutedText', 'data-muted-text'],
				['pjAdminLinkText', 'data-link-text'],
				['pjAdminSidebarIcon', 'data-sidebar-icon'],
				['pjAdminIconColor', 'data-icon-color'],
				['pjAdminTopbarBg', 'data-topbar-bg'],
				['pjAdminInputBg', 'data-input-bg'],
				['pjAdminCardBorder', 'data-card-border'],
			];

			// Read current picker values (normalised to uppercase #RRGGBB)
			var current = {};
			map.forEach(function(m) {
				var picker = document.getElementById(m[0]);
				current[m[0]] = picker ? picker.value.toUpperCase() : '';
			});

			var matched = null;
			document.querySelectorAll('.pj-admin-palette:not(.pj-admin-palette--custom)').forEach(function(card) {
				if (matched) return;
				var allMatch = map.every(function(m) {
					var cardVal = card.getAttribute(m[1]);
					if (!cardVal) return true; // missing attr — skip this field
					return cardVal.toUpperCase() === current[m[0]];
				});
				if (allMatch) matched = card;
			});

			// Remove any existing active state, then apply
			document.querySelectorAll('.pj-admin-palette').forEach(function(c) {
				c.classList.remove('active');
			});
			if (matched) {
				matched.classList.add('active');
			} else {
				// No preset matched — mark Custom
				var customCard = document.querySelector('.pj-admin-palette--custom');
				if (customCard) customCard.classList.add('active');
			}
		}

		// ── Run once on load to sync live page with saved values ──────────────────
		updatePreview();
		applyLiveColors();
		detectActivePalette();

	})();
</script>
