From d56d53da3d261e9e7f6eb4eff4ffff3e20959580 Mon Sep 17 00:00:00 2001
From: FlyingArowana <16946913+TheSCREWEDSoftware@users.noreply.github.com>
Date: Tue, 23 Jun 2026 16:54:31 +0100
Subject: [PATCH 1/4] Profile theming: dark mode toggle, shared CSS, character
 colour helper

---
 .../src/Hooks/Various/DarkMode.php            | 149 ++++
 .../src/Utils/AcoreCharColors.php             | 109 +++
 src/acore-wp-plugin/src/boot.php              |   2 +
 .../web/assets/css/dark-mode.css              | 706 ++++++++++++++++++
 src/acore-wp-plugin/web/assets/css/main.css   | 606 +++++++++++++--
 src/acore-wp-plugin/web/assets/css/theme.css  | 616 +++++++++++++++
 6 files changed, 2129 insertions(+), 59 deletions(-)
 create mode 100644 src/acore-wp-plugin/src/Hooks/Various/DarkMode.php
 create mode 100644 src/acore-wp-plugin/src/Utils/AcoreCharColors.php
 create mode 100644 src/acore-wp-plugin/web/assets/css/dark-mode.css
 create mode 100644 src/acore-wp-plugin/web/assets/css/theme.css

