<div class="max-w-7xl mx-auto animate-fade-in">

  <!-- ═══ HERO BANNER ═══ -->
  <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-brand via-brand-light to-brand-dark
              p-8 md:p-10 mb-8 shadow-xl ring-1 ring-white/5">
    <div class="absolute -top-20 -end-20 w-72 h-72 rounded-full bg-blue-500/8 blur-2xl"></div>
    <div class="absolute -bottom-16 -start-16 w-56 h-56 rounded-full bg-accent/8 blur-2xl"></div>
    <div class="absolute inset-0 opacity-[0.03]"
         style="background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 24px 24px;"></div>

    <div class="relative z-10 flex flex-col md:flex-row items-start md:items-center gap-6">
      <div class="w-18 h-18 rounded-2xl bg-gradient-to-br from-accent/20 to-accent/5 flex items-center justify-center
                  ring-2 ring-accent/25 shrink-0">
        <i class="pi pi-cog text-accent text-4xl"></i>
      </div>
      <div class="flex-1">
        <h1 class="text-3xl md:text-4xl font-extrabold text-white mb-2 tracking-tight">
          {{ 'CORE_INTRO.TITLE' | translate }}
        </h1>
        <p class="text-white/45 text-sm md:text-base max-w-2xl leading-relaxed">
          {{ 'CORE_INTRO.SUBTITLE' | translate }}
        </p>
      </div>
    </div>
  </div>

  <!-- ═══ GUIDE BUTTON ═══ -->
  <div class="flex flex-wrap gap-2 mb-6">
    <a routerLink="/core/guide"
       class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gradient-to-r from-accent to-amber-500 text-white text-sm font-bold
              no-underline hover:shadow-lg shadow-md shadow-accent/20 transition-all hover:-translate-y-0.5">
      <i class="pi pi-map text-xs"></i> {{ 'CORE_GUIDE.TITLE' | translate }}
    </a>
  </div>

  <!-- ═══ LIVE STATS BAR ═══ -->
  @if (stats(); as s) {
    <div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-8">
      <div class="bg-surface rounded-xl p-4 border border-surface-border flex items-center gap-3 shadow-sm">
        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-md shadow-blue-500/20">
          <i class="pi pi-map-marker text-white text-sm"></i>
        </div>
        <div>
          <div class="text-xl font-extrabold text-text-primary">{{ s.branches || 0 }}</div>
          <div class="text-[0.65rem] font-bold text-text-muted uppercase tracking-wider">{{ 'DASHBOARD.BRANCHES_COUNT' | translate }}</div>
        </div>
      </div>
      <div class="bg-surface rounded-xl p-4 border border-surface-border flex items-center gap-3 shadow-sm">
        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center shadow-md shadow-purple-500/20">
          <i class="pi pi-users text-white text-sm"></i>
        </div>
        <div>
          <div class="text-xl font-extrabold text-text-primary">{{ s.users || 0 }}</div>
          <div class="text-[0.65rem] font-bold text-text-muted uppercase tracking-wider">{{ 'DASHBOARD.USERS_COUNT' | translate }}</div>
        </div>
      </div>
      <div class="bg-surface rounded-xl p-4 border border-surface-border flex items-center gap-3 shadow-sm">
        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center shadow-md shadow-emerald-500/20">
          <i class="pi pi-check-circle text-white text-sm"></i>
        </div>
        <div>
          <div class="text-xl font-extrabold text-text-primary">{{ s.activeUsers || 0 }}</div>
          <div class="text-[0.65rem] font-bold text-text-muted uppercase tracking-wider">{{ 'DASHBOARD.ACTIVE' | translate }}</div>
        </div>
      </div>
      <div class="bg-surface rounded-xl p-4 border border-surface-border flex items-center gap-3 shadow-sm">
        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center shadow-md shadow-amber-500/20">
          <i class="pi pi-box text-white text-sm"></i>
        </div>
        <div>
          <div class="text-xl font-extrabold text-text-primary">{{ s.products || 0 }}</div>
          <div class="text-[0.65rem] font-bold text-text-muted uppercase tracking-wider">{{ 'NAV.PRODUCTS' | translate }}</div>
        </div>
      </div>
      <div class="bg-surface rounded-xl p-4 border border-surface-border flex items-center gap-3 shadow-sm">
        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-rose-500 to-rose-600 flex items-center justify-center shadow-md shadow-rose-500/20">
          <i class="pi pi-users text-white text-sm"></i>
        </div>
        <div>
          <div class="text-xl font-extrabold text-text-primary">{{ s.partners || 0 }}</div>
          <div class="text-[0.65rem] font-bold text-text-muted uppercase tracking-wider">{{ 'NAV.PARTNERS' | translate }}</div>
        </div>
      </div>
    </div>
  }

  <!-- ═══ WORKFLOW PIPELINE ═══ -->
  <div class="relative mb-10">
    <div class="hidden md:block absolute top-12 start-[16.6%] end-[16.6%] h-0.5 bg-gradient-to-r from-blue-500/30 via-emerald-500/30 to-purple-500/30 z-0"></div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 relative z-10">
      @for (step of steps; track step.num; let i = $index) {
        <div class="group relative">
          <div class="bg-surface rounded-2xl p-6 border border-surface-border shadow-sm
                      hover:shadow-xl hover:-translate-y-1 transition-all duration-300 text-center">
            <div class="absolute top-0 start-0 w-full h-1 rounded-t-2xl"
                 [class]="i === 0 ? 'bg-gradient-to-r from-blue-500 to-blue-400' :
                          i === 1 ? 'bg-gradient-to-r from-emerald-500 to-emerald-400' :
                                    'bg-gradient-to-r from-purple-500 to-purple-400'"></div>
            <div class="mx-auto w-14 h-14 rounded-full flex items-center justify-center mb-4
                        group-hover:scale-110 transition-transform shadow-lg"
                 [class]="i === 0 ? 'bg-gradient-to-br from-blue-500 to-blue-600 shadow-blue-500/30' :
                          i === 1 ? 'bg-gradient-to-br from-emerald-500 to-emerald-600 shadow-emerald-500/30' :
                                    'bg-gradient-to-br from-purple-500 to-purple-600 shadow-purple-500/30'">
              <i [class]="step.icon" class="text-white text-xl"></i>
            </div>
            <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full mb-3 text-[0.65rem] font-bold uppercase tracking-widest"
                 [class]="i === 0 ? 'bg-blue-500/8 text-blue-500' :
                          i === 1 ? 'bg-emerald-500/8 text-emerald-500' :
                                    'bg-purple-500/8 text-purple-500'">
              {{ step.title | translate }}
            </div>
            <p class="text-xs text-text-secondary leading-relaxed m-0">{{ step.desc | translate }}</p>
          </div>
          @if (i < 2) {
            <div class="hidden md:flex absolute top-10 -end-3 z-20 w-7 h-7 rounded-full bg-surface border-2 border-surface-border
                        shadow-sm items-center justify-center">
              <i class="pi pi-chevron-left rtl:pi-chevron-right text-accent text-[0.6rem]"></i>
            </div>
          }
        </div>
      }
    </div>
  </div>

  <!-- ═══ SECTION 1: SYSTEM ═══ -->
  <div class="mb-10">
    <div class="flex items-center gap-4 mb-6">
      <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-md shadow-blue-500/20">
        <i class="pi pi-cog text-white text-lg"></i>
      </div>
      <div>
        <h2 class="text-lg font-extrabold text-text-primary m-0">{{ 'CORE_INTRO.SYSTEM' | translate }}</h2>
        <p class="text-xs text-text-muted m-0 mt-0.5">{{ 'CORE_INTRO.SYSTEM_DESC' | translate }}</p>
      </div>
      <div class="flex-1 h-px bg-gradient-to-r from-blue-500/20 to-transparent ms-2"></div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
      <a routerLink="/core/company"
         class="lg:col-span-5 group relative bg-surface rounded-2xl p-6 border border-surface-border shadow-sm
                hover:shadow-xl hover:-translate-y-1 transition-all duration-300 no-underline border-s-4 border-s-blue-500">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
        <div class="relative flex items-start gap-4">
          <div class="shrink-0 w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600
                      flex items-center justify-center shadow-lg shadow-blue-500/25 group-hover:scale-110 transition-transform">
            <i class="pi pi-building text-white text-2xl"></i>
          </div>
          <div class="flex-1 min-w-0">
            <span class="text-base font-bold text-text-primary group-hover:text-blue-600 transition-colors">
              {{ 'NAV.COMPANY' | translate }}
            </span>
            <p class="text-xs text-text-muted mt-1.5 m-0 leading-relaxed">{{ 'CORE_INTRO.CARD_COMPANY' | translate }}</p>
            <div class="flex items-center gap-1.5 mt-3 text-blue-500 text-xs font-bold opacity-0 group-hover:opacity-100 transition-opacity">
              <span>{{ 'COMMON.EDIT' | translate }}</span>
              <i class="pi pi-arrow-left rtl:pi-arrow-right text-[0.6rem]"></i>
            </div>
          </div>
        </div>
      </a>

      <div class="lg:col-span-7 grid grid-cols-2 gap-4">
        @for (card of [
          { route: '/core/branches', icon: 'pi pi-map-marker', label: 'NAV.BRANCHES', desc: 'CORE_INTRO.CARD_BRANCHES' },
          { route: '/core/users', icon: 'pi pi-users', label: 'NAV.USERS', desc: 'CORE_INTRO.CARD_USERS' },
          { route: '/core/settings', icon: 'pi pi-sliders-h', label: 'NAV.SETTINGS', desc: 'CORE_INTRO.CARD_SETTINGS' },
          { route: '/core/sequences', icon: 'pi pi-sort-numeric-up', label: 'NAV.SEQUENCES', desc: 'CORE_INTRO.CARD_SEQUENCES' }
        ]; track card.route) {
          <a [routerLink]="card.route"
             class="group relative bg-surface rounded-2xl p-4 border border-surface-border shadow-sm
                    hover:shadow-lg hover:-translate-y-1 transition-all duration-300 no-underline">
            <div class="absolute top-0 start-0 w-full h-0.5 bg-blue-500/40"></div>
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center
                          group-hover:bg-gradient-to-br group-hover:from-blue-500 group-hover:to-blue-600 transition-all">
                <i [class]="card.icon" class="text-blue-500 group-hover:text-white transition-colors text-sm"></i>
              </div>
              <div>
                <span class="text-sm font-bold text-text-primary group-hover:text-blue-600 transition-colors block">{{ card.label | translate }}</span>
                <span class="text-[0.7rem] text-text-muted">{{ card.desc | translate }}</span>
              </div>
            </div>
          </a>
        }
      </div>
    </div>

    <!-- Recent Users Preview -->
    @if (recentUsers().length > 0) {
      <div class="mt-4 bg-surface rounded-xl border border-surface-border shadow-sm overflow-hidden">
        <div class="flex items-center justify-between px-4 py-3 bg-blue-500/5 border-b border-surface-border">
          <div class="flex items-center gap-2">
            <i class="pi pi-users text-blue-500 text-sm"></i>
            <span class="text-xs font-bold text-text-primary">{{ 'CORE_INTRO.RECENT_USERS' | translate }}</span>
          </div>
          <a routerLink="/core/users" class="text-[0.7rem] font-bold text-blue-500 no-underline hover:text-blue-600">
            {{ 'COMMON.VIEW_ALL' | translate }} <i class="pi pi-arrow-left rtl:pi-arrow-right text-[0.5rem]"></i>
          </a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 divide-x rtl:divide-x-reverse divide-surface-border">
          @for (user of recentUsers(); track user.id) {
            <div class="p-3 flex items-center gap-2.5">
              <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-white text-xs font-bold shrink-0">
                {{ (user.name || '?')[0] }}
              </div>
              <div class="min-w-0">
                <div class="text-xs font-bold text-text-primary truncate">{{ user.name }}</div>
                <div class="text-[0.65rem] text-text-muted truncate">{{ user.email }}</div>
              </div>
            </div>
          }
        </div>
      </div>
    }
  </div>

  <!-- ═══ SECTION 2: PRODUCTS ═══ -->
  <div class="mb-10">
    <div class="flex items-center gap-4 mb-6">
      <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center shadow-md shadow-emerald-500/20">
        <i class="pi pi-box text-white text-lg"></i>
      </div>
      <div>
        <h2 class="text-lg font-extrabold text-text-primary m-0">{{ 'CORE_INTRO.PRODUCTS_GROUP' | translate }}</h2>
        <p class="text-xs text-text-muted m-0 mt-0.5">{{ 'CORE_INTRO.PRODUCTS_DESC' | translate }}</p>
      </div>
      <div class="flex-1 h-px bg-gradient-to-r from-emerald-500/20 to-transparent ms-2"></div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
      <a routerLink="/core/products"
         class="lg:col-span-5 group relative bg-surface rounded-2xl p-6 border border-surface-border shadow-sm
                hover:shadow-xl hover:-translate-y-1 transition-all duration-300 no-underline border-s-4 border-s-emerald-500">
        <div class="absolute inset-0 bg-gradient-to-br from-emerald-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
        <div class="relative flex items-start gap-4">
          <div class="shrink-0 w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500 to-emerald-600
                      flex items-center justify-center shadow-lg shadow-emerald-500/25 group-hover:scale-110 transition-transform">
            <i class="pi pi-box text-white text-2xl"></i>
          </div>
          <div class="flex-1 min-w-0">
            <span class="text-base font-bold text-text-primary group-hover:text-emerald-600 transition-colors">{{ 'NAV.PRODUCTS' | translate }}</span>
            <p class="text-xs text-text-muted mt-1.5 m-0 leading-relaxed">{{ 'CORE_INTRO.CARD_PRODUCTS' | translate }}</p>
            @if (stats().products) {
              <div class="mt-2 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-600 text-[0.65rem] font-bold">
                <i class="pi pi-box text-[0.55rem]"></i> {{ stats().products }} {{ 'NAV.PRODUCTS' | translate }}
              </div>
            }
          </div>
        </div>
      </a>

      <div class="lg:col-span-7 grid grid-cols-1 sm:grid-cols-3 gap-4">
        @for (card of [
          { route: '/core/product-categories', icon: 'pi pi-tags', label: 'NAV.PRODUCT_CATEGORIES', desc: 'CORE_INTRO.CARD_PRODUCT_CATEGORIES' },
          { route: '/core/unit-groups', icon: 'pi pi-th-large', label: 'NAV.UNIT_GROUPS', desc: 'CORE_INTRO.CARD_UNIT_GROUPS' },
          { route: '/core/units', icon: 'pi pi-calculator', label: 'NAV.UNITS', desc: 'CORE_INTRO.CARD_UNITS' }
        ]; track card.route) {
          <a [routerLink]="card.route"
             class="group relative bg-surface rounded-2xl p-4 border border-surface-border shadow-sm
                    hover:shadow-lg hover:-translate-y-1 transition-all duration-300 no-underline text-center">
            <div class="absolute top-0 start-0 w-full h-0.5 bg-emerald-500/40"></div>
            <div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mx-auto mb-3
                        group-hover:bg-gradient-to-br group-hover:from-emerald-500 group-hover:to-emerald-600 transition-all">
              <i [class]="card.icon" class="text-emerald-500 group-hover:text-white transition-colors"></i>
            </div>
            <span class="text-sm font-bold text-text-primary group-hover:text-emerald-600 transition-colors block">{{ card.label | translate }}</span>
            <span class="text-[0.7rem] text-text-muted block mt-1">{{ card.desc | translate }}</span>
          </a>
        }
      </div>
    </div>

    <!-- Recent Products Preview -->
    @if (recentProducts().length > 0) {
      <div class="mt-4 bg-surface rounded-xl border border-surface-border shadow-sm overflow-hidden">
        <div class="flex items-center justify-between px-4 py-3 bg-emerald-500/5 border-b border-surface-border">
          <div class="flex items-center gap-2">
            <i class="pi pi-box text-emerald-500 text-sm"></i>
            <span class="text-xs font-bold text-text-primary">{{ 'CORE_INTRO.RECENT_PRODUCTS' | translate }}</span>
          </div>
          <a routerLink="/core/products" class="text-[0.7rem] font-bold text-emerald-500 no-underline hover:text-emerald-600">
            {{ 'COMMON.VIEW_ALL' | translate }} <i class="pi pi-arrow-left rtl:pi-arrow-right text-[0.5rem]"></i>
          </a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 divide-x rtl:divide-x-reverse divide-surface-border">
          @for (prod of recentProducts(); track prod.id) {
            <div class="p-3">
              <div class="text-xs font-bold text-text-primary truncate">{{ prod.name }}</div>
              <div class="text-[0.65rem] text-text-muted">{{ prod.code || prod.sku }}</div>
              @if (prod.sale_price) {
                <div class="mt-1 text-xs font-bold text-emerald-600">{{ prod.sale_price | number:'1.2-2' }}</div>
              }
            </div>
          }
        </div>
      </div>
    }
  </div>

  <!-- ═══ SECTION 3: PARTNERS ═══ -->
  <div class="mb-10">
    <div class="flex items-center gap-4 mb-6">
      <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center shadow-md shadow-purple-500/20">
        <i class="pi pi-users text-white text-lg"></i>
      </div>
      <div>
        <h2 class="text-lg font-extrabold text-text-primary m-0">{{ 'CORE_INTRO.PARTNERS_GROUP' | translate }}</h2>
        <p class="text-xs text-text-muted m-0 mt-0.5">{{ 'CORE_INTRO.PARTNERS_DESC' | translate }}</p>
      </div>
      <div class="flex-1 h-px bg-gradient-to-r from-purple-500/20 to-transparent ms-2"></div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <a routerLink="/core/partners"
         class="group relative bg-surface rounded-2xl p-6 border border-surface-border shadow-sm
                hover:shadow-xl hover:-translate-y-1 transition-all duration-300 no-underline border-s-4 border-s-purple-500">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
        <div class="relative flex items-start gap-4">
          <div class="shrink-0 w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-600
                      flex items-center justify-center shadow-lg shadow-purple-500/25 group-hover:scale-110 transition-transform">
            <i class="pi pi-users text-white text-2xl"></i>
          </div>
          <div class="flex-1 min-w-0">
            <span class="text-base font-bold text-text-primary group-hover:text-purple-600 transition-colors">{{ 'NAV.CLIENTS_SUPPLIERS' | translate }}</span>
            <p class="text-xs text-text-muted mt-1.5 m-0 leading-relaxed">{{ 'CORE_INTRO.CARD_PARTNERS' | translate }}</p>
            @if (stats().partners) {
              <div class="mt-2 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-purple-500/10 text-purple-600 text-[0.65rem] font-bold">
                <i class="pi pi-users text-[0.55rem]"></i> {{ stats().partners }} {{ 'NAV.PARTNERS' | translate }}
              </div>
            }
          </div>
        </div>
      </a>

      <a routerLink="/core/partner-categories"
         class="group relative bg-surface rounded-2xl p-6 border border-surface-border shadow-sm
                hover:shadow-xl hover:-translate-y-1 transition-all duration-300 no-underline border-s-4 border-s-purple-400">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
        <div class="relative flex items-start gap-4">
          <div class="shrink-0 w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-400 to-purple-500
                      flex items-center justify-center shadow-lg shadow-purple-400/25 group-hover:scale-110 transition-transform">
            <i class="pi pi-tags text-white text-2xl"></i>
          </div>
          <div class="flex-1 min-w-0">
            <span class="text-base font-bold text-text-primary group-hover:text-purple-600 transition-colors">{{ 'NAV.PARTNER_CATEGORIES' | translate }}</span>
            <p class="text-xs text-text-muted mt-1.5 m-0 leading-relaxed">{{ 'CORE_INTRO.CARD_PARTNER_CATEGORIES' | translate }}</p>
          </div>
        </div>
      </a>
    </div>

    <!-- Recent Partners Preview -->
    @if (recentPartners().length > 0) {
      <div class="mt-4 bg-surface rounded-xl border border-surface-border shadow-sm overflow-hidden">
        <div class="flex items-center justify-between px-4 py-3 bg-purple-500/5 border-b border-surface-border">
          <div class="flex items-center gap-2">
            <i class="pi pi-users text-purple-500 text-sm"></i>
            <span class="text-xs font-bold text-text-primary">{{ 'CORE_INTRO.RECENT_PARTNERS' | translate }}</span>
          </div>
          <a routerLink="/core/partners" class="text-[0.7rem] font-bold text-purple-500 no-underline hover:text-purple-600">
            {{ 'COMMON.VIEW_ALL' | translate }} <i class="pi pi-arrow-left rtl:pi-arrow-right text-[0.5rem]"></i>
          </a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 divide-x rtl:divide-x-reverse divide-surface-border">
          @for (partner of recentPartners(); track partner.id) {
            <div class="p-3 flex items-center gap-2.5">
              <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0"
                   [class]="partner.type === 'customer' ? 'bg-gradient-to-br from-blue-500 to-blue-600' :
                            partner.type === 'supplier' ? 'bg-gradient-to-br from-amber-500 to-amber-600' :
                            'bg-gradient-to-br from-purple-500 to-purple-600'">
                {{ (partner.name || '?')[0] }}
              </div>
              <div class="min-w-0">
                <div class="text-xs font-bold text-text-primary truncate">{{ partner.name }}</div>
                <div class="text-[0.65rem] text-text-muted capitalize">{{ partner.type }}</div>
              </div>
            </div>
          }
        </div>
      </div>
    }
  </div>

  <!-- ═══ SECTION 4: ATTACHMENTS + THEME ═══ -->
  <div class="mb-6">
    <div class="flex items-center gap-4 mb-6">
      <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-md shadow-blue-500/20">
        <i class="pi pi-paperclip text-white text-lg"></i>
      </div>
      <div>
        <h2 class="text-lg font-extrabold text-text-primary m-0">{{ 'CORE_INTRO.TOOLS' | translate }}</h2>
        <p class="text-xs text-text-muted m-0 mt-0.5">{{ 'CORE_INTRO.TOOLS_DESC' | translate }}</p>
      </div>
      <div class="flex-1 h-px bg-gradient-to-r from-blue-500/20 to-transparent ms-2"></div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <a routerLink="/core/attachments"
         class="group relative bg-surface rounded-2xl p-5 border border-surface-border shadow-sm
                hover:shadow-xl hover:-translate-y-1 transition-all duration-300 no-underline border-s-4 border-s-blue-500">
        <div class="flex items-start gap-4">
          <div class="shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600
                      flex items-center justify-center shadow-lg shadow-blue-500/25 group-hover:scale-110 transition-transform">
            <i class="pi pi-paperclip text-white text-lg"></i>
          </div>
          <div>
            <span class="text-sm font-bold text-text-primary group-hover:text-blue-600 transition-colors">{{ 'NAV.ATTACHMENTS' | translate }}</span>
            <p class="text-xs text-text-muted mt-1 m-0">{{ 'CORE_INTRO.CARD_ATTACHMENTS' | translate }}</p>
          </div>
        </div>
      </a>

      <a routerLink="/core/theme"
         class="group relative bg-surface rounded-2xl p-5 border border-surface-border shadow-sm
                hover:shadow-xl hover:-translate-y-1 transition-all duration-300 no-underline border-s-4 border-s-indigo-500">
        <div class="flex items-start gap-4">
          <div class="shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-indigo-600
                      flex items-center justify-center shadow-lg shadow-indigo-500/25 group-hover:scale-110 transition-transform">
            <i class="pi pi-palette text-white text-lg"></i>
          </div>
          <div>
            <span class="text-sm font-bold text-text-primary group-hover:text-indigo-600 transition-colors">{{ 'THEME.TITLE' | translate }}</span>
            <p class="text-xs text-text-muted mt-1 m-0">{{ 'CORE_INTRO.CARD_THEME' | translate }}</p>
          </div>
        </div>
      </a>

      <a routerLink="/core/database"
         class="group relative bg-surface rounded-2xl p-5 border border-surface-border shadow-sm
                hover:shadow-xl hover:-translate-y-1 transition-all duration-300 no-underline border-s-4 border-s-rose-500">
        <div class="flex items-start gap-4">
          <div class="shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-rose-500 to-rose-600
                      flex items-center justify-center shadow-lg shadow-rose-500/25 group-hover:scale-110 transition-transform">
            <i class="pi pi-database text-white text-lg"></i>
          </div>
          <div>
            <span class="text-sm font-bold text-text-primary group-hover:text-rose-600 transition-colors">{{ 'NAV.DATABASE' | translate }}</span>
            <p class="text-xs text-text-muted mt-1 m-0">{{ 'CORE_INTRO.CARD_DATABASE' | translate }}</p>
          </div>
        </div>
      </a>
    </div>
  </div>

</div>
