@tekkare/auriga 0.2.194 → 0.2.199

package/dist/runtime/components/argProfilePage.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="arg_profile_page">
+    <div class="arg_profile_container">
+      <!-- Loading -->
+      <div v-if="loading" class="arg_profile_loading">
+        <div class="arg_profile_spinner"></div>
+        <p>Loading your profile...</p>
+      </div>
+
+      <!-- Error -->
+      <div v-else-if="error" class="arg_profile_error">
+        <div class="arg_profile_error_icon">!</div>
+        <p>{{ error }}</p>
+        <button class="arg_profile_btn arg_profile_btn_primary" @click="$emit('onRetry')">Retry</button>
+      </div>
+
+      <!-- Content -->
+      <div v-else class="arg_profile_content">
+        <!-- Profile Header -->
+        <div class="arg_profile_header">
+          <div class="arg_profile_avatar">
+            <img
+              v-if="userImage"
+              :src="userImage"
+              :alt="userName || 'Profile'"
+            />
+            <div v-else class="arg_profile_avatar_placeholder">
+              {{ (userName || userEmail || "U").charAt(0).toUpperCase() }}
+            </div>
+          </div>
+          <div class="arg_profile_info">
+            <h1>{{ userName || "User Profile" }}</h1>
+            <p class="arg_profile_email">{{ userEmail }}</p>
+            <div class="arg_profile_badge">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
+              </svg>
+              Verified Account
+            </div>
+          </div>
+          <div class="arg_profile_actions">
+            <slot name="header-actions">
+              <button @click="navigateHome" class="arg_profile_btn arg_profile_btn_secondary">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                  <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                Home
+              </button>
+              <button @click="$emit('onSignOut')" class="arg_profile_btn arg_profile_btn_outline">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                  <path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <polyline points="16,17 21,12 16,7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <line x1="21" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                Sign Out
+              </button>
+            </slot>
+          </div>
+        </div>
+
+        <!-- Navigation Tabs -->
+        <div class="arg_profile_tabs">
+          <button
+            @click="activeSection = 'account'"
+            class="arg_profile_tab"
+            :class="{ active: activeSection === 'account' }"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+              <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
+            </svg>
+            Account
+          </button>
+          <button
+            @click="activeSection = 'workspace'"
+            class="arg_profile_tab"
+            :class="{ active: activeSection === 'workspace' }"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+              <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            Workspace
+          </button>
+          <button
+            @click="activeSection = 'licenses'"
+            class="arg_profile_tab"
+            :class="{ active: activeSection === 'licenses' }"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+              <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
+            </svg>
+            Licenses
+          </button>
+        </div>
+
+        <!-- Account Section -->
+        <div v-show="activeSection === 'account'" class="arg_profile_section_content">
+          <div class="arg_profile_cards_grid">
+            <div class="arg_profile_card">
+              <div class="arg_profile_card_header">
+                <div class="arg_profile_card_icon">
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                    <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
+                  </svg>
+                </div>
+                <h2>Account Information</h2>
+              </div>
+              <div class="arg_profile_card_content">
+                <div class="arg_profile_info_row">
+                  <span class="arg_profile_info_label">Email Address</span>
+                  <span class="arg_profile_info_value">{{ userEmail || "Not provided" }}</span>
+                </div>
+                <div class="arg_profile_info_row">
+                  <span class="arg_profile_info_label">Display Name</span>
+                  <span class="arg_profile_info_value">{{ userName || "Not provided" }}</span>
+                </div>
+                <div class="arg_profile_info_row">
+                  <span class="arg_profile_info_label">Account Status</span>
+                  <span class="arg_profile_info_value arg_profile_status_active">
+                    <span class="arg_profile_status_dot"></span>
+                    Active
+                  </span>
+                </div>
+                <div class="arg_profile_info_row">
+                  <span class="arg_profile_info_label">Platform Admin</span>
+                  <span class="arg_profile_info_value">{{ isPlatformAdmin ? 'Yes' : 'No' }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <slot name="account-extra" />
+        </div>
+
+        <!-- Workspace Section -->
+        <div v-show="activeSection === 'workspace'" class="arg_profile_section_content">
+          <div class="arg_profile_card">
+            <div class="arg_profile_card_header">
+              <div class="arg_profile_card_icon arg_profile_workspace_icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+              <h2>Current Workspace</h2>
+            </div>
+            <div class="arg_profile_card_content">
+              <div v-if="currentWorkspace" class="arg_profile_current_workspace">
+                <div class="arg_profile_cw_row">
+                  <div class="arg_profile_cw_avatar" :class="currentWorkspace.isPersonal ? 'personal' : 'team'">
+                    {{ currentWorkspace.name.charAt(0).toUpperCase() }}
+                  </div>
+                  <div class="arg_profile_cw_details">
+                    <div class="arg_profile_cw_name">{{ currentWorkspace.name }}</div>
+                    <div class="arg_profile_cw_meta">
+                      <span class="arg_profile_cw_tag">{{ currentWorkspace.role }}</span>
+                      <span v-if="currentWorkspace.isPersonal" class="arg_profile_cw_tag arg_profile_personal_tag">Personal</span>
+                    </div>
+                  </div>
+                  <span class="arg_profile_cw_active">Active</span>
+                </div>
+              </div>
+              <div v-else class="arg_profile_no_workspace">
+                <p>No workspace selected</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Switch Workspace -->
+          <div v-if="workspaces.length > 1" class="arg_profile_card">
+            <div class="arg_profile_card_header">
+              <div class="arg_profile_card_icon arg_profile_switch_icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path d="M8 3L4 7L8 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M4 7H16C17.0609 7 18.0783 7.42143 18.8284 8.17157C19.5786 8.92172 20 9.93913 20 11V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M16 21L20 17L16 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M20 17H8C6.93913 17 5.92172 16.5786 5.17157 15.8284C4.42143 15.0783 4 14.0609 4 13V11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+              <h2>Switch Workspace</h2>
+            </div>
+            <div class="arg_profile_card_content">
+              <div class="arg_profile_workspace_list">
+                <button
+                  v-for="ws in workspaces"
+                  :key="ws.workspaceId"
+                  class="arg_profile_workspace_option"
+                  :class="{ selected: ws.workspaceId === currentWorkspaceId }"
+                  @click="handleSwitchWorkspace(ws)"
+                  :disabled="ws.workspaceId === currentWorkspaceId"
+                >
+                  <div class="arg_profile_ws_avatar" :class="ws.isPersonal ? 'personal' : 'team'">
+                    {{ ws.name.charAt(0).toUpperCase() }}
+                  </div>
+                  <div class="arg_profile_ws_info">
+                    <span class="arg_profile_ws_name">{{ ws.name }}</span>
+                    <span class="arg_profile_ws_meta">{{ ws.role }}</span>
+                  </div>
+                  <span v-if="ws.workspaceId === currentWorkspaceId" class="arg_profile_ws_check">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                      <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <slot name="workspace-extra" />
+        </div>
+
+        <!-- Licenses Section -->
+        <div v-show="activeSection === 'licenses'" class="arg_profile_section_content">
+          <div class="arg_profile_card">
+            <div class="arg_profile_card_header">
+              <div class="arg_profile_card_icon arg_profile_licenses_icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                  <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
+                </svg>
+              </div>
+              <h2>My Product Licenses</h2>
+            </div>
+            <div class="arg_profile_card_content">
+              <div v-if="licenses.length > 0" class="arg_profile_licenses_list">
+                <div v-for="license in licenses" :key="license.licenseId" class="arg_profile_license_item">
+                  <div class="arg_profile_license_product">
+                    <div class="arg_profile_product_icon arg_profile_product_default">
+                      {{ (license.product?.name || license.product?.slug || 'L').charAt(0).toUpperCase() }}
+                    </div>
+                    <div class="arg_profile_product_info">
+                      <span class="arg_profile_product_name">{{ productDisplayNames[license.product?.slug] || license.product?.name || license.product?.slug }}</span>
+                      <span class="arg_profile_license_status" :class="license.status">{{ license.status }}</span>
+                    </div>
+                  </div>
+                  <div class="arg_profile_license_dates">
+                    <span class="arg_profile_date_label">Assigned:</span>
+                    <span class="arg_profile_date_value">{{ formatDate(license.assignedAt) }}</span>
+                  </div>
+                  <div v-if="license.expiresAt" class="arg_profile_license_expiry">
+                    <span class="arg_profile_expiry_badge" :class="{ expired: new Date(license.expiresAt) < new Date() }">
+                      {{ new Date(license.expiresAt) < new Date() ? 'Expired' : `Expires ${formatDate(license.expiresAt)}` }}
+                    </span>
+                  </div>
+                  <div v-else class="arg_profile_license_expiry">
+                    <span class="arg_profile_expiry_badge arg_profile_no_expiry">No expiration</span>
+                  </div>
+                </div>
+              </div>
+              <div v-else class="arg_profile_no_licenses">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none">
+                  <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2" opacity="0.5"/>
+                  <path d="M9 10H15M9 14H12" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
+                </svg>
+                <p>No licenses assigned</p>
+                <span class="arg_profile_hint">Contact your workspace administrator to request access to products.</span>
+              </div>
+            </div>
+          </div>
+          <slot name="licenses-extra" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+
+interface Workspace {
+  workspaceId: string;
+  name: string;
+  role: string;
+  isPersonal: boolean;
+  isCurrent?: boolean;
+}
+
+interface License {
+  licenseId: string;
+  product: { slug: string; name: string };
+  status: string;
+  assignedAt: string;
+  expiresAt?: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    userName?: string;
+    userEmail?: string;
+    userImage?: string;
+    isPlatformAdmin?: boolean;
+    loading?: boolean;
+    error?: string;
+    workspaces?: Workspace[];
+    currentWorkspaceId?: string;
+    licenses?: License[];
+    productDisplayNames?: Record<string, string>;
+    initialTab?: "account" | "workspace" | "licenses";
+  }>(),
+  {
+    userName: "",
+    userEmail: "",
+    userImage: "",
+    isPlatformAdmin: false,
+    loading: false,
+    error: "",
+    workspaces: () => [],
+    currentWorkspaceId: "",
+    licenses: () => [],
+    productDisplayNames: () => ({}),
+    initialTab: "account",
+  }
+);
+
+const emit = defineEmits<{
+  onSignOut: [];
+  onSwitchWorkspace: [workspace: Workspace];
+  onRetry: [];
+}>();
+
+const activeSection = ref<"account" | "workspace" | "licenses">(props.initialTab);
+
+watch(
+  () => props.initialTab,
+  (tab) => {
+    activeSection.value = tab;
+  }
+);
+
+const currentWorkspace = computed(() => {
+  if (!props.currentWorkspaceId || !props.workspaces.length) return null;
+  return (
+    props.workspaces.find((w) => w.workspaceId === props.currentWorkspaceId) ||
+    props.workspaces[0]
+  );
+});
+
+const formatDate = (dateString: string): string => {
+  return new Date(dateString).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+};
+
+const handleSwitchWorkspace = (workspace: Workspace) => {
+  if (workspace.workspaceId === props.currentWorkspaceId) return;
+  emit("onSwitchWorkspace", workspace);
+};
+
+const navigateHome = () => {
+  if (typeof window !== "undefined") {
+    window.location.href = "/";
+  }
+};
+</script>
+
+<style scoped>
+.arg_profile_page{background:var(--Main-Lightest,#f8fafc);min-height:100vh;padding:40px 20px 80px}.arg_profile_container{margin:0 auto;max-width:900px}.arg_profile_error,.arg_profile_loading{align-items:center;color:var(--medium,#5a6c7d);display:flex;flex-direction:column;gap:16px;justify-content:center;padding:80px 20px}.arg_profile_spinner{animation:arg_profile_spin 1s linear infinite;border:3px solid var(--Main-Lightest,#f0f0f0);border-radius:50%;border-top-color:var(--primary,#6366f1);height:40px;width:40px}@keyframes arg_profile_spin{to{transform:rotate(1turn)}}.arg_profile_error{color:#dc2626}.arg_profile_error_icon{align-items:center;background:#fee2e2;border-radius:50%;color:#dc2626;display:flex;font-size:24px;font-weight:700;height:48px;justify-content:center;width:48px}.arg_profile_header{align-items:center;background:#fff;border:1px solid var(--dividers,#e4e7ec);border-radius:16px;display:grid;gap:24px;grid-template-columns:auto 1fr auto;margin-bottom:24px;padding:24px}.arg_profile_avatar{align-items:center;background:linear-gradient(135deg,var(--primary,#6366f1),#8b5cf6);border-radius:16px;display:flex;height:80px;justify-content:center;overflow:hidden;width:80px}.arg_profile_avatar img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.arg_profile_avatar_placeholder{color:#fff;font-size:32px;font-weight:700}.arg_profile_info h1{color:var(--Main-Darkest,#21243d);font-size:1.75rem;font-weight:700;margin:0 0 8px}.arg_profile_email{color:var(--medium,#5a6c7d);font-size:1rem;margin:0 0 12px}.arg_profile_badge{align-items:center;background:#e0e7ff;border-radius:20px;color:#4338ca;display:inline-flex;font-size:.85rem;font-weight:500;gap:6px;padding:6px 12px}.arg_profile_actions{display:flex;gap:12px}.arg_profile_btn{align-items:center;border:none;border-radius:8px;cursor:pointer;display:inline-flex;font-size:.9rem;font-weight:500;gap:8px;padding:10px 16px;text-decoration:none;transition:all .2s ease}.arg_profile_btn_primary{background:var(--primary,#6366f1);color:#fff}.arg_profile_btn_primary:hover{background:var(--primary-hover,#4f46e5)}.arg_profile_btn_secondary{background:var(--Main-Lightest,#f3f4f6);color:var(--Main-Darkest,#374151)}.arg_profile_btn_secondary:hover{background:#e5e7eb}.arg_profile_btn_outline{background:#fff;border:1px solid var(--dividers,#e4e7ec);color:var(--Main-Darkest,#374151)}.arg_profile_btn_outline:hover{background:var(--Main-Lightest,#f3f4f6)}.arg_profile_tabs{border-bottom:2px solid var(--dividers,#e4e7ec);display:flex;gap:8px;margin-bottom:24px;overflow-x:auto}.arg_profile_tab{align-items:center;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--medium,#5a6c7d);cursor:pointer;display:flex;font-size:.95rem;font-weight:500;gap:8px;margin-bottom:-2px;padding:12px 20px;transition:all .2s ease;white-space:nowrap}.arg_profile_tab:hover{background:rgba(99,102,241,.05);color:var(--Main-Darkest,#21243d)}.arg_profile_tab.active{border-bottom-color:var(--primary,#6366f1);color:var(--primary,#6366f1)}.arg_profile_cards_grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.arg_profile_card{background:#fff;border:1px solid var(--dividers,#e4e7ec);border-radius:16px;margin-bottom:24px;overflow:hidden;transition:all .2s ease}.arg_profile_card:hover{box-shadow:0 4px 16px rgba(99,102,241,.1)}.arg_profile_card_header{align-items:center;background:var(--Main-Lightest,#fafbfc);border-bottom:1px solid var(--dividers,#e4e7ec);display:flex;gap:12px;padding:20px 24px}.arg_profile_card_icon{align-items:center;background:linear-gradient(135deg,var(--primary,#6366f1),#8b5cf6);border-radius:8px;color:#fff;display:flex;height:40px;justify-content:center;width:40px}.arg_profile_card_icon.arg_profile_workspace_icon{background:linear-gradient(135deg,#10b981,#059669)}.arg_profile_card_icon.arg_profile_switch_icon{background:linear-gradient(135deg,#3b82f6,#2563eb)}.arg_profile_card_icon.arg_profile_licenses_icon{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.arg_profile_card_header h2{color:var(--Main-Darkest,#21243d);font-size:1.15rem;font-weight:600;margin:0}.arg_profile_card_content{padding:24px}.arg_profile_info_row{align-items:center;border-bottom:1px solid #f1f3f4;display:flex;justify-content:space-between;padding:14px 0}.arg_profile_info_row:last-child{border-bottom:none}.arg_profile_info_label{color:var(--medium,#5a6c7d);font-weight:500}.arg_profile_info_value{color:var(--Main-Darkest,#21243d);font-weight:500}.arg_profile_status_active{align-items:center;color:#059669!important;display:flex;gap:6px}.arg_profile_status_dot{animation:arg_profile_pulse 2s infinite;background:#10b981;border-radius:50%;height:8px;width:8px}@keyframes arg_profile_pulse{0%,to{opacity:1}50%{opacity:.5}}.arg_profile_current_workspace{background:var(--Main-Lightest,#f8fafc);border-radius:10px;padding:16px}.arg_profile_cw_row{align-items:center;display:flex;gap:14px}.arg_profile_cw_avatar{align-items:center;border-radius:10px;color:#fff;display:flex;font-size:18px;font-weight:600;height:48px;justify-content:center;width:48px}.arg_profile_cw_avatar.personal{background:linear-gradient(135deg,#10b981,#059669)}.arg_profile_cw_avatar.team{background:linear-gradient(135deg,var(--primary,#6366f1),#4f46e5)}.arg_profile_cw_details{flex:1}.arg_profile_cw_name{color:var(--Main-Darkest,#21243d);font-size:16px;font-weight:600;margin-bottom:6px}.arg_profile_cw_meta{display:flex;gap:8px}.arg_profile_cw_tag{background:#e5e7eb;border-radius:4px;color:#374151;font-size:11px;font-weight:500;padding:3px 10px;text-transform:uppercase}.arg_profile_cw_tag.arg_profile_personal_tag{background:#d1fae5;color:#065f46}.arg_profile_cw_active{background:#dcfce7;border-radius:16px;color:#15803d;font-size:12px;font-weight:500;padding:6px 12px}.arg_profile_no_workspace{color:var(--medium,#5a6c7d);padding:24px;text-align:center}.arg_profile_workspace_list{display:flex;flex-direction:column;gap:10px}.arg_profile_workspace_option{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:10px;cursor:pointer;display:flex;gap:12px;padding:14px;text-align:left;transition:all .15s ease;width:100%}.arg_profile_workspace_option:hover:not(:disabled){background:#fafafa;border-color:var(--primary,#6366f1)}.arg_profile_workspace_option.selected{background:#f5f3ff;border-color:var(--primary,#6366f1)}.arg_profile_workspace_option:disabled{cursor:default}.arg_profile_ws_avatar{align-items:center;border-radius:8px;color:#fff;display:flex;font-size:14px;font-weight:600;height:36px;justify-content:center;width:36px}.arg_profile_ws_avatar.personal{background:linear-gradient(135deg,#10b981,#059669)}.arg_profile_ws_avatar.team{background:linear-gradient(135deg,var(--primary,#6366f1),#4f46e5)}.arg_profile_ws_info{display:flex;flex:1;flex-direction:column;gap:3px}.arg_profile_ws_name{color:var(--Main-Darkest,#21243d);font-size:14px;font-weight:500}.arg_profile_ws_meta{color:var(--medium,#5a6c7d);font-size:12px;text-transform:capitalize}.arg_profile_ws_check{color:var(--primary,#6366f1);font-size:16px;font-weight:600}.arg_profile_licenses_list{display:flex;flex-direction:column;gap:14px}.arg_profile_license_item{background:var(--Main-Lightest,#f8f9fa);border:1px solid var(--dividers,#e4e7ec);border-radius:12px;display:flex;flex-direction:column;gap:10px;padding:16px}.arg_profile_license_product{align-items:center;display:flex;gap:12px}.arg_profile_product_icon{align-items:center;border-radius:8px;color:#fff;display:flex;font-size:16px;font-weight:700;height:40px;justify-content:center;width:40px}.arg_profile_product_icon.arg_profile_product_default{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.arg_profile_product_info{display:flex;flex-direction:column;gap:4px}.arg_profile_product_name{color:var(--Main-Darkest,#21243d);font-weight:600}.arg_profile_license_status{font-size:12px;font-weight:500;letter-spacing:.5px;text-transform:uppercase}.arg_profile_license_status.active{color:#059669}.arg_profile_license_status.cancelled{color:#dc2626}.arg_profile_license_status.expired{color:#9ca3af}.arg_profile_license_dates{display:flex;font-size:13px;gap:6px}.arg_profile_date_label{color:var(--medium,#5a6c7d)}.arg_profile_date_value{color:var(--Main-Darkest,#21243d);font-weight:500}.arg_profile_license_expiry{margin-top:4px}.arg_profile_expiry_badge{background:#dcfce7;border-radius:12px;color:#166534;font-size:12px;padding:4px 10px}.arg_profile_expiry_badge.expired{background:#fee2e2;color:#991b1b}.arg_profile_expiry_badge.arg_profile_no_expiry{background:#e0e7ff;color:#4338ca}.arg_profile_no_licenses{color:var(--medium,#5a6c7d);padding:40px 20px;text-align:center}.arg_profile_no_licenses svg{margin-bottom:16px}.arg_profile_no_licenses p{color:var(--Main-Darkest,#21243d);font-weight:600;margin:0 0 8px}.arg_profile_hint{font-size:14px;line-height:1.5}@media (max-width:768px){.arg_profile_header{gap:16px;grid-template-columns:1fr;text-align:center}.arg_profile_avatar{margin:0 auto}.arg_profile_actions{flex-wrap:wrap;justify-content:center}.arg_profile_cards_grid{grid-template-columns:1fr}.arg_profile_tabs{justify-content:center}}
+</style>