OmniCard/mpuniapp/pages/owner/card/index.uvue

<template>
  <view class="card-home-page" :class="pageRtlClass" :style="pageTheme">
    <!-- Showcase Area -->
    <view class="showcase-section">
      <view class="showcase-aurora-glow"></view>

      <view class="showcase-topbar">
        <view class="showcase-brand">
          <text class="showcase-app-name">{{ brandTitle }}</text>
          <text v-if="quotaBadgeText !== ''" class="showcase-quota-badge">{{ quotaBadgeText }}</text>
        </view>
        <text class="showcase-action-refresh" @click="handleRefreshList">{{ refreshActionText }}</text>
      </view>

      <!-- QR Code Showcase Stand -->
      <view class="showcase-stand" @click="handleOpenActiveCardQrcode">
        <view class="showcase-qr-box">
          <image
            v-if="activeQrSvg !== '' && qrcodeIsImage"
            class="showcase-qr-img"
            :src="activeQrSvg"
            mode="aspectFit"
          />
          <rich-text
            v-else-if="activeQrSvg !== ''"
            class="showcase-qr-rich"
            :nodes="activeQrSvg"
          ></rich-text>
          <view v-else-if="qrLoading || state.loading" class="showcase-qr-skeleton">
            <view class="showcase-qr-pulse"></view>
          </view>
          <view v-else class="showcase-qr-placeholder">
            <text class="showcase-qr-tip">{{ activeQrPlaceholderText }}</text>
          </view>
        </view>

        <view class="showcase-glow-guide">
          <text class="showcase-guide-text">{{ scanGuidanceText }}</text>
        </view>
      </view>
    </view>

    <!-- Bottom Sheet Drawer -->
    <view class="drawer-sheet">
      <view class="drawer-handle-bar">
        <view class="drawer-handle"></view>
      </view>

      <!-- Direct Link Copy Bar -->
      <view class="direct-link-bar">
        <view class="direct-link-info">
          <text class="direct-link-label">{{ linkLabelText }}</text>
          <text class="direct-link-url">{{ currentDisplayLink }}</text>
        </view>
        <button class="direct-link-copy-btn" @click="handleCopyLink">
          <text class="direct-link-copy-text">{{ copyLabelText }}</text>
        </button>
      </view>

      <!-- Eco ESG Value Prop -->
      <view class="value-prop-bar">
        <text class="value-prop-tag">ECO</text>
        <text class="value-prop-text">{{ ecoValueText }}</text>
      </view>

      <!-- Drawer Card Header -->
      <view class="drawer-card-header">
        <text class="drawer-title">{{ pageTitle }}</text>
        <text class="drawer-subtitle">{{ cardCountSummary }}</text>
      </view>

      <!-- Skeleton Loading -->
      <view v-if="state.loading" class="card-home-skeleton">
        <view class="skeleton-line"></view>
        <view class="skeleton-card"></view>
        <view class="skeleton-card"></view>
      </view>

      <!-- Feedback Error -->
      <view v-else-if="state.errorMessage !== ''" class="card-home-feedback">
        <text class="feedback-title">{{ t('error') }}</text>
        <text class="feedback-desc">{{ state.errorMessage }}</text>
        <button class="feedback-retry-btn" @click="handleRefreshList">
          <text class="feedback-retry-text">{{ retryText }}</text>
        </button>
      </view>

      <!-- Feedback Empty -->
      <view v-else-if="state.empty" class="card-home-feedback">
        <text class="feedback-title">{{ emptyTitle }}</text>
        <text class="feedback-desc">{{ emptyDescText }}</text>
      </view>

      <!-- Card List: list-view + list-item -->
      <list-view v-else class="card-home-list" :scroll-y="true">
        <list-item v-for="item in state.list" :key="item.id">
          <view
            class="card-row"
            :class="{ 'card-row-active': isActiveCard(item) }"
            @click="handleSelectCard(item)"
          >
            <view class="card-active-indicator" v-if="isActiveCard(item)"></view>

            <view class="card-main">
              <view class="card-name-row">
                <text class="card-name">{{ item.name }}</text>
                <text class="card-status-badge" :class="'status-' + (item.status != null ? item.status : 'draft')">
                  {{ statusLabelOf(item.status) }}
                </text>
              </view>
              <text class="card-title">{{ formatField(item.title) }}</text>
              <text class="card-company">{{ formatField(item.company) }}</text>
            </view>

            <view class="card-meta">
              <view class="card-views-wrap">
                <text class="card-views-label">{{ viewsLabelText }}</text>
                <text class="card-views">{{ formatTodayViews(item) }}</text>
              </view>
              <view class="card-actions">
                <text class="card-cases-btn" @click.stop="handleOpenCases(item)">{{ casesActionLabel }}</text>
                <text class="card-articles-btn" @click.stop="handleOpenArticles(item)">{{ articlesActionLabel }}</text>
                <text class="card-preview-btn" @click.stop="handleOpenPreview(item)">{{ previewLabelText }}</text>
                <text class="card-edit" @click.stop="handleOpenEdit(item)">{{ editLabel }}</text>
              </view>
            </view>
          </view>
        </list-item>
      </list-view>
    </view>

    <!-- Bottom Floating Bar -->
    <view class="card-home-cta-bar">
      <view class="tabbar-inner">
        <button
          class="primary-cta-btn"
          :class="{ 'primary-cta-btn-disabled': state.loading }"
          :disabled="state.loading"
          @click="handleRefresh"
        >
          <text class="primary-cta-btn-text">{{ ctaLabel }}</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { getCurrentLocale, getOmniText, isRtl } from '../../../common/locale.uts';
