<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<?php
$profile_info = get_staff_details($this->session->userdata('user_id'));
$activities_info = $this->db->where(array('user' => $profile_info->user_id))->order_by('activity_date', 'DESC')->get('tbl_activities')->result();
$user_info = $this->db->where('user_id', $profile_info->user_id)->get('tbl_users')->row();
$all_bank_info = $this->db->where('user_id', $profile_info->user_id)->get('tbl_employee_bank')->result();
$custom_fields = custom_form_label(13, $profile_info->user_id);
$user_notifications = $this->common_model->get_user_notifications(false, true);
$notifications_page_url = base_url('client/user/user_details/' . $this->session->userdata('user_id') . '?tab=notifications');

$avatar_url = !empty($profile_info->avatar) ? base_url($profile_info->avatar) : base_url('assets/img/user/02.jpg');
$role_label = lang('client') . ' ' . lang('user');
$active_tab = !empty($active) ? $active : 1;

$unread_notifications = 0;
if (!empty($user_notifications)) {
    foreach ($user_notifications as $notification_item) {
        if ((int) ($notification_item->read_inline ?? 0) === 0) {
            $unread_notifications++;
        }
    }
}

$profile_fields = array(
    array('label' => lang('emp_id'), 'value' => !empty($profile_info->employment_id) ? $profile_info->employment_id : '-'),
    array('label' => lang('fullname'), 'value' => !empty($profile_info->fullname) ? $profile_info->fullname : '-'),
    array('label' => lang('email'), 'value' => !empty($user_info->email) ? $user_info->email : '-'),
    array('label' => lang('phone'), 'value' => !empty($profile_info->phone) ? $profile_info->phone : '-'),
    array('label' => lang('mobile'), 'value' => !empty($profile_info->mobile) ? $profile_info->mobile : '-'),
    array('label' => lang('skype_id'), 'value' => !empty($profile_info->skype) ? $profile_info->skype : '-'),
);

if (!empty($profile_info->joining_date)) {
    $profile_fields[] = array('label' => lang('joining_date'), 'value' => display_date($profile_info->joining_date));
}
if (!empty($profile_info->gender)) {
    $profile_fields[] = array('label' => lang('gender'), 'value' => lang($profile_info->gender));
}
if (!empty($profile_info->date_of_birth)) {
    $profile_fields[] = array('label' => lang('date_of_birth'), 'value' => display_date($profile_info->date_of_birth));
}
if (!empty($profile_info->maratial_status)) {
    $profile_fields[] = array('label' => lang('maratial_status'), 'value' => lang($profile_info->maratial_status));
}
if (!empty($profile_info->father_name)) {
    $profile_fields[] = array('label' => lang('fathers_name'), 'value' => $profile_info->father_name);
}
if (!empty($profile_info->mother_name)) {
    $profile_fields[] = array('label' => lang('mother_name'), 'value' => $profile_info->mother_name);
}
if (!empty($profile_info->passport)) {
    $profile_fields[] = array('label' => lang('passport'), 'value' => $profile_info->passport);
}
if (!empty($profile_info->present_address)) {
    $profile_fields[] = array('label' => lang('present_address'), 'value' => $profile_info->present_address);
}
if (!empty($custom_fields)) {
    foreach ($custom_fields as $custom_label => $custom_value) {
        if ($custom_value !== '' && $custom_value !== null) {
            $profile_fields[] = array('label' => $custom_label, 'value' => $custom_value);
        }
    }
}

$resolve_notification_link = function ($notificationLink) use ($notifications_page_url) {
    if (empty($notificationLink)) {
        return '#';
    }

    $notificationLink = trim((string) $notificationLink, '/');
    if ($notificationLink === '') {
        return '#';
    }

    if (preg_match('#^admin/user/user_details/\d+/(notifications)?$#', $notificationLink)) {
        return $notifications_page_url;
    }

    if (preg_match('#^admin/user/user_details/\d+$#', $notificationLink)) {
        $notificationLink = preg_replace('#^admin/#', 'client/', $notificationLink, 1);
    }

    return base_url($notificationLink);
};
?>

