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

  <!-- ═══ HERO BANNER (compact) ═══ -->
  <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-brand via-brand-light to-brand-dark
              p-6 md:p-8 mb-6 shadow-xl ring-1 ring-white/5">
    <div class="absolute -top-20 -end-20 w-72 h-72 rounded-full bg-indigo-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="relative z-10 flex flex-col md:flex-row items-start md:items-center gap-4">
      <div class="w-14 h-14 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-chart-line text-accent text-3xl"></i>
      </div>
      <div class="flex-1">
        <h1 class="text-2xl md:text-3xl font-extrabold text-white mb-1 tracking-tight">
          {{ 'ACCOUNTING_INTRO.TITLE' | translate }}
        </h1>
        <p class="text-white/45 text-sm max-w-2xl leading-relaxed m-0">
          {{ 'ACCOUNTING_INTRO.SUBTITLE' | translate }}
        </p>
      </div>
    </div>
  </div>

  <!-- ═══ QUICK ACTION BUTTONS ═══ -->
  <div class="flex flex-wrap gap-2 mb-6">
    <a routerLink="/accounting/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> {{ 'GUIDE.TITLE' | translate }}
    </a>
    <a routerLink="/accounting/expenses"
       class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-rose-500 text-white text-sm font-bold
              no-underline hover:bg-rose-600 shadow-md shadow-rose-500/20 hover:shadow-lg transition-all hover:-translate-y-0.5">
      <i class="pi pi-minus-circle text-xs"></i> {{ 'NAV.EXPENSES' | translate }}
    </a>
    <a routerLink="/accounting/revenues"
       class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-emerald-500 text-white text-sm font-bold
              no-underline hover:bg-emerald-600 shadow-md shadow-emerald-500/20 hover:shadow-lg transition-all hover:-translate-y-0.5">
      <i class="pi pi-plus-circle text-xs"></i> {{ 'NAV.REVENUES' | translate }}
    </a>
    <a routerLink="/accounting/receipt-vouchers"
       class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-blue-500 text-white text-sm font-bold
              no-underline hover:bg-blue-600 shadow-md shadow-blue-500/20 hover:shadow-lg transition-all hover:-translate-y-0.5">
      <i class="pi pi-download text-xs"></i> {{ 'NAV.RECEIPT_VOUCHERS' | translate }}
    </a>
    <a routerLink="/accounting/payment-vouchers"
       class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-amber-500 text-white text-sm font-bold
              no-underline hover:bg-amber-600 shadow-md shadow-amber-500/20 hover:shadow-lg transition-all hover:-translate-y-0.5">
      <i class="pi pi-upload text-xs"></i> {{ 'NAV.PAYMENT_VOUCHERS' | translate }}
    </a>
    <a routerLink="/accounting/journal-entries"
       class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-surface text-text-primary text-sm font-bold
              no-underline border border-surface-border hover:bg-surface-muted shadow-sm hover:shadow-md transition-all hover:-translate-y-0.5">
      <i class="pi pi-book text-xs"></i> {{ 'NAV.JOURNAL_ENTRIES' | translate }}
    </a>
    <a routerLink="/accounting/reports"
       class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-surface text-text-primary text-sm font-bold
              no-underline border border-surface-border hover:bg-surface-muted shadow-sm hover:shadow-md transition-all hover:-translate-y-0.5">
      <i class="pi pi-chart-bar text-xs"></i> {{ 'NAV.REPORTS' | translate }}
    </a>
  </div>

  <!-- ═══ LIVE STATS BAR ═══ -->
  @if (stats(); as s) {
    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-2.5 mb-8">
      <div class="bg-surface rounded-xl p-3 border border-surface-border flex items-center gap-2.5 shadow-sm">
        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-sm">
          <i class="pi pi-sitemap text-white text-[0.65rem]"></i>
        </div>
        <div>
          <div class="text-lg font-extrabold text-text-primary leading-none">{{ s.accounts || 0 }}</div>
          <div class="text-[0.6rem] font-bold text-text-muted uppercase tracking-wider">{{ 'DASHBOARD.ACCOUNTS_COUNT' | translate }}</div>
        </div>
      </div>
      <div class="bg-surface rounded-xl p-3 border border-surface-border flex items-center gap-2.5 shadow-sm">
        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center shadow-sm">
          <i class="pi pi-book text-white text-[0.65rem]"></i>
        </div>
        <div>
          <div class="text-lg font-extrabold text-text-primary leading-none">{{ s.totalEntries || 0 }}</div>
          <div class="text-[0.6rem] font-bold text-text-muted uppercase tracking-wider">{{ 'ACCOUNTING_INTRO.TOTAL_ENTRIES' | translate }}</div>
        </div>
      </div>
      <div class="bg-surface rounded-xl p-3 border border-surface-border flex items-center gap-2.5 shadow-sm">
        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-rose-500 to-rose-600 flex items-center justify-center shadow-sm">
          <i class="pi pi-minus-circle text-white text-[0.65rem]"></i>
        </div>
        <div>
          <div class="text-lg font-extrabold text-text-primary leading-none">{{ s.expenses || 0 }}</div>
          <div class="text-[0.6rem] font-bold text-text-muted uppercase tracking-wider">{{ 'NAV.EXPENSES' | translate }}</div>
        </div>
      </div>
      <div class="bg-surface rounded-xl p-3 border border-surface-border flex items-center gap-2.5 shadow-sm">
        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-teal-500 to-teal-600 flex items-center justify-center shadow-sm">
          <i class="pi pi-plus-circle text-white text-[0.65rem]"></i>
        </div>
        <div>
          <div class="text-lg font-extrabold text-text-primary leading-none">{{ s.revenues || 0 }}</div>
          <div class="text-[0.6rem] font-bold text-text-muted uppercase tracking-wider">{{ 'NAV.REVENUES' | translate }}</div>
        </div>
      </div>
      <div class="bg-surface rounded-xl p-3 border border-surface-border flex items-center gap-2.5 shadow-sm">
        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-sm">
          <i class="pi pi-download text-white text-[0.65rem]"></i>
        </div>
        <div>
          <div class="text-lg font-extrabold text-text-primary leading-none">{{ s.receiptVouchers || 0 }}</div>
          <div class="text-[0.6rem] font-bold text-text-muted uppercase tracking-wider">{{ 'NAV.RECEIPT_VOUCHERS' | translate }}</div>
        </div>
      </div>
      <div class="bg-surface rounded-xl p-3 border border-surface-border flex items-center gap-2.5 shadow-sm">
        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center shadow-sm">
          <i class="pi pi-upload text-white text-[0.65rem]"></i>
        </div>
        <div>
          <div class="text-lg font-extrabold text-text-primary leading-none">{{ s.paymentVouchers || 0 }}</div>
          <div class="text-[0.6rem] font-bold text-text-muted uppercase tracking-wider">{{ 'NAV.PAYMENT_VOUCHERS' | translate }}</div>
        </div>
      </div>
      <div class="bg-surface rounded-xl p-3 border border-surface-border flex items-center gap-2.5 shadow-sm">
        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center shadow-sm">
          <i class="pi pi-building-columns text-white text-[0.65rem]"></i>
        </div>
        <div>
          <div class="text-lg font-extrabold text-text-primary leading-none">{{ s.bankAccounts || 0 }}</div>
          <div class="text-[0.6rem] font-bold text-text-muted uppercase tracking-wider">{{ 'NAV.BANK_ACCOUNTS' | translate }}</div>
        </div>
      </div>
      <div class="bg-surface rounded-xl p-3 border border-surface-border flex items-center gap-2.5 shadow-sm">
        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center shadow-sm">
          <i class="pi pi-calendar text-white text-[0.65rem]"></i>
        </div>
        <div>
          <div class="text-lg font-extrabold text-text-primary leading-none">{{ s.fiscalYear || '-' }}</div>
          <div class="text-[0.6rem] font-bold text-text-muted uppercase tracking-wider">{{ 'DASHBOARD.FISCAL_YEAR' | translate }}</div>
        </div>
      </div>
    </div>
  }

  <!-- ═══ SECTION 1: DAILY OPERATIONS (NEW - most used) ═══ -->
  <div class="mb-8">
    <div class="flex items-center gap-4 mb-5">
      <div class="w-10 h-10 rounded-xl 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-bolt text-white text-lg"></i>
      </div>
      <div>
        <h2 class="text-lg font-extrabold text-text-primary m-0">{{ 'ACCOUNTING_INTRO.DAILY_OPS' | translate }}</h2>
        <p class="text-xs text-text-muted m-0 mt-0.5">{{ 'ACCOUNTING_INTRO.DAILY_OPS_DESC' | translate }}</p>
      </div>
      <div class="flex-1 h-px bg-gradient-to-r from-rose-500/20 to-transparent ms-2"></div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      @for (card of dailyOpsCards; track card.route) {
        <a [routerLink]="card.route"
           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 overflow-hidden">
          <div class="absolute top-0 start-0 w-full h-1 rounded-t-2xl" [class]="card.topBar"></div>
          <div class="flex items-start gap-3">
            <div class="shrink-0 w-11 h-11 rounded-xl flex items-center justify-center
                        group-hover:scale-110 transition-transform shadow-lg"
                 [class]="card.iconBg">
              <i [class]="card.icon" class="text-white text-sm"></i>
            </div>
            <div class="flex-1 min-w-0">
              <div class="flex items-center justify-between">
                <span class="text-sm font-bold text-text-primary block">{{ card.label | translate }}</span>
                @if (card.count() != null) {
                  <span class="text-xs font-extrabold px-2 py-0.5 rounded-full" [class]="card.badge">{{ card.count() }}</span>
                }
              </div>
              <span class="text-[0.7rem] text-text-muted leading-relaxed">{{ card.desc | translate }}</span>
            </div>
          </div>
        </a>
      }
    </div>

    <!-- Recent Activity: Expenses + Vouchers side by side -->
    @if (recentExpenses().length > 0 || recentVouchers().length > 0) {
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
        @if (recentExpenses().length > 0) {
          <div class="bg-surface rounded-xl border border-surface-border shadow-sm overflow-hidden">
            <div class="flex items-center justify-between px-4 py-2.5 bg-rose-500/5 border-b border-surface-border">
              <div class="flex items-center gap-2">
                <i class="pi pi-minus-circle text-rose-500 text-sm"></i>
                <span class="text-xs font-bold text-text-primary">{{ 'ACCOUNTING_INTRO.RECENT_EXPENSES' | translate }}</span>
              </div>
              <a routerLink="/accounting/expenses" class="text-[0.7rem] font-bold text-rose-500 no-underline hover:text-rose-600">
                {{ 'COMMON.VIEW_ALL' | translate }} <i class="pi pi-arrow-left rtl:pi-arrow-right text-[0.5rem]"></i>
              </a>
            </div>
            <div class="divide-y divide-surface-border">
              @for (exp of recentExpenses(); track exp.id) {
                <div class="flex items-center justify-between px-4 py-2.5 hover:bg-surface-muted/50 transition-colors">
                  <div class="flex items-center gap-2">
                    <div class="w-7 h-7 rounded-lg flex items-center justify-center" [class]="getStatusColor(exp.status)">
                      <i class="pi pi-file text-[0.6rem]"></i>
                    </div>
                    <div>
                      <div class="text-xs font-bold text-text-primary">{{ exp.document_number }}</div>
                      <div class="text-[0.6rem] text-text-muted">{{ exp.date }}</div>
                    </div>
                  </div>
                  <div class="flex items-center gap-2">
                    <span class="text-xs font-bold text-text-primary">{{ exp.total_amount | number:'1.0-0' }}</span>
                    <span class="px-1.5 py-0.5 rounded-full text-[0.55rem] font-bold uppercase" [class]="getStatusColor(exp.status)">{{ exp.status }}</span>
                  </div>
                </div>
              }
            </div>
          </div>
        }
        @if (recentVouchers().length > 0) {
          <div class="bg-surface rounded-xl border border-surface-border shadow-sm overflow-hidden">
            <div class="flex items-center justify-between px-4 py-2.5 bg-blue-500/5 border-b border-surface-border">
              <div class="flex items-center gap-2">
                <i class="pi pi-file-edit text-blue-500 text-sm"></i>
                <span class="text-xs font-bold text-text-primary">{{ 'ACCOUNTING_INTRO.RECENT_VOUCHERS' | translate }}</span>
              </div>
            </div>
            <div class="divide-y divide-surface-border">
              @for (v of recentVouchers(); track v.id) {
                <div class="flex items-center justify-between px-4 py-2.5 hover:bg-surface-muted/50 transition-colors">
                  <div class="flex items-center gap-2">
                    <div class="w-7 h-7 rounded-lg flex items-center justify-center"
                         [class]="v._type === 'receipt' ? 'text-blue-600 bg-blue-500/10' : 'text-amber-600 bg-amber-500/10'">
                      <i [class]="v._type === 'receipt' ? 'pi pi-download' : 'pi pi-upload'" class="text-[0.6rem]"></i>
                    </div>
                    <div>
                      <div class="text-xs font-bold text-text-primary">{{ v.voucher_number }}</div>
                      <div class="text-[0.6rem] text-text-muted">{{ v.date }}</div>
                    </div>
                  </div>
                  <div class="flex items-center gap-2">
                    <span class="text-xs font-bold text-text-primary">{{ v.total_amount | number:'1.0-0' }}</span>
                    <span class="px-1.5 py-0.5 rounded-full text-[0.55rem] font-bold uppercase" [class]="getStatusColor(v.status)">{{ v.status }}</span>
                  </div>
                </div>
              }
            </div>
          </div>
        }
      </div>
    }
  </div>

  <!-- ═══ SECTION 2: GENERAL ACCOUNTING ═══ -->
  <div class="mb-8">
    <div class="flex items-center gap-4 mb-5">
      <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-book text-white text-lg"></i>
      </div>
      <div>
        <h2 class="text-lg font-extrabold text-text-primary m-0">{{ 'NAV.GENERAL_ACCOUNTING' | translate }}</h2>
        <p class="text-xs text-text-muted m-0 mt-0.5">{{ 'ACCOUNTING_INTRO.GENERAL_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-2 lg:grid-cols-4 gap-4">
      @for (card of generalCards; track card.route) {
        <a [routerLink]="card.route"
           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">
          <div class="absolute top-0 start-0 w-full h-1 rounded-t-2xl" [class]="card.topBar"></div>
          <div class="w-11 h-11 rounded-xl flex items-center justify-center mb-3
                      group-hover:scale-110 transition-transform shadow-lg" [class]="card.iconBg">
            <i [class]="card.icon" class="text-white text-sm"></i>
          </div>
          <span class="text-sm font-bold text-text-primary block mb-1">{{ card.label | translate }}</span>
          <span class="text-[0.7rem] text-text-muted leading-relaxed">{{ card.desc | translate }}</span>
        </a>
      }
    </div>

    <!-- Recent Journal Entries -->
    @if (recentEntries().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-2.5 bg-blue-500/5 border-b border-surface-border">
          <div class="flex items-center gap-2">
            <i class="pi pi-history text-blue-500 text-sm"></i>
            <span class="text-xs font-bold text-text-primary">{{ 'DASHBOARD.RECENT_ENTRIES' | translate }}</span>
          </div>
          <a routerLink="/accounting/journal-entries" 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="divide-y divide-surface-border">
          @for (entry of recentEntries(); track entry.id) {
            <div class="flex items-center justify-between px-4 py-2.5 hover:bg-surface-muted/50 transition-colors">
              <div class="flex items-center gap-2">
                <div class="w-7 h-7 rounded-lg flex items-center justify-center" [class]="getStatusColor(entry.status)">
                  <i class="pi pi-file-edit text-[0.6rem]"></i>
                </div>
                <div>
                  <div class="text-xs font-bold text-text-primary">{{ entry.reference || '#' + entry.id }}</div>
                  <div class="text-[0.6rem] text-text-muted">{{ entry.date }}</div>
                </div>
              </div>
              <div class="flex items-center gap-2">
                <span class="text-xs font-bold text-text-primary">{{ entry.total_debit | number:'1.0-0' }}</span>
                <span class="px-1.5 py-0.5 rounded-full text-[0.55rem] font-bold uppercase" [class]="getStatusColor(entry.status)">{{ entry.status }}</span>
              </div>
            </div>
          }
        </div>
      </div>
    }
  </div>

  <!-- ═══ SECTION 3: CASH & BANK ═══ -->
  <div class="mb-8">
    <div class="flex items-center gap-4 mb-5">
      <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-wallet text-white text-lg"></i>
      </div>
      <div>
        <h2 class="text-lg font-extrabold text-text-primary m-0">{{ 'NAV.CASH_BANK' | translate }}</h2>
        <p class="text-xs text-text-muted m-0 mt-0.5">{{ 'ACCOUNTING_INTRO.CASH_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 lg:grid-cols-3 gap-4">
      @for (card of [
        { route: '/accounting/bank-accounts', icon: 'pi pi-building-columns', label: 'NAV.BANK_ACCOUNTS', desc: 'ACCOUNTING_INTRO.CARD_BANK_ACCOUNTS' },
        { route: '/accounting/petty-cash', icon: 'pi pi-wallet', label: 'NAV.PETTY_CASH', desc: 'ACCOUNTING_INTRO.CARD_PETTY_CASH' },
        { route: '/accounting/transfers', icon: 'pi pi-arrows-h', label: 'NAV.TRANSFERS', desc: 'ACCOUNTING_INTRO.CARD_TRANSFERS' },
        { route: '/accounting/checks-received', icon: 'pi pi-inbox', label: 'NAV.CHECKS_RECEIVED', desc: 'ACCOUNTING_INTRO.CARD_CHECKS_RECEIVED' },
        { route: '/accounting/checks-issued', icon: 'pi pi-send', label: 'NAV.CHECKS_ISSUED', desc: 'ACCOUNTING_INTRO.CARD_CHECKS_ISSUED' },
        { route: '/accounting/bank-reconciliations', icon: 'pi pi-check-square', label: 'NAV.BANK_RECONCILIATIONS', desc: 'ACCOUNTING_INTRO.CARD_RECONCILIATIONS' }
      ]; 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-purple-500/40"></div>
          <div class="flex items-start gap-3">
            <div class="shrink-0 w-10 h-10 rounded-xl bg-purple-500/10 flex items-center justify-center
                        group-hover:bg-gradient-to-br group-hover:from-purple-500 group-hover:to-purple-600 transition-all">
              <i [class]="card.icon" class="text-purple-500 group-hover:text-white transition-colors text-sm"></i>
            </div>
            <div>
              <span class="text-sm font-bold text-text-primary group-hover:text-purple-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>

  <!-- ═══ SECTION 4: CURRENCIES & TAXES + FISCAL YEARS (combined row) ═══ -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <!-- Currencies & Taxes -->
    <div>
      <div class="flex items-center gap-3 mb-4">
        <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center shadow-sm">
          <i class="pi pi-money-bill text-white text-sm"></i>
        </div>
        <h2 class="text-base font-extrabold text-text-primary m-0">{{ 'NAV.CURRENCIES_TAXES' | translate }}</h2>
      </div>
      <div class="flex flex-col gap-3">
        @for (card of [
          { route: '/accounting/currencies', icon: 'pi pi-money-bill', label: 'NAV.CURRENCIES', desc: 'ACCOUNTING_INTRO.CARD_CURRENCIES' },
          { route: '/accounting/exchange-rates', icon: 'pi pi-arrows-h', label: 'NAV.EXCHANGE_RATES', desc: 'ACCOUNTING_INTRO.CARD_EXCHANGE_RATES' },
          { route: '/accounting/tax-rates', icon: 'pi pi-percentage', label: 'NAV.TAX_RATES', desc: 'ACCOUNTING_INTRO.CARD_TAX_RATES' }
        ]; track card.route) {
          <a [routerLink]="card.route"
             class="group bg-surface rounded-xl p-3.5 border border-surface-border shadow-sm
                    hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 no-underline border-s-4 border-s-emerald-500">
            <div class="flex items-center gap-3">
              <div class="shrink-0 w-9 h-9 rounded-lg bg-emerald-500/10 flex items-center justify-center
                          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 text-xs"></i>
              </div>
              <div>
                <span class="text-sm font-bold text-text-primary block">{{ card.label | translate }}</span>
                <span class="text-[0.65rem] text-text-muted">{{ card.desc | translate }}</span>
              </div>
            </div>
          </a>
        }
      </div>
    </div>

    <!-- Fiscal Years -->
    <div>
      <div class="flex items-center gap-3 mb-4">
        <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center shadow-sm">
          <i class="pi pi-calendar text-white text-sm"></i>
        </div>
        <h2 class="text-base font-extrabold text-text-primary m-0">{{ 'ACCOUNTING_INTRO.FISCAL_SECTION' | translate }}</h2>
      </div>
      <div class="flex flex-col gap-3">
        @for (card of [
          { route: '/accounting/fiscal-years', icon: 'pi pi-calendar', label: 'NAV.FISCAL_YEARS', desc: 'ACCOUNTING_INTRO.CARD_FISCAL_YEARS' },
          { route: '/accounting/opening-balances', icon: 'pi pi-replay', label: 'NAV.OPENING_BALANCES', desc: 'ACCOUNTING_INTRO.CARD_OPENING_BALANCES' },
          { route: '/accounting/year-end-closing', icon: 'pi pi-lock', label: 'NAV.YEAR_END_CLOSING', desc: 'ACCOUNTING_INTRO.CARD_YEAR_END' }
        ]; track card.route) {
          <a [routerLink]="card.route"
             class="group bg-surface rounded-xl p-3.5 border border-surface-border shadow-sm
                    hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 no-underline border-s-4 border-s-amber-500">
            <div class="flex items-center gap-3">
              <div class="shrink-0 w-9 h-9 rounded-lg bg-amber-500/10 flex items-center justify-center
                          group-hover:bg-gradient-to-br group-hover:from-amber-500 group-hover:to-amber-600 transition-all">
                <i [class]="card.icon" class="text-amber-500 group-hover:text-white transition-colors text-xs"></i>
              </div>
              <div>
                <span class="text-sm font-bold text-text-primary block">{{ card.label | translate }}</span>
                <span class="text-[0.65rem] text-text-muted">{{ card.desc | translate }}</span>
              </div>
            </div>
          </a>
        }
      </div>
    </div>
  </div>

  <!-- ═══ SECTION 5: FIXED ASSETS + ADVANCED (combined row) ═══ -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <!-- Fixed Assets -->
    <div>
      <div class="flex items-center gap-3 mb-4">
        <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-rose-500 to-rose-600 flex items-center justify-center shadow-sm">
          <i class="pi pi-building text-white text-sm"></i>
        </div>
        <h2 class="text-base font-extrabold text-text-primary m-0">{{ 'NAV.FIXED_ASSETS' | translate }}</h2>
      </div>
      <div class="flex flex-col gap-3">
        @for (card of [
          { route: '/accounting/asset-categories', icon: 'pi pi-tags', label: 'NAV.ASSET_CATEGORIES', desc: 'ACCOUNTING_INTRO.CARD_ASSET_CATEGORIES' },
          { route: '/accounting/fixed-assets', icon: 'pi pi-building', label: 'NAV.FIXED_ASSETS', desc: 'ACCOUNTING_INTRO.CARD_FIXED_ASSETS' },
          { route: '/accounting/allocation-rules', icon: 'pi pi-percentage', label: 'NAV.ALLOCATION_RULES', desc: 'ACCOUNTING_INTRO.CARD_ALLOCATION_RULES' }
        ]; track card.route) {
          <a [routerLink]="card.route"
             class="group bg-surface rounded-xl p-3.5 border border-surface-border shadow-sm
                    hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 no-underline border-s-4 border-s-rose-500">
            <div class="flex items-center gap-3">
              <div class="shrink-0 w-9 h-9 rounded-lg bg-rose-500/10 flex items-center justify-center
                          group-hover:bg-gradient-to-br group-hover:from-rose-500 group-hover:to-rose-600 transition-all">
                <i [class]="card.icon" class="text-rose-500 group-hover:text-white transition-colors text-xs"></i>
              </div>
              <div>
                <span class="text-sm font-bold text-text-primary block">{{ card.label | translate }}</span>
                <span class="text-[0.65rem] text-text-muted">{{ card.desc | translate }}</span>
              </div>
            </div>
          </a>
        }
      </div>
    </div>

    <!-- Advanced & Reports -->
    <div>
      <div class="flex items-center gap-3 mb-4">
        <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center shadow-sm">
          <i class="pi pi-chart-bar text-white text-sm"></i>
        </div>
        <h2 class="text-base font-extrabold text-text-primary m-0">{{ 'ACCOUNTING_INTRO.ADVANCED_SECTION' | translate }}</h2>
      </div>
      <div class="flex flex-col gap-3">
        @for (card of [
          { route: '/accounting/entry-templates', icon: 'pi pi-copy', label: 'NAV.ENTRY_TEMPLATES', desc: 'ACCOUNTING_INTRO.CARD_TEMPLATES' },
          { route: '/accounting/recurring-entries', icon: 'pi pi-sync', label: 'NAV.RECURRING_ENTRIES', desc: 'ACCOUNTING_INTRO.CARD_RECURRING' },
          { route: '/accounting/budgets', icon: 'pi pi-chart-bar', label: 'NAV.BUDGETS', desc: 'ACCOUNTING_INTRO.CARD_BUDGETS' },
          { route: '/accounting/ar-ap', icon: 'pi pi-users', label: 'NAV.AR_AP', desc: 'ACCOUNTING_INTRO.CARD_AR_AP' },
          { route: '/accounting/reconciliation-rules', icon: 'pi pi-check-circle', label: 'NAV.RECONCILIATION_RULES', desc: 'ACCOUNTING_INTRO.CARD_RECONCILIATION_RULES' },
          { route: '/accounting/reports', icon: 'pi pi-chart-line', label: 'NAV.REPORTS', desc: 'ACCOUNTING_INTRO.CARD_REPORTS' }
        ]; track card.route) {
          <a [routerLink]="card.route"
             class="group bg-surface rounded-xl p-3.5 border border-surface-border shadow-sm
                    hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 no-underline border-s-4 border-s-indigo-500">
            <div class="flex items-center gap-3">
              <div class="shrink-0 w-9 h-9 rounded-lg bg-indigo-500/10 flex items-center justify-center
                          group-hover:bg-gradient-to-br group-hover:from-indigo-500 group-hover:to-indigo-600 transition-all">
                <i [class]="card.icon" class="text-indigo-500 group-hover:text-white transition-colors text-xs"></i>
              </div>
              <div>
                <span class="text-sm font-bold text-text-primary block">{{ card.label | translate }}</span>
                <span class="text-[0.65rem] text-text-muted">{{ card.desc | translate }}</span>
              </div>
            </div>
          </a>
        }
      </div>
    </div>
  </div>

</div>