import { fetchCardQuota, fetchCardQrcodeSvg } from '../../../common/api.uts';
import { getTenantId } from '../../../common/request.uts';
import { utsLightColors, utsRadius, utsSpacing, utsTypography } from '../../../common/tokens.uts';
import {
  applyCardHomeOptions,
  createCardHomeState,
  formatCardField,
  openCardEdit,
  openCardPreview,
  openCardQrcode,
  pickShareCard,
  refreshCards,
  resolveCardHomeText,
  statusLabel,
  CardHomeCopyKey,
  CardHomeItem,
  CardHomePageOptions,
} from './useCardHome.uts';

const pageTheme: Record<string, string> = {
  '--oc-primary': '#0B5CFF',
  '--oc-primary-soft': utsLightColors.primarySoft,
  '--oc-ai': utsLightColors.ai,
  '--oc-bg': '#F7F8FA',
  '--oc-surface': utsLightColors.surface,
  '--oc-border': '#E3E7ED',
  '--oc-text': '#101828',
  '--oc-text-2': '#667085',
  '--oc-success': utsLightColors.success,
  '--oc-warning': utsLightColors.warning,
  '--oc-error': utsLightColors.error,
  '--oc-radius-btn': utsRadius.button,
  '--oc-radius-card': utsRadius.card,
  '--oc-radius-modal': utsRadius.modal,
  '--oc-shadow': utsTypography.shadow,
  '--oc-space-8': utsSpacing.space8,
  '--oc-space-12': utsSpacing.space12,
  '--oc-space-16': utsSpacing.space16,
  '--oc-space-24': utsSpacing.space24,
};

const state = reactive(createCardHomeState());
const pageTitle = ref(resolveCardHomeText('title'));
const pageSubtitle = ref(resolveCardHomeText('subtitle'));
const editLabel = ref(getOmniText(getCurrentLocale(), 'common.edit'));
const emptyTitle = ref(resolveEmptyCardText());
const viewsPlaceholder = '—';

const activeCardId = ref<string | number>('');
const activeQrSvg = ref('');
const activeQrUrl = ref('');
const qrLoading = ref(false);
const quotaBadgeText = ref('');

const isZh = computed((): boolean => {
  return getCurrentLocale() === 'zh-CN';
});

const pageRtlClass = computed((): string => {
  return isRtl(getCurrentLocale()) ? 'card-home-rtl' : '';
});

const brandTitle = computed((): string => {
  return getOmniText(getCurrentLocale(), 'common.app_name');
});