diff --git a/src/acore-wp-plugin/src/Hooks/Various/DarkMode.php b/src/acore-wp-plugin/src/Hooks/Various/DarkMode.php
new file mode 100644
index 000000000..2cebc0915
--- /dev/null
+++ b/src/acore-wp-plugin/src/Hooks/Various/DarkMode.php
@@ -0,0 +1,149 @@
+<?php
+
+namespace ACore\Hooks\Various;
+
+add_action('admin_bar_menu', __NAMESPACE__ . '\acore_dark_mode_bar_node', 999);
+
+function acore_dark_mode_bar_node($wp_admin_bar) {
+    if (!is_user_logged_in() || !is_admin()) {
+        return;
+    }
+
+    $is_dark = get_user_meta(get_current_user_id(), 'acore_dark_mode', true) === '1';
+
+    $wp_admin_bar->add_node([
+        'id'     => 'acore-dark-mode',
+        'parent' => 'top-secondary',
+        'title'  => '<span id="acore-dm-icon">' . ($is_dark ? '&#9728;' : '&#9790;') . '</span>',
+        'href'   => '#',
+        'meta'   => ['title' => $is_dark ? 'Switch to light mode' : 'Switch to dark mode'],
+    ]);
+}
+
+add_filter('admin_body_class', __NAMESPACE__ . '\acore_dark_mode_body_class');
+
+function acore_dark_mode_body_class($classes) {
+    if (get_user_meta(get_current_user_id(), 'acore_dark_mode', true) === '1') {
+        $classes .= ' acore-dark-mode';
+    }
+    return $classes;
+}
+
+add_action('admin_enqueue_scripts', __NAMESPACE__ . '\acore_dark_mode_enqueue');
+
+function acore_dark_mode_enqueue() {
+    wp_enqueue_style('acore-css', ACORE_URL_PLG . 'web/assets/css/main.css', [], '3.0');
+    wp_enqueue_style('acore-dark-mode', ACORE_URL_PLG . 'web/assets/css/dark-mode.css', ['acore-css'], '3.7');
+    // Central light/dark theme layer (edit colours here). Loaded last so it wins.
+    wp_enqueue_style('acore-theme', ACORE_URL_PLG . 'web/assets/css/theme.css', ['acore-dark-mode'], '3.7');
+
+    $nonce = wp_create_nonce('acore_dark_mode');
+    wp_add_inline_script('jquery-core', acore_dark_mode_js($nonce));
+}
+
+/*
+ * Late inline <style> injected at end of admin head (priority 9999) so it always
+ * wins the cascade over WordPress color-scheme CSS and any plugin stylesheets,
+ * even those that use !important.
+ */
+add_action('admin_head', __NAMESPACE__ . '\acore_dark_mode_late_styles', 9999);
+
+function acore_dark_mode_late_styles() {
+    // Always: WP2FA modal size - applies in both light and dark mode
+    ?>
+    <style id="acore-wp2fa-modal-size">
+        .wp2fa-modal .modal__container {
+            max-width: 900px !important;
+            width: 85vw !important;
+            min-height: 480px !important;
+            font-size: 16px !important;
+            padding: 40px !important;
+        }
+        .wp2fa-modal .modal__content { font-size: 16px !important; }
+        .wp2fa-modal .modal__content * { font-size: inherit !important; }
+    </style>
+    <?php
+
+    if (get_user_meta(get_current_user_id(), 'acore_dark_mode', true) !== '1') {
+        return;
+    }
+    ?>
+    <style id="acore-dark-mode-late">
+
+        /* character list rows - handled by dark-mode.css; only overrides needed here */
+        .acore-dark-mode .acore-char-meta img.race-icon  { border-color: color-mix(in srgb, var(--faction-color, rgba(255,255,255,0.15)) 70%, transparent) !important; }
+        .acore-dark-mode .acore-char-meta img.class-icon { border-color: color-mix(in srgb, var(--cls-dark, rgba(255,255,255,0.15)) 70%, transparent) !important; }
+        .acore-dark-mode #acore-characters-mail .acore-char-row.active { background: #21262d !important; border-top-color: var(--faction-color, #58a6ff) !important; border-right-color: var(--faction-color, #58a6ff) !important; border-bottom-color: var(--faction-color, #58a6ff) !important; border-top-width: 3px !important; border-right-width: 3px !important; border-bottom-width: 3px !important; }
+
+        /* Bootstrap card */
+        .acore-dark-mode .card,
+        .acore-dark-mode .card-body,
+        .acore-dark-mode .card-header { background-color: #161b22 !important; border-color: #30363d !important; color: #c9d1d9 !important; }
+
+        /* mail entries - border color set by JS inline (faction/class), only bg overridden */
+        .acore-dark-mode .mail-entry { background: #161b22 !important; }
+        .acore-dark-mode .mail-recipient,
+        .acore-dark-mode .mail-items { background: #0d1117 !important; }
+        .acore-dark-mode .mail-entry *,
+        .acore-dark-mode .mail-recipient *,
+        .acore-dark-mode .mail-meta { color: #c9d1d9 !important; }
+
+        /* myCred / points widgets */
+        .acore-dark-mode [id^="mycred"],
+        .acore-dark-mode [class*="mycred"] { background: #161b22 !important; border-color: #30363d !important; color: #c9d1d9 !important; }
+        .acore-dark-mode [id^="mycred"] *,
+        .acore-dark-mode [class*="mycred"] * { color: #c9d1d9 !important; }
+
+        /* Bootstrap form-select */
+        .acore-dark-mode .form-select { background-color: #0d1117 !important; border-color: #30363d !important; color: #c9d1d9 !important; }
+
+        /* hr */
+        .acore-dark-mode hr { border-color: #30363d !important; }
+
+    </style>
+    <?php
+}
+
+add_action('wp_ajax_acore_toggle_dark_mode', __NAMESPACE__ . '\acore_ajax_toggle_dark_mode');
+
+function acore_ajax_toggle_dark_mode() {
+    check_ajax_referer('acore_dark_mode', 'nonce');
+    $user_id = get_current_user_id();
+    $new     = get_user_meta($user_id, 'acore_dark_mode', true) === '1' ? '0' : '1';
+    update_user_meta($user_id, 'acore_dark_mode', $new);
+    wp_send_json_success(['dark' => $new === '1']);
+}
+
+function acore_dark_mode_js(string $nonce): string {
+    return <<<JS
+(function($){
+    var nonce = '{$nonce}';
+    $(document).on('click', '#wp-admin-bar-acore-dark-mode > a', function(e){
+        e.preventDefault();
+        $.post(ajaxurl, { action: 'acore_toggle_dark_mode', nonce: nonce }, function(res){
+            if (!res.success) return;
+            var dark = res.data.dark;
+            $('body').toggleClass('acore-dark-mode', dark);
+            $('#acore-dm-icon').html(dark ? '&#9728;' : '&#9790;');
+            $('#wp-admin-bar-acore-dark-mode > a').attr('title', dark ? 'Switch to light mode' : 'Switch to dark mode');
+        });
+    });
+})(jQuery);
+JS;
+}
+
+/*
+ * The WP 2FA setup wizard (profile.php?page=wp-2fa-setup) renders a sealed
+ * full-page template that only prints its own stylesheets. It exposes
+ * `wp_2fa_setup_page_scripts` inside its <head>; we use it to inject theme.css
+ * (whose body.wp2fa-setup rules are dark) only when the user has dark mode on.
+ */
+add_action('wp_2fa_setup_page_scripts', __NAMESPACE__ . '\acore_dark_mode_wizard_css');
+
+function acore_dark_mode_wizard_css() {
+    if (get_user_meta(get_current_user_id(), 'acore_dark_mode', true) !== '1') {
+        return;
+    }
+    echo '<link rel="stylesheet" id="acore-theme-wizard-css" media="all" href="'
+        . esc_url(ACORE_URL_PLG . 'web/assets/css/theme.css') . '?ver=3.7" />' . "\n";
+}
diff --git a/src/acore-wp-plugin/src/Utils/AcoreCharColors.php b/src/acore-wp-plugin/src/Utils/AcoreCharColors.php
new file mode 100644
index 000000000..13620f841
--- /dev/null
+++ b/src/acore-wp-plugin/src/Utils/AcoreCharColors.php
@@ -0,0 +1,109 @@
+<?php
+
+namespace ACore\Utils;
+
+class AcoreCharColors {
+
+    /**
+     * WotLK class colors.
+     * light = adjusted for visibility on white backgrounds (Rogue/Priest darkened)
+     * dark  = original WoW colors, bright enough for dark backgrounds
+     */
+    const CLASS_NAMES = [
+        1  => 'Warrior',
+        2  => 'Paladin',
+        3  => 'Hunter',
+        4  => 'Rogue',
+        5  => 'Priest',
+        6  => 'Death Knight',
+        7  => 'Shaman',
+        8  => 'Mage',
+        9  => 'Warlock',
+        11 => 'Druid',
+    ];
+
+    const CLASS_COLORS = [
+        1  => ['light' => '#C69B6D', 'dark' => '#C69B6D'], // Warrior
+        2  => ['light' => '#F48CBA', 'dark' => '#F48CBA'], // Paladin
+        3  => ['light' => '#AAD372', 'dark' => '#AAD372'], // Hunter
+        4  => ['light' => '#C8A800', 'dark' => '#FFF468'], // Rogue (yellow → darkened for light bg)
+        5  => ['light' => '#909090', 'dark' => '#E0E0E0'], // Priest (white → grey for light bg)
+        6  => ['light' => '#C41E3A', 'dark' => '#FF3355'], // Death Knight
+        7  => ['light' => '#0070DD', 'dark' => '#3399FF'], // Shaman
+        8  => ['light' => '#3FC7EB', 'dark' => '#3FC7EB'], // Mage
+        9  => ['light' => '#8788EE', 'dark' => '#9A9BFF'], // Warlock
+        11 => ['light' => '#FF7C0A', 'dark' => '#FF7C0A'], // Druid
+    ];
+
+    const FALLBACK_LIGHT = '#646970';
+    const FALLBACK_DARK  = '#8b949e';
+
+    const RACE_NAMES = [
+        1  => 'Human',
+        2  => 'Orc',
+        3  => 'Dwarf',
+        4  => 'Night Elf',
+        5  => 'Undead',
+        6  => 'Tauren',
+        7  => 'Gnome',
+        8  => 'Troll',
+        10 => 'Blood Elf',
+        11 => 'Draenei',
+    ];
+
+    /** Maps race ID → faction. */
+    const RACE_FACTION = [
+        1  => 'alliance', // Human
+        2  => 'horde',    // Orc
+        3  => 'alliance', // Dwarf
+        4  => 'alliance', // Night Elf
+        5  => 'horde',    // Undead
+        6  => 'horde',    // Tauren
+        7  => 'alliance', // Gnome
+        8  => 'horde',    // Troll
+        10 => 'horde',    // Blood Elf
+        11 => 'alliance', // Draenei
+    ];
+
+    public static function getClassName(int $classId): string {
+        return self::CLASS_NAMES[$classId] ?? 'Unknown';
+    }
+
+    public static function getRaceName(int $raceId): string {
+        return self::RACE_NAMES[$raceId] ?? 'Unknown';
+    }
+
+    public static function getFaction(int $raceId): string {
+        return self::RACE_FACTION[$raceId] ?? 'unknown';
+    }
+
+    /**
+     * Returns inline style string for a character row.
+     * Uses CSS custom properties so dark-mode.css can override via color-mix.
+     */
+    public static function rowStyle(int $classId, int $raceId): string {
+        $cls     = self::CLASS_COLORS[$classId]  ?? ['light' => self::FALLBACK_LIGHT, 'dark' => self::FALLBACK_DARK];
+        $faction = self::RACE_FACTION[$raceId]   ?? 'unknown';
+        $fLight  = $faction === 'alliance' ? '#3FACF4' : '#FF653D';
+        $fDark   = $faction === 'alliance' ? '#3FACF4' : '#FF653D';
+        return sprintf(
+            '--cls-light:%s; --cls-dark:%s; --faction-color:%s; border-top:2px solid %s; border-right:2px solid %s; border-bottom:2px solid %s; border-left:4px solid %s;',
+            $cls['light'], $cls['dark'], $fLight,
+            $fLight, $fLight, $fLight, $cls['light']
+        );
+    }
+
+    /** Returns the expansion slug for a level, used as data-exp attribute. */
+    public static function expansionSlug(int $level): string {
+        if ($level <= 60) return 'vanilla';
+        if ($level <= 70) return 'tbc';
+        return 'wrath';
+    }
+
+    /** Returns the expansion label for a level, used as title attribute. */
+    public static function expansionLabel(int $level): string {
+        if ($level <= 60) return 'Classic';
+        if ($level <= 70) return 'The Burning Crusade';
+        return 'Wrath of the Lich King';
+    }
+}
diff --git a/src/acore-wp-plugin/src/boot.php b/src/acore-wp-plugin/src/boot.php
index 7a280f60a..a7b832cf3 100644
--- a/src/acore-wp-plugin/src/boot.php
+++ b/src/acore-wp-plugin/src/boot.php
@@ -3,6 +3,7 @@
 define('FS_METHOD', 'direct');
 
 require_once ACORE_PATH_PLG . 'src/Utils/AcoreUtils.php';
+require_once ACORE_PATH_PLG . 'src/Utils/AcoreCharColors.php';
 
 require_once ACORE_PATH_PLG . 'src/Deps/class-tgm-plugin-activation.php';
 
@@ -18,6 +19,7 @@
 require_once ACORE_PATH_PLG . 'src/Hooks/Subscriptions/sync_subscription.php';
 
 require_once ACORE_PATH_PLG . 'src/Hooks/Various/tgmplugin_activator.php';
+require_once ACORE_PATH_PLG . 'src/Hooks/Various/DarkMode.php';
 
 require_once ACORE_PATH_PLG . 'src/Hooks/User/Include.php';
 
diff --git a/src/acore-wp-plugin/web/assets/css/dark-mode.css b/src/acore-wp-plugin/web/assets/css/dark-mode.css
new file mode 100644
index 000000000..ebc10dfe0
--- /dev/null
+++ b/src/acore-wp-plugin/web/assets/css/dark-mode.css
@@ -0,0 +1,706 @@
+/*
+Acore dark mode overrides
+*/
+
+/* ============================================================
+   Profile page & sub-tabs — dark mode appearance overrides only
+   (layout/spacing lives in main.css and loads for all modes)
+   ============================================================ */
+
+body.acore-dark-mode.profile-php #wpbody-content h2,
+body.acore-dark-mode.profile-php #wpbody-content h3 {
+    border-bottom-color: #30363d;
+}
+
+/* dark mode tweaks for security page */
+body.acore-dark-mode #acore-security-page .postbox {
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Fix hardcoded dark thead in item restoration — let dark mode handle it */
+body.acore-dark-mode #acore-item-restoration-page .table thead {
+    background: #1d2327;
+    color: #fff;
+}
+
+/* --- Item Restoration dark mode --- */
+body.acore-dark-mode #acore-item-restoration-page .table {
+    color: #c9d1d9;
+    border-color: #30363d;
+    --bs-table-bg: transparent;
+    --bs-table-striped-bg: transparent;
+    --bs-table-border-color: #30363d;
+}
+
+body.acore-dark-mode #acore-item-restoration-page .table > :not(caption) > * > * {
+    background-color: #161b22 !important;
+    border-bottom-color: #30363d !important;
+    color: #c9d1d9 !important;
+    --bs-table-bg: #161b22;
+    --bs-table-color: #c9d1d9;
+}
+
+body.acore-dark-mode #acore-item-restoration-page .table thead tr th {
+    background: #21262d !important;
+    color: #e6edf3 !important;
+    border-color: #30363d !important;
+}
+
+body.acore-dark-mode #acore-item-restoration-page .table tbody td,
+body.acore-dark-mode #acore-item-restoration-page .table tbody th {
+    background: #161b22 !important;
+    color: #c9d1d9 !important;
+    border-color: #30363d !important;
+}
+
+/* alert-info (no items / info messages) */
+body.acore-dark-mode #acore-item-restoration-page .alert-info {
+    background-color: #1a2f1a !important;
+    border-color: #2d6a2d !important;
+    color: #56d364 !important;
+}
+
+/* active character row */
+body.acore-dark-mode #acore-characters-item-restore .acore-char-row.active {
+    background: #21262d !important;
+    border-top-color: var(--faction-color, #58a6ff) !important;
+    border-right-color: var(--faction-color, #58a6ff) !important;
+    border-bottom-color: var(--faction-color, #58a6ff) !important;
+    border-top-width: 3px !important;
+    border-right-width: 3px !important;
+    border-bottom-width: 3px !important;
+}
+
+/* ============================================================ */
+
+/* --- expansion selector (profile page) --- */
+.acore-expansion-wrapper {
+    position: relative;
+    padding-top: 14px;
+    margin-bottom: 8px;
+}
+
+.acore-expansion-arrow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 10px solid #646970;
+    transform: translateX(-50%);
+    transition: left 0.15s ease;
+}
+
+.acore-expansion-selector {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.acore-expansion-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 14px 7px 10px;
+    background: #fff;
+    border: 1px solid #dcdcde;
+    border-left: 4px solid var(--exp-color, #646970);
+    border-radius: 2px;
+    cursor: pointer;
+}
+
+.acore-expansion-option input[type="radio"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+
+.acore-expansion-option .acore-expansion-label {
+    font-weight: 600;
+    font-size: 13px;
+    color: var(--exp-color, #646970);
+}
+
+.acore-expansion-option.is-selected {
+    box-shadow: 0 0 0 2px var(--exp-color, #646970);
+}
+
+.acore-expansion-option:hover {
+    background: #f6f7f7;
+}
+
+.acore-expansion-warning {
+    color: #8a6d3b;
+    background: #fcf8e3;
+    border-left: 4px solid #f0ad4e;
+    border-radius: 2px;
+    padding: 8px 12px;
+    margin: 0;
+    font-size: 12px;
+    max-width: 520px;
+}
+
+/* dark mode */
+body.acore-dark-mode .acore-expansion-option {
+    background: #1c2128 !important;
+    border-top-color: #30363d !important;
+    border-right-color: #30363d !important;
+    border-bottom-color: #30363d !important;
+    border-left-color: var(--exp-color, #8b949e) !important;
+}
+
+body.acore-dark-mode .acore-expansion-option:hover {
+    background: #262d36 !important;
+}
+
+body.acore-dark-mode .acore-expansion-option.is-selected {
+    box-shadow: 0 0 0 2px var(--exp-color, #8b949e) !important;
+}
+
+body.acore-dark-mode .acore-expansion-warning {
+    background: #2d2208 !important;
+    border-left-color: #f0ad4e !important;
+    color: #d4a843 !important;
+}
+
+/* --- admin bar toggle icon --- */
+#wp-admin-bar-acore-dark-mode > .ab-item {
+    padding: 0 8px !important;
+    cursor: pointer;
+    display: flex !important;
+    align-items: center;
+    height: 32px;
+}
+
+#wp-admin-bar-acore-dark-mode > .ab-item #acore-dm-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    font-size: 18px;
+    line-height: 1;
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    border-radius: 5px;
+    padding: 2px;
+}
+
+/* --- Bootstrap 5 CSS variable overrides (must come before class rules) --- */
+body.acore-dark-mode {
+    --bs-body-bg: #0d1117;
+    --bs-body-color: #c9d1d9;
+    --bs-card-bg: #161b22;
+    --bs-card-border-color: #30363d;
+    --bs-card-cap-bg: #0d1117;
+    --bs-border-color: #30363d;
+    --bs-secondary-color: #8b949e;
+    --bs-link-color: #58a6ff;
+    --bs-link-hover-color: #79c0ff;
+    --bs-list-group-bg: #161b22;
+    --bs-list-group-border-color: #30363d;
+    --bs-list-group-color: #c9d1d9;
+}
+
+/* --- base --- */
+body.acore-dark-mode,
+body.acore-dark-mode #wpwrap {
+    background: #0d1117;
+    color: #c9d1d9;
+}
+
+body.acore-dark-mode #wpcontent,
+body.acore-dark-mode #wpfooter {
+    background: #0d1117;
+}
+
+body.acore-dark-mode #wpbody-content {
+    background: #0d1117;
+}
+
+/* --- headings & text --- */
+body.acore-dark-mode h1,
+body.acore-dark-mode h2,
+body.acore-dark-mode h3,
+body.acore-dark-mode h4,
+body.acore-dark-mode h5,
+body.acore-dark-mode p,
+body.acore-dark-mode label,
+body.acore-dark-mode span,
+body.acore-dark-mode li {
+    color: #c9d1d9;
+}
+
+body.acore-dark-mode .description,
+body.acore-dark-mode .text-muted {
+    color: #8b949e !important;
+}
+
+body.acore-dark-mode hr {
+    border-color: #30363d;
+}
+
+/* --- postboxes (WP core) --- */
+body.acore-dark-mode .postbox,
+body.acore-dark-mode #poststuff .postbox {
+    background: #161b22;
+    border-color: #30363d;
+}
+
+body.acore-dark-mode .postbox-header {
+    background: #161b22;
+    border-bottom-color: #30363d;
+}
+
+body.acore-dark-mode .postbox-header h2,
+body.acore-dark-mode .postbox-header .hndle {
+    color: #c9d1d9;
+}
+
+body.acore-dark-mode .postbox .inside {
+    color: #c9d1d9;
+}
+
+/* --- Bootstrap card --- */
+body.acore-dark-mode .card {
+    background-color: #161b22 !important;
+    border-color: #30363d !important;
+    color: #c9d1d9 !important;
+}
+
+body.acore-dark-mode .card-body {
+    background-color: #161b22 !important;
+    color: #c9d1d9 !important;
+}
+
+body.acore-dark-mode .card-header {
+    background-color: #0d1117 !important;
+    border-bottom-color: #30363d !important;
+    color: #c9d1d9 !important;
+}
+
+body.acore-dark-mode .card-title {
+    color: #c9d1d9 !important;
+}
+
+/* --- Character list rows --- */
+body.acore-dark-mode .acore-char-row {
+    background: #1c2128 !important;
+    /* faction color for top/right/bottom, dimmed for dark mode */
+    border-top-color: color-mix(in srgb, var(--faction-color, #30363d) 55%, #0d1117) !important;
+    border-right-color: color-mix(in srgb, var(--faction-color, #30363d) 55%, #0d1117) !important;
+    border-bottom-color: color-mix(in srgb, var(--faction-color, #30363d) 55%, #0d1117) !important;
+    border-left-color: var(--cls-dark, #8b949e) !important;
+}
+
+body.acore-dark-mode .acore-char-pos {
+    color: #e6edf3 !important;
+    background: rgba(255, 255, 255, 0.12) !important;
+}
+
+body.acore-dark-mode .acore-char-name {
+    color: #c9d1d9 !important;
+}
+
+body.acore-dark-mode .acore-char-meta {
+    color: #8b949e !important;
+}
+
+body.acore-dark-mode .acore-char-row:hover {
+    background: #262d36 !important;
+}
+
+body.acore-dark-mode #acore-characters-mail .acore-char-row.active {
+    background: #21262d !important;
+    border-top-color: var(--faction-color, #58a6ff) !important;
+    border-right-color: var(--faction-color, #58a6ff) !important;
+    border-bottom-color: var(--faction-color, #58a6ff) !important;
+    border-top-width: 3px !important;
+    border-right-width: 3px !important;
+    border-bottom-width: 3px !important;
+}
+
+/* --- Bootstrap form-select --- */
+body.acore-dark-mode .form-select {
+    background-color: #0d1117 !important;
+    border-color: #30363d !important;
+    color: #c9d1d9 !important;
+}
+
+body.acore-dark-mode .form-select:focus {
+    border-color: #58a6ff !important;
+    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25) !important;
+}
+
+/* --- form elements --- */
+body.acore-dark-mode input[type="text"],
+body.acore-dark-mode input[type="password"],
+body.acore-dark-mode input[type="email"],
+body.acore-dark-mode input[type="number"],
+body.acore-dark-mode input[type="search"],
+body.acore-dark-mode input[type="url"],
+body.acore-dark-mode select,
+body.acore-dark-mode textarea {
+    background-color: #0d1117;
+    border-color: #30363d;
+    color: #c9d1d9;
+    box-shadow: none;
+}
+
+body.acore-dark-mode input[type="text"]:focus,
+body.acore-dark-mode input[type="password"]:focus,
+body.acore-dark-mode select:focus,
+body.acore-dark-mode textarea:focus {
+    border-color: #58a6ff;
+    box-shadow: 0 0 0 1px #58a6ff;
+    outline: none;
+}
+
+body.acore-dark-mode .form-table th {
+    color: #8b949e;
+}
+
+body.acore-dark-mode .form-table td {
+    color: #c9d1d9;
+}
+
+/* --- mail entries — border color comes from JS inline (faction/class), only override bg --- */
+body.acore-dark-mode .mail-entry {
+    background: #161b22 !important;
+    color: #c9d1d9 !important;
+}
+
+body.acore-dark-mode .mail-recipient,
+body.acore-dark-mode .mail-items {
+    background: #0d1117 !important;
+    color: #c9d1d9 !important;
+}
+
+body.acore-dark-mode .mail-header,
+body.acore-dark-mode .mail-meta,
+body.acore-dark-mode .mail-subject,
+body.acore-dark-mode .mail-money,
+body.acore-dark-mode .recipient-name {
+    color: #c9d1d9 !important;
+}
+
+/* --- tables --- */
+body.acore-dark-mode .widefat,
+body.acore-dark-mode .wp-list-table {
+    background: #161b22;
+    border-color: #30363d;
+    color: #c9d1d9;
+}
+
+body.acore-dark-mode .widefat thead th,
+body.acore-dark-mode .widefat tfoot th,
+body.acore-dark-mode .wp-list-table thead th {
+    background: #0d1117;
+    color: #8b949e;
+    border-bottom-color: #30363d;
+}
+
+body.acore-dark-mode .widefat td,
+body.acore-dark-mode .widefat th,
+body.acore-dark-mode .wp-list-table td {
+    color: #c9d1d9;
+    border-bottom-color: #21262d;
+}
+
+body.acore-dark-mode .striped > tbody > :nth-child(odd) > td,
+body.acore-dark-mode .striped > tbody > :nth-child(odd) > th,
+body.acore-dark-mode .alternate {
+    background: #1c2128;
+}
+
+/* --- buttons --- */
+body.acore-dark-mode .button,
+body.acore-dark-mode .button-secondary {
+    background: #21262d;
+    border-color: #30363d;
+    color: #c9d1d9;
+    text-shadow: none;
+    box-shadow: none;
+}
+
+body.acore-dark-mode .button:hover,
+body.acore-dark-mode .button-secondary:hover {
+    background: #30363d;
+    border-color: #8b949e;
+    color: #f0f6fc;
+}
+
+body.acore-dark-mode .button-primary {
+    background: #1f6feb;
+    border-color: #1f6feb;
+    color: #fff;
+    text-shadow: none;
+    box-shadow: none;
+}
+
+body.acore-dark-mode .button-primary:hover {
+    background: #388bfd;
+    border-color: #388bfd;
+}
+
+body.acore-dark-mode .button-primary:disabled,
+body.acore-dark-mode .button-primary[disabled] {
+    background: #1f6feb;
+    opacity: 0.5;
+}
+
+/* --- Bootstrap buttons --- */
+body.acore-dark-mode .btn-primary {
+    background-color: #1f6feb !important;
+    border-color: #1f6feb !important;
+}
+
+body.acore-dark-mode .btn-primary:hover {
+    background-color: #388bfd !important;
+    border-color: #388bfd !important;
+}
+
+body.acore-dark-mode .btn-outline-secondary,
+body.acore-dark-mode .btn-secondary {
+    background-color: #21262d !important;
+    border-color: #30363d !important;
+    color: #c9d1d9 !important;
+}
+
+/* --- notices --- */
+body.acore-dark-mode .notice,
+body.acore-dark-mode div.updated,
+body.acore-dark-mode div.error {
+    background: #161b22;
+    border-color: #30363d;
+    color: #c9d1d9;
+}
+
+body.acore-dark-mode .notice-success,
+body.acore-dark-mode .updated {
+    border-left-color: #3fb950;
+}
+
+body.acore-dark-mode .notice-error,
+body.acore-dark-mode div.error {
+    border-left-color: #f85149;
+}
+
+body.acore-dark-mode .notice-warning {
+    border-left-color: #d29922;
+}
+
+body.acore-dark-mode .notice p,
+body.acore-dark-mode div.updated p,
+body.acore-dark-mode div.error p {
+    color: #c9d1d9;
+}
+
+/* --- links --- */
+body.acore-dark-mode a {
+    color: #58a6ff;
+}
+
+body.acore-dark-mode a:hover {
+    color: #79c0ff;
+}
+
+/* --- footer --- */
+body.acore-dark-mode #wpfooter {
+    border-top-color: #30363d;
+    color: #8b949e;
+}
+
+body.acore-dark-mode #wpfooter a {
+    color: #58a6ff;
+}
+
+/* --- myCred widgets --- */
+body.acore-dark-mode [id^="mycred"],
+body.acore-dark-mode [class^="mycred"],
+body.acore-dark-mode .mycred-wrap,
+body.acore-dark-mode .mycred-widget {
+    background: #161b22 !important;
+    border-color: #30363d !important;
+    color: #c9d1d9 !important;
+}
+
+body.acore-dark-mode .mycred-history,
+body.acore-dark-mode .mycred-history *,
+body.acore-dark-mode #mycred-log-wrap,
+body.acore-dark-mode #mycred-log-wrap * {
+    background: #161b22 !important;
+    color: #c9d1d9 !important;
+    border-color: #30363d !important;
+}
+
+/* WP profile page balance box */
+body.acore-dark-mode #mycred-user-balance,
+body.acore-dark-mode .user-profile-mycred,
+body.acore-dark-mode td.mycred-field,
+body.acore-dark-mode th.mycred-field {
+    color: #c9d1d9 !important;
+}
+
+/* --- Scroll of Resurrection page --- */
+body.acore-dark-mode .acore-rscroll .card {
+    background: #161b22;
+    border-color: #30363d;
+    color: #c9d1d9;
+}
+
+body.acore-dark-mode .acore-rscroll .card-body {
+    color: #c9d1d9;
+}
+
+body.acore-dark-mode .acore-rscroll h5 {
+    color: #e6edf3;
+}
+
+body.acore-dark-mode .acore-rscroll hr {
+    border-color: #30363d;
+    opacity: 1;
+}
+
+body.acore-dark-mode .acore-rscroll .table {
+    color: #c9d1d9;
+    border-color: #30363d;
+    --bs-table-bg: transparent;
+    --bs-table-striped-bg: transparent;
+    --bs-table-border-color: #30363d;
+}
+
+body.acore-dark-mode .acore-rscroll .table > :not(caption) > * > * {
+    background-color: transparent;
+    border-bottom-color: #30363d;
+    color: #ffffff;
+}
+
+/* Row label column (th inside tbody) */
+body.acore-dark-mode .acore-rscroll .table tbody th {
+    background: #21262d !important;
+    color: #e6edf3 !important;
+    font-weight: 600;
+    border-color: #30363d !important;
+}
+
+body.acore-dark-mode .acore-rscroll .table tbody td {
+    background: #161b22 !important;
+    color: #ffffff !important;
+    border-color: #30363d !important;
+}
+
+/* thead row (Player Commands table) */
+body.acore-dark-mode .acore-rscroll .table thead tr th,
+body.acore-dark-mode .acore-rscroll .table-light thead tr th {
+    background: #21262d !important;
+    color: #e6edf3 !important;
+    border-color: #30363d !important;
+}
+
+body.acore-dark-mode .acore-rscroll code {
+    background: #0d1117;
+    color: #f85149;
+    border: 1px solid #30363d;
+    padding: 1px 5px;
+    border-radius: 3px;
+}
+
+body.acore-dark-mode .acore-rscroll .text-muted {
+    color: #8b949e !important;
+}
+
+body.acore-dark-mode .acore-rscroll strong {
+    color: #818cf8;
+}
+
+body.acore-dark-mode .acore-rscroll ol,
+body.acore-dark-mode .acore-rscroll p,
+body.acore-dark-mode .acore-rscroll li {
+    color: #ffffff;
+}
+
+body.acore-dark-mode .acore-rscroll .text-muted {
+    color: #b0b8c4 !important;
+}
+
+/* Force white text on all badges */
+body.acore-dark-mode .acore-rscroll .badge {
+    color: #ffffff !important;
+}
+
+/* Warning badge: yellow is unreadable with white text — shift to solid orange */
+body.acore-dark-mode .acore-rscroll .badge.bg-warning {
+    background-color: #c27400 !important;
+}
+
+/* --- Expansion level badge — dark mode --- */
+body.acore-dark-mode .acore-level { color: #8b949e; }
+body.acore-dark-mode .acore-level[data-exp="vanilla"] { background: rgba(195, 147, 97, 0.18); border-color: #C39361; color: #c9d1d9; }
+body.acore-dark-mode .acore-level[data-exp="tbc"]     { background: rgba(98, 201, 7, 0.18);   border-color: #62C907; color: #c9d1d9; }
+body.acore-dark-mode .acore-level[data-exp="wrath"]   { background: rgba(93, 172, 235, 0.18); border-color: #5DACEB; color: #c9d1d9; }
+
+/* --- Mail Return dark mode --- */
+body.acore-dark-mode #mail-return-heading {
+    color: #e6edf3 !important;
+}
+
+body.acore-dark-mode #mail-return-items .mail-entry {
+    background: #161b22;
+    border-color: #30363d;
+}
+
+body.acore-dark-mode #mail-return-items .mail-header {
+    background: #0d1117;
+    border-bottom-color: #30363d;
+}
+
+body.acore-dark-mode #mail-return-items .mail-recipient,
+body.acore-dark-mode #mail-return-items .mail-subject,
+body.acore-dark-mode #mail-return-items .mail-meta {
+    color: #c9d1d9;
+}
+
+body.acore-dark-mode #mail-return-items .mail-to-label,
+body.acore-dark-mode #mail-return-items .mail-subject-label {
+    color: #8b949e;
+}
+
+body.acore-dark-mode #mail-return-items .mail-items-grid {
+    background: #0d1117;
+    border-top-color: #30363d;
+}
+
+body.acore-dark-mode #mail-return-items .mail-item-slot {
+    background: #161b22;
+}
+
+body.acore-dark-mode #mail-return-items .mail-item-slot a {
+    color: #c9d1d9;
+}
+
+body.acore-dark-mode #mail-return-items .mail-cod-label {
+    color: #8b949e;
+}
+
+body.acore-dark-mode .mail-return-button {
+    background: #21262d !important;
+    border-color: #30363d !important;
+    color: #c9d1d9 !important;
+}
+
+body.acore-dark-mode .mail-return-button:hover {
+    background: #30363d !important;
+    color: #e6edf3 !important;
+}
+
+body.acore-dark-mode #mail-return-empty {
+    color: #8b949e;
+}
diff --git a/src/acore-wp-plugin/web/assets/css/main.css b/src/acore-wp-plugin/web/assets/css/main.css
index f36f2ab4e..f12f03ed6 100644
--- a/src/acore-wp-plugin/web/assets/css/main.css
+++ b/src/acore-wp-plugin/web/assets/css/main.css
@@ -17,62 +17,187 @@ body {
     background-color: var(--bs-teal) !important;
 }
 
-/* start char-order */
-#acore-characters-order .menu-item-handle {
+/* start acore-char-list — shared character row layout */
+.acore-char-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
 }
 
