<?php
/**
 * MSign UserCP Templates
 * Installs all UserCP templates and theme CSS for msign.city
 *
 * Drop into inc/plugins/ and activate.
 * Creates: nav items, CMID panel, reputation panel, NexusChat panel, alerts panel
 * Theme: dark cyberpunk matching msign.city --accent:#ff8c42 --bg:#0b0d12
 */

if (!defined('IN_MYBB')) {
    die('Direct initialization of this file is not allowed.');
}

$plugins->add_hook('usercp_menu', 'msign_usercp_nav_inject');

function msign_usercp_templates_info()
{
    return [
        'name'          => 'MSign UserCP Templates',
        'description'   => 'Custom UserCP sections for device management, reputation, chat, and notification preferences with dark msign.city theme.',
        'website'       => 'https://msign.city',
        'author'        => 'MSign',
        'authorsite'    => 'https://msign.city',
        'version'       => '1.0.0',
        'compatibility' => '18*',
        'codename'      => 'msign_usercp_templates',
    ];
}

function msign_usercp_templates_install()
{
    global $db, $mybb;

    // ── Create settings table if not exists ──
    if(!$db->table_exists("msign_user_settings"))
    {
        $db->write_query("
            CREATE TABLE `".TABLE_PREFIX."msign_user_settings` (
                `uid` int(10) unsigned NOT NULL DEFAULT 0,
                `rep_notify_positive` tinyint(1) NOT NULL DEFAULT 1,
                `rep_notify_negative` tinyint(1) NOT NULL DEFAULT 1,
                `rep_display_profile` tinyint(1) NOT NULL DEFAULT 1,
                `rep_display_postbit` tinyint(1) NOT NULL DEFAULT 1,
                `rep_allow_anonymous` tinyint(1) NOT NULL DEFAULT 0,
                `chat_enabled` tinyint(1) NOT NULL DEFAULT 1,
                `chat_sound` tinyint(1) NOT NULL DEFAULT 1,
                `chat_show_online` tinyint(1) NOT NULL DEFAULT 1,
                `chat_desktop_notify` tinyint(1) NOT NULL DEFAULT 0,
                `chat_timestamp_fmt` varchar(16) NOT NULL DEFAULT 'h:i A',
                `chat_max_history` int(5) NOT NULL DEFAULT 100,
                `alert_rep_received` tinyint(1) NOT NULL DEFAULT 1,
                `alert_thread_reply` tinyint(1) NOT NULL DEFAULT 1,
                `alert_quote` tinyint(1) NOT NULL DEFAULT 1,
                `alert_mention` tinyint(1) NOT NULL DEFAULT 1,
                `alert_sign_complete` tinyint(1) NOT NULL DEFAULT 1,
                `alert_sign_failed` tinyint(1) NOT NULL DEFAULT 1,
                `alert_quota_reset` tinyint(1) NOT NULL DEFAULT 1,
                `alert_buddy_request` tinyint(1) NOT NULL DEFAULT 1,
                `alert_pm_popup` tinyint(1) NOT NULL DEFAULT 1,
                `alert_sound` tinyint(1) NOT NULL DEFAULT 1,
                `alert_desktop_push` tinyint(1) NOT NULL DEFAULT 0,
                PRIMARY KEY (`uid`)
            ) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4;
        ");
    }

    // ── Devices table (for CMID management) ──
    if(!$db->table_exists("msign_devices"))
    {
        $db->write_query("
            CREATE TABLE `".TABLE_PREFIX."msign_devices` (
                `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
                `uid` int(10) unsigned NOT NULL DEFAULT 0,
                `device_id` varchar(128) NOT NULL DEFAULT '',
                `device_name` varchar(64) NOT NULL DEFAULT '',
                `device_model` varchar(64) NOT NULL DEFAULT '',
                `ios_version` varchar(16) NOT NULL DEFAULT '',
                `is_primary` tinyint(1) NOT NULL DEFAULT 0,
                `is_active` tinyint(1) NOT NULL DEFAULT 1,
                `signs_used` int(10) NOT NULL DEFAULT 0,
                `dateline` int(10) unsigned NOT NULL DEFAULT 0,
                `last_used` int(10) unsigned NOT NULL DEFAULT 0,
                PRIMARY KEY (`id`),
                KEY `uid` (`uid`),
                KEY `device_id` (`device_id`)
            ) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4;
        ");
    }

    // ── Alerts table ──
    if(!$db->table_exists("msign_alerts"))
    {
        $db->write_query("
            CREATE TABLE `".TABLE_PREFIX."msign_alerts` (
                `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
                `uid` int(10) unsigned NOT NULL DEFAULT 0,
                `type` varchar(32) NOT NULL DEFAULT '',
                `message` text NOT NULL,
                `from_uid` int(10) unsigned NOT NULL DEFAULT 0,
                `reference_id` int(10) unsigned NOT NULL DEFAULT 0,
                `is_read` tinyint(1) NOT NULL DEFAULT 0,
                `dateline` int(10) unsigned NOT NULL DEFAULT 0,
                PRIMARY KEY (`id`),
                KEY `uid_read` (`uid`,`is_read`)
            ) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4;
        ");
    }

    // ── Install Templates ──
    $templates = _msign_usercp_get_templates();
    foreach($templates as $name => $tpl)
    {
        $db->delete_query("templates", "title='".$db->escape_string($name)."' AND sid='-2'");
        $db->insert_query("templates", array(
            'title'    => $db->escape_string($name),
            'template' => $db->escape_string($tpl),
            'sid'      => -2,
            'version'  => 1839,
            'dateline' => TIME_NOW,
        ));
    }

    // ── Install Stylesheet ──
    $css = _msign_usercp_get_css();
    $tid = 1; // Default theme
    $existing = $db->simple_select("themestylesheets", "sid", "name='msign_usercp.css' AND tid='".$tid."'");
    if($db->num_rows($existing))
    {
        $db->update_query("themestylesheets", array(
            'stylesheet' => $db->escape_string($css),
            'lastmodified' => TIME_NOW,
        ), "name='msign_usercp.css' AND tid='".$tid."'");
    }
    else
    {
        $db->insert_query("themestylesheets", array(
            'name'         => 'msign_usercp.css',
            'tid'          => $tid,
            'attachedto'   => 'usercp.php',
            'stylesheet'   => $db->escape_string($css),
            'cachefile'    => 'msign_usercp.css',
            'lastmodified' => TIME_NOW,
        ));
    }
    require_once MYBB_ROOT.$mybb->config['admin_dir']."/inc/functions_themes.php";
    if(function_exists('cache_stylesheet'))
    {
        cache_stylesheet($tid, 'msign_usercp.css', $css);
    }
}

function msign_usercp_templates_is_installed()
{
    global $db;
    return $db->table_exists("msign_user_settings");
}

function msign_usercp_templates_activate()
{
    // Inject nav item into usercp_nav template
    require_once MYBB_ROOT."inc/adminfunctions_templates.php";
    find_replace_templatesets("usercp_nav", '#'.preg_quote('{$usercpnav}').'#', '{$usercpnav}{$msign_nav}');
}

function msign_usercp_templates_deactivate()
{
    require_once MYBB_ROOT."inc/adminfunctions_templates.php";
    find_replace_templatesets("usercp_nav", '#'.preg_quote('{$msign_nav}').'#', '');
}

function msign_usercp_templates_uninstall()
{
    global $db;

    // Remove templates
    $templates = _msign_usercp_get_templates();
    foreach(array_keys($templates) as $name)
    {
        $db->delete_query("templates", "title='".$db->escape_string($name)."' AND sid='-2'");
    }

    // Remove stylesheet
    $db->delete_query("themestylesheets", "name='msign_usercp.css'");

    // Optionally keep tables so user data is preserved
    // $db->drop_table("msign_user_settings");
    // $db->drop_table("msign_devices");
    // $db->drop_table("msign_alerts");
}

// ── Nav Injection Hook ─────────────────────────────────────────────────────
function msign_usercp_nav_inject()
{
    global $mybb, $templates, $msign_nav;

    $active_cmid = ($mybb->input['action'] == 'cmid') ? ' class="ms-nav-active"' : '';
    $active_rep  = ($mybb->input['action'] == 'msign_reputation') ? ' class="ms-nav-active"' : '';
    $active_chat = ($mybb->input['action'] == 'msign_nexuschat') ? ' class="ms-nav-active"' : '';
    $active_alert = ($mybb->input['action'] == 'msign_alerts') ? ' class="ms-nav-active"' : '';

    eval("\$msign_nav = \"".$templates->get("usercp_nav_msign")."\";");
}

// ═══════════════════════════════════════════════════════════════════════════════
// TEMPLATES
// ═══════════════════════════════════════════════════════════════════════════════

function _msign_usercp_get_templates()
{
    return array(

// ── NAV BLOCK ──────────────────────────────────────────────────────────────
'usercp_nav_msign' => '<div class="ms-ucp-nav-section">
    <div class="ms-ucp-nav-header">
        <span class="ms-ucp-nav-icon">&#x26A1;</span> MSign
    </div>
    <ul class="ms-ucp-nav-list">
        <li{$active_cmid}><a href="usercp.php?action=cmid"><span class="ms-nav-dot ms-dot--cyan"></span> Device Management</a></li>
        <li{$active_rep}><a href="usercp.php?action=msign_reputation"><span class="ms-nav-dot ms-dot--green"></span> Reputation</a></li>
        <li{$active_chat}><a href="usercp.php?action=msign_nexuschat"><span class="ms-nav-dot ms-dot--accent"></span> Chat Settings</a></li>
        <li{$active_alert}><a href="usercp.php?action=msign_alerts"><span class="ms-nav-dot ms-dot--yellow"></span> Notifications</a></li>
    </ul>
</div>',

// ── CMID DEVICE MANAGEMENT ─────────────────────────────────────────────────
'usercp_msign_cmid' => '<div class="ms-ucp-panel">
    <div class="ms-ucp-panel-header">
        <h2><span class="ms-icon">&#x1F4F1;</span> Device Management</h2>
        <span class="ms-ucp-cmid-badge">{$user_cmid}</span>
    </div>

    <div class="ms-ucp-panel-info">
        Manage your registered signing devices. Your CMID is your unique device identifier used for IPA signing. You can rename devices, set a primary, or revoke access.
    </div>

    <div class="ms-ucp-devices-grid">
        {$devices_list}
    </div>
</div>',

'usercp_msign_cmid_device' => '<div class="ms-device-card {$device[\'status_class\']}">
    <div class="ms-device-header">
        <span class="ms-device-name">{$device[\'device_name\']}</span>
        {$device[\'primary_badge\']}
        <span class="ms-device-status">{$device[\'status_label\']}</span>
    </div>
    <div class="ms-device-meta">
        <div class="ms-device-row"><span class="ms-label">Device ID</span><code class="ms-mono" title="{$device[\'device_id_full\']}">{$device[\'device_id_short\']}</code></div>
        <div class="ms-device-row"><span class="ms-label">Model</span><span>{$device[\'device_model\']}</span></div>
        <div class="ms-device-row"><span class="ms-label">iOS</span><span>{$device[\'ios_version\']}</span></div>
        <div class="ms-device-row"><span class="ms-label">Registered</span><span>{$device[\'registered\']}</span></div>
        <div class="ms-device-row"><span class="ms-label">Last Signed</span><span>{$device[\'last_sign\']}</span></div>
        <div class="ms-device-row"><span class="ms-label">Signs Used</span><span class="ms-accent">{$device[\'signs_used\']}</span></div>
    </div>
    <div class="ms-device-actions">
        <form method="post" action="usercp.php?action=do_cmid" style="display:inline">
            <input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
            <input type="hidden" name="device_id" value="{$device[\'device_id_full\']}" />
            <input type="hidden" name="cmid_action" value="set_primary" />
            <button type="submit" class="ms-btn ms-btn--small ms-btn--cyan">Set Primary</button>
        </form>
        <form method="post" action="usercp.php?action=do_cmid" style="display:inline" onsubmit="return confirm(\'Revoke this device? It will no longer be able to sign IPAs.\');">
            <input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
            <input type="hidden" name="device_id" value="{$device[\'device_id_full\']}" />
            <input type="hidden" name="cmid_action" value="revoke" />
            <button type="submit" class="ms-btn ms-btn--small ms-btn--red">Revoke</button>
        </form>
    </div>
</div>',

'usercp_msign_cmid_none' => '<div class="ms-ucp-empty">
    <span class="ms-empty-icon">&#x1F50C;</span>
    <p>No devices registered yet.</p>
    <p class="ms-muted">Install an IPA through MSign to register your first device automatically.</p>
</div>',

// ── REPUTATION PREFERENCES ─────────────────────────────────────────────────
'usercp_msign_reputation' => '<div class="ms-ucp-panel">
    <div class="ms-ucp-panel-header">
        <h2><span class="ms-icon">&#x2B50;</span> Reputation Settings</h2>
    </div>

    <div class="ms-ucp-stats-bar">
        <div class="ms-stat"><span class="ms-stat-val ms-green">{$rep[\'total_positive\']}</span><span class="ms-stat-lbl">Positive</span></div>
        <div class="ms-stat"><span class="ms-stat-val ms-red">{$rep[\'total_negative\']}</span><span class="ms-stat-lbl">Negative</span></div>
        <div class="ms-stat"><span class="ms-stat-val ms-accent">{$rep[\'reputation\']}</span><span class="ms-stat-lbl">Total Rep</span></div>
        <div class="ms-stat"><span class="ms-stat-val ms-cyan">{$rep[\'total_given\']}</span><span class="ms-stat-lbl">Given</span></div>
    </div>

    <form method="post" action="usercp.php?action=do_msign_reputation">
        <input type="hidden" name="my_post_key" value="{$mybb->post_code}" />

        <div class="ms-ucp-section-title">Notifications</div>
        <div class="ms-ucp-form-group">
            <label class="ms-toggle-row">
                <input type="checkbox" name="rep_notify_positive" value="1"{$rep[\'rep_notify_positive_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Notify me when I receive positive reputation</span>
            </label>
            <label class="ms-toggle-row">
                <input type="checkbox" name="rep_notify_negative" value="1"{$rep[\'rep_notify_negative_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Notify me when I receive negative reputation</span>
            </label>
        </div>

        <div class="ms-ucp-section-title">Display</div>
        <div class="ms-ucp-form-group">
            <label class="ms-toggle-row">
                <input type="checkbox" name="rep_display_profile" value="1"{$rep[\'rep_display_profile_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Show reputation score on my profile</span>
            </label>
            <label class="ms-toggle-row">
                <input type="checkbox" name="rep_display_postbit" value="1"{$rep[\'rep_display_postbit_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Show reputation badge on my posts</span>
            </label>
        </div>

        <div class="ms-ucp-section-title">Privacy</div>
        <div class="ms-ucp-form-group">
            <label class="ms-toggle-row">
                <input type="checkbox" name="rep_allow_anonymous" value="1"{$rep[\'rep_allow_anonymous_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Allow others to give me anonymous reputation</span>
            </label>
        </div>

        <div class="ms-ucp-submit">
            <button type="submit" class="ms-btn ms-btn--primary">Save Reputation Settings</button>
        </div>
    </form>
</div>',

// ── NEXUSCHAT SETTINGS ─────────────────────────────────────────────────────
'usercp_msign_nexuschat' => '<div class="ms-ucp-panel">
    <div class="ms-ucp-panel-header">
        <h2><span class="ms-icon">&#x1F4AC;</span> Chat Settings</h2>
    </div>

    <form method="post" action="usercp.php?action=do_msign_nexuschat">
        <input type="hidden" name="my_post_key" value="{$mybb->post_code}" />

        <div class="ms-ucp-section-title">General</div>
        <div class="ms-ucp-form-group">
            <label class="ms-toggle-row">
                <input type="checkbox" name="chat_enabled" value="1"{$chat[\'chat_enabled_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Enable NexusChat</span>
            </label>
            <label class="ms-toggle-row">
                <input type="checkbox" name="chat_show_online" value="1"{$chat[\'chat_show_online_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Show me as online in chat</span>
            </label>
        </div>

        <div class="ms-ucp-section-title">Notifications</div>
        <div class="ms-ucp-form-group">
            <label class="ms-toggle-row">
                <input type="checkbox" name="chat_sound" value="1"{$chat[\'chat_sound_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Play sound on new messages</span>
            </label>
            <label class="ms-toggle-row">
                <input type="checkbox" name="chat_desktop_notify" value="1"{$chat[\'chat_desktop_notify_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Enable desktop push notifications</span>
            </label>
        </div>

        <div class="ms-ucp-section-title">Display</div>
        <div class="ms-ucp-form-group">
            <div class="ms-select-row">
                <label>Timestamp Format</label>
                <select name="chat_timestamp_fmt" class="ms-select">
                    {$chat[\'timestamp_select\']}
                </select>
            </div>
            <div class="ms-select-row">
                <label>Message History Limit</label>
                <input type="number" name="chat_max_history" value="{$chat[\'chat_max_history\']}" min="10" max="500" step="10" class="ms-input ms-input--small" />
            </div>
        </div>

        <div class="ms-ucp-submit">
            <button type="submit" class="ms-btn ms-btn--primary">Save Chat Settings</button>
        </div>
    </form>
</div>',

// ── NOTIFICATION / ALERTS PREFERENCES ──────────────────────────────────────
'usercp_msign_alerts' => '<div class="ms-ucp-panel">
    <div class="ms-ucp-panel-header">
        <h2><span class="ms-icon">&#x1F514;</span> Notification Preferences</h2>
        <span class="ms-badge ms-badge--cyan">{$alerts[\'unread_count\']} unread</span>
    </div>

    <form method="post" action="usercp.php?action=do_msign_alerts">
        <input type="hidden" name="my_post_key" value="{$mybb->post_code}" />

        <div class="ms-ucp-section-title">Forum Activity</div>
        <div class="ms-ucp-form-group">
            <label class="ms-toggle-row">
                <input type="checkbox" name="alert_thread_reply" value="1"{$alerts[\'alert_thread_reply_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Thread replies</span>
            </label>
            <label class="ms-toggle-row">
                <input type="checkbox" name="alert_quote" value="1"{$alerts[\'alert_quote_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Quoted in a post</span>
            </label>
            <label class="ms-toggle-row">
                <input type="checkbox" name="alert_mention" value="1"{$alerts[\'alert_mention_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>@Mentioned</span>
            </label>
            <label class="ms-toggle-row">
                <input type="checkbox" name="alert_rep_received" value="1"{$alerts[\'alert_rep_received_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Reputation received</span>
            </label>
            <label class="ms-toggle-row">
                <input type="checkbox" name="alert_buddy_request" value="1"{$alerts[\'alert_buddy_request_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Buddy requests</span>
            </label>
        </div>

        <div class="ms-ucp-section-title">Signing Events</div>
        <div class="ms-ucp-form-group">
            <label class="ms-toggle-row">
                <input type="checkbox" name="alert_sign_complete" value="1"{$alerts[\'alert_sign_complete_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Sign job completed</span>
            </label>
            <label class="ms-toggle-row">
                <input type="checkbox" name="alert_sign_failed" value="1"{$alerts[\'alert_sign_failed_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Sign job failed</span>
            </label>
            <label class="ms-toggle-row">
                <input type="checkbox" name="alert_quota_reset" value="1"{$alerts[\'alert_quota_reset_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Signing quota reset</span>
            </label>
        </div>

        <div class="ms-ucp-section-title">Delivery</div>
        <div class="ms-ucp-form-group">
            <label class="ms-toggle-row">
                <input type="checkbox" name="alert_pm_popup" value="1"{$alerts[\'alert_pm_popup_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Show popup for new PMs</span>
            </label>
            <label class="ms-toggle-row">
                <input type="checkbox" name="alert_sound" value="1"{$alerts[\'alert_sound_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Play notification sounds</span>
            </label>
            <label class="ms-toggle-row">
                <input type="checkbox" name="alert_desktop_push" value="1"{$alerts[\'alert_desktop_push_checked\']} />
                <span class="ms-toggle-slider"></span>
                <span>Desktop push notifications</span>
            </label>
        </div>

        <div class="ms-ucp-submit">
            <button type="submit" class="ms-btn ms-btn--primary">Save Notification Preferences</button>
        </div>
    </form>
</div>',

    ); // end templates array
}

// ═══════════════════════════════════════════════════════════════════════════════
// CSS — msign.city Dark Theme for UserCP
// ═══════════════════════════════════════════════════════════════════════════════

function _msign_usercp_get_css()
{
    return '
/* ═══════════════════════════════════════════════════════════════════════════
   MSign UserCP — Dark Cyberpunk Theme
   Matches msign.city: --accent:#ff8c42 --bg:#0b0d12 --bg-card:#14171f
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── NAV SECTION ── */
.ms-ucp-nav-section {
    margin-top: 12px;
    border-top: 1px solid #1f232d;
    padding-top: 12px;
}
.ms-ucp-nav-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #ff8c42;
    padding: 6px 12px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ms-ucp-nav-icon {
    font-size: 14px;
}
.ms-ucp-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ms-ucp-nav-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 18px;
    font-size: 13px;
    color: #9aa0a6;
    text-decoration: none;
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
}
.ms-ucp-nav-list li a:hover {
    color: #e6e6e6;
    background: rgba(255, 140, 66, 0.06);
    border-left-color: rgba(255, 140, 66, 0.3);
}
.ms-ucp-nav-list li.ms-nav-active a {
    color: #ff8c42;
    background: rgba(255, 140, 66, 0.1);
    border-left-color: #ff8c42;
    font-weight: 600;
}
.ms-nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.ms-dot--cyan   { background: #00cfff; box-shadow: 0 0 6px rgba(0,207,255,0.4); }
.ms-dot--green  { background: #44dd88; box-shadow: 0 0 6px rgba(68,221,136,0.4); }
.ms-dot--accent { background: #ff8c42; box-shadow: 0 0 6px rgba(255,140,66,0.4); }
.ms-dot--yellow { background: #ffcc00; box-shadow: 0 0 6px rgba(255,204,0,0.4); }

/* ── PANEL BASE ── */
.ms-ucp-panel {
    background: #14171f;
    border: 1px solid #1f232d;
    border-radius: 8px;
    overflow: hidden;
}
.ms-ucp-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #1f232d;
    background: linear-gradient(180deg, #181c26 0%, #14171f 100%);
}
.ms-ucp-panel-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: #e6e6e6;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ms-icon {
    font-size: 20px;
}
.ms-ucp-panel-info {
    padding: 14px 24px;
    font-size: 13px;
    color: #6b7280;
    border-bottom: 1px solid #1f232d;
    background: rgba(255, 140, 66, 0.03);
    line-height: 1.5;
}

/* ── CMID BADGE ── */
.ms-ucp-cmid-badge {
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 11px;
    padding: 4px 10px;
    background: rgba(0, 207, 255, 0.1);
    color: #00cfff;
    border: 1px solid rgba(0, 207, 255, 0.2);
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* ── DEVICE CARDS ── */
.ms-ucp-devices-grid {
    padding: 16px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ms-device-card {
    background: #1a1e27;
    border: 1px solid #1f232d;
    border-radius: 6px;
    padding: 16px 20px;
    transition: border-color 0.15s;
}
.ms-device-card:hover {
    border-color: rgba(255, 140, 66, 0.3);
}
.ms-device-card.ms-status--revoked {
    opacity: 0.5;
    border-color: rgba(255, 59, 110, 0.2);
}
.ms-device-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.ms-device-name {
    font-weight: 700;
    font-size: 15px;
    color: #e6e6e6;
}
.ms-device-status {
    margin-left: auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #6b7280;
}
.ms-device-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 24px;
    margin-bottom: 14px;
}
.ms-device-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}
.ms-label {
    color: #6b7280;
}
.ms-mono {
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 12px;
    color: #9aa0a6;
    cursor: help;
}
.ms-device-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #1f232d;
}

/* ── BADGES ── */
.ms-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 3px;
}
.ms-badge--accent {
    background: rgba(255, 140, 66, 0.15);
    color: #ff8c42;
    border: 1px solid rgba(255, 140, 66, 0.3);
}
.ms-badge--cyan {
    background: rgba(0, 207, 255, 0.1);
    color: #00cfff;
    border: 1px solid rgba(0, 207, 255, 0.2);
}

/* ── STATS BAR ── */
.ms-ucp-stats-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #1f232d;
}
.ms-stat {
    flex: 1;
    text-align: center;
    padding: 16px 12px;
    border-right: 1px solid #1f232d;
}
.ms-stat:last-child {
    border-right: none;
}
.ms-stat-val {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}
.ms-stat-lbl {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6b7280;
    margin-top: 4px;
}

/* ── COLOR UTILITIES ── */
.ms-green  { color: #44dd88; }
.ms-red    { color: #ff3b6e; }
.ms-accent { color: #ff8c42; }
.ms-cyan   { color: #00cfff; }
.ms-muted  { color: #6b7280; }

/* ── FORM ELEMENTS ── */
.ms-ucp-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #ff8c42;
    padding: 16px 24px 8px;
}
.ms-ucp-form-group {
    padding: 0 24px 8px;
}

/* Toggle rows */
.ms-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    font-size: 14px;
    color: #e6e6e6;
    border-bottom: 1px solid rgba(31, 35, 45, 0.6);
    transition: color 0.15s;
}
.ms-toggle-row:last-child {
    border-bottom: none;
}
.ms-toggle-row:hover {
    color: #fff;
}
.ms-toggle-row input[type="checkbox"] {
    display: none;
}
.ms-toggle-slider {
    position: relative;
    width: 40px;
    height: 22px;
    background: #2a2f3a;
    border-radius: 11px;
    flex-shrink: 0;
    transition: background 0.2s;
}
.ms-toggle-slider::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: #6b7280;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: all 0.2s;
}
.ms-toggle-row input:checked + .ms-toggle-slider {
    background: rgba(255, 140, 66, 0.25);
}
.ms-toggle-row input:checked + .ms-toggle-slider::after {
    background: #ff8c42;
    left: 21px;
    box-shadow: 0 0 8px rgba(255, 140, 66, 0.5);
}

/* Select & input rows */
.ms-select-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(31, 35, 45, 0.6);
    font-size: 14px;
    color: #e6e6e6;
}
.ms-select-row:last-child {
    border-bottom: none;
}
.ms-select-row label {
    flex: 1;
}
.ms-select,
.ms-input {
    background: #1a1e27;
    border: 1px solid #2a2f3a;
    color: #e6e6e6;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.15s;
}
.ms-select:focus,
.ms-input:focus {
    outline: none;
    border-color: #ff8c42;
    box-shadow: 0 0 0 2px rgba(255, 140, 66, 0.15);
}
.ms-input--small {
    width: 80px;
    text-align: center;
}

/* ── BUTTONS ── */
.ms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    text-decoration: none;
}
.ms-btn--primary {
    background: linear-gradient(135deg, #ff8c42, #ff6b35);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(255, 140, 66, 0.3);
}
.ms-btn--primary:hover {
    box-shadow: 0 4px 16px rgba(255, 140, 66, 0.5);
    transform: translateY(-1px);
}
.ms-btn--small {
    padding: 5px 12px;
    font-size: 11px;
}
.ms-btn--cyan {
    background: rgba(0, 207, 255, 0.1);
    color: #00cfff;
    border-color: rgba(0, 207, 255, 0.25);
}
.ms-btn--cyan:hover {
    background: rgba(0, 207, 255, 0.2);
}
.ms-btn--red {
    background: rgba(255, 59, 110, 0.1);
    color: #ff3b6e;
    border-color: rgba(255, 59, 110, 0.25);
}
.ms-btn--red:hover {
    background: rgba(255, 59, 110, 0.2);
}

/* ── SUBMIT ROW ── */
.ms-ucp-submit {
    padding: 18px 24px;
    border-top: 1px solid #1f232d;
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: flex-end;
}

/* ── EMPTY STATE ── */
.ms-ucp-empty {
    padding: 48px 24px;
    text-align: center;
}
.ms-empty-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.5;
}
.ms-ucp-empty p {
    font-size: 15px;
    color: #9aa0a6;
    margin: 4px 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .ms-device-meta {
        grid-template-columns: 1fr;
    }
    .ms-ucp-stats-bar {
        flex-wrap: wrap;
    }
    .ms-stat {
        min-width: 50%;
    }
    .ms-ucp-panel-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}
';
}