const scanGuidanceText = computed((): string => {
  return isZh.value ? '出示扫码 · 立即建立商务互联' : 'Scan to share card & connect';
});

const activeQrPlaceholderText = computed((): string => {
  return isZh.value ? '名片二维码展台' : 'Digital Card Showcase';
});

const linkLabelText = computed((): string => {
  return isZh.value ? '专属短链' : 'Direct Link';
});

const copyLabelText = computed((): string => {
  return isZh.value ? '复制' : 'COPY';
});

const ecoValueText = computed((): string => {
  return isZh.value ? '零纸张砍伐 · 100% 数字化与智能 NFC 联动' : 'Zero Paper · 100% Digital & NFC Connected';
});

const refreshActionText = computed((): string => {
  return resolveCardHomeText('refresh');
});

const viewsLabelText = computed((): string => {
  return isZh.value ? '今日浏览' : 'Views';
});

const previewLabelText = computed((): string => {
  return getOmniText(getCurrentLocale(), 'card.view_profile');
});

const emptyDescText = computed((): string => {
  return isZh.value ? '请在后台或控制台创建您的第一张数字名片' : 'Create your first card to start sharing';
});

const retryText = computed((): string => {
  return getOmniText(getCurrentLocale(), 'portal.retry');
});

const cardCountSummary = computed((): string => {
  const count = state.list.length;
  if (isZh.value) {
    return count > 0 ? `共 ${count} 张名片` : '暂无名片';
  }
  return count > 0 ? `${count} ${count === 1 ? 'card' : 'cards'}` : 'No cards';
});

const ctaLabel = computed((): string => {
  if (state.loading) {
    return resolveCardHomeText('loading');
  }
  if (pickShareCard(state.list) != null) {
    return resolveCardHomeText('poster');
  }
  return resolveCardHomeText('refresh');
});

const activeCard = computed((): CardHomeItem | null => {
  if (state.list.length === 0) {
    return null;
  }
  if (activeCardId.value !== '') {
    for (let i = 0; i < state.list.length; i++) {
      const it = state.list[i];
      if (it.id != null && it.id === activeCardId.value) {
        return it;
      }
      if (it.slug != null && it.slug === activeCardId.value) {
        return it;
      }
    }
  }
  return pickShareCard(state.list);
});

const qrcodeIsImage = computed((): boolean => {
  const raw = activeQrSvg.value.trim();
  return raw.indexOf('http://') === 0 || raw.indexOf('https://') === 0 || raw.indexOf('data:') === 0;
});

const currentDisplayLink = computed((): string => {
  if (activeQrUrl.value !== '') {
    return activeQrUrl.value;
  }
  const card = activeCard.value;
  if (card == null) {
    return 'https://omnicard.ai';
  }
  if (card.slug != null && card.slug !== '') {
    return `https://omnicard.ai/c/${card.slug}`;
  }
  if (card.id != null) {
    return `https://omnicard.ai/c/${card.id}`;
  }
  return 'https://omnicard.ai';
});

function t(key: CardHomeCopyKey): string {
  return resolveCardHomeText(key);
}

function resolveEmptyCardText(): string {
  return getCurrentLocale() === 'zh-CN' ? '还没有名片' : 'No cards yet';
}

function formatField(value: string | null | undefined): string {
  return formatCardField(value);
}

function formatTodayViews(_item: CardHomeItem): string {
  return viewsPlaceholder;
}

function statusLabelOf(status: string | null | undefined): string {
  return statusLabel(status);
}

function isActiveCard(item: CardHomeItem): boolean {
  if (activeCard.value == null) {
    return false;
  }
  if (item.id != null && activeCard.value!.id != null) {
    return item.id === activeCard.value!.id;
  }
  if (item.slug != null && activeCard.value!.slug != null) {
    return item.slug === activeCard.value!.slug;
  }
  return false;
}