-#acore-characters-order .item-type {
-    padding: 0px;
-    margin-top: 5px;
+.acore-char-list li {
+    margin-bottom: 4px;
 }
 
-#acore-characters-order .item-type img {
-    display: inline-block;
-    vertical-align: middle;
-    height: 32px;
-    transform: translateZ(0); /* prevent blurry image on chrome */
+.acore-char-list input[type="hidden"],
+.acore-char-list input[name="characterorder[]"] {
+    display: none;
 }
 
-#acore-characters-order input {
-    display: none;
+button.acore-char-row {
+    font: inherit;
+    color: inherit;
+    text-align: left;
+    cursor: pointer;
+    -webkit-appearance: none;
+    appearance: none;
 }
 
-/* end char order */
+/* Clicking a card/button shouldn't select its text (name, number, label). */
+button.acore-char-row,
+button.acore-char-row *,
+.item-restore-card,
+.item-restore-card * {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
 
-/* start char-unstuck */
-#acore-characters-unstuck .menu-item-handle {
-    cursor: default;
+/* Tools setting labels: informational only (no control activation), help cursor. */
+.acore-help-label {
+    cursor: help;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
-.unstuck-button {
-    background-size: cover;
-    border: none;
-    color: transparent;
-    cursor: pointer;
+.acore-char-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 46px;
+    padding: 6px 12px;
+    box-sizing: border-box;
+    background: #fff;
+    /* top/right/bottom use faction color; left uses class color */
+    border-top: 2px solid var(--faction-color, #dcdcde);
+    border-right: 2px solid var(--faction-color, #dcdcde);
+    border-bottom: 2px solid var(--faction-color, #dcdcde);
+    border-left: 4px solid var(--cls-light, #646970);
+    border-radius: 2px;
 }
 
-.unstuck-button:disabled {
-    opacity: 0.5; /* Adjust the opacity for disabled state */
-    cursor: not-allowed;
+.acore-char-pos {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 22px;
+    height: 22px;
+    font-size: 11px;
+    font-weight: 700;
+    color: #3c434a;
+    background: rgba(0, 0, 0, 0.10);
+    border-radius: 4px;
+    margin-right: 8px;
+    flex-shrink: 0;
 }
 
-#acore-characters-unstuck .item-type {
-    padding: 0px;
-    margin-top: 5px;
+.acore-char-name {
+    flex: 1;
+    font-weight: 500;
 }
 
-#acore-characters-unstuck .item-type img {
+.acore-char-meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: #646970;
+}
+
+.acore-level {
+    display: inline-block;
+    text-transform: uppercase;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    min-width: 52px;
+    text-align: center;
+    /* badge shape */
+    padding: 2px 6px;
+    border-radius: 3px;
+    border: 1.5px solid currentcolor;
+    color: #50575e;
+}
+
+/* Expansion badge: filled background + matching border */
+.acore-level[data-exp="vanilla"] {
+    background: rgba(195, 147, 97, 0.12);
+    border-color: #C39361;
+    color: #50575e;
+}
+.acore-level[data-exp="tbc"] {
+    background: rgba(98, 201, 7, 0.12);
+    border-color: #62C907;
+    color: #50575e;
+}
+.acore-level[data-exp="wrath"] {
+    background: rgba(93, 172, 235, 0.12);
+    border-color: #5DACEB;
+    color: #50575e;
+}
+
+.acore-char-meta img {
     display: inline-block;
     vertical-align: middle;
     height: 32px;
+    width: 32px;
     transform: translateZ(0); /* prevent blurry image on chrome */
+    border: 3px solid rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
 }
 
-#acore-characters-unstuck input {
-    display: none;
+/* Race icon: faction color border */
+.acore-char-meta img.race-icon {
+    border-color: var(--faction-color, rgba(0, 0, 0, 0.12));
+}
+
+/* Class icon: class color border */
+.acore-char-meta img.class-icon {
+    border-color: var(--cls-light, rgba(0, 0, 0, 0.12));
+}
+
+/* sortable drag cursor on order list */
+#acore-characters-order .acore-char-row {
+    cursor: grab;
+}
+
+#acore-characters-order .acore-char-row:active {
+    cursor: grabbing;
 }
 
-/* end char unstuck */
+/* click cursor on mail return */
+#acore-characters-mail .acore-char-row {
+    cursor: pointer;
+}
+
+#acore-characters-mail .acore-char-row.active {
+    background: #f0f4f8;
+    /* thicken faction borders to signal selection; border-left (class color) unchanged */
+    border-top-width: 3px;
+    border-right-width: 3px;
+    border-bottom-width: 3px;
+}
+/* end acore-char-list */
+
+/* start unstuck button */
+.unstuck-button {
+    border: none;
+    color: transparent;
+    cursor: pointer;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    padding: 0;
+}
+
+.unstuck-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+/* end unstuck button */
 
 
 /* start raf progress view */
@@ -206,66 +331,198 @@ body {
 
 /* end raf progress view */
 
+/* start mail-return layout */
+#acore-mail-return-page {
+    max-width: 100%;
+}
+
+#mail-return-layout {
+    display: grid;
+    grid-template-columns: 460px 1fr 1fr;
+    gap: 16px;
+    align-items: start;
+}
+
+/* col 1 — always the same width */
+#mail-return-sidebar {
+    grid-column: 1;
+}
+
+/* cols 2–3 — hidden until mails exist */
+#mail-return-content {
+    display: none;
+    grid-column: 2 / 4;
+}
+
+/* "Unread Sent Mails" heading — inside card-header */
+#mail-return-heading {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+/* mail entries fill cols 2–3 as a 2-column inner grid */
+#mail-return-items {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+}
+
+@media (max-width: 800px) {
+    #mail-return-layout {
+        grid-template-columns: 1fr;
+    }
+    #mail-return-content {
+        grid-column: 1;
+    }
+    #mail-return-items {
+        grid-template-columns: 1fr;
+    }
+}
+/* end mail-return layout */
+
 /* start mail-return */
 #mail-return-items .mail-entry {
     background: #fff;
-    border: 1px solid #ccd0d4;
+    /* JS overrides colors per-mail; thickness mirrors character selector rows */
+    border-top: 2px solid #ccd0d4;
+    border-right: 2px solid #ccd0d4;
+    border-bottom: 2px solid #ccd0d4;
+    border-left: 4px solid #646970;
     border-radius: 4px;
     padding: 12px;
-    margin-bottom: 10px;
 }
 
+/* Row 1: recipient left, return button right — class-colored border-left */
 #mail-return-items .mail-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-}
-
-#mail-return-items .mail-subject {
-    font-weight: 600;
-    font-size: 14px;
+    gap: 8px;
+    margin-bottom: 8px;
+    /* avoid border shorthand so JS inline border-left-color wins */
+    border-top: 1px solid #dcdcde;
+    border-right: 1px solid #dcdcde;
+    border-bottom: 1px solid #dcdcde;
+    border-left: 4px solid #646970; /* JS overrides color per card */
+    border-radius: 2px;
+    padding: 7px 10px;
+    background: #f9f9f9;
 }
 
 #mail-return-items .mail-recipient {
     display: flex;
     align-items: center;
     gap: 6px;
-    margin-top: 8px;
-    padding: 6px 10px;
-    background: #f6f7f7;
-    border-radius: 4px;
+    flex-wrap: wrap;
+    background: none;
+    padding: 0;
+    margin: 0;
 }
 
-#mail-return-items .mail-recipient img {
+#mail-return-items .mail-recipient-icon {
     display: inline-block;
-    vertical-align: middle;
-    height: 24px;
-    width: 24px;
+    height: 28px;
+    width: 28px;
     transform: translateZ(0);
+    border: 3px solid rgba(0, 0, 0, 0.18);
+    border-radius: 4px;
 }
 
-#mail-return-items .mail-recipient .recipient-name {
-    font-weight: 500;
+#mail-return-items .mail-to-label {
+    font-size: 12px;
+    color: #646970;
+    text-transform: uppercase;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+}
+
+#mail-return-items .recipient-name {
+    font-weight: 600;
+    font-size: 14px;
 }
 
-#mail-return-items .mail-meta {
+#mail-return-items .recipient-level {
+    font-size: 11px;
     color: #646970;
-    font-size: 12px;
-    margin-top: 6px;
+    text-transform: uppercase;
+    font-weight: 600;
+    letter-spacing: 0.04em;
 }
 
-#mail-return-items .mail-items {
-    margin-top: 8px;
-    padding: 6px 10px;
-    background: #f6f7f7;
-    border-radius: 4px;
+/* Row 2: subject */
+#mail-return-items .mail-subject {
     font-size: 13px;
+    color: #50575e;
+    margin-bottom: 8px;
+}
+#mail-return-items .mail-subject-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #8b949e;
+    margin-right: 3px;
+}
+
+.mail-cod-label {
+    font-size: 12px;
+    color: #a00;
+}
+
+/* Row 3: item icon grid — centered in card */
+.mail-items-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 56px);
+    gap: 6px;
+    justify-content: center;
 }
 
-#mail-return-items .mail-money {
-    margin-top: 6px;
+@media (max-width: 480px) {
+    .mail-items-grid {
+        grid-template-columns: repeat(4, 56px);
+    }
+}
+
+.mail-item-slot {
+    position: relative;
+    width: 56px;
+    height: 56px;
+    background: #1c1c1c;
+    border: 3px solid rgba(255, 255, 255, 0.22);
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.mail-item-slot > a {
+    position: absolute;
+    inset: 0;
+    display: block;
+    font-size: 0;
+    line-height: 0;
+    color: transparent !important;
+    overflow: hidden;
+    /* WowHead sets background-image inline on the <a> — override size/position */
+    background-size: cover !important;
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+}
+
+/* Quantity — bottom strip with semi-transparent overlay */
+.mail-item-qty {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.55);
+    color: #fff;
     font-size: 13px;
-    color: #646970;
+    font-weight: 700;
+    text-align: center;
+    padding: 2px 0 1px;
+    line-height: 1.3;
+    letter-spacing: 0.02em;
+    pointer-events: none;
+    z-index: 2;
 }
 
 #mail-return-items .mail-return-button {
@@ -277,6 +534,7 @@ body {
     cursor: pointer;
     white-space: nowrap;
     font-size: 13px;
+    flex-shrink: 0;
 }
 
 #mail-return-items .mail-return-button:hover {
@@ -289,3 +547,233 @@ body {
     cursor: not-allowed;
 }
 /* end mail-return */