<div class="client-user-details-page space-y-6">
    <section class="overflow-hidden rounded-3xl border border-border bg-card shadow-sm">
        <div class="client-user-details-hero px-6 py-6 md:px-8 md:py-8">
            <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
                <div class="flex min-w-0 items-start gap-5">
                    <img src="<?= $avatar_url ?>" alt="<?= html_escape($profile_info->fullname) ?>" class="h-20 w-20 rounded-3xl border border-white/60 object-cover shadow-sm dark:border-slate-700/70">
                    <div class="min-w-0">
                        <div class="flex flex-wrap items-center gap-2">
                            <span class="inline-flex items-center rounded-full border border-primary/15 bg-primary/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-primary"><?= html_escape($role_label) ?></span>
                            <?php if ($unread_notifications > 0) { ?>
                                <span class="inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-300"><?= $unread_notifications ?> unread</span>
                            <?php } ?>
                        </div>
                        <h1 class="mt-3 text-2xl font-semibold tracking-tight text-foreground"><?= html_escape($profile_info->fullname) ?></h1>
                        <p class="mt-2 max-w-2xl text-sm text-muted-foreground">A complete view of your account profile, saved banking details, client notifications, and recent activity in one place.</p>
                        <div class="mt-4 flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
                            <span class="inline-flex items-center gap-2 rounded-full border border-border bg-background px-3 py-1.5 dark:border-slate-700 dark:bg-slate-900">
                                <i data-lucide="mail" class="h-4 w-4"></i>
                                <span><?= !empty($user_info->email) ? html_escape($user_info->email) : '-' ?></span>
                            </span>
                            <span class="inline-flex items-center gap-2 rounded-full border border-border bg-background px-3 py-1.5 dark:border-slate-700 dark:bg-slate-900">
                                <i data-lucide="badge-check" class="h-4 w-4"></i>
                                <span><?= !empty($profile_info->employment_id) ? html_escape($profile_info->employment_id) : '-' ?></span>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
                    <div class="rounded-2xl border border-border bg-background px-4 py-3 dark:border-slate-700 dark:bg-slate-900/80">
                        <p class="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">Profile</p>
                        <p class="mt-1 text-lg font-semibold text-foreground"><?= count($profile_fields) ?></p>
                    </div>
                    <div class="rounded-2xl border border-border bg-background px-4 py-3 dark:border-slate-700 dark:bg-slate-900/80">
                        <p class="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">Notifications</p>
                        <p class="mt-1 text-lg font-semibold text-foreground"><?= count((array) $user_notifications) ?></p>
                    </div>
                    <div class="rounded-2xl border border-border bg-background px-4 py-3 dark:border-slate-700 dark:bg-slate-900/80">
                        <p class="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">Activity</p>
                        <p class="mt-1 text-lg font-semibold text-foreground"><?= count((array) $activities_info) ?></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="grid gap-6 xl:grid-cols-12">
        <aside class="xl:col-span-3">
            <div class="overflow-hidden rounded-3xl border border-border bg-card shadow-sm">
                <div class="border-b border-border px-5 py-4 dark:border-slate-700">
                    <h2 class="text-sm font-semibold text-foreground">Sections</h2>
                    <p class="mt-1 text-xs text-muted-foreground">Move through account details without leaving the page.</p>
                </div>
                <ul class="nav nav-pills nav-stacked client-user-details-tabs px-3 py-3">
                    <li class="<?= $active_tab == 1 ? 'active' : '' ?>">
                        <a href="#basic_info" data-toggle="tab">
                            <span class="client-user-details-tabs__icon"><i data-lucide="user-round" class="h-4 w-4"></i></span>
                            <span class="min-w-0 flex-1"><?= lang('basic_info') ?></span>
                        </a>
                    </li>
                    <li class="<?= $active_tab == 3 ? 'active' : '' ?>">
                        <a href="#bank_details" data-toggle="tab">
                            <span class="client-user-details-tabs__icon"><i data-lucide="landmark" class="h-4 w-4"></i></span>
                            <span class="min-w-0 flex-1"><?= lang('bank_details') ?></span>
                            <span class="client-user-details-tabs__meta"><?= count((array) $all_bank_info) ?></span>
                        </a>
                    </li>
                    <li class="<?= $active_tab == 'notifications' ? 'active' : '' ?>">
                        <a href="#notifications" data-toggle="tab">
                            <span class="client-user-details-tabs__icon"><i data-lucide="bell" class="h-4 w-4"></i></span>
                            <span class="min-w-0 flex-1"><?= lang('notification') ?></span>
                            <span class="client-user-details-tabs__meta"><?= count((array) $user_notifications) ?></span>
                        </a>
                    </li>
                    <li class="<?= $active_tab == 13 ? 'active' : '' ?>">
                        <a href="#activities" data-toggle="tab">
                            <span class="client-user-details-tabs__icon"><i data-lucide="history" class="h-4 w-4"></i></span>
                            <span class="min-w-0 flex-1"><?= lang('activities') ?></span>
                            <span class="client-user-details-tabs__meta"><?= count((array) $activities_info) ?></span>
                        </a>
                    </li>
                </ul>
            </div>
        </aside>

        <div class="xl:col-span-9">
            <div class="tab-content border-0 p-0">
                <div class="tab-pane <?= $active_tab == 1 ? 'active' : '' ?>" id="basic_info">
                    <section class="overflow-hidden rounded-3xl border border-border bg-card shadow-sm">
                        <div class="border-b border-border px-6 py-5 dark:border-slate-700">
                            <h3 class="text-base font-semibold text-foreground"><?= lang('basic_info') ?></h3>
                            <p class="mt-1 text-sm text-muted-foreground">Core contact details and profile information connected to this client account.</p>
                        </div>
                        <div class="grid gap-4 p-5 md:grid-cols-2 xl:grid-cols-3">
                            <?php foreach ($profile_fields as $field) { ?>
                                <article class="rounded-2xl border border-border bg-background px-4 py-4 dark:border-slate-700 dark:bg-slate-900/60">
                                    <p class="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground"><?= html_escape($field['label']) ?></p>
                                    <div class="mt-2 text-sm font-medium leading-6 text-foreground"><?= nl2br(html_escape($field['value'])) ?></div>
                                </article>
                            <?php } ?>
                        </div>
                    </section>
                </div>

                <div class="tab-pane <?= $active_tab == 3 ? 'active' : '' ?>" id="bank_details">
                    <section class="overflow-hidden rounded-3xl border border-border bg-card shadow-sm">
                        <div class="border-b border-border px-6 py-5 dark:border-slate-700">
                            <h3 class="text-base font-semibold text-foreground"><?= lang('bank_information') ?></h3>
                            <p class="mt-1 text-sm text-muted-foreground">Saved bank accounts and payment routing details associated with this profile.</p>
                        </div>
                        <div class="p-5">
                            <?php if (!empty($all_bank_info)) { ?>
                                <div class="overflow-hidden rounded-2xl border border-border dark:border-slate-700">
                                    <div class="overflow-x-auto">
                                        <table class="w-full border-collapse text-sm">
                                            <thead class="bg-muted/50 text-xs uppercase tracking-[0.14em] text-muted-foreground dark:bg-slate-800/80 dark:text-slate-400">
                                                <tr>
                                                    <th class="px-4 py-3 text-left font-semibold"><?= lang('bank') ?></th>
                                                    <th class="px-4 py-3 text-left font-semibold"><?= lang('name_of_account') ?></th>
                                                    <th class="px-4 py-3 text-left font-semibold"><?= lang('routing_number') ?></th>
                                                    <th class="px-4 py-3 text-left font-semibold"><?= lang('account_number') ?></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php foreach ($all_bank_info as $bank_info) { ?>
                                                    <tr class="border-t border-border dark:border-slate-700">
                                                        <td class="px-4 py-4 text-foreground"><?= html_escape($bank_info->bank_name) ?></td>
                                                        <td class="px-4 py-4 text-foreground"><?= html_escape($bank_info->account_name) ?></td>
                                                        <td class="px-4 py-4 text-muted-foreground"><?= html_escape($bank_info->routing_number) ?></td>
                                                        <td class="px-4 py-4 text-muted-foreground"><?= html_escape($bank_info->account_number) ?></td>
                                                    </tr>
                                                <?php } ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            <?php } else { ?>
                                <div class="flex min-h-[260px] flex-col items-center justify-center rounded-3xl border border-dashed border-border bg-background px-6 py-12 text-center">
                                    <div class="flex h-16 w-16 items-center justify-center rounded-3xl bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
                                        <i data-lucide="landmark" class="h-6 w-6"></i>
                                    </div>
                                    <h4 class="mt-5 text-base font-semibold text-foreground"><?= lang('bank_details') ?></h4>
                                    <p class="mt-2 max-w-md text-sm text-muted-foreground">No banking records are available for this account yet.</p>
                                </div>
                            <?php } ?>
                        </div>
                    </section>
                </div>

                <div class="tab-pane <?= $active_tab == 'notifications' ? 'active' : '' ?>" id="notifications">
                    <section class="overflow-hidden rounded-3xl border border-border bg-card shadow-sm">
                        <div class="flex flex-col gap-4 border-b border-border px-6 py-5 md:flex-row md:items-center md:justify-between">
                            <div class="min-w-0">
                                <div class="flex flex-wrap items-center gap-3">
                                    <h3 class="text-base font-semibold text-foreground"><?= lang('all') . ' ' . lang('notification'); ?></h3>
                                    <span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"><?= (int) count((array) $user_notifications) ?> total</span>
                                    <?php if ($unread_notifications > 0) { ?>
                                        <span class="inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-300"><?= $unread_notifications ?> unread</span>
                                    <?php } ?>
                                </div>
                                <p class="mt-1 text-sm text-muted-foreground"><?= $unread_notifications > 0 ? 'Keep on top of recent updates and client activity.' : 'Everything is up to date right now.' ?></p>
                            </div>
                            <div class="flex shrink-0 items-center">
                                <a href="#" onclick="mark_all_as_read(); return false;" class="inline-flex items-center gap-2 rounded-2xl border border-border bg-background px-4 py-2 text-sm font-semibold text-foreground transition hover:bg-muted dark:border-slate-700 dark:bg-slate-900 dark:hover:bg-slate-800">
                                    <i data-lucide="check-check" class="h-4 w-4"></i>
                                    <span><?= lang('mark_all_as_read'); ?></span>
                                </a>
                            </div>
                        </div>

                        <div class="p-4 md:p-5">
                            <?php if (!empty($user_notifications)) { ?>
                                <div class="space-y-3">
                                    <?php foreach ($user_notifications as $notification) {
                                        $link = $resolve_notification_link($notification->link ?? '');
                                        $description_key = isset($notification->description) ? (string) $notification->description : '';
                                        $description_value = $notification->value ?? null;
                                        if (is_string($description_value)) {
                                            $decoded_value = json_decode($description_value, true);
                                            if (json_last_error() === JSON_ERROR_NONE) {
                                                $description_value = $decoded_value;
                                            }
                                        }
                                        $description = $description_key !== '' ? lang($description_key, $description_value) : lang('no_notification');
                                        if ($description === $description_key && is_array($description_value)) {
                                            $description = implode(', ', array_map('strval', $description_value));
                                        } elseif ($description === $description_key && !is_array($description_value) && !empty($description_value)) {
                                            $description = (string) $description_value;
                                        }
                                        if ((int) ($notification->from_user_id ?? 0) !== 0) {
                                            $description = fullname($notification->from_user_id) . ' - ' . $description;
                                        }
                                        $is_unread = (int) ($notification->read_inline ?? 0) === 0;
                                    ?>
                                        <div class="rounded-2xl border <?= $is_unread ? 'border-amber-200 bg-amber-50/40 dark:border-amber-500/20 dark:bg-amber-500/5' : 'border-border bg-background dark:border-slate-700 dark:bg-slate-900/60' ?> transition hover:border-slate-300 hover:shadow-sm dark:hover:border-slate-600">
                                            <div class="flex items-start gap-4 px-4 py-4 md:px-5">
                                                <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl <?= $is_unread ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300' : 'bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300' ?>">
                                                    <i data-lucide="<?= $is_unread ? 'bell-ring' : 'bell' ?>" class="h-5 w-5"></i>
                                                </div>
                                                <div class="min-w-0 flex-1">
                                                    <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                                                        <a href="<?= $link ?>" class="min-w-0 flex-1 no-underline text-inherit">
                                                            <div class="flex items-start gap-3">
                                                                <p class="min-w-0 flex-1 text-sm font-medium leading-6 text-foreground"><?= html_escape($description) ?></p>
                                                                <?php if ($is_unread) { ?>
                                                                    <span class="mt-2 h-2.5 w-2.5 shrink-0 rounded-full bg-amber-500"></span>
                                                                <?php } ?>
                                                            </div>
                                                            <div class="mt-2 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
                                                                <span class="inline-flex items-center gap-1">
                                                                    <i data-lucide="clock-3" class="h-3.5 w-3.5"></i>
                                                                    <span><?= time_ago($notification->date); ?></span>
                                                                </span>
                                                                <?php if ($is_unread) { ?>
                                                                    <span class="inline-flex items-center rounded-full border border-amber-200 bg-amber-100/70 px-2 py-0.5 font-semibold uppercase tracking-[0.12em] text-amber-700 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300">New</span>
                                                                <?php } ?>
                                                            </div>
                                                        </a>
                                                        <?php if ($is_unread) { ?>
                                                            <button type="button" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-border bg-background text-muted-foreground transition hover:bg-muted hover:text-foreground dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700" onclick="read_inline(<?php echo $notification->notifications_id; ?>);" data-placement="top" data-toggle="tooltip" data-title="<?= lang('mark_as_read'); ?>">
                                                                <i data-lucide="check" class="h-4 w-4"></i>
                                                            </button>
                                                        <?php } ?>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    <?php } ?>
                                </div>
                            <?php } else { ?>
                                <div class="flex min-h-[320px] flex-col items-center justify-center rounded-3xl border border-dashed border-border bg-background px-6 py-12 text-center">
                                    <div class="flex h-16 w-16 items-center justify-center rounded-3xl bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
                                        <i data-lucide="bell-off" class="h-6 w-6"></i>
                                    </div>
                                    <h4 class="mt-5 text-base font-semibold text-foreground"><?= lang('no_notification') ?></h4>
                                    <p class="mt-2 max-w-md text-sm text-muted-foreground">You are all caught up. New account and project activity will appear here.</p>
                                </div>
                            <?php } ?>
                        </div>
                    </section>
                </div>

                <div class="tab-pane <?= $active_tab == 13 ? 'active' : '' ?>" id="activities">
                    <section class="overflow-hidden rounded-3xl border border-border bg-card shadow-sm">
                        <div class="border-b border-border px-6 py-5 dark:border-slate-700">
                            <h3 class="text-base font-semibold text-foreground"><?= lang('all_activities'); ?></h3>
                            <p class="mt-1 text-sm text-muted-foreground">A running record of notable updates made from or for this account.</p>
                        </div>
                        <div class="p-5">
                            <?php if (!empty($activities_info)) { ?>
                                <div class="overflow-hidden rounded-2xl border border-border dark:border-slate-700">
                                    <div class="overflow-x-auto">
                                        <table class="w-full border-collapse text-sm" id="clientUserActivitiesTable">
                                            <thead class="bg-muted/50 text-xs uppercase tracking-[0.14em] text-muted-foreground dark:bg-slate-800/80 dark:text-slate-400">
                                                <tr>
                                                    <th class="px-4 py-3 text-left font-semibold"><?= lang('date') ?></th>
                                                    <th class="px-4 py-3 text-left font-semibold"><?= lang('module') ?></th>
                                                    <th class="px-4 py-3 text-left font-semibold"><?= lang('activity') ?></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php foreach ($activities_info as $activity) {
                                                    $activity_user = $this->db->where('user_id', $activity->user)->get('tbl_account_details')->row();
                                                ?>
                                                    <tr class="border-t border-border dark:border-slate-700">
                                                        <td class="whitespace-nowrap px-4 py-4 text-foreground"><?= display_datetime($activity->activity_date); ?></td>
                                                        <td class="px-4 py-4 text-foreground"><?= !empty($activity_user->fullname) ? html_escape($activity_user->fullname) : '-' ?></td>
                                                        <td class="px-4 py-4 text-muted-foreground">
                                                            <span class="font-medium text-foreground"><?= lang($activity->activity) ?></span>
                                                            <?php if (!empty(trim($activity->value1 . ' ' . $activity->value2))) { ?>
                                                                <span class="block pt-1"><?= html_escape(trim($activity->value1 . ' ' . $activity->value2)) ?></span>
                                                            <?php } ?>
                                                        </td>
                                                    </tr>
                                                <?php } ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            <?php } else { ?>
                                <div class="flex min-h-[260px] flex-col items-center justify-center rounded-3xl border border-dashed border-border bg-background px-6 py-12 text-center">
                                    <div class="flex h-16 w-16 items-center justify-center rounded-3xl bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
                                        <i data-lucide="history" class="h-6 w-6"></i>
                                    </div>
                                    <h4 class="mt-5 text-base font-semibold text-foreground"><?= lang('activities') ?></h4>
                                    <p class="mt-2 max-w-md text-sm text-muted-foreground">No activity log is available for this account yet.</p>
                                </div>
                            <?php } ?>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .client-user-details-page .client-user-details-hero {
        background:
            radial-gradient(circle at top right, rgba(79, 70, 229, 0.14), transparent 34%),
            linear-gradient(135deg, rgba(15, 23, 42, 0.02), rgba(59, 130, 246, 0.05));
    }

    .client-user-details-page .client-user-details-tabs {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin: 0;
    }

    .client-user-details-page .client-user-details-tabs > li {
        margin: 0;
    }

    .client-user-details-page .client-user-details-tabs > li > a {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        border: 1px solid hsl(var(--border));
        border-radius: 1rem;
        padding: 0.9rem 1rem;
        background: hsl(var(--background));
        color: hsl(var(--foreground));
        font-size: 0.94rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .client-user-details-page .client-user-details-tabs > li > a:hover,
    .client-user-details-page .client-user-details-tabs > li.active > a,
    .client-user-details-page .client-user-details-tabs > li.active > a:hover,
    .client-user-details-page .client-user-details-tabs > li.active > a:focus {
        border-color: rgba(99, 102, 241, 0.28);
        background: rgba(99, 102, 241, 0.08);
        color: hsl(var(--foreground));
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    }

    .client-user-details-page .client-user-details-tabs__icon {
        display: inline-flex;
        height: 2rem;
        width: 2rem;
        align-items: center;
        justify-content: center;
        border-radius: 0.85rem;
        background: rgba(148, 163, 184, 0.12);
        color: hsl(var(--muted-foreground));
        flex-shrink: 0;
    }

    .client-user-details-page .client-user-details-tabs > li.active > a .client-user-details-tabs__icon {
        background: rgba(99, 102, 241, 0.12);
        color: hsl(var(--primary));
    }

    .client-user-details-page .client-user-details-tabs__meta {
        display: inline-flex;
        min-width: 1.65rem;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: 0.1rem 0.45rem;
        background: rgba(148, 163, 184, 0.14);
        color: hsl(var(--muted-foreground));
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.2;
        flex-shrink: 0;
    }

    .client-user-details-page .client-user-details-tabs > li.active > a .client-user-details-tabs__meta {
        background: rgba(99, 102, 241, 0.16);
        color: hsl(var(--primary));
    }

    .client-user-details-page .tab-content > .tab-pane {
        display: none;
    }

    .client-user-details-page .tab-content > .active {
        display: block;
    }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        if ($('#clientUserActivitiesTable').length) {
            $('#clientUserActivitiesTable').dataTable({
                paging: false,
                bSort: false
            });
        }
    });
</script>