async function updateActiveCardQr(card: CardHomeItem | null): Promise<void> {
  if (card == null) {
    activeQrSvg.value = '';
    activeQrUrl.value = '';
    return;
  }
  const key = card.slug != null && card.slug !== '' ? card.slug! : (card.id != null ? String(card.id) : '');
  if (key === '') {
    activeQrSvg.value = '';
    activeQrUrl.value = '';
    return;
  }
  try {
    qrLoading.value = true;
    const res = await fetchCardQrcodeSvg(key);
    if (res != null) {
      activeQrSvg.value = res.svg != null ? res.svg : '';
      activeQrUrl.value = res.url != null ? res.url : '';
    }
  } catch (_e) {
    activeQrSvg.value = '';
    activeQrUrl.value = '';
  } finally {
    qrLoading.value = false;
  }
}

function handleSelectCard(item: CardHomeItem): void {
  if (item.id != null) {
    activeCardId.value = item.id!;
  } else if (item.slug != null) {
    activeCardId.value = item.slug!;
  }
  updateActiveCardQr(item);
}

function handleCopyLink(): void {
  const url = currentDisplayLink.value;
  if (url === '') {
    return;
  }
  uni.setClipboardData({
    data: url,
    success: () => {
      uni.showToast({
        title: getOmniText(getCurrentLocale(), 'portal.copied_link'),
        icon: 'none',
      });
    },
  });
}

const casesActionLabel = computed((): string => {
  return getCurrentLocale() === 'zh-CN' ? '相册' : 'Cases';
});

const articlesActionLabel = computed((): string => {
  return getCurrentLocale() === 'zh-CN' ? '动态' : 'Posts';
});

function handleOpenCases(item: CardHomeItem): void {
  if (item.id == null) {
    return;
  }
  uni.navigateTo({
    url: `/pages/owner/card/cases?cardId=${item.id}`,
  });
}

function handleOpenArticles(item: CardHomeItem): void {
  if (item.id == null) {
    return;
  }
  uni.navigateTo({
    url: `/pages/owner/card/articles?cardId=${item.id}`,
  });
}

function handleOpenEdit(item: CardHomeItem): void {
  if (item.id == null) {
    return;
  }
  openCardEdit(item.id);
}

function handleOpenPreview(item: CardHomeItem): void {
  openCardPreview(item);
}

function handleOpenActiveCardQrcode(): void {
  const current = activeCard.value != null ? activeCard.value : pickShareCard(state.list);
  if (current != null) {
    openCardQrcode(current);
  }
}

async function handleRefreshList(): Promise<void> {
  const res = await refreshCards(state);
  const picked = pickShareCard(res.list);
  if (picked != null) {
    if (activeCardId.value === '') {
      handleSelectCard(picked);
    } else {
      let found = false;
      for (let i = 0; i < res.list.length; i++) {
        const item = res.list[i];
        if (item.id === activeCardId.value || item.slug === activeCardId.value) {
          found = true;
          updateActiveCardQr(item);
          break;
        }
      }
      if (!found) {
        handleSelectCard(picked);
      }
    }
  } else {
    updateActiveCardQr(null);
  }
}

async function handleRefresh(): Promise<void> {
  const current = activeCard.value != null ? activeCard.value : pickShareCard(state.list);
  if (current != null) {
    openCardQrcode(current);
    return;
  }
  await handleRefreshList();
}

async function applyQuotaHint(): Promise<void> {
  try {
    const tenantId = getTenantId();
    const quota = await fetchCardQuota(tenantId !== '' ? tenantId : 1);
    if (quota.exceeded === true) {
      pageSubtitle.value = resolveCardHomeText('quotaExceeded');
      quotaBadgeText.value = isZh.value ? '配额已满' : 'Quota Full';
    } else {
      pageSubtitle.value = resolveCardHomeText('subtitle');
      quotaBadgeText.value = '';
    }
  } catch (_e) {}
}

onLoad((options: CardHomePageOptions) => {
  applyCardHomeOptions(state, options);
  handleRefreshList();
  applyQuotaHint();
});

onShow(() => {
  handleRefreshList();
  applyQuotaHint();
});
</script>

<style scoped>
.card-home-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
  background-color: var(--oc-bg, #F7F8FA);
  position: relative;
  overflow: hidden;
}