+
+/* ============================================================
+   Profile page & sub-tabs layout (applies to both light + dark)
+   ============================================================ */
+
+body.profile-php #wpbody-content > .wrap {
+    max-width: 900px;
+}
+
+body.profile-php .form-table th {
+    width: 180px;
+    padding: 12px 10px 12px 0;
+    vertical-align: top;
+    font-size: 13px;
+}
+
+body.profile-php .form-table td {
+    padding: 10px 0;
+}
+
+/* --- Security sub-page --- */
+#acore-security-page {
+    max-width: 760px;
+}
+
+#acore-security-page > h1 {
+    margin-bottom: 4px;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+#acore-security-page .postbox {
+    border-radius: 3px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
+    margin-top: 16px;
+    margin-bottom: 0;
+}
+
+#acore-security-page .postbox .inside {
+    padding: 16px 20px;
+}
+
+/* Postbox header — padding, cursor, typography */
+#acore-security-page .postbox-header {
+    cursor: default;
+    border-bottom: 1px solid #dcdcde;
+}
+
+#acore-security-page .postbox-header h2,
+#acore-security-page .postbox-header .hndle {
+    cursor: default;
+    font-size: 13px;
+    font-weight: 600;
+    padding: 10px 16px;
+    margin: 0;
+    border: none;
+}
+
+#acore-security-page .form-table th {
+    width: 180px;
+    padding: 10px 10px 10px 0;
+}
+
+#acore-security-page .form-table td {
+    padding: 8px 0;
+}
+
+/* --- RAF sub-page --- */
+#acore-raf-page {
+    max-width: 860px;
+}
+
+#acore-raf-page > h1 {
+    margin-bottom: 6px;
+}
+
+.acore-raf-intro {
+    color: #646970;
+    margin-bottom: 12px;
+}
+
+.acore-raf-notice {
+    max-width: 700px;
+    margin-bottom: 16px !important;
+}
+
+.acore-raf-row {
+    margin-top: 4px;
+}
+
+#acore-raf-page .card {
+    margin-bottom: 16px;
+}
+
+/* --- Item Restoration sub-page --- */
+#acore-item-restoration-page {
+    max-width: 100%;
+}
+
+#acore-item-restoration-page > h1 {
+    margin-bottom: 16px;
+}
+
+/* Layout: sidebar + content (mirrors mail-return) */
+#item-restore-layout {
+    display: grid;
+    grid-template-columns: 460px 1fr;
+    gap: 16px;
+    align-items: start;
+}
+
+#item-restore-sidebar {
+    grid-column: 1;
+}
+
+#item-restore-content {
+    grid-column: 2;
+}
+
+@media (max-width: 800px) {
+    #item-restore-layout {
+        grid-template-columns: 1fr;
+    }
+    #item-restore-content {
+        grid-column: 1;
+    }
+}
+
+/* click cursor + active state (mirrors mail return) */
+#acore-characters-item-restore .acore-char-row {
+    cursor: pointer;
+}
+
+#acore-characters-item-restore .acore-char-row.active {
+    background: #f0f4f8;
+    border-top-width: 3px;
+    border-right-width: 3px;
+    border-bottom-width: 3px;
+}
+
+/* Item restore: 4-column card grid */
+.item-restore-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+}
+
+/* Card: white bg, quality-coloured border (set by JS after wowhead loads) */
+.item-restore-card {
+    position: relative;
+    background: #fff;
+    border: 3px solid #9d9d9d;
+    border-radius: 4px;
+    padding: 20px 12px 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+
+/* Number badge — top-left corner */
+.item-restore-num {
+    position: absolute;
+    top: 6px;
+    left: 8px;
+    font-size: 11px;
+    font-weight: 600;
+    color: #646970;
+    line-height: 1;
+}
+
+/* Icon container */
+.item-restore-icon {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    background: #1c1c1c;
+    border-radius: 3px;
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+/* WowHead puts icon as background-image on the <a>.
+   font-size/color hide the item-name text wowhead injects. */
+.item-restore-icon > a {
+    position: absolute !important;
+    inset: 0 !important;
+    display: block !important;
+    width: 100% !important;
+    height: 100% !important;
+    font-size: 0 !important;
+    line-height: 0 !important;
+    color: transparent !important;
+    text-indent: -9999px !important;
+    overflow: hidden !important;
+    background-size: cover !important;
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+    padding: 0 !important;
+}
+
+/* Deleted date */
+.item-restore-date {
+    font-size: 11px;
+    color: #646970;
+    text-align: center;
+    line-height: 1.3;
+}
+
+.item-restore-btn {
+    background: #2271b1;
+    color: #fff;
+    border: 1px solid #2271b1;
+    border-radius: 3px;
+    padding: 5px 0;
+    cursor: pointer;
+    font-size: 13px;
+    width: 100%;
+    text-align: center;
+}
+
+.item-restore-btn:hover {
+    background: #135e96;
+    border-color: #135e96;
+}
+
+.item-restore-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
diff --git a/src/acore-wp-plugin/web/assets/css/theme.css b/src/acore-wp-plugin/web/assets/css/theme.css
new file mode 100644
index 000000000..0a1570d88
--- /dev/null
+++ b/src/acore-wp-plugin/web/assets/css/theme.css
@@ -0,0 +1,616 @@
+/* =====================================================================
+ * acore-theme.css
+ * Single place to edit light/dark theming for the AzerothCore plugin.
+ *
+ * Colours are driven by CSS custom properties. Edit the values in the
+ * two blocks below (":root" = light, "body.acore-dark-mode" = dark) and
+ * every rule further down updates automatically.
+ *
+ * Loaded after main.css and dark-mode.css, so rules here win.
+ * ===================================================================== */
+
+:root {
+    --acore-bg:            #ffffff;
+    --acore-surface:       #ffffff;
+    --acore-surface-2:     #f3f4f5;
+    --acore-text:          #1d2327;
+    --acore-muted:         #646970;
+    --acore-border:        #c3c4c7;
+    --acore-border-strong: #8c8f94;
+    --acore-accent:        #2271b1;
+    --acore-danger:        #d63638;
+    --acore-danger-bg:     #fbeaea;
+    --acore-danger-text:   #b32d2e;
+
+    /* WoW item-quality colours (shared by both themes) */
+    --q0: #9d9d9d; --q1: #ffffff; --q2: #1eff00; --q3: #0070dd;
+    --q4: #a335ee; --q5: #ff8000; --q6: #e6cc80; --q7: #e6cc80;
+}
+
+body.acore-dark-mode {
+    --acore-bg:            #0d1117;
+    --acore-surface:       #161b22;
+    --acore-surface-2:     #21262d;
+    --acore-text:          #c9d1d9;
+    --acore-muted:         #9aa4af;
+    --acore-border:        #30363d;
+    --acore-border-strong: #484f58;
+    --acore-accent:        #58a6ff;
+    --acore-danger:        #d63638;
+    --acore-danger-bg:     transparent;
+    --acore-danger-text:   #ea5a5c;
+
+    --q1: #c0c0c0; /* pure white reads poorly on dark; soften common quality */
+}
+
+/* ── Danger buttons (Reset Order, Remove, Reset, …) ─────────────────── */
+body.acore-dark-mode .acore-btn-danger .dashicons {
+    color: var(--acore-danger-text) !important;
+}
+.acore-btn-danger {
+    border: 1px solid var(--acore-danger) !important;
+    color: var(--acore-danger-text) !important;
+    background: var(--acore-danger-bg) !important;
+    transition: background .12s ease, color .12s ease;
+}
+.acore-btn-danger:hover,
+.acore-btn-danger:focus {
+    background: var(--acore-danger) !important;
+    color: #ffffff !important;
+}
+.acore-btn-danger .dashicons { margin-top: 3px; }
+
+/* ── Item Restoration: cards ────────────────────────────────────────── */
+/* Outer card: neutral border + theme surface (works light & dark).      */
+.item-restore-card {
+    background: var(--acore-surface) !important;
+    border: 1px solid var(--acore-border) !important;
+    color: var(--acore-text) !important;
+    border-radius: 6px;
+}
+.item-restore-card .item-restore-date { color: var(--acore-muted) !important; }
+.item-restore-card .item-restore-num  { color: var(--acore-muted) !important; }
+/* Inner icon shows the item quality as its border. wowhead adds q0..q7   */
+/* to the icon link; we colour the icon frame from that.                  */
+.item-restore-icon a {
+    display: block;
+    border: 2px solid var(--acore-border-strong);
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+.item-restore-icon a.q0 { border-color: var(--q0) !important; }
+.item-restore-icon a.q1 { border-color: var(--q1) !important; }
+.item-restore-icon a.q2 { border-color: var(--q2) !important; }
+.item-restore-icon a.q3 { border-color: var(--q3) !important; }
+.item-restore-icon a.q4 { border-color: var(--q4) !important; }
+.item-restore-icon a.q5 { border-color: var(--q5) !important; }
+.item-restore-icon a.q6 { border-color: var(--q6) !important; }
+.item-restore-icon a.q7 { border-color: var(--q7) !important; }
+
+/* ── Security page: readability in dark mode ────────────────────────── */
+/* Inline muted greys (#646970) are too dark on a dark surface.          */
+body.acore-dark-mode #acore-security-page [style*="646970"],
+body.acore-dark-mode #acore-security-page [style*="#646970"],
+body.acore-dark-mode #acore-security-page .description,
+body.acore-dark-mode #acore-security-page .text-muted {
+    color: var(--acore-muted) !important;
+}
+body.acore-dark-mode #acore-security-page,
+body.acore-dark-mode #acore-security-page p,
+body.acore-dark-mode #acore-security-page li,
+body.acore-dark-mode #acore-security-page h3 { color: var(--acore-text); }
+body.acore-dark-mode #acore-security-page code {
+    background: var(--acore-surface-2) !important;
+    color: var(--acore-text) !important;
+    border: 1px solid var(--acore-border);
+    border-radius: 3px;
+    padding: 1px 5px;
+}
+/* Recent Connections table - stripe rows at the <tr> level so WP's light
+   .striped odd-row background doesn't show through transparent cells. */
+body.acore-dark-mode #acore-security-page .wp-list-table {
+    background: var(--acore-surface) !important;
+    border-color: var(--acore-border) !important;
+}
+body.acore-dark-mode #acore-security-page .wp-list-table > thead > tr,
+body.acore-dark-mode #acore-security-page .wp-list-table > tbody > tr:nth-child(odd) {
+    background: var(--acore-surface-2) !important;
+}
+body.acore-dark-mode #acore-security-page .wp-list-table > tbody > tr:nth-child(even) {
+    background: var(--acore-surface) !important;
+}
+body.acore-dark-mode #acore-security-page .wp-list-table th,
+body.acore-dark-mode #acore-security-page .wp-list-table td {
+    color: var(--acore-text) !important;
+    border-color: var(--acore-border) !important;
+    background: transparent !important;
+}
+
+/* ── Mail Return surfaces ───────────────────────────────────────────── */
+body.acore-dark-mode #acore-mail-return-page .mail-entry { background: var(--acore-surface) !important; }
+body.acore-dark-mode #acore-mail-return-page .mail-recipient,
+body.acore-dark-mode #acore-mail-return-page .mail-items { background: var(--acore-bg) !important; }
+body.acore-dark-mode #acore-mail-return-page .mail-entry *,
+body.acore-dark-mode #acore-mail-return-page .mail-meta { color: var(--acore-text) !important; }
+body.acore-dark-mode #acore-mail-return-page .text-muted { color: var(--acore-muted) !important; }
+
+/* ── WP 2FA plugin UI (embedded on the Security page) ───────────────── */
+body.acore-dark-mode #acore-security-page [class*="wp2fa"],
+body.acore-dark-mode #acore-security-page [class*="wp-2fa"] { color: var(--acore-text) !important; }
+body.acore-dark-mode #acore-security-page [class*="wp2fa"] input,
+body.acore-dark-mode #acore-security-page [class*="wp2fa"] select,
+body.acore-dark-mode #acore-security-page [class*="wp2fa"] textarea {
+    background: var(--acore-surface-2) !important;
+    color: var(--acore-text) !important;
+    border: 1px solid var(--acore-border) !important;
+}
+body.acore-dark-mode #acore-security-page [class*="wp2fa"] code,
+body.acore-dark-mode #acore-security-page [class*="wp2fa"] pre {
+    background: var(--acore-surface-2) !important;
+    color: var(--acore-text) !important;
+}
+
+/* ── myCRED points / history page (profile.php?page=mycred_default-history) ── */
+body.acore-dark-mode.mycred-log-page #wpbody-content { color: var(--acore-text); }
+
+/* Filter tabs (All / Today / This Week …) */
+body.acore-dark-mode.mycred-log-page .subsubsub,
+body.acore-dark-mode.mycred-log-page .subsubsub a { color: var(--acore-muted) !important; }
+body.acore-dark-mode.mycred-log-page .subsubsub a.current,
+body.acore-dark-mode.mycred-log-page .subsubsub a:hover { color: var(--acore-accent) !important; }
+
+/* Search box + pagination chrome */
+body.acore-dark-mode.mycred-log-page .search-box input,
+body.acore-dark-mode.mycred-log-page .tablenav input,
+body.acore-dark-mode.mycred-log-page .tablenav select {
+    background: var(--acore-surface-2) !important;
+    color: var(--acore-text) !important;
+    border: 1px solid var(--acore-border) !important;
+}
+body.acore-dark-mode.mycred-log-page .tablenav,
+body.acore-dark-mode.mycred-log-page .tablenav * { color: var(--acore-text) !important; }
+body.acore-dark-mode.mycred-log-page .tablenav .tablenav-pages a,
+body.acore-dark-mode.mycred-log-page .tablenav .tablenav-pages span.tablenav-pages-navspan {
+    background: var(--acore-surface-2) !important;
+    border-color: var(--acore-border) !important;
+    color: var(--acore-text) !important;
+}
+
+/* The points-history list table */
+body.acore-dark-mode.mycred-log-page .wp-list-table {
+    background: var(--acore-surface) !important;
+    border-color: var(--acore-border) !important;
+    color: var(--acore-text) !important;
+}
+body.acore-dark-mode.mycred-log-page .wp-list-table thead th,
+body.acore-dark-mode.mycred-log-page .wp-list-table tfoot th,
+body.acore-dark-mode.mycred-log-page .wp-list-table thead th a,
+body.acore-dark-mode.mycred-log-page .wp-list-table thead th span {
+    background: var(--acore-surface-2) !important;
+    color: var(--acore-text) !important;
+    border-color: var(--acore-border) !important;
+}
+body.acore-dark-mode.mycred-log-page .wp-list-table td,
+body.acore-dark-mode.mycred-log-page .wp-list-table th {
+    color: var(--acore-text) !important;
+    border-color: var(--acore-border) !important;
+    background: transparent !important;
+}
+body.acore-dark-mode.mycred-log-page .wp-list-table > tbody > tr:nth-child(odd) {
+    background: var(--acore-surface-2) !important;
+}
+body.acore-dark-mode.mycred-log-page .wp-list-table a { color: var(--acore-accent) !important; }
+
+/* Export button row */
+body.acore-dark-mode.mycred-log-page #export-log-history,
+body.acore-dark-mode.mycred-log-page #export-log-history * { color: var(--acore-text) !important; }
+
+/* Generic myCRED widgets elsewhere (points balance boxes, etc.) */
+body.acore-dark-mode [class*="mycred"] th,
+body.acore-dark-mode [class*="mycred"] td { color: var(--acore-text) !important; border-color: var(--acore-border) !important; }
+body.acore-dark-mode [class*="mycred"] a { color: var(--acore-accent) !important; }
+
+/* myCRED page outer wrapper (#myCRED-wrap is white) -> blend into dark admin bg */
+body.acore-dark-mode.mycred-log-page #myCRED-wrap {
+    background: transparent !important;
+}
+body.acore-dark-mode.mycred-log-page #myCRED-wrap,
+body.acore-dark-mode.mycred-log-page #myCRED-wrap h1,
+body.acore-dark-mode.mycred-log-page #myCRED-wrap h2,
+body.acore-dark-mode.mycred-log-page #myCRED-wrap p {
+    color: var(--acore-text) !important;
+}
+
+/* ── WP 2FA standalone setup wizard (profile.php?page=wp-2fa-setup) ──────
+ * The wizard renders its own <body class="wp2fa-setup"> with no admin/dark
+ * class, and only prints its own stylesheets. We inject theme.css into its
+ * <head> via the `wp_2fa_setup_page_scripts` hook ONLY when dark mode is on
+ * (see DarkMode.php), so these body.wp2fa-setup rules are dark-only by load.
+ * The dark palette is redeclared here because .acore-dark-mode isn't present. */
+body.wp2fa-setup {
+    --acore-bg:            #0d1117;
+    --acore-surface:       #161b22;
+    --acore-surface-2:     #21262d;
+    --acore-text:          #c9d1d9;
+    --acore-muted:         #9aa4af;
+    --acore-border:        #30363d;
+    --acore-accent:        #58a6ff;
+
+    background: var(--acore-bg) !important;
+    color: var(--acore-text) !important;
+}
+body.wp2fa-setup .setup-wizard-wrapper,
+body.wp2fa-setup .wp2fa-setup-content,
+body.wp2fa-setup .modal__container {
+    background: var(--acore-surface) !important;
+    color: var(--acore-text) !important;
+    border-color: var(--acore-border) !important;
+}
+body.wp2fa-setup h1, body.wp2fa-setup h2, body.wp2fa-setup h3,
+body.wp2fa-setup h4, body.wp2fa-setup p, body.wp2fa-setup label,
+body.wp2fa-setup li, body.wp2fa-setup span, body.wp2fa-setup strong {
+    color: var(--acore-text) !important;
+}
+body.wp2fa-setup .description,
+body.wp2fa-setup .wp2fa-setup-footer a { color: var(--acore-muted) !important; }
+body.wp2fa-setup input[type="text"],
+body.wp2fa-setup input[type="email"],
+body.wp2fa-setup input[type="number"],
+body.wp2fa-setup input[type="password"],
+body.wp2fa-setup select,
+body.wp2fa-setup textarea,
+body.wp2fa-setup .select2-selection {
+    background: var(--acore-surface-2) !important;
+    color: var(--acore-text) !important;
+    border: 1px solid var(--acore-border) !important;
+}
+body.wp2fa-setup .steps li { color: var(--acore-muted) !important; }
+body.wp2fa-setup .steps li.is-active { color: var(--acore-accent) !important; font-weight: 600; }
+body.wp2fa-setup .button-secondary,
+body.wp2fa-setup .wp-2fa-button-secondary {
+    background: var(--acore-surface-2) !important;
+    color: var(--acore-text) !important;
+    border-color: var(--acore-border) !important;
+}
+body.wp2fa-setup code,
+body.wp2fa-setup pre {
+    background: var(--acore-surface-2) !important;
+    color: var(--acore-text) !important;
+    border: 1px solid var(--acore-border);
+}
+body.wp2fa-setup .modal__overlay { background: rgba(0,0,0,0.6) !important; }
+
+/* ── WP 2FA micromodal on normal admin pages (Security page "Configure 2FA") ──
+ * The modal is appended at <body> level (outside #acore-security-page), so it is
+ * scoped by the body dark class instead. */
+body.acore-dark-mode .wp2fa-modal .modal__container {
+    background: var(--acore-surface) !important;
+    color: var(--acore-text) !important;
+}
+body.acore-dark-mode .wp2fa-modal .modal__content,
+body.acore-dark-mode .wp2fa-modal .modal__content h1,
+body.acore-dark-mode .wp2fa-modal .modal__content h2,
+body.acore-dark-mode .wp2fa-modal .modal__content h3,
+body.acore-dark-mode .wp2fa-modal .modal__content h4,
+body.acore-dark-mode .wp2fa-modal .modal__content p,
+body.acore-dark-mode .wp2fa-modal .modal__content label,
+body.acore-dark-mode .wp2fa-modal .modal__content span,
+body.acore-dark-mode .wp2fa-modal .modal__content li,
+body.acore-dark-mode .wp2fa-modal .modal__content strong {
+    color: var(--acore-text) !important;
+}
+body.acore-dark-mode .wp2fa-modal .description { color: var(--acore-muted) !important; }
+body.acore-dark-mode .wp2fa-modal .option-pill,
+body.acore-dark-mode .wp2fa-modal .radio-cells .option-pill {
+    background: var(--acore-surface-2) !important;
+    border-color: var(--acore-border) !important;
+    color: var(--acore-text) !important;
+}
+body.acore-dark-mode .wp2fa-modal .option-pill.selected,
+body.acore-dark-mode .wp2fa-modal .option-pill:hover {
+    border-color: var(--acore-accent) !important;
+}
+body.acore-dark-mode .wp2fa-modal input,
+body.acore-dark-mode .wp2fa-modal select,
+body.acore-dark-mode .wp2fa-modal textarea {
+    background: var(--acore-surface-2) !important;
+    color: var(--acore-text) !important;
+    border: 1px solid var(--acore-border) !important;
+}
+body.acore-dark-mode .wp2fa-modal .modal__close { color: var(--acore-text) !important; }
+body.acore-dark-mode .wp2fa-modal code,
+body.acore-dark-mode .wp2fa-modal pre {
+    background: var(--acore-surface-2) !important;
+    color: var(--acore-text) !important;
+    border: 1px solid var(--acore-border);
+}
+
+/* WP 2FA TOTP secret-key box (shown in both the modal and the wizard) */
+body.acore-dark-mode .wp2fa-modal .app-key-wrapper,
+body.wp2fa-setup .app-key-wrapper {
+    background: var(--acore-surface-2) !important;
+    border-color: var(--acore-border) !important;
+}
+body.acore-dark-mode .wp2fa-modal .app-key-wrapper .app-key,
+body.acore-dark-mode .wp2fa-modal .app-key-wrapper input,
+body.wp2fa-setup .app-key-wrapper .app-key,
+body.wp2fa-setup .app-key-wrapper input {
+    color: var(--acore-text) !important;
+}
+
+
+/* ── "Disabled" sections (e.g. In-game 2FA before Website 2FA is set up) ──
+ * A greyed background box signals "disabled" while text stays fully legible
+ * (no opacity wash-out). Works in both light and dark themes. */
+.acore-2fa-disabled {
+    position: relative;
+    pointer-events: none;
+    user-select: none;
+    background: var(--acore-surface-2);
+    border: 1px solid var(--acore-border);
+    border-radius: 6px;
+    padding: 10px 16px 12px;
+    margin-top: 8px;
+}
+/* Light theme: keep the intro + steps at readable contrast on the grey box */
+.acore-2fa-disabled p,
+.acore-2fa-disabled li { color: #3c434a !important; }
+.acore-2fa-disabled p:first-child { color: #50575e !important; }
+/* Dark theme */
+body.acore-dark-mode .acore-2fa-disabled,
+body.acore-dark-mode .acore-2fa-disabled p,
+body.acore-dark-mode .acore-2fa-disabled li,
+body.acore-dark-mode .acore-2fa-disabled span { color: var(--acore-text) !important; }
+body.acore-dark-mode .acore-2fa-disabled p:first-child { color: var(--acore-muted) !important; }
+
+/* ── "Website 2FA required" callout (bright & visible in both themes) ── */
+.acore-2fa-required-note {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 10px 0 0;
+    padding: 8px 12px;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.4;
+    border-radius: 6px;
+    color: #9a5b00;
+    background: #fff4e0;
+    border: 1px solid #f0b429;
+}
+.acore-2fa-required-note .dashicons { color: #d98300; flex: 0 0 auto; }
+body.acore-dark-mode .acore-2fa-required-note {
+    color: #f5c451 !important;
+    background: rgba(240, 180, 41, 0.12) !important;
+    border-color: #8a6d1f !important;
+}
+body.acore-dark-mode .acore-2fa-required-note .dashicons { color: #f5c451 !important; }
+
+/* ── Highlight the connection row matching the viewer's current IP ── */
+#acore-security-page .wp-list-table > tbody > tr.acore-conn-current > td {
+    background: #fff3cd !important;
+    border-color: #f0d488 !important;
+}
+#acore-security-page .wp-list-table > tbody > tr.acore-conn-current > td:first-child {
+    box-shadow: inset 3px 0 0 0 #e0a800;
+    font-weight: 600;
+}
+body.acore-dark-mode #acore-security-page .wp-list-table > tbody > tr.acore-conn-current > td {
+    background: rgba(240, 180, 41, 0.16) !important;
+    color: #f5d98a !important;
+    border-color: #6e5a1e !important;
+}
+body.acore-dark-mode #acore-security-page .wp-list-table > tbody > tr.acore-conn-current > td:first-child {
+    box-shadow: inset 3px 0 0 0 #f0b429;
+}
+
+/* ── Shared connection tables (Security page + Profile page) ── */
+body.acore-dark-mode .acore-conn-table {
+    background: var(--acore-surface) !important;
+    border-color: var(--acore-border) !important;
+}
+body.acore-dark-mode .acore-conn-table > thead > tr,
+body.acore-dark-mode .acore-conn-table > tbody > tr:nth-child(odd) {
+    background: var(--acore-surface-2) !important;
+}
+body.acore-dark-mode .acore-conn-table > tbody > tr:nth-child(even) {
+    background: var(--acore-surface) !important;
+}
+body.acore-dark-mode .acore-conn-table th,
+body.acore-dark-mode .acore-conn-table td {
+    color: var(--acore-text) !important;
+    border-color: var(--acore-border) !important;
+    background: transparent !important;
+}
+.acore-conn-table > tbody > tr.acore-conn-current > td {
+    background: #fff3cd !important;
+    border-color: #f0d488 !important;
+}
+.acore-conn-table > tbody > tr.acore-conn-current > td:first-child {
+    box-shadow: inset 3px 0 0 0 #e0a800;
+    font-weight: 600;
+}
+body.acore-dark-mode .acore-conn-table > tbody > tr.acore-conn-current > td {
+    background: rgba(240, 180, 41, 0.16) !important;
+    color: #f5d98a !important;
+    border-color: #6e5a1e !important;
+}
+body.acore-dark-mode .acore-conn-table > tbody > tr.acore-conn-current > td:first-child {
+    box-shadow: inset 3px 0 0 0 #f0b429;
+}
+
+/* "Your IPv4:" label (right-aligned) + connection notes - readable both themes */
+.acore-conn-heading {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 8px;
+    max-width: 860px;
+    flex-wrap: wrap;
+}
+.acore-conn-myip {
+    font-size: 13px;
+    font-weight: 400;
+    white-space: nowrap;
+    color: #50575e;
+}
+body.acore-dark-mode .acore-conn-myip { color: #c9d1d9; }
+.acore-conn-note { color: #50575e; font-size: 13px; }
+body.acore-dark-mode .acore-conn-note { color: #9aa4af !important; }
+
+/* ── Dark-mode toggle in the admin bar (visible in both themes) ────────── */
+#wp-admin-bar-acore-dark-mode > .ab-item {
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 4px;
+}
+#wp-admin-bar-acore-dark-mode:hover > .ab-item {
+    background: rgba(255, 255, 255, 0.18) !important;
+}
+#acore-dm-icon {
+    font-size: 18px !important;
+    line-height: 1 !important;
+    color: #ffc83d !important;
+    vertical-align: middle;
+}
+
+/* ── Native <select> dropdowns inside our cards (dark) ─────────────────── */
+body.acore-dark-mode .card select,
+body.acore-dark-mode .wrap select {
+    background-color: var(--acore-surface-2) !important;
+    color: var(--acore-text) !important;
+    border: 1px solid var(--acore-border) !important;
+}
+body.acore-dark-mode .card select option,
+body.acore-dark-mode .wrap select option {
+    background-color: #161b22;
+    color: var(--acore-text);
+}
+
+/* ── Disabled buttons in dark mode (no more white blobs) ───────────────── */
+body.acore-dark-mode .acore-btn-danger:disabled,
+body.acore-dark-mode .acore-btn-danger[disabled],
+body.acore-dark-mode .card .button:disabled,
+body.acore-dark-mode .card .button[disabled] {
+    background: var(--acore-surface-2) !important;
+    color: #6e7681 !important;
+    border-color: var(--acore-border) !important;
+    opacity: 0.7 !important;
+    text-shadow: none !important;
+}
+
+/* ── Text / number inputs inside our cards (dark) ─────────────────────── */
+body.acore-dark-mode .card input[type="text"],
+body.acore-dark-mode .card input[type="number"],
+body.acore-dark-mode .card input[type="search"],
+body.acore-dark-mode .card input[type="password"],
+body.acore-dark-mode .card input[type="email"],
+body.acore-dark-mode .card textarea,
+body.acore-dark-mode .wrap > .card input[type="number"] {
+    background-color: var(--acore-surface-2) !important;
+    color: var(--acore-text) !important;
+    border: 1px solid var(--acore-border) !important;
+}
+body.acore-dark-mode .card input::placeholder { color: #6e7681 !important; }
+/* tone down the native number spinner so it isn't a white block on dark */
+body.acore-dark-mode .card input[type="number"]::-webkit-inner-spin-button,
+body.acore-dark-mode .card input[type="number"]::-webkit-outer-spin-button {
+    filter: invert(0.85) hue-rotate(180deg);
+}
+
+/* ── Primary (blue) buttons in dark mode - a nicer blue than plain grey ── */
+body.acore-dark-mode .button-primary,
+body.acore-dark-mode .button-primary:focus {
+    background: #2f81f7 !important;
+    border-color: #1f6feb !important;
+    color: #ffffff !important;
+    text-shadow: none !important;
+    box-shadow: none !important;
+}
+body.acore-dark-mode .button-primary:hover {
+    background: #4493f8 !important;
+    border-color: #2f81f7 !important;
+    color: #ffffff !important;
+}
+
+/* ── Secondary / default buttons in dark mode (blue-tinted, not bland grey) ── */
+body.acore-dark-mode .button:not(.button-primary):not(.acore-btn-danger),
+body.acore-dark-mode .button-secondary:not(.acore-btn-danger) {
+    background: #1c2b45 !important;       /* distinct navy so the button stands out from the card */
+    border-color: #388bfd !important;
+    color: #79c0ff !important;            /* brighter blue - dark equivalent of the white theme's #2271b1 */
+}
+body.acore-dark-mode .button:not(.button-primary):not(.acore-btn-danger) .dashicons {
+    color: #79c0ff !important;
+}
+body.acore-dark-mode .button:not(.button-primary):not(.acore-btn-danger):hover,
+body.acore-dark-mode .button-secondary:not(.acore-btn-danger):hover {
+    background: #2f81f7 !important;
+    border-color: #2f81f7 !important;
+    color: #ffffff !important;
+}
+body.acore-dark-mode .button:not(.button-primary):not(.acore-btn-danger):hover .dashicons {
+    color: #ffffff !important;
+}
+
+/* WP 2FA modal response message (error/success) - dark box + light text so it's
+   readable instead of WP2FA's light-pink box with faint text. :not(:empty) so it
+   only styles when a message is actually shown; the coloured border (red/green)
+   from WP2FA is kept to convey error vs success. */
+body.acore-dark-mode .wp2fa-modal .verification-response:not(:empty) {
+    background: #21262d !important;
+    border-radius: 6px !important;
+    padding: 10px 14px !important;
+}
+body.acore-dark-mode .wp2fa-modal .verification-response:not(:empty),
+body.acore-dark-mode .wp2fa-modal .verification-response:not(:empty) * {
+    color: #e6edf3 !important;
+}
+
+/* ── myCRED history: filter-tab pills + search button (were white) ──────── */
+body.acore-dark-mode.mycred-log-page .subsubsub a {
+    background: #21262d !important;
+    border: 1px solid #30363d !important;
+    border-radius: 4px;
+    color: #c9d1d9 !important;
+}
+body.acore-dark-mode.mycred-log-page .subsubsub a.current,
+body.acore-dark-mode.mycred-log-page .subsubsub a:hover {
+    background: #2f81f7 !important;
+    border-color: #2f81f7 !important;
+    color: #ffffff !important;
+}
+body.acore-dark-mode.mycred-log-page #search-submit,
+body.acore-dark-mode.mycred-log-page .search-box input[type="submit"],
+body.acore-dark-mode.mycred-log-page .tablenav input[type="submit"] {
+    background: #1c2b45 !important;
+    border: 1px solid #388bfd !important;
+    color: #79c0ff !important;
+}
+
+/* myCRED's mycred-admin-ui.css forces the search submit white !important - override hard */
+body.acore-dark-mode #wpbody-content input#search-submit {
+    background: #1c2b45 !important;
+    background-color: #1c2b45 !important;
+    border: 1px solid #388bfd !important;
+    color: #79c0ff !important;
+}
+
+/* ── myCRED: purple tab text + white checkbox + white .btn (beat mycred's
+   high-specificity rules with a two-ID selector) ───────────────────────── */
+body.acore-dark-mode #wpcontent #wpbody-content .subsubsub a {
+    color: #c792ea !important;   /* brighter lavender - readable on dark */
+}
+body.acore-dark-mode #wpcontent #wpbody-content .subsubsub a.current,
+body.acore-dark-mode #wpcontent #wpbody-content .subsubsub a:hover {
+    color: #ffffff !important;
+}
+body.acore-dark-mode #wpcontent #wpbody-content input[type="checkbox"] {
+    background: #0d1117 !important;
+    border-color: #484f58 !important;
+}
+body.acore-dark-mode #wpcontent #wpbody-content a.btn,
+body.acore-dark-mode #wpcontent #wpbody-content a.btn.btn-primary {
+    background: #1c2b45 !important;
+    border-color: #388bfd !important;
+    color: #79c0ff !important;
+}

From ba1c5977e10b2027d5e8cf6211e072c23dc798e4 Mon Sep 17 00:00:00 2001
From: FlyingArowana <16946913+TheSCREWEDSoftware@users.noreply.github.com>
Date: Tue, 23 Jun 2026 16:54:31 +0100
Subject: [PATCH 2/4] Characters menu: clickable rows, reset-order, CSRF nonce,
 escaping

---
 .../CharactersMenu/CharactersController.php   | 26 ++++++--
 .../CharactersMenu/CharactersView.php         | 64 ++++++++++++-------
 2 files changed, 62 insertions(+), 28 deletions(-)

diff --git a/src/acore-wp-plugin/src/Components/CharactersMenu/CharactersController.php b/src/acore-wp-plugin/src/Components/CharactersMenu/CharactersController.php
index 98dee522d..a13123fd7 100644
--- a/src/acore-wp-plugin/src/Components/CharactersMenu/CharactersController.php
+++ b/src/acore-wp-plugin/src/Components/CharactersMenu/CharactersController.php
@@ -14,10 +14,18 @@ public function __construct() {
 
     public function loadHome() {
         if ($_SERVER["REQUEST_METHOD"] == "POST") {
-            $this->saveCharacterOrder();
-            ?>
-            <div class="updated"><p><strong>Character settings succesfully saved.</strong></p></div>
-            <?php
+            check_admin_referer('acore_character_order', 'acore_character_order_nonce');
+            if (isset($_POST["acore_reset_order"])) {
+                $this->resetCharacterOrder();
+                ?>
+                <div class="updated"><p><strong>Character order reset successfully.</strong></p></div>
+                <?php
+            } else {
+                $this->saveCharacterOrder();
+                ?>
+                <div class="updated"><p><strong>Character settings succesfully saved.</strong></p></div>
+                <?php
+            }
         }
 
         $accId = ACoreServices::I()->getAcoreAccountId();
@@ -38,6 +46,16 @@ public function getView() {
         return $this->view;
     }
 
+    private function resetCharacterOrder() {
+        $accId = ACoreServices::I()->getAcoreAccountId();
+        $conn = ACoreServices::I()->getCharacterEm()->getConnection();
+        $stmt = $conn->prepare(
+            "UPDATE `characters` SET `order` = NULL WHERE `account` = ? AND `deleteDate` IS NULL"
+        );
+        $stmt->bindValue(1, $accId);
+        $stmt->executeQuery();
+    }
+
     private function saveCharacterOrder() {
         if (!isset($_POST) || !isset($_POST["characterorder"])) {
             return;
diff --git a/src/acore-wp-plugin/src/Components/CharactersMenu/CharactersView.php b/src/acore-wp-plugin/src/Components/CharactersMenu/CharactersView.php
index 12d98ae34..3ca170abc 100644
--- a/src/acore-wp-plugin/src/Components/CharactersMenu/CharactersView.php
+++ b/src/acore-wp-plugin/src/Components/CharactersMenu/CharactersView.php
@@ -2,6 +2,8 @@
 
 namespace ACore\Components\CharactersMenu;
 
+use ACore\Utils\AcoreCharColors;
+
 class CharactersView {
     private $controller;
 
@@ -16,44 +18,47 @@ public function __construct($controller) {
     public function getHomeRender($characters) {
         ob_start();
         wp_enqueue_style('bootstrap-css', '//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css', array(), '5.1.3');
-        wp_enqueue_style('acore-css', ACORE_URL_PLG . 'web/assets/css/main.css', array(), '0.1');
+        wp_enqueue_style('acore-css', ACORE_URL_PLG . 'web/assets/css/main.css', array(), '0.5');
         wp_enqueue_script('bootstrap-js', '//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js', array(), '5.1.3');
         wp_enqueue_script('jquery-ui-sortable');
         ?>
         <div class="wrap">
-            <h2>Characters Settings</h2>
-            <p>Check some details and configure of your characters.</p>
-
             <div class="row">
                 <div class="col-sm-4">
                     <div class="card">
                         <div class="card-body">
-                            <h3>Order</h3>
-                            <p>Change the order in which the characters appear in your in-game character selection screen.</p>
+                            <h3>Order Character Screen</h3>
+                            <p>Change the order in which the characters appear in your in-game character selection screen, by dragging them, matches in-game position.</p>
                             <hr>
                             <form action="" method="POST" novalidate="novalidate">
+                                <?php wp_nonce_field('acore_character_order', 'acore_character_order_nonce'); ?>
 
-                                <ul id="acore-characters-order" class="list-unstyled">
-                                    <?php foreach ($characters as $char) { ?>
+                                <ul id="acore-characters-order" class="acore-char-list list-unstyled">
+                                    <?php $charPos = 0; foreach ($characters as $char) {
+                                        $clsStyle = AcoreCharColors::rowStyle(intval($char["class"]), intval($char["race"]));
+                                        $charPos++;
+                                        $displayPos = $char['order'] !== null ? intval($char['order']) + 1 : $charPos;
+                                    ?>
                                         <li>
-                                            <div class="menu-item-bar">
-                                                <div class="menu-item-handle ui-sortable-handle">
-                                                    <span class="item-title menu-item-title"><?= $char["name"] ?></span>
-                                                    <span class="item-controls">
-                                                    <span class="item-type">
-                                                        level <?= $char["level"] ?>&ensp;
-                                                        <img src="<?= ACORE_URL_PLG . "web/assets/race/" . $char["race"] . ($char["gender"] == 0 ? "m" : "f") . ".webp"; ?>">
-                                                        <img src="<?= ACORE_URL_PLG . "web/assets/class/" . $char["class"] . ".webp"; ?>">
-                                                    </span>
-                                                </div>
+                                            <div class="acore-char-row" style="<?= esc_attr($clsStyle) ?>">
+                                                <span class="acore-char-pos"><?= $displayPos ?></span>
+                                                <span class="acore-char-name"><?= esc_html($char["name"]) ?></span>
+                                                <span class="acore-char-meta">
+                                                    <span class="acore-level" data-exp="<?= AcoreCharColors::expansionSlug(intval($char["level"])) ?>" title="<?= esc_attr(AcoreCharColors::expansionLabel(intval($char["level"]))) ?>">Level <?= intval($char["level"]) ?></span>
+                                                    <img class="race-icon" height="32" width="32" title="<?= esc_attr(AcoreCharColors::getRaceName(intval($char["race"]))) ?>" src="<?= esc_url(ACORE_URL_PLG . "web/assets/race/" . intval($char["race"]) . (intval($char["gender"]) == 0 ? "m" : "f") . ".webp") ?>">
+                                                    <img class="class-icon" height="32" width="32" title="<?= esc_attr(AcoreCharColors::getClassName(intval($char["class"]))) ?>" src="<?= esc_url(ACORE_URL_PLG . "web/assets/class/" . intval($char["class"]) . ".webp") ?>">
+                                                </span>
                                             </div>
-                                            <input name="characterorder[]" value="<?= $char["guid"] ?>">
+                                            <input type="hidden" name="characterorder[]" value="<?= esc_attr($char["guid"]) ?>">
                                         </li>
                                     <?php } ?>
                                 </ul>
 
                                 <?php if (!empty($characters)) { ?>
-                                    <input type="submit" name="submit" class="button button-primary" value="Save Order">
+                                    <div style="display:flex; justify-content:space-between; align-items:center; margin-top:8px;">
+                                        <input type="submit" name="submit" class="button button-primary" value="Save Order">
+                                        <input type="submit" name="acore_reset_order" class="button acore-btn-danger" value="Reset Order">
+                                    </div>
                                 <?php } ?>
                             </form>
                         </div>
@@ -62,12 +67,23 @@ public function getHomeRender($characters) {
             </div>
         </div>
 
-        <script type="text/javascript">
-            jQuery(document).ready(function($) {
-                $("#acore-characters-order").sortable();
+        <!-- .acore-btn-danger styling lives in theme.css (shared light/dark) -->
+
+        <script>
+        jQuery(document).ready(function($) {
+            $("#acore-characters-order").sortable({
+                update: function(event, ui) {
+                    var order = [];
+                    $("#acore-characters-order li").each(function(index) {
+                        var input = $(this).find("input[name='characterorder[]']");
+                        order.push(input.val());
+                        $(this).find(".acore-char-pos").text(index + 1);
+                    });
+                }
             });
+            $("#acore-characters-order").disableSelection();
+        });
         </script>
-
         <?php
         return ob_get_clean();
     }

From 167a8cfa2cb2351f1e69495bd1a58bc597ce94e5 Mon Sep 17 00:00:00 2001
From: FlyingArowana <16946913+TheSCREWEDSoftware@users.noreply.github.com>
Date: Tue, 23 Jun 2026 16:54:31 +0100
Subject: [PATCH 3/4] Mail Return: redesigned layout, subject escaping,
 empty-state reset

---
 .../MailReturnMenu/MailReturnController.php   |   4 +-
 .../MailReturnMenu/MailReturnView.php         | 108 ++++++----
 .../web/assets/mail-return/mail-return.js     | 198 +++++++++++++-----
 3 files changed, 210 insertions(+), 100 deletions(-)

diff --git a/src/acore-wp-plugin/src/Components/MailReturnMenu/MailReturnController.php b/src/acore-wp-plugin/src/Components/MailReturnMenu/MailReturnController.php
index 3d54a2227..ba9241125 100644
--- a/src/acore-wp-plugin/src/Components/MailReturnMenu/MailReturnController.php
+++ b/src/acore-wp-plugin/src/Components/MailReturnMenu/MailReturnController.php
@@ -64,7 +64,7 @@ public static function getSentUnreadMails($charGuid)
 
         // Get mails sent by this character that are unread by the receiver
         // messageType = 0 means player mail
-        $query = "SELECT m.`id`, m.`subject`, m.`has_items`, m.`money`,
+        $query = "SELECT m.`id`, m.`subject`, m.`has_items`, m.`money`, m.`cod`,
                 m.`expire_time`, m.`deliver_time`,
                 rc.`name` AS receiver_name, rc.`race` AS receiver_race,
                 rc.`class` AS receiver_class, rc.`gender` AS receiver_gender,
@@ -94,7 +94,7 @@ public static function getSentUnreadMails($charGuid)
             $placeholders = implode(',', array_fill(0, count($mailIds), '?'));
             $worldDb = Opts::I()->acore_db_world_name;
             $itemQuery = "SELECT mi.`mail_id`, ii.`itemEntry`, ii.`count`,
-                    it.`name` AS item_name
+                    it.`name` AS item_name, it.`Quality` AS item_quality
                 FROM `mail_items` mi
                 JOIN `item_instance` ii ON mi.`item_guid` = ii.`guid`
                 JOIN `$worldDb`.`item_template` it ON ii.`itemEntry` = it.`entry`
diff --git a/src/acore-wp-plugin/src/Components/MailReturnMenu/MailReturnView.php b/src/acore-wp-plugin/src/Components/MailReturnMenu/MailReturnView.php
index 5a882e5c2..74af3c7ed 100644
--- a/src/acore-wp-plugin/src/Components/MailReturnMenu/MailReturnView.php
+++ b/src/acore-wp-plugin/src/Components/MailReturnMenu/MailReturnView.php
@@ -2,6 +2,8 @@
 
 namespace ACore\Components\MailReturnMenu;
 
+use ACore\Utils\AcoreCharColors;
+
 
 class MailReturnView
 {
@@ -17,58 +19,80 @@ public function getMailReturnRender($chars)
         ob_start();
 
         wp_enqueue_style('bootstrap-css', '//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css', array(), '5.1.3');
-        wp_enqueue_style('acore-css', ACORE_URL_PLG . 'web/assets/css/main.css', array(), '0.1');
+        wp_enqueue_style('acore-css', ACORE_URL_PLG . 'web/assets/css/main.css', array(), '0.5');
         wp_enqueue_script('bootstrap-js', '//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js', array(), '5.1.3');
         wp_enqueue_script('jquery');
-        wp_enqueue_script('acore-mail-return-js', ACORE_URL_PLG . 'web/assets/mail-return/mail-return.js', array('jquery'), null, true);
+        wp_enqueue_script('power-js', 'https://wow.zamimg.com/widgets/power.js', array(), null, false);
+        wp_enqueue_script('acore-mail-return-js', ACORE_URL_PLG . 'web/assets/mail-return/mail-return.js', array('jquery'), '2.3', true);
+        wp_localize_script('acore-mail-return-js', 'mailReturnData', [
+            'mailsUrl'  => rest_url(ACORE_SLUG . '/v1/mail-return/list'),
+            'returnUrl' => rest_url(ACORE_SLUG . '/v1/mail-return'),
+            'assetsUrl' => ACORE_URL_PLG . 'web/assets/',
+            'nonce'     => wp_create_nonce('wp_rest'),
+        ]);
 
 ?>
 
-        <div class="wrap">
-            <div class="col-sm-6">
-                <div class="card">
-                    <div class="card-body">
-                        <h3>Mail Return</h3>
-                        <p>You can return sent mails that have not yet been read by the recipient in this page. Select the character, the sent mail and hit return.</p>
-                        <hr>
-
-                        <label for="mail-return-char-select"><strong>Select Character:</strong></label>
-                        <select id="mail-return-char-select" class="form-select mb-3">
-                            <option value="">-- Select a character --</option>
-                            <?php foreach ($chars as $char) { ?>
-                                <option value="<?= intval($char["guid"]) ?>" data-name="<?= esc_attr($char["name"]) ?>">
-                                    <?= esc_html($char["name"]) ?> (Level <?= intval($char["level"]) ?>)
-                                </option>
-                            <?php } ?>
-                        </select>
-
-                        <div id="mail-return-loading" style="display:none;" class="text-center my-3">
-                            <div class="spinner-border text-primary" role="status">
-                                <span class="visually-hidden">Loading...</span>
+        <script>const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};</script>
+        <div class="wrap" id="acore-mail-return-page">
+            <div id="mail-return-layout">
+
+                <!-- Col 1: character selector - always visible, same width -->
+                <div id="mail-return-sidebar">
+                    <div class="card">
+                        <div class="card-body">
+                            <h3>Mail Return</h3>
+                            <p>You can return sent mails that have not yet been read by the recipient in this page. Select the character, the sent mail and hit return.</p>
+                            <hr>
+
+                            <strong>Select Character:</strong>
+                            <ul id="acore-characters-mail" class="acore-char-list list-unstyled mt-2">
+                                <?php foreach ($chars as $char) {
+                                    $clsStyle = AcoreCharColors::rowStyle(intval($char['class']), intval($char['race']));
+                                ?>
+                                    <li>
+                                        <button type="button" class="acore-char-row acore-char-card" data-char-guid="<?= intval($char['guid']) ?>" style="<?= esc_attr($clsStyle) ?>">
+                                            <span class="acore-char-name"><?= esc_html($char['name']) ?></span>
+                                            <span class="acore-char-meta">
+                                                <span class="acore-level" data-exp="<?= AcoreCharColors::expansionSlug(intval($char['level'])) ?>" title="<?= esc_attr(AcoreCharColors::expansionLabel(intval($char['level']))) ?>">Level <?= intval($char['level']) ?></span>
+                                                <img class="race-icon" height="32" width="32" alt="<?= esc_attr(AcoreCharColors::getRaceName(intval($char['race']))) ?>" title="<?= esc_attr(AcoreCharColors::getRaceName(intval($char['race']))) ?>" src="<?= ACORE_URL_PLG . 'web/assets/race/' . intval($char['race']) . (intval($char['gender']) == 0 ? 'm' : 'f') . '.webp' ?>">
+                                                <img class="class-icon" height="32" width="32" alt="<?= esc_attr(AcoreCharColors::getClassName(intval($char['class']))) ?>" title="<?= esc_attr(AcoreCharColors::getClassName(intval($char['class']))) ?>" src="<?= ACORE_URL_PLG . 'web/assets/class/' . intval($char['class']) . '.webp' ?>">
+                                            </span>
+                                        </button>
+                                    </li>
+                                <?php } ?>
+                            </ul>
+
+                            <div id="mail-return-loading" style="display:none;" class="text-center my-3">
+                                <div class="spinner-border text-primary" role="status">
+                                    <span class="visually-hidden">Loading...</span>
+                                </div>
+                            </div>
+
+                            <!-- Empty state lives inside the card -->
+                            <div id="mail-return-empty-wrap" style="display:none;">
+                                <hr>
+                                <h5>Unread Sent Mails</h5>
+                                <p id="mail-return-empty" class="text-muted">No unread sent mails found for this character.</p>
                             </div>
                         </div>
+                    </div>
+                </div><!-- /mail-return-sidebar -->
 
-                        <div id="mail-return-list" style="display:none;">
-                            <h5>Unread Sent Mails</h5>
-                            <ul id="mail-return-items" class="list-unstyled"></ul>
-                            <p id="mail-return-empty" style="display:none;" class="text-muted">No unread sent mails found for this character.</p>
+                <!-- Cols 2-3: mail list - hidden until mails are loaded by JS -->
+                <div id="mail-return-content">
+                    <div class="card">
+                        <div class="card-body">
+                            <h5 id="mail-return-heading">Unread Sent Mails</h5>
+                            <ul id="mail-return-items" class="list-unstyled mb-0"></ul>
                         </div>
                     </div>
-                </div>
-            </div>
-        </div>
-
-        <script>
-            var mailReturnData = {
-                nonce: "<?php echo esc_js(wp_create_nonce('wp_rest')); ?>",
-                mailsUrl: "<?php echo esc_url(get_rest_url(null, ACORE_SLUG . '/v1/mail-return/list')); ?>",
-                returnUrl: "<?php echo esc_url(get_rest_url(null, ACORE_SLUG . '/v1/mail-return')); ?>",
-                assetsUrl: "<?php echo esc_url(ACORE_URL_PLG . 'web/assets/'); ?>"
-            };
-        </script>
-        <script>var whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};</script>
-        <script src="https://wow.zamimg.com/js/tooltips.js"></script>
-<?php
+                </div><!-- /mail-return-content -->
+
+            </div><!-- /mail-return-layout -->
+        </div><!-- /wrap -->
+
+        <?php
         return ob_get_clean();
     }
 }
diff --git a/src/acore-wp-plugin/web/assets/mail-return/mail-return.js b/src/acore-wp-plugin/web/assets/mail-return/mail-return.js
index 85c52d286..2114cf3ee 100644
--- a/src/acore-wp-plugin/web/assets/mail-return/mail-return.js
+++ b/src/acore-wp-plugin/web/assets/mail-return/mail-return.js
@@ -1,19 +1,21 @@
 jQuery(document).ready(function () {
-    jQuery("#mail-return-char-select").on("change", function () {
-        var charGuid = jQuery(this).val();
-        var mailList = jQuery("#mail-return-list");
+    jQuery("#acore-characters-mail").on("click", ".acore-char-card", function () {
+        var card = jQuery(this);
+        var charGuid = card.data("char-guid");
         var mailItems = jQuery("#mail-return-items");
-        var emptyMsg = jQuery("#mail-return-empty");
-        var loading = jQuery("#mail-return-loading");
+        var emptyWrap = jQuery("#mail-return-empty-wrap");
+        var emptyMsg  = jQuery("#mail-return-empty");
+        var loading   = jQuery("#mail-return-loading");
+        var content   = jQuery("#mail-return-content");
 
-        if (!charGuid) {
-            mailList.hide();
-            return;
-        }
+        jQuery(".acore-char-card").removeClass("active");
+        card.addClass("active");
 
         loading.show();
-        mailList.hide();
         mailItems.empty();
+        emptyMsg.text("No unread sent mails found for this character.");
+        emptyWrap.hide();
+        content.hide();
 
         jQuery.ajax({
             type: "GET",
@@ -22,79 +24,163 @@ jQuery(document).ready(function () {
             xhrFields: { withCredentials: true },
             success: function (mails) {
                 loading.hide();
-                mailList.show();
 
                 if (mails.length === 0) {
-                    emptyMsg.show();
+                    emptyWrap.show();
                     return;
                 }
 
-                emptyMsg.hide();
+                content.show();
+
+                // Class border-left colors (mirrors AcoreCharColors.php light values)
+                var classColors = {
+                    1: '#C69B6D', 2: '#F48CBA', 3: '#AAD372', 4: '#C8A800',
+                    5: '#909090', 6: '#C41E3A', 7: '#0070DD', 8: '#3FC7EB',
+                    9: '#8788EE', 11: '#FF7C0A'
+                };
+
+                // Expansion colors for level display (mirrors User.php / AcoreCharColors.php)
+                function expansionColor(level) {
+                    if (level <= 60) return '#C39361'; // Vanilla
+                    if (level <= 70) return '#62C907'; // TBC
+                    return '#5DACEB';                   // Wrath
+                }
+
+                // Race names (mirrors AcoreCharColors::RACE_NAMES)
+                var raceNames = {
+                    1: 'Human', 2: 'Orc', 3: 'Dwarf', 4: 'Night Elf', 5: 'Undead',
+                    6: 'Tauren', 7: 'Gnome', 8: 'Troll', 10: 'Blood Elf', 11: 'Draenei'
+                };
+                var classNames = {
+                    1: 'Warrior', 2: 'Paladin', 3: 'Hunter', 4: 'Rogue', 5: 'Priest',
+                    6: 'Death Knight', 7: 'Shaman', 8: 'Mage', 9: 'Warlock', 11: 'Druid'
+                };
+
+                // Faction colors (mirrors AcoreCharColors::FACTION_COLORS)
+                var allianceRaces = [1, 3, 4, 7, 11];
+                function factionClr(raceId) {
+                    return allianceRaces.indexOf(raceId) !== -1 ? '#3FACF4' : '#FF653D';
+                }
 
                 mails.forEach(function (mail) {
-                    var sentDate = new Date(mail.deliver_time * 1000).toLocaleString();
                     var genderSuffix = mail.receiver_gender == 0 ? "m" : "f";
-                    var raceIcon = mailReturnData.assetsUrl + "race/" + mail.receiver_race + genderSuffix + ".webp";
+                    var raceIcon  = mailReturnData.assetsUrl + "race/"  + mail.receiver_race  + genderSuffix + ".webp";
                     var classIcon = mailReturnData.assetsUrl + "class/" + mail.receiver_class + ".webp";
-
-                    // Build items HTML
-                    var itemsHtml = "";
+                    var clsColor  = classColors[mail.receiver_class] || '#646970';
+                    var faction   = factionClr(mail.receiver_race);
+                    var raceName  = raceNames[mail.receiver_race]  || 'Unknown';
+                    var clsName   = classNames[mail.receiver_class] || 'Unknown';
+
+                    // Subject line — with optional CoD label
+                    var subjectText = mail.subject || "(No Subject)";
+                    var subjectHtml = jQuery('<div>').text(subjectText).html();
+                    var codHtml = (mail.cod && parseInt(mail.cod) > 0)
+                        ? ' <span class="mail-cod-label">· <strong>CoD</strong>: Cash on Delivery</span>'
+                        : '';
+
+                    // WoW item quality → border color
+                    var qualityColors = {
+                        0: '#9d9d9d', // Poor (gray)
+                        1: '#c0c0c0', // Common (white → light grey for dark bg visibility)
+                        2: '#1eff00', // Uncommon (green)
+                        3: '#0070dd', // Rare (blue)
+                        4: '#a335ee', // Epic (purple)
+                        5: '#ff8000', // Legendary (orange)
+                        6: '#e6cc80', // Artifact
+                        7: '#e6cc80', // Heirloom
+                    };
+
+                    // Items grid — quality-colored border, quantity always shown
+                    var itemsHtml = '';
                     if (mail.items && mail.items.length > 0) {
-                        itemsHtml = '<div class="mail-items">';
-                        mail.items.forEach(function (item, idx) {
-                            if (idx > 0) itemsHtml += "&ensp;";
-                            var qty = item.count > 1 ? " x" + item.count : "";
-                            itemsHtml += '<a href="https://www.wowhead.com/wotlk/item=' + item.itemEntry + '" data-wowhead="item=' + item.itemEntry + '">' + item.item_name + '</a>' + qty;
+                        itemsHtml = '<div class="mail-items-grid">';
+                        mail.items.forEach(function (item) {
+                            var safeName    = jQuery('<div>').text(item.item_name).html();
+                            var qualityClr  = qualityColors[item.item_quality] || '#9d9d9d';
+                            itemsHtml += '<div class="mail-item-slot" style="border-color:' + qualityClr + '" title="' + safeName + '">'
+                                + '<a href="https://www.wowhead.com/wotlk/item=' + item.itemEntry
+                                + '" data-wowhead="item=' + item.itemEntry + '" title="' + safeName + '">' + safeName + '</a>'
+                                + '<span class="mail-item-qty">' + item.count + '</span>'
+                                + '</div>';
                         });
-                        itemsHtml += "</div>";
+                        itemsHtml += '</div>';
                     }
 
-                    // Build money HTML
-                    var moneyHtml = "";
-                    if (mail.money > 0) {
-                        moneyHtml = '<div class="mail-money">Money: ' + formatMoney(mail.money) + '</div>';
-                    }
+                    // Level badge: same expansion badge as character selector
+                    var lvlExp = mail.receiver_level <= 60 ? 'vanilla' : (mail.receiver_level <= 70 ? 'tbc' : 'wrath');
+                    var levelBadge = jQuery('<span>')
+                        .addClass('acore-level')
+                        .attr('data-exp', lvlExp)
+                        .text('LEVEL ' + mail.receiver_level);
 
                     var entry = jQuery('<li>').append(
-                        jQuery('<div>').addClass('mail-entry').append(
-                            // Header row: subject + return button
-                            jQuery('<div>').addClass('mail-header').append(
-                                jQuery('<span>').addClass('mail-subject').text(mail.subject || "(No Subject)"),
-                                jQuery('<button>')
-                                    .addClass('mail-return-button')
-                                    .attr('data-mail-id', mail.id)
-                                    .attr('data-char-guid', charGuid)
-                                    .text('Return')
-                            ),
-                            // Recipient bar with icons
-                            jQuery('<div>').addClass('mail-recipient').append(
-                                jQuery('<span>').text('To:'),
-                                jQuery('<img>').attr({ src: raceIcon, alt: 'race' }),
-                                jQuery('<img>').attr({ src: classIcon, alt: 'class' }),
-                                jQuery('<span>').addClass('recipient-name').text(mail.receiver_name),
-                                jQuery('<span>').css('color', '#646970').text('(Level ' + mail.receiver_level + ')')
-                            ),
-                            // Sent date
-                            jQuery('<div>').addClass('mail-meta').text('Sent: ' + sentDate + '  |  Expires: ' + new Date(mail.expire_time * 1000).toLocaleString()),
-                            // Items
-                            jQuery(itemsHtml),
-                            // Money
-                            jQuery(moneyHtml)
+                        jQuery('<div>').addClass('mail-entry').css({
+                            // Faction color on top/right/bottom; class color on left — mirrors char row design
+                            'border-top':    '2px solid ' + faction,
+                            'border-right':  '2px solid ' + faction,
+                            'border-bottom': '2px solid ' + faction,
+                            'border-left':   '4px solid ' + clsColor,
+                        }).append(
+                            // Row 1: To (recipient) + Return button — bordered with class color
+                            jQuery('<div>').addClass('mail-header')
+                                .css('border-left-color', clsColor)
+                                .append(
+                                    jQuery('<div>').addClass('mail-recipient').append(
+                                        jQuery('<span>').addClass('mail-to-label').text('To:'),
+                                        jQuery('<img>').attr({ src: raceIcon,  height: 28, width: 28, alt: raceName, title: raceName }).addClass('mail-recipient-icon').css('border-color', faction),
+                                        jQuery('<img>').attr({ src: classIcon, height: 28, width: 28, alt: clsName,  title: clsName  }).addClass('mail-recipient-icon').css('border-color', clsColor),
+                                        jQuery('<span>').addClass('recipient-name').text(mail.receiver_name),
+                                        levelBadge
+                                    ),
+                                    jQuery('<button>')
+                                        .addClass('mail-return-button')
+                                        .attr('data-mail-id', mail.id)
+                                        .attr('data-char-guid', charGuid)
+                                        .text('Return')
+                                ),
+                            // Row 2: subject + CoD label
+                            jQuery('<div>').addClass('mail-subject').html('<span class="mail-subject-label">Title:</span> <em><strong>' + subjectHtml + '</strong></em>' + codHtml),
+                            // Row 3: item icon grid
+                            jQuery(itemsHtml)
                         )
                     );
 
                     mailItems.append(entry);
                 });
 
-                // Refresh Wowhead tooltips for the newly added links
+                // Refresh Wowhead tooltips + upgrade icons to large JPG
+                function upgradeWowheadIcons() {
+                    document.querySelectorAll('.mail-item-slot > a').forEach(function (a) {
+                        var bg = a.style.backgroundImage;
+                        if (bg) {
+                            bg = bg.replace(/\/icons\/(tiny|small)\//, '/icons/large/')
+                                   .replace(/\.gif(["']?\))/, '.jpg$1');
+                            a.style.backgroundImage = bg;
+                        }
+                    });
+                }
                 if (typeof $WowheadPower !== "undefined" && $WowheadPower.refreshLinks) {
                     $WowheadPower.refreshLinks();
+                    setTimeout(upgradeWowheadIcons, 1500);
+                } else {
+                    // power.js loads async — wait for it
+                    var attempts = 0;
+                    var wait = setInterval(function () {
+                        attempts++;
+                        if (typeof $WowheadPower !== "undefined" && $WowheadPower.refreshLinks) {
+                            $WowheadPower.refreshLinks();
+                            clearInterval(wait);
+                            setTimeout(upgradeWowheadIcons, 1500);
+                        } else if (attempts > 20) {
+                            clearInterval(wait);
+                        }
+                    }, 250);
                 }
             },
             error: function (xhr, status, error) {
                 loading.hide();
-                mailList.show();
-                emptyMsg.text("Failed to load mails.").show();
+                emptyMsg.text("Failed to load mails.");
+                emptyWrap.show();
                 console.error("Failed to load mails:", error);
             }
         });

From 6f4f17b6af0faa5deca558b1b90e42b19a7e4b83 Mon Sep 17 00:00:00 2001
From: FlyingArowana <16946913+TheSCREWEDSoftware@users.noreply.github.com>
Date: Tue, 23 Jun 2026 16:54:31 +0100
Subject: [PATCH 4/4] Item Restoration: redesigned page, ownership checks
 (IDOR), input validation

---
 .../src/Components/Tools/ToolsApi.php         |  18 +-
 .../UserPanel/Pages/ItemRestorationPage.php   | 422 +++++++++++-------
 .../src/Manager/ACoreServices.php             |  46 +-
 3 files changed, 308 insertions(+), 178 deletions(-)

diff --git a/src/acore-wp-plugin/src/Components/Tools/ToolsApi.php b/src/acore-wp-plugin/src/Components/Tools/ToolsApi.php
index 16f31175e..81282a461 100644
--- a/src/acore-wp-plugin/src/Components/Tools/ToolsApi.php
+++ b/src/acore-wp-plugin/src/Components/Tools/ToolsApi.php
@@ -11,23 +11,31 @@ public static function ItemRestoreList($request) {
     }
 
     public static function ItemRestore($data) {
-        $item = $data['item'];
         $cname = $data['cname'];
+        $item  = filter_var($data['item'] ?? null, FILTER_VALIDATE_INT, ['options' => ['min_range' => 1]]);
+        if ($item === false) {
+            return new \WP_Error('invalid_item', 'Invalid item id.', ['status' => 400]);
+        }
+        if (!ACoreServices::I()->currentAccountOwnsCharacterName($cname)) {
+            return new \WP_Error('forbidden', 'You do not own that character.', ['status' => 403]);
+        }
         return ACoreServices::I()->getServerSoap()->executeCommand("item restore $item $cname");
     }
 }
 
 add_action( 'rest_api_init', function () {
    register_rest_route( ACORE_SLUG . '/v1', 'item-restore/list/(?P<cguid>\d+)', array(
-       'methods'  => 'GET',
-       'callback' => function( $request ) {
+       'methods'             => 'GET',
+       'permission_callback' => function() { return is_user_logged_in(); },
+       'callback'            => function( $request ) {
             return ToolsApi::ItemRestoreList($request);
        }
    ));
 
    register_rest_route( ACORE_SLUG . '/v1', 'item-restore', array(
-    'methods'  => 'POST',
-    'callback' => function( $request ) {
+    'methods'             => 'POST',
+    'permission_callback' => function() { return is_user_logged_in(); },
+    'callback'            => function( $request ) {
 
         // if free item-restoration is disabled, return
         if (Opts::I()->acore_item_restoration != '1') {
diff --git a/src/acore-wp-plugin/src/Components/UserPanel/Pages/ItemRestorationPage.php b/src/acore-wp-plugin/src/Components/UserPanel/Pages/ItemRestorationPage.php
index 4bb9f6d03..29a6727d1 100644
--- a/src/acore-wp-plugin/src/Components/UserPanel/Pages/ItemRestorationPage.php
+++ b/src/acore-wp-plugin/src/Components/UserPanel/Pages/ItemRestorationPage.php
@@ -1,198 +1,292 @@
 <?php
     use ACore\Manager\Opts;
+    use ACore\Utils\AcoreCharColors;
 ?>
 
 <script>const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};</script>
-<div class="wrap">
-    <h2><?= __('AzerothCore Settings', Opts::I()->page_alias) ?></h2>
-    <div class="row">
-        <div>
+<div class="wrap" id="acore-item-restoration-page">
+    <h1><?php _e('Item Restoration', Opts::I()->page_alias); ?></h1>
+    <div id="item-restore-layout">
+
+        <!-- Sidebar -->
+        <div id="item-restore-sidebar">
             <div class="card">
                 <div class="card-body">
-                    <h4 class="text-uppercase">Item restoration service</h4>
+                    <h3><?php _e('Item Restoration', Opts::I()->page_alias); ?></h3>
+                    <p><?php _e('Select a character to view their deleted items. Restored items are sent to the mailbox.', Opts::I()->page_alias); ?></p>
                     <hr>
-                    <div style="width: 12em">
-                        <div class="btn-group">
-                            <div class="bg-secondary p-2 text-white border rounded-left" id="activeCharacter">Choose Character</div>
-                            <button type="button" class="button-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
-                                <span class="visually-hidden"></span>
-                            </button>
-                            <?php if ($characters): ?>
-                                <ul class="dropdown-menu" id="characterList">
-                            <?php foreach ($characters as $character): ?>
-                                    <li cguid="<?= $character['guid']?>"><a class="dropdown-item" href="#"><?= $character['name']?></a></li>
-                                <?php endforeach; ?>
-                                </ul>
-                            <?php else: ?>
-                                <span>No characters found.</span>
-                            <?php endif; ?>
+
+                    <?php if ($characters): ?>
+                        <strong><?php _e('Select Character:', Opts::I()->page_alias); ?></strong>
+                        <ul id="acore-characters-item-restore" class="acore-char-list list-unstyled mt-2">
+                            <?php foreach ($characters as $char):
+                                $clsStyle = AcoreCharColors::rowStyle(intval($char['class']), intval($char['race']));
+                            ?>
+                                <li>
+                                    <button type="button" class="acore-char-row acore-char-card"
+                                         data-char-guid="<?= intval($char['guid']) ?>"
+                                         data-char-name="<?= esc_attr($char['name']) ?>"
+                                         title="<?= esc_attr(sprintf('Show items that can be restored to %s', $char['name'])) ?>"
+                                         style="<?= esc_attr($clsStyle) ?>">
+                                        <span class="acore-char-name"><?= esc_html($char['name']) ?></span>
+                                        <span class="acore-char-meta">
+                                            <span class="acore-level" data-exp="<?= AcoreCharColors::expansionSlug(intval($char['level'])) ?>" title="<?= esc_attr(AcoreCharColors::expansionLabel(intval($char['level']))) ?>">Level <?= intval($char['level']) ?></span>
+                                            <img class="race-icon" height="32" width="32" title="<?= esc_attr(AcoreCharColors::getRaceName(intval($char['race']))) ?>" src="<?= ACORE_URL_PLG . 'web/assets/race/' . intval($char['race']) . (intval($char['gender']) == 0 ? 'm' : 'f') . '.webp' ?>">
+                                            <img class="class-icon" height="32" width="32" title="<?= esc_attr(AcoreCharColors::getClassName(intval($char['class']))) ?>" src="<?= ACORE_URL_PLG . 'web/assets/class/' . intval($char['class']) . '.webp' ?>">
+                                        </span>
+                                    </button>
+                                </li>
+                            <?php endforeach; ?>
+                        </ul>
+                    <?php else: ?>
+                        <p><?php _e('No characters found.', Opts::I()->page_alias); ?></p>
+                    <?php endif; ?>
+
+                    <div id="item-restore-loading" style="display:none;" class="text-center my-3">
+                        <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">Loading...</span>
                         </div>
                     </div>
-                    <div id="errorBox" class="text-uppercase text-danger"></div>
-                    <div id="successBox" class="alert alert-success invisible" role="alert"></div>
-                    <p class="text-muted m-0"><em>Restored items will be sent to the selected characters mailbox.</em></p>
-                    <hr>
-                    <div id="item-list-no-content" class="alert alert-info hidden" role="alert">
-                        <span>There is no items to recover for the selected character</span>
-                    </div>
-                    <div class="table-responsive hidden" id="itemContainer">
-                        <table class="table table-bordered table-hover align-middle">
-                            <thead style="background: #1d2327; color: #fff;">
-                                <tr>
-                                    <th scope="col" class="text-uppercase">item name</th>
-                                    <th scope="col" class="text-uppercase">action</th>
-                                </tr>
-                            </thead>
-                            <tbody style="background: #2c3338;" id="itemList">
-                            <?php
-                                for ($i = 0; $i < 5; $i++): 
-                            ?>
-                                <tr class="loading-item-list hidden">
-                                    <td class="placeholder-glow"><p><span class="placeholder col-12 bg-secondary"></span></p></td>
-                                    <td><p class="placeholder-glow"><span class="placeholder col-12"></span></p></td>
-                                </tr>
-                            <?php endfor; ?>
-                            </tbody>
-                        </table>
+
+                    <!-- Empty state stays in sidebar -->
+                    <div id="item-list-no-content" style="display:none;">
+                        <hr>
+                        <p class="text-muted mb-0"><?php _e('There are no items to recover for the selected character.', Opts::I()->page_alias); ?></p>
                     </div>
                 </div>
             </div>
-        </div>
-    </div>
+        </div><!-- /item-restore-sidebar -->
+
+        <!-- Content: item cards, hidden until loaded -->
+        <div id="item-restore-content" style="display:none;">
+            <div class="card">
+                <div class="card-body">
+                    <div id="item-restore-error" class="text-uppercase text-danger mb-2"></div>
+                    <div id="item-restore-success" class="alert alert-success invisible mb-2" role="alert"></div>
+                    <h5 class="mb-3"><?php _e('Deleted Items', Opts::I()->page_alias); ?></h5>
+                    <div id="item-restore-grid" class="item-restore-grid"></div>
+                </div>
+            </div>
+        </div><!-- /item-restore-content -->
+
+    </div><!-- /item-restore-layout -->
 </div>
 
 <script>
-    // Register event listeners & element specifiers
-    const characters = document.querySelectorAll('#characterList li');
-    const itemContainer = document.getElementById('itemContainer');
-    const itemList = document.getElementById('itemList');
-    const itemListLoaders = document.querySelectorAll('.loading-item-list');
-    const activeCharacter = document.getElementById('activeCharacter');
-    const error = document.getElementById('errorBox');
-    const success = document.getElementById('successBox');
-    const noResults =  document.getElementById('item-list-no-content');
-    characters.forEach(character => character.addEventListener('click', selectCharacter));
-
-    // Character Selection
-    function selectCharacter() {
-        resetState();
-        itemListLoaders.forEach(element => element.classList.remove('hidden'));
-        itemContainer.classList.remove('hidden');
-        const character = this.getAttribute('cguid');
-        const characterName = this.firstChild.innerHTML;
-        activeCharacter.innerHTML = characterName;
-
-        fetch('<?= get_rest_url(null, 'acore/v1/item-restore/list/'); ?>' + character)
-        .then(function(response) {
-            return response.json();
-        }).then(function(items) {
-            if (!items || !items.length > 0) {
-                noResults.classList.remove('hidden');
-                return;
+(function () {
+    var content    = document.getElementById('item-restore-content');
+    var grid       = document.getElementById('item-restore-grid');
+    var errorBox   = document.getElementById('item-restore-error');
+    var successBox = document.getElementById('item-restore-success');
+    var noResults  = document.getElementById('item-list-no-content');
+    var loading    = document.getElementById('item-restore-loading');
+
+    var listUrl    = '<?= esc_js(get_rest_url(null, ACORE_SLUG . '/v1/item-restore/list/')) ?>';
+    var restoreUrl = '<?= esc_js(get_rest_url(null, ACORE_SLUG . '/v1/item-restore')) ?>';
+    var restNonce  = '<?= esc_js(wp_create_nonce('wp_rest')) ?>';
+
+    function parseJsonResponse(response) {
+        return response.json().catch(function () { return {}; }).then(function (body) {
+            if (!response.ok) {
+                throw new Error((body && body.message) ? body.message : 'Request failed.');
             }
+            return body;
+        });
+    }
 
-            items.forEach(item => {
-                const row = itemList.insertRow();
-                row.id = "row" + item['Id'];
-
-                // Item
-                const itemCell = row.insertCell();
-                const itemLink = document.createElement('a');
-                itemLink.href = "#";
-                itemLink.setAttribute('data-wowhead', `item=${item['ItemEntry']}`);
-                itemCell.appendChild(itemLink);
-
-                // Button
-                const buttonCell = row.insertCell();
-                const button = document.createElement('button');
-                button.classList.add('button-primary', 'text-uppercase');
-                button.setAttribute('type', 'button');
-                button.setAttribute('item', item['Id']);
-                button.setAttribute('cname', characterName);
-                button.appendChild(document.createTextNode('restore'));
-                button.addEventListener('click', restoreItem);
-                buttonCell.appendChild(button);
-            });
+    // wowhead quality class → card border colour
+    var wowQualityColors = {
+        q0: '#9d9d9d', q1: '#c0c0c0', q2: '#1eff00',
+        q3: '#0070dd', q4: '#a335ee', q5: '#ff8000',
+        q6: '#e6cc80', q7: '#e6cc80'
+    };
 
-            checkHasRecoverableItems();
-        })
-        .catch((msg) => {
-            error.innerHTML = msg;
-        })
-        .finally(() => {
-            $WowheadPower.refreshLinks();
-            itemListLoaders.forEach(element => element.classList.add('hidden'));
+    document.querySelectorAll('#acore-characters-item-restore .acore-char-row').forEach(function (row) {
+        row.addEventListener('click', function () {
+            document.querySelectorAll('#acore-characters-item-restore .acore-char-row').forEach(function (r) {
+                r.classList.remove('active');
+            });
+            row.classList.add('active');
+            selectCharacter(row.getAttribute('data-char-guid'), row.getAttribute('data-char-name'));
         });
+    });
+
+    function selectCharacter(guid, characterName) {
+        resetState();
+        loading.style.display = 'block';
+        content.style.display = 'none';
+        grid.innerHTML = '';
+
+        fetch(listUrl + guid, { headers: { 'Accept': 'application/json', 'X-WP-Nonce': restNonce } })
+            .then(parseJsonResponse)
+            .then(function (items) {
+                loading.style.display = 'none';
+
+                if (!items || !items.length) {
+                    noResults.style.display = 'block';
+                    return;
+                }
+
+                content.style.display = 'block';
+
+                items.forEach(function (item, index) {
+                    var card = document.createElement('div');
+                    card.className = 'item-restore-card';
+                    card.id = 'card' + item['Id'];
+
+                    // Number badge
+                    var num = document.createElement('span');
+                    num.className = 'item-restore-num';
+                    num.textContent = index + 1;
+                    num.title = 'Position in your list of restorable items.';
+
+                    // Icon container — wowhead puts the icon as background-image on the <a>
+                    var iconWrap = document.createElement('div');
+                    iconWrap.className = 'item-restore-icon';
+
+                    var link = document.createElement('a');
+                    link.href = 'https://www.wowhead.com/wotlk/item=' + item['ItemEntry'];
+                    link.setAttribute('data-wowhead', 'item=' + item['ItemEntry']);
+
+                    iconWrap.appendChild(link);
+
+                    // Restore button
+                    var btn = document.createElement('button');
+                    btn.className = 'item-restore-btn';
+                    btn.type = 'button';
+                    btn.textContent = 'Restore';
+                    btn.title = 'Send this item back to ' + characterName + ' by in-game mail.';
+                    (function (itemId, charName, cardEl, btnEl) {
+                        btnEl.addEventListener('click', function () {
+                            restoreItem(itemId, charName, cardEl, btnEl);
+                        });
+                    })(item['Id'], characterName, card, btn);
+
+                    // Delete date
+                    var dateEl = document.createElement('span');
+                    dateEl.className = 'item-restore-date';
+                    dateEl.title = 'Date this item was deleted.';
+                    var d = item['DeleteDate'];
+                    if (d) {
+                        var dStr = String(d);
+                        var dt   = /^\d+$/.test(dStr) ? new Date(Number(dStr) * 1000) : new Date(dStr.replace(' ', 'T'));
+                        if (!isNaN(dt.getTime())) {
+                            var day = dt.getDate();
+                            var ord = day % 100 >= 11 && day % 100 <= 13 ? 'th'
+                                : day % 10 === 1 ? 'st'
+                                : day % 10 === 2 ? 'nd'
+                                : day % 10 === 3 ? 'rd' : 'th';
+                            var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
+                            var hh = String(dt.getHours()).padStart(2, '0');
+                            var mm = String(dt.getMinutes()).padStart(2, '0');
+                            dateEl.textContent = day + ord + ' of ' + months[dt.getMonth()] + ', ' + dt.getFullYear() + ' at ' + hh + ':' + mm;
+                        } else {
+                            dateEl.textContent = String(d);
+                        }
+                    } else {
+                        dateEl.textContent = '';
+                    }
+
+                    card.appendChild(num);
+                    card.appendChild(iconWrap);
+                    card.appendChild(dateEl);
+                    card.appendChild(btn);
+                    grid.appendChild(card);
+                });
+
+                applyWowheadIcons();
+            })
+            .catch(function (msg) {
+                loading.style.display = 'none';
+                errorBox.textContent = msg && msg.message ? msg.message : String(msg);
+            });
     }
 
-    // Restore Item
-    function restoreItem() {
+    function restoreItem(id, characterName, cardEl, btnEl) {
         resetState();
-        const item = this.getAttribute('item');
-        const cname = this.getAttribute('cname');
-
-        const loadingDiv = document.createElement('div');
-        const loader = document.createElement('span');
-        loader.classList.add('placeholder', 'col-12', 'bg-warning');
-        loadingDiv.classList.add('placeholder-glow');
-        loadingDiv.appendChild(loader);
-        this.parentElement.appendChild(loadingDiv);
-        this.parentElement.removeChild(this);
-        fetch('<?= get_rest_url(null, 'acore/v1/item-restore'); ?>', {
-            method: "POST",
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                item: item,
-                cname: cname,
-            }),
-        })
-        .then(function(response) {
-            return response.json();
-        }).then(function(data) {
-            if (data.toLowerCase().includes('mail')) {
-                success.innerHTML = data;
-                document.getElementById('row' + item).parentElement.removeChild(document.getElementById('row' + item))
-                success.classList.remove('invisible');
-
-                checkHasRecoverableItems();
-            } 
-            else error.innerHTML = data;
+        btnEl.disabled = true;
+        btnEl.textContent = '...';
+
+        fetch(restoreUrl, {
+            method: 'POST',
+            headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'X-WP-Nonce': restNonce },
+            body: JSON.stringify({ item: id, cname: characterName }),
         })
-        .catch((msg) => {
-            error.innerHTML = msg;
-        });        
+            .then(parseJsonResponse)
+            .then(function (data) {
+                if (typeof data === 'string' && data.toLowerCase().includes('mail')) {
+                    cardEl.parentElement.removeChild(cardEl);
+                    successBox.textContent = data;
+                    successBox.classList.remove('invisible');
+                    // renumber remaining cards
+                    var remaining = grid.querySelectorAll('.item-restore-card');
+                    remaining.forEach(function (c, i) {
+                        var n = c.querySelector('.item-restore-num');
+                        if (n) n.textContent = i + 1;
+                    });
+                    if (remaining.length === 0) {
+                        content.style.display = 'none';
+                        noResults.style.display = 'block';
+                    }
+                } else {
+                    errorBox.textContent = typeof data === 'string' ? data : JSON.stringify(data);
+                    btnEl.disabled = false;
+                    btnEl.textContent = 'Restore';
+                }
+            })
+            .catch(function (err) {
+                errorBox.textContent = err && err.message ? err.message : 'An error occurred.';
+                btnEl.disabled = false;
+                btnEl.textContent = 'Restore';
+            });
     }
 
-    function checkHasRecoverableItems() {
-        // 5 is minimum count due to placeholders (loaders)
-        if (itemList.childElementCount == 5) {
-            const row = itemList.insertRow();
-            row.id = "no-recoverable-items";
-            const spanCell = row.insertCell();
-            const infoSpan = document.createElement('span');
-            infoSpan.style = "color: #fff";
-            infoSpan.innerHTML = "No items to recover for the selected character.";
-            spanCell.appendChild(infoSpan);
-            
-            // Add empty cell as well (to fill otherwise empty whitespace)
-            row.insertCell();
+    function applyWowheadIcons() {
+        function doApply() {
+            document.querySelectorAll('.item-restore-icon > a').forEach(function (a) {
+                // upgrade icon to large JPG
+                var bg = a.style.backgroundImage;
+                if (bg) {
+                    bg = bg.replace(/\/icons\/(tiny|small)\//, '/icons/large/')
+                           .replace(/\.gif(["']?\))/, '.jpg$1');
+                    a.style.backgroundImage = bg;
+                }
+                // read quality class (q0-q7) and apply to card border
+                var card = a.closest('.item-restore-card');
+                if (card) {
+                    for (var cls in wowQualityColors) {
+                        if (a.classList.contains(cls)) {
+                            card.style.borderColor = wowQualityColors[cls];
+                            break;
+                        }
+                    }
+                }
+            });
         }
 
-        else {
-            const infoRow = document.getElementById('no-recoverable-items');
-            if (infoRow) {
-                infoRow.parentElement.removeChild(infoRow);
-            }
+        if (typeof $WowheadPower !== 'undefined' && $WowheadPower.refreshLinks) {
+            $WowheadPower.refreshLinks();
+            setTimeout(doApply, 1500);
+        } else {
+            var attempts = 0;
+            var wait = setInterval(function () {
+                attempts++;
+                if (typeof $WowheadPower !== 'undefined' && $WowheadPower.refreshLinks) {
+                    $WowheadPower.refreshLinks();
+                    clearInterval(wait);
+                    setTimeout(doApply, 1500);
+                } else if (attempts > 20) {
+                    clearInterval(wait);
+                }
+            }, 250);
         }
     }
 
     function resetState() {
-        success.innerHTML = "";
-        error.innerHTML = "";
-        success.classList.add('invisible');
-        noResults.classList.add('hidden');
+        errorBox.textContent = '';
+        successBox.textContent = '';
+        successBox.classList.add('invisible');
+        noResults.style.display = 'none';
     }
+})();
 </script>
diff --git a/src/acore-wp-plugin/src/Manager/ACoreServices.php b/src/acore-wp-plugin/src/Manager/ACoreServices.php
index fbdd2ebcd..7701e4884 100644
--- a/src/acore-wp-plugin/src/Manager/ACoreServices.php
+++ b/src/acore-wp-plugin/src/Manager/ACoreServices.php
@@ -402,16 +402,44 @@ public function getUserNameByUserId($usedId) {
     }
 
     public function getRestorableItemsByCharacter($character) {
-        $query = "SELECT `Id`, `ItemEntry`
-            FROM `recovery_item`
-            WHERE `Guid` = ?
-        ";
+        $conn  = $this->getCharacterEm()->getConnection();
+        $accId = $this->getAcoreAccountId();
+
+        if (!is_numeric($character) || !$accId) {
+            throw new \InvalidArgumentException('Invalid character');
+        }
+
+        $ownership = $conn->prepare(
+            "SELECT 1 FROM `characters` WHERE `guid` = ? AND `account` = ? AND `deleteDate` IS NULL"
+        );
+        $ownership->bindValue(1, intval($character));
+        $ownership->bindValue(2, intval($accId));
+        if (!$ownership->executeQuery()->fetchOne()) {
+            throw new \InvalidArgumentException('Character not found');
+        }
+
+        $stmt = $conn->prepare(
+            "SELECT `Id`, `ItemEntry`, `Count`, `DeleteDate`
+             FROM `recovery_item`
+             WHERE `Guid` = ?
+             ORDER BY `DeleteDate` DESC"
+        );
+        $stmt->bindValue(1, intval($character));
+        return $stmt->executeQuery()->fetchAllAssociative();
+    }
+
+    public function currentAccountOwnsCharacterName($name): bool {
+        $accId = $this->getAcoreAccountId();
+        if (!$accId || $name === '' || $name === null) {
+            return false;
+        }
         $conn = $this->getCharacterEm()->getConnection();
-        $stmt = $conn->prepare($query);
-        $stmt->bindValue(1, $character);
-        $stmt->executeQuery();
-        $res = $stmt->executeQuery();
-        return $res->fetchAllAssociative();
+        $stmt = $conn->prepare(
+            "SELECT 1 FROM `characters` WHERE `name` = ? AND `account` = ? AND `deleteDate` IS NULL"
+        );
+        $stmt->bindValue(1, $name);
+        $stmt->bindValue(2, intval($accId));
+        return (bool) $stmt->executeQuery()->fetchOne();
     }
 
     /**