.card-home-rtl {
  direction: rtl;
}

.showcase-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block-start: calc(8px + env(safe-area-inset-top, 0px));
  padding-inline: 16px;
  padding-block-end: 24px;
  background: linear-gradient(165deg, #0B63E5 0%, #0088FF 60%, #00A3FF 100%);
  position: relative;
}

.showcase-aurora-glow {
  position: absolute;
  top: -30px;
  left: 15%;
  width: 70%;
  height: 140px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.showcase-topbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-block-end: 8px;
  z-index: 2;
}

.showcase-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.showcase-app-name {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.5px;
}

.showcase-quota-badge {
  font-size: 11px;
  font-weight: 600;
  color: #F04438;
  background-color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 9999px;
  margin-inline-start: 8px;
}

.showcase-action-refresh {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  padding: 4px 8px;
}

.showcase-stand {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #FFFFFF;
  border-radius: 20px;
  padding: 12px 14px 10px;
  box-shadow: 0 12px 36px rgba(11, 99, 229, 0.2), 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.85);
  z-index: 2;
  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.showcase-stand:active {
  opacity: 0.92;
}

.showcase-qr-box {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
}

.showcase-qr-img {
  width: 140px;
  height: 140px;
}

.showcase-qr-rich {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-qr-skeleton {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F1F5F9;
  border-radius: 12px;
}

.showcase-qr-pulse {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background-color: #E2E8F0;
}

.showcase-qr-placeholder {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F8FAFC;
  border: 1px dashed #CBD5E1;
  border-radius: 12px;
  padding: 12px;
}

.showcase-qr-tip {
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  line-height: 1.4;
  text-align: center;
}

.showcase-glow-guide {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 4px 12px;
  background-color: #EBF5FF;
  border-radius: 9999px;
}

.showcase-guide-text {
  font-size: 12px;
  font-weight: 600;
  color: #0088FF;
  letter-spacing: 0.2px;
}

.drawer-sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  margin-top: -16px;
  padding-inline: 16px;
  padding-block-start: 10px;
  padding-block-end: calc(84px + var(--window-bottom, 0px) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 30px rgba(16, 24, 40, 0.05);
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.drawer-handle-bar {
  display: flex;
  justify-content: center;
  padding-block-end: 8px;
}

.drawer-handle {
  width: 36px;
  height: 4px;
  background-color: #E2E8F0;
  border-radius: 2px;
}

.direct-link-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #F8FAFC;
  border: 1px solid var(--oc-border, #E3E7ED);
  border-radius: 12px;
  padding: 6px 10px;
  margin-block-end: 8px;
}

.direct-link-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  margin-inline-end: 10px;
}

.direct-link-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748B;
  letter-spacing: 0.5px;
}

.direct-link-url {
  font-size: 13px;
  font-weight: 500;
  color: #101828;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.direct-link-copy-btn {
  background-color: var(--oc-primary-soft, #EBF5FF);
  border: 1px solid rgba(0, 136, 255, 0.2);
  border-radius: 9999px;
  padding: 4px 12px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1;
}

.direct-link-copy-text {
  font-size: 12px;
  font-weight: 700;
  color: #0088FF;
}

.value-prop-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px 10px;
  background-color: #F0FDF4;
  border: 1px solid #DCFCE7;
  border-radius: 8px;
  margin-block-end: 10px;
}

.value-prop-tag {
  font-size: 10px;
  font-weight: 700;
  color: #16A34A;
  background-color: #DCFCE7;
  padding: 1px 6px;
  border-radius: 4px;
  margin-inline-end: 6px;
}

.value-prop-text {
  font-size: 12px;
  color: #15803D;
  font-weight: 500;
}

.drawer-card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  margin-block-end: 8px;
}

.drawer-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--oc-text, #101828);
}

.drawer-subtitle {
  font-size: 12px;
  color: var(--oc-text-2, #667085);
}

.card-home-skeleton {
  flex: 1;
  padding-block: 8px;
}

.skeleton-line {
  height: 20px;
  width: 50%;
  background-color: var(--oc-border, #E3E7ED);
  border-radius: 8px;
  margin-block-end: 12px;
}

.skeleton-card {
  height: 76px;
  background-color: var(--oc-border, #E3E7ED);
  border-radius: 16px;
  margin-block-end: 10px;
}

.card-home-feedback {
  flex: 1;
  margin-block: 16px;
  padding: 20px 16px;
  background-color: #FFFFFF;
  border: 1px solid var(--oc-border, #E3E7ED);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.feedback-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--oc-text, #101828);
  margin-block-end: 6px;
}

.feedback-desc {
  font-size: 13px;
  color: var(--oc-text-2, #667085);
  text-align: center;
  line-height: 1.5;
  margin-block-end: 12px;
}

.feedback-retry-btn {
  height: 36px;
  padding: 0 16px;
  background-color: var(--oc-primary-soft, #EBF5FF);
  border-radius: 9999px;
  border: 1px solid rgba(0, 136, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedback-retry-text {
  font-size: 13px;
  font-weight: 600;
  color: #0088FF;
}

.card-home-list {
  flex: 1;
  min-height: 120px;
}

.card-row {
  min-height: 76px;
  padding: 12px 14px;
  margin-block-end: 8px;
  background-color: #FFFFFF;
  border: 1px solid var(--oc-border, #E3E7ED);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-row:active {
  opacity: 0.88;
}

.card-row-active {
  border: 1.5px solid #0088FF;
  background-color: #F8FBFF;
  box-shadow: 0 4px 16px rgba(0, 136, 255, 0.08);
}

.card-active-indicator {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  background-color: #0088FF;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.card-home-rtl .card-active-indicator {
  left: auto;
  right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.card-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-inline-end: 12px;
}

.card-name-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-block-end: 2px;
}

.card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--oc-text, #101828);
  line-height: 1.3;
  margin-inline-end: 6px;
}

.card-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
}

.status-published {
  color: #0088FF;
  background-color: #EBF5FF;
}

.status-draft {
  color: #64748B;
  background-color: #F1F5F9;
}

.status-archived {
  color: #94A3B8;
  background-color: #F1F5F9;
}

.card-title {
  font-size: 13px;
  color: var(--oc-text-2, #667085);
  line-height: 1.4;
}

.card-company {
  font-size: 13px;
  color: var(--oc-text-2, #667085);
  line-height: 1.4;
}

.card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.card-home-rtl .card-meta {
  align-items: flex-start;
}

.card-views-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-block-end: 4px;
}

.card-views-label {
  font-size: 11px;
  color: var(--oc-text-2, #667085);
  margin-inline-end: 4px;
}

.card-views {
  font-size: 11px;
  font-weight: 600;
  color: var(--oc-text-2, #667085);
}

.card-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.card-cases-btn,
.card-articles-btn {
  font-size: 13px;
  font-weight: 600;
  color: #0088FF;
  padding: 6px 8px;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.card-preview-btn {
  font-size: 13px;
  font-weight: 600;
  color: #0088FF;
  padding: 6px 8px;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.card-edit {
  font-size: 13px;
  font-weight: 600;
  color: var(--oc-text, #101828);
  padding: 6px 8px;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.card-home-rtl .card-edit {
  justify-content: flex-start;
}

.card-home-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--window-bottom, 0px);
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, #FFFFFF 100%);
  border-top: 1px solid var(--oc-border, #E3E7ED);
  box-sizing: border-box;
  z-index: 100;
}

.tabbar-inner {
  display: flex;
  width: 100%;
}

.primary-cta-btn {
  height: 48px;
  min-height: 44px;
  background: linear-gradient(135deg, #00A3FF 0%, #0B5CFF 100%);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-width: 0;
  box-shadow: 0 8px 20px rgba(0, 136, 255, 0.25);
  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.primary-cta-btn:active {
  opacity: 0.88;
}

.primary-cta-btn-disabled {
  background: var(--oc-border, #E3E7ED);
  box-shadow: none;
}

.primary-cta-btn-text {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
}

.primary-cta-btn-disabled .primary-cta-btn-text {
  color: var(--oc-text-2, #667085);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
</style>