roa2web-service-auto/reports-app/frontend/src/views/DashboardView.vue

<template>
  <main class="main-content">
      <div class="app-container">
        
        <!-- Dashboard Header -->
        <div class="dashboard-header">
          <h1 class="dashboard-title">{{ companyStore.selectedCompany?.name || 'Dashboard Principal' }}</h1>
          <p class="dashboard-subtitle">{{ currentMonthLabel }}</p>
        </div>

        <!-- Company selection removed - now handled in header only -->

        <!-- Secțiune Carduri Noi - Adăugare -->
        <div class="metrics-cards-section" v-if="!isLoading">
          
          <!-- Rând 1: Metrici principale -->
          <div class="metrics-row">
            <TreasuryDualCard
              :casaTotal="treasuryData?.breakdown?.casa?.total || 0"
              :bancaTotal="treasuryData?.breakdown?.banca?.total || 0"
              :casaItems="treasuryData?.breakdown?.casa?.items || []"
              :bancaItems="treasuryData?.breakdown?.banca?.items || []"
              :casaTrend="casaTrend"
              :bancaTrend="bancaTrend"
              :casaSparklineData="casaSparkline"
              :bancaSparklineData="bancaSparkline"
              :casaPreviousSparklineData="casaPreviousSparkline"
              :bancaPreviousSparklineData="bancaPreviousSparkline"
              :sparklineLabels="sparklineLabels"
              :previousSparklineLabels="previousSparklineLabels"
            />
            <CashFlowMetricCard
              :inflowsValue="monthlyInflows"
              :outflowsValue="monthlyOutflows"
              :inflowsTrend="inflowsTrend"
              :outflowsTrend="outflowsTrend"
              :inflowsSparkline="inflowsSparkline"
              :outflowsSparkline="outflowsSparkline"
              :inflowsPreviousSparkline="inflowsPreviousSparkline"
              :outflowsPreviousSparkline="outflowsPreviousSparkline"
              :sparklineLabels="sparklineLabels"
              :previousSparklineLabels="previousSparklineLabels"
            />
            <ClientiBalanceCard
              :total="netBalanceData?.clienti_total || 0"
              :trend="clientiTrend"
              :sparklineData="clientiSparkline"
              :previousSparklineData="clientiPreviousSparkline"
              :sparklineLabels="sparklineLabels"
              :previousSparklineLabels="previousSparklineLabels"
              :breakdown="netBalanceData?.breakdown?.clienti"
            />
            <FurnizoriBalanceCard
              :total="netBalanceData?.furnizori_total || 0"
              :trend="furnizoriTrend"
              :sparklineData="furnizoriSparkline"
              :previousSparklineData="furnizoriPreviousSparkline"
              :sparklineLabels="sparklineLabels"
              :previousSparklineLabels="previousSparklineLabels"
              :breakdown="netBalanceData?.breakdown?.furnizori"
            />
          </div>
          
          <!-- Rând 2: Analiză comparativă și Date Detaliate (combinat) -->
          <div class="comparison-row">
            <MaturityAndDetailsCard
              :companyId="companyStore.selectedCompany?.id_firma"
              @periodChanged="handleMaturityPeriodChange"
            />
          </div>

        </div>

        <!-- Dashboard Content -->
        <div class="dashboard-content">
          <!-- Componenta MaturityAndDetailsCard include acum și tabelul detaliat -->
        </div>

        <!-- Loading State -->
        <div v-if="isLoading" class="loading-state">
          <div class="loading-spinner"></div>
          <p>Se încarcă datele dashboard-ului...</p>
        </div>

      </div>
  </main>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { useToast } from "primevue/usetoast";
// Import componente noi
import MetricCard from '../components/dashboard/cards/MetricCard.vue'
import CashFlowMetricCard from '../components/dashboard/cards/CashFlowMetricCard.vue'
import MaturityAndDetailsCard from '../components/dashboard/cards/MaturityAndDetailsCard.vue'
import ClientiBalanceCard from '../components/dashboard/cards/ClientiBalanceCard.vue'
import FurnizoriBalanceCard from '../components/dashboard/cards/FurnizoriBalanceCard.vue'
import TreasuryDualCard from '../components/dashboard/cards/TreasuryDualCard.vue'
import { useCompanyStore } from "../stores/companies";
import { useDashboardStore } from "../stores/dashboard";
import { apiService } from "../services/api";
import {
  exportToExcel,
  exportToPDF,
  exportTrendData as prepareTrendData
} from "../utils/exportUtils";

const toast = useToast();
const companyStore = useCompanyStore();
const dashboardStore = useDashboardStore();

// State
const filteredCompanies = ref([]);
const isLoading = ref(false);

// State pentru carduri
const monthlyInflows = ref(0)
const monthlyOutflows = ref(0)
const treasuryData = ref(null)
const netBalanceData = ref(null)

// New dashboard state
const selectedPeriod = ref('12m');
const selectedChartType = ref('line');

// Handlers pentru schimbare perioadă
const handleMaturityPeriodChange = (period) => {
  console.log('Maturity period changed:', period)
  // Trigger reload cu noua perioadă
}

// Calculare trend bazată pe date reale din trends.raw
const calculateTrend = (metric) => {
  if (!dashboardStore.trends?.raw) return null

  const raw = dashboardStore.trends.raw
  let data = []

  // Selectează datele corecte pentru fiecare metric
  switch (metric) {
    case 'clienti':
      data = raw.clienti_sold || []
      break
    case 'furnizori':
      data = raw.furnizori_sold || []
      break
    case 'treasury':
      data = raw.trezorerie_sold || []
      break
    case 'sold':
      // Sold net = clienti_sold - furnizori_sold
      if (raw.clienti_sold?.length && raw.furnizori_sold?.length) {
        data = raw.clienti_sold.map((c, i) => Number(c || 0) - Number(raw.furnizori_sold[i] || 0))
      }
      break
    case 'inflows':
      data = raw.clienti_incasat || []
      break
    case 'outflows':
      data = raw.furnizori_achitat || []
      break
    default:
      return null
  }

  // Trebuie să avem cel puțin 2 puncte de date pentru a calcula trend
  if (!data || data.length < 2) return null

  const current = Number(data[data.length - 1]) || 0
  const previous = Number(data[data.length - 2]) || 0

  // Handle edge case: division by zero
  if (previous === 0) {
    return current > 0 ? { value: 100, direction: 'up' } :
           current < 0 ? { value: 100, direction: 'down' } :
           { value: 0, direction: 'neutral' }
  }

  // Calculate percentage change
  const change = ((current - previous) / Math.abs(previous)) * 100
  const direction = change > 0.1 ? 'up' : change < -0.1 ? 'down' : 'neutral'

  return { value: Math.abs(change), direction }
}

// Obține date sparkline pentru mini grafice
const getSparklineData = (metric) => {
  if (!dashboardStore.trends?.raw) {
    return []
  }

  const raw = dashboardStore.trends.raw
  let data = []

  switch (metric) {
    case 'clienti':
      data = raw.clienti_sold || []
      break
    case 'furnizori':
      data = raw.furnizori_sold || []
      break
    case 'treasury':
      data = raw.trezorerie_sold || []
      break
    case 'sold':
      // Sold net = clienti_sold - furnizori_sold
      if (raw.clienti_sold?.length && raw.furnizori_sold?.length) {
        data = raw.clienti_sold.map((c, i) => Number(c || 0) - Number(raw.furnizori_sold[i] || 0))
      }
      break
    case 'inflows':
      data = raw.clienti_incasat || []
      break
    case 'outflows':
      data = raw.furnizori_achitat || []
      break
    default:
      return []
  }

  // Returnează ultimele 12 valori pentru sparkline
  const sparklineData = data.slice(-12).map(v => Number(v) || 0)
  return sparklineData
}

// Obține labels pentru sparkline (ultimele 12 perioade)
const getSparklineLabels = () => {
  if (!dashboardStore.trends?.raw?.periods) {
    return []
  }

  const periods = dashboardStore.trends.raw.periods
  // Returnează ultimele 12 perioade, formatate scurt (MM/YY)
  return periods.slice(-12).map(period => {
    const [year, month] = period.split('-')
    return `${month}/${year.slice(-2)}` // Format: MM/YY
  })
}

// Obține date sparkline pentru perioada precedentă (year-over-year comparison)
const getPreviousSparklineData = (metric) => {
  if (!dashboardStore.trends?.raw) {
    return []
  }

  const raw = dashboardStore.trends.raw
  let data = []

  switch (metric) {
    case 'clienti':
      data = raw.clienti_sold_prev || []
      break
    case 'furnizori':
      data = raw.furnizori_sold_prev || []
      break
    case 'treasury':
      data = raw.trezorerie_sold_prev || []
      break
    case 'inflows':
      data = raw.clienti_incasat_prev || []
      break
    case 'outflows':
      data = raw.furnizori_achitat_prev || []
      break
    default:
      return []
  }

  // Returnează ultimele 12 valori pentru sparkline (aceeași perioadă, anul anterior)
  const sparklineData = data.slice(-12).map(v => Number(v) || 0)
  return sparklineData
}

// Obține labels pentru sparkline perioada precedentă
const getPreviousSparklineLabels = () => {
  if (!dashboardStore.trends?.raw?.previous_periods) {
    return []
  }

  const periods = dashboardStore.trends.raw.previous_periods
  // Returnează ultimele 12 perioade precedente, formatate scurt (MM/YY)
  return periods.slice(-12).map(period => {
    const [year, month] = period.split('-')
    return `${month}/${year.slice(-2)}` // Format: MM/YY
  })
}

// Computed properties pentru carduri - REACTIVE!
const clientiTrend = computed(() => calculateTrend('clienti'))
const clientiSparkline = computed(() => getSparklineData('clienti'))
const clientiPreviousSparkline = computed(() => getPreviousSparklineData('clienti'))

const furnizoriTrend = computed(() => calculateTrend('furnizori'))
const furnizoriSparkline = computed(() => getSparklineData('furnizori'))
const furnizoriPreviousSparkline = computed(() => getPreviousSparklineData('furnizori'))

const soldTrend = computed(() => calculateTrend('sold'))
const soldSparkline = computed(() => getSparklineData('sold'))
const inflowsTrend = computed(() => calculateTrend('inflows'))
const inflowsSparkline = computed(() => getSparklineData('inflows'))
const inflowsPreviousSparkline = computed(() => getPreviousSparklineData('inflows'))
const outflowsTrend = computed(() => calculateTrend('outflows'))
const outflowsSparkline = computed(() => getSparklineData('outflows'))
const outflowsPreviousSparkline = computed(() => getPreviousSparklineData('outflows'))
const treasuryTrend = computed(() => calculateTrend('treasury'))
const treasurySparkline = computed(() => getSparklineData('treasury'))
const treasuryPreviousSparkline = computed(() => getPreviousSparklineData('treasury'))
const sparklineLabels = computed(() => getSparklineLabels())
const previousSparklineLabels = computed(() => getPreviousSparklineLabels())

// Casa and Bancă specific trends and sparklines
const casaTrend = computed(() => {
  // Calculate trend based on Casa proportion of treasury
  if (!treasuryData.value?.breakdown) return null

  const casaTotal = treasuryData.value.breakdown.casa?.total || 0
  const bancaTotal = treasuryData.value.breakdown.banca?.total || 0
  const totalTreasury = casaTotal + bancaTotal

  if (totalTreasury === 0) return null

  // Use treasury trend as base, since we don't have separate casa trend data
  const tTrend = calculateTrend('treasury')
  return tTrend ? { ...tTrend } : null
})

const casaSparkline = computed(() => {
  // Use treasury sparkline data scaled by casa proportion
  if (!treasuryData.value?.breakdown) return []

  const sparklineData = getSparklineData('treasury')
  if (!sparklineData.length) return []

  const casaTotal = treasuryData.value.breakdown.casa?.total || 0
  const bancaTotal = treasuryData.value.breakdown.banca?.total || 0
  const totalTreasury = casaTotal + bancaTotal

  if (totalTreasury === 0) return sparklineData.map(() => 0)

  const casaProportion = casaTotal / totalTreasury
  return sparklineData.map(v => v * casaProportion)
})

const bancaTrend = computed(() => {
  // Calculate trend based on Bancă proportion of treasury
  if (!treasuryData.value?.breakdown) return null

  const casaTotal = treasuryData.value.breakdown.casa?.total || 0
  const bancaTotal = treasuryData.value.breakdown.banca?.total || 0
  const totalTreasury = casaTotal + bancaTotal

  if (totalTreasury === 0) return null

  // Use treasury trend as base, since we don't have separate banca trend data
  const tTrend = calculateTrend('treasury')
  return tTrend ? { ...tTrend } : null
})

const bancaSparkline = computed(() => {
  // Use treasury sparkline data scaled by banca proportion
  if (!treasuryData.value?.breakdown) return []

  const sparklineData = getSparklineData('treasury')
  if (!sparklineData.length) return []

  const casaTotal = treasuryData.value.breakdown.casa?.total || 0
  const bancaTotal = treasuryData.value.breakdown.banca?.total || 0
  const totalTreasury = casaTotal + bancaTotal

  if (totalTreasury === 0) return sparklineData.map(() => 0)

  const bancaProportion = bancaTotal / totalTreasury
  return sparklineData.map(v => v * bancaProportion)
})

// Previous year sparklines for Casa and Bancă
const casaPreviousSparkline = computed(() => {
  if (!treasuryData.value?.breakdown) return []

  const previousSparklineData = getPreviousSparklineData('treasury')
  if (!previousSparklineData.length) return []

  const casaTotal = treasuryData.value.breakdown.casa?.total || 0
  const bancaTotal = treasuryData.value.breakdown.banca?.total || 0
  const totalTreasury = casaTotal + bancaTotal

  if (totalTreasury === 0) return previousSparklineData.map(() => 0)

  const casaProportion = casaTotal / totalTreasury
  return previousSparklineData.map(v => v * casaProportion)
})

const bancaPreviousSparkline = computed(() => {
  if (!treasuryData.value?.breakdown) return []

  const previousSparklineData = getPreviousSparklineData('treasury')
  if (!previousSparklineData.length) return []

  const casaTotal = treasuryData.value.breakdown.casa?.total || 0
  const bancaTotal = treasuryData.value.breakdown.banca?.total || 0
  const totalTreasury = casaTotal + bancaTotal

  if (totalTreasury === 0) return previousSparklineData.map(() => 0)

  const bancaProportion = bancaTotal / totalTreasury
  return previousSparklineData.map(v => v * bancaProportion)
})

// Detectare mobile
const isMobile = computed(() => window.innerWidth < 768)

// Computed property pentru luna curentă Oracle formatată în română
const currentMonthLabel = computed(() => {
  if (!dashboardStore.currentPeriod) {
    return 'Se încarcă...'
  }

  const { year, month } = dashboardStore.currentPeriod

  // Crează un obiect Date pentru a formata luna în română
  const date = new Date(year, month - 1, 1)

  // Formatează luna în română: "Octombrie 2025"
  return date.toLocaleDateString('ro-RO', { month: 'long', year: 'numeric' })
})

// Methods
const handleCompanyChanged = async (company) => {
  if (company) {
    companyStore.setSelectedCompany(company);
    await loadDashboardData();
  }
};

const formatCurrency = (amount) => {
  if (!amount && amount !== 0) return '0,00 RON';
  const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount;
  if (isNaN(numAmount)) return '0,00 RON';
  
  try {
    return new Intl.NumberFormat("ro-RO", {
      style: "currency",
      currency: "RON",
    }).format(numAmount);
  } catch (error) {
    return `${numAmount.toLocaleString("ro-RO", { minimumFractionDigits: 2, maximumFractionDigits: 2 })} RON`;
  }
};

const getBalanceClass = (amount) => {
  if (!amount && amount !== 0) return 'neutral';
  const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount;
  return numAmount > 0 ? 'positive' : numAmount < 0 ? 'negative' : 'neutral';
};

// Trend methods
const loadTrendData = async () => {
  if (!companyStore.selectedCompany) {
    console.warn('No company selected for trend data loading');
    return;
  }
  
  console.log('Loading trend data for company:', companyStore.selectedCompany.id_firma);
  
  const result = await dashboardStore.loadTrendData(
    companyStore.selectedCompany.id_firma, 
    selectedPeriod.value,
    selectedChartType.value
  );
  
  if (result.success) {
    console.log('Trend data loaded successfully:', result.data);
    // Toast notification removed - it was showing on every dashboard refresh
  } else {
    console.error('Failed to load trend data:', result.error);
    toast.add({
      severity: "error",
      summary: "Eroare la încărcarea datelor",
      detail: result.error || "Nu s-au putut încărca datele de trend",
      life: 4000,
    });
  }
};

// Export Trend Data to Excel
const exportTrendExcel = () => {
  const data = prepareTrendData(dashboardStore.trends, selectedPeriod.value, selectedChartType.value);
  const result = exportToExcel(data, 'date_trend', 'Date Trend');
  
  if (result.success) {
    toast.add({
      severity: 'success',
      summary: 'Export Reușit',
      detail: 'Fișier Excel generat cu succes',
      life: 3000
    });
  } else {
    toast.add({
      severity: 'error',
      summary: 'Eroare Export',
      detail: 'Nu s-a putut genera fișierul Excel',
      life: 3000
    });
  }
};

// Export Trend Data to PDF
const exportTrendPDF = () => {
  const data = prepareTrendData(dashboardStore.trends, selectedPeriod.value, selectedChartType.value);
  
  if (!data || data.length === 0) {
    toast.add({
      severity: 'warn',
      summary: 'Nu există date',
      detail: 'Nu există date de trend pentru export',
      life: 3000
    });
    return;
  }
  
  // Generate columns based on data
  const columns = Object.keys(data[0]).map(key => ({
    field: key,
    header: key,
    type: key === 'Perioada' ? 'text' : 'currency'
  }));
  
  const result = exportToPDF(
    data,
    columns,
    'date_trend',
    `Date Trend (${selectedPeriod.value}) - ${companyStore.selectedCompany?.name || 'ROA Reports'}`
  );
  
  if (result.success) {
    toast.add({
      severity: 'success',
      summary: 'Export Reușit',
      detail: 'Fișier PDF generat cu succes',
      life: 3000
    });
  }
};

const refreshTrendData = async () => {
  await loadTrendData();
  toast.add({
    severity: "success",
    summary: "Actualizat",
    detail: "Datele de trend au fost actualizate",
    life: 2000,
  });
};

const getLastTrendValue = (datasetLabel) => {
  if (!dashboardStore.trends?.datasets) {
    console.warn('No trends data available for', datasetLabel);
    return 0;
  }
  
  const dataset = dashboardStore.trends.datasets.find(d => d.label === datasetLabel);
  if (!dataset?.data?.length) {
    console.warn('No dataset or data found for', datasetLabel);
    return 0;
  }
  
  const lastValue = dataset.data[dataset.data.length - 1];
  return typeof lastValue === 'number' ? lastValue : 0;
};

const getTrendChange = (datasetLabel) => {
  if (!dashboardStore.trends?.datasets) {
    console.warn('No trends data available for trend change calculation');
    return '0%';
  }
  
  const dataset = dashboardStore.trends.datasets.find(d => d.label === datasetLabel);
  if (!dataset?.data?.length || dataset.data.length < 2) {
    console.warn('Insufficient data points for trend change calculation:', datasetLabel);
    return '0%';
  }
  
  const current = Number(dataset.data[dataset.data.length - 1]) || 0;
  const previous = Number(dataset.data[dataset.data.length - 2]) || 0;
  
  // Handle edge cases
  if (previous === 0 && current === 0) return '0%';
  if (previous === 0) return current > 0 ? '+∞%' : '-∞%';
  
  const change = ((current - previous) / Math.abs(previous)) * 100;
  
  // Handle very large changes
  if (!isFinite(change)) return '0%';
  
  const sign = change > 0 ? '+' : '';
  return `${sign}${change.toFixed(1)}%`;
};

const getTrendChangeClass = (datasetLabel) => {
  const changeStr = getTrendChange(datasetLabel);
  
  // Handle infinite cases
  if (changeStr.includes('∞')) return 'neutral';
  
  const change = parseFloat(changeStr.replace('%', ''));
  
  // Handle NaN cases
  if (isNaN(change)) return 'neutral';
  
  // For suppliers, negative change is good (less debt)
  if (datasetLabel === 'Furnizori - Sold Net') {
    if (Math.abs(change) < 0.1) return 'neutral'; // Very small changes
    if (change > 0) return 'negative'; // More debt = bad
    if (change < 0) return 'positive'; // Less debt = good
    return 'neutral';
  }
  
  // For clients and treasury, positive change is good
  if (Math.abs(change) < 0.1) return 'neutral'; // Very small changes
  if (change > 0) return 'positive';
  if (change < 0) return 'negative';
  return 'neutral';
};

const searchCompanies = (event) => {
  // Handle undefined or null query
  const query = (event?.query || '').toLowerCase();
  
  // Ensure companyListFormatted exists and has valid data
  if (!companyStore.companyListFormatted || companyStore.companyListFormatted.length === 0) {
    filteredCompanies.value = [];
    return;
  }
  
  filteredCompanies.value = companyStore.companyListFormatted.filter(company => {
    // Ensure displayName exists before using includes
    const displayName = company?.displayName || '';
    return displayName.toLowerCase().includes(query);
  });
};

const handleCompanySelect = async (event) => {
  const selectedCompany = event.value;
  if (selectedCompany && selectedCompany.id_firma) {
    const company = companyStore.getCompanyById(selectedCompany.id_firma);
    if (company) {
      companyStore.setSelectedCompany(company);
      await loadDashboardData();
    }
  }
};

// Fixed: Changed company_id to company parameter
const loadMonthlyFlows = async () => {
  if (!companyStore.selectedCompany) return;

  try {
    const response = await apiService.get('/dashboard/monthly-flows', {
      params: { company: companyStore.selectedCompany.id_firma }
    });
    monthlyInflows.value = response.data.inflows || 0;
    monthlyOutflows.value = response.data.outflows || 0;
  } catch (error) {
    console.error('Failed to load monthly flows:', error);
  }
};

const loadTreasuryBreakdown = async () => {
  if (!companyStore.selectedCompany) return;

  try {
    const response = await apiService.get('/dashboard/treasury-breakdown', {
      params: { company: companyStore.selectedCompany.id_firma }
    });
    treasuryData.value = response.data;
  } catch (error) {
    console.error('Failed to load treasury breakdown:', error);
  }
};

const loadNetBalanceBreakdown = async () => {
  if (!companyStore.selectedCompany) return;

  try {
    const response = await apiService.get('/dashboard/net-balance-breakdown', {
      params: { company: companyStore.selectedCompany.id_firma }
    });

    // Folosește direct datele structurate de la backend
    netBalanceData.value = {
      clienti_total: response.data.clienti_total || 0,
      furnizori_total: response.data.furnizori_total || 0,
      breakdown: response.data.breakdown || {
        clienti: {
          total: 0,
          in_termen: { total: 0 },
          restant: { total: 0, perioade: {} }
        },
        furnizori: {
          total: 0,
          in_termen: { total: 0 },
          restant: { total: 0, perioade: {} }
        }
      }
    };

    console.log('[NetBalance] Loaded balance data:', {
      clienti_total: netBalanceData.value.clienti_total,
      furnizori_total: netBalanceData.value.furnizori_total,
      breakdown: netBalanceData.value.breakdown
    });
  } catch (error) {
    console.error('Failed to load net balance breakdown:', error);
  }
};

const loadDashboardData = async () => {
  if (!companyStore.selectedCompany) return;
  isLoading.value = true;

  try {
    await Promise.all([
      dashboardStore.loadDashboardSummary(companyStore.selectedCompany.id_firma),
      dashboardStore.loadCurrentPeriod(companyStore.selectedCompany.id_firma),
      loadTrendData(),
      loadMonthlyFlows(),
      loadTreasuryBreakdown(),
      loadNetBalanceBreakdown()
    ]);
  } catch (error) {
    console.error("Failed to load dashboard data:", error);
    toast.add({
      severity: "error",
      summary: "Error",
      detail: "Nu s-au putut încărca datele dashboard-ului",
      life: 3000,
    });
  } finally {
    isLoading.value = false;
  }
};

const refreshData = async () => {
  await loadDashboardData();
  // Toast notification removed - it was covering the company and user selectors
};

const exportData = () => {
  // Export functionality can be implemented for different sections
  console.log('Export data triggered');
};

const searchData = () => {
  // Focus on the detail filter input
  const filterInput = document.querySelector('.detail-input');
  if (filterInput) {
    filterInput.focus();
  }
};

// Watchers - removed unused watchers

// Lifecycle
onMounted(async () => {
  // Load companies first
  if (!companyStore.hasCompanies) {
    await companyStore.loadCompanies();
  }
  
  filteredCompanies.value = companyStore.companyListFormatted;
  
  // Check for saved company and verify it exists in loaded companies
  if (companyStore.selectedCompany) {
    const exists = companyStore.getCompanyById(companyStore.selectedCompany.id_firma);
    if (exists) {
      // Update with fresh company data from API
      companyStore.setSelectedCompany(exists);
      await loadDashboardData();
    } else {
      // Saved company no longer exists, clear it
      companyStore.clearSelectedCompany();
    }
  }
});
</script>

<style scoped>
/* Dashboard Styles */
.dashboard-header {
  text-align: center;
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
}

.dashboard-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-sm) 0;
}

.dashboard-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
  font-weight: var(--font-medium);
}

/* Company Selection */
.company-selection {
  max-width: 500px;
  margin: 0 auto var(--space-xl) auto;
}

.company-input {
  width: 100%;
}

.no-companies {
  text-align: center;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Dashboard Content */
.dashboard-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Dashboard Sections */
.dashboard-section {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.section-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}

.section-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.control-group label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.detail-select,
.detail-input,
.trend-select {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  min-width: 120px;
}

.detail-select:focus,
.detail-input:focus,
.trend-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

/* Tables */
.table-container {
  overflow: auto;
  max-height: 500px;
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.dashboard-table th {
  background: var(--color-bg-muted);
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  border-bottom: 2px solid var(--color-border);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text);
  position: sticky;
  top: 0;
  z-index: 10;
}

.dashboard-table th.text-right {
  text-align: right;
}

.dashboard-table td {
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
  font-size: 16px;
  font-weight: normal;
}

.dashboard-table td.text-right {
  text-align: right;
}

.dashboard-table tbody tr:hover {
  background: var(--color-bg-secondary);
}

/* Table Cell Styles */
.category-cell {
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.name-cell {
  font-weight: var(--font-medium);
  color: var(--color-text);
  max-width: 250px;
}

.amount-cell {
  font-family: var(--font-mono, monospace);
  font-weight: normal;
  color: var(--color-text);
}

.status-cell {
  text-align: center;
}

.status-badge {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
}

.status-badge.activ {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-badge.restant {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

/* Balance Classes - Removed colors, keep only for totals */
.positive {
  color: var(--color-text) !important;
}

.negative {
  color: var(--color-text) !important;
}

.neutral {
  color: var(--color-text) !important;
}

/* Table Rows */
.total-row:hover {
  background: var(--color-bg-muted) !important;
}

.detail-row:hover {
  background: var(--color-bg-secondary);
}

.grand-total-row {
  background: var(--color-bg-muted);
  font-weight: bold;
  border-top: 2px solid var(--color-border);
}

.grand-total-row td {
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text);
}

/* Pagination */
.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-xl);
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.pagination-info {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.page-info {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: var(--font-medium);
}

/* Summary Table Styles */
.summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  background: var(--color-bg);
}

.summary-table th {
  background: var(--color-bg-muted);
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  border-bottom: 2px solid var(--color-border);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text);
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
}

.summary-table th.text-right {
  text-align: right;
}

.summary-table td {
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
  font-size: 16px;
  font-weight: normal;
}

.summary-table td.text-right {
  text-align: right;
}

.summary-table tbody tr:hover {
  background: var(--color-bg-secondary);
}

.summary-table .grand-total-row {
  background: var(--color-bg-muted);
  font-weight: bold;
  border-top: 2px solid var(--color-border);
}

.summary-table .grand-total-row td {
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text);
}

/* Breakdown Table Styles */
.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  background: var(--color-bg);
  min-width: 900px; /* Ensure horizontal scrolling on small screens */
}

.breakdown-table th {
  background: var(--color-bg-muted);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 2px solid var(--color-border);
  font-weight: 600;
  color: var(--color-text);
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
  font-size: 16px;
}

.breakdown-table th.text-right {
  text-align: right;
}

.breakdown-table th:first-child {
  min-width: 150px;
  padding-left: var(--space-lg);
}

.breakdown-table th:last-child {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-weight: var(--font-bold);
}

.breakdown-table td {
  padding: var(--space-xs) var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
  font-size: 16px;
  font-weight: normal;
}

.breakdown-table td.text-right {
  text-align: right;
}

.breakdown-table td:first-child {
  padding-left: var(--space-lg);
  font-weight: var(--font-medium);
}

.breakdown-table .total-column {
  background: var(--color-bg-secondary);
  border-left: 2px solid var(--color-border);
  font-weight: var(--font-semibold);
}

.breakdown-table tbody tr:hover {
  background: var(--color-bg-secondary);
}

.breakdown-table .breakdown-row:nth-child(even) {
  background: var(--color-bg-light, rgba(0, 0, 0, 0.02));
}

.breakdown-table .breakdown-total-row {
  background: var(--color-bg-muted);
  font-weight: var(--font-semibold);
  border-top: 2px solid var(--color-border);
}

.breakdown-table .breakdown-total-row td {
  padding: var(--space-md) var(--space-md);
  color: var(--color-text);
  font-weight: var(--font-semibold);
}

.breakdown-table .breakdown-total-row td:first-child {
  padding-left: var(--space-lg);
}

.breakdown-table .breakdown-total-row .total-column {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border-left: 2px solid var(--color-primary);
}

/* Period Column Styling - Removed colors */
.breakdown-table th:nth-child(2),
.breakdown-table td:nth-child(2) {
  background: transparent;
}

.breakdown-table th:nth-child(3),
.breakdown-table td:nth-child(3) {
  background: transparent;
}

.breakdown-table th:nth-child(4),
.breakdown-table td:nth-child(4) {
  background: transparent;
}

.breakdown-table th:nth-child(5),
.breakdown-table td:nth-child(5) {
  background: transparent;
}

.breakdown-table th:nth-child(6),
.breakdown-table td:nth-child(6) {
  background: transparent;
}

.breakdown-table th:nth-child(7),
.breakdown-table td:nth-child(7) {
  background: transparent;
}

/* Overdue period column styling - Removed colors */
.breakdown-table th.overdue-7,
.breakdown-table td:nth-child(2) {
  background: transparent;
}

.breakdown-table th.overdue-14,
.breakdown-table td:nth-child(3) {
  background: transparent;
}

.breakdown-table th.overdue-30,
.breakdown-table td:nth-child(4) {
  background: transparent;
}

.breakdown-table th.overdue-60,
.breakdown-table td:nth-child(5) {
  background: transparent;
}

.breakdown-table th.overdue-90,
.breakdown-table td:nth-child(6) {
  background: transparent;
}

.breakdown-table th.overdue-90plus,
.breakdown-table td:nth-child(7) {
  background: transparent;
}

/* Future period column styling - Removed colors */
.breakdown-table th.future-7 {
  background: transparent;
  color: var(--color-text);
}

.breakdown-table th.future-14 {
  background: transparent;
  color: var(--color-text);
}

.breakdown-table th.future-30 {
  background: transparent;
  color: var(--color-text);
}

.breakdown-table th.future-60 {
  background: transparent;
  color: var(--color-text);
}

.breakdown-table th.future-90 {
  background: transparent;
  color: var(--color-text);
}

.breakdown-table th.future-90plus {
  background: transparent;
  color: var(--color-text);
}

/* Trends Section */
.trends-container {
  padding: var(--space-xl);
}

.trend-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  color: var(--color-text-secondary);
  text-align: center;
}

.trend-error {
  text-align: center;
  padding: var(--space-xl);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
}

.error-icon {
  font-size: 48px;
  color: var(--color-warning);
  margin-bottom: var(--space-lg);
}

.trend-error h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-md) 0;
}

.trend-error p {
  font-size: var(--text-base);
  margin: 0 0 var(--space-lg) 0;
  line-height: 1.6;
}

.trend-chart-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.trend-chart-component {
  height: 300px;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.trend-summary {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.trend-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  text-align: center;
}

.stat-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  font-family: var(--font-mono, monospace);
}

.stat-item.positive .stat-value {
  color: var(--color-success);
}

.stat-item.negative .stat-value {
  color: var(--color-error);
}

.stat-item.neutral .stat-value {
  color: var(--color-text);
}

.stat-change {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
}

.stat-change.positive {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.stat-change.negative {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.stat-change.neutral {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
}

/* Loading State */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  color: var(--color-text-secondary);
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-lg);
}

/* Animations */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Enhanced Responsive Design */
@media (max-width: 1200px) {
  .dashboard-content {
    gap: var(--space-lg);
  }
  
  .section-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  
  .control-group {
    justify-content: space-between;
  }
}

@media (max-width: 1024px) {
  .section-header {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-md) var(--space-lg);
  }
  
  .section-controls {
    justify-content: space-between;
  }
  
  .dashboard-table,
  .summary-table,
  .breakdown-table {
    font-size: var(--text-xs);
  }
  
  .dashboard-table th,
  .dashboard-table td,
  .summary-table th,
  .summary-table td {
    padding: var(--space-sm) var(--space-md);
  }
  
  .breakdown-table th,
  .breakdown-table td {
    padding: var(--space-xs) var(--space-sm);
  }
  
  .breakdown-table {
    min-width: 800px;
  }
}

@media (max-width: 768px) {
  .dashboard-title {
    font-size: var(--text-2xl);
  }
  
  .dashboard-subtitle {
    font-size: var(--text-sm);
  }
  
  .section-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  
  .control-group {
    justify-content: space-between;
  }
  
  .table-container {
    max-height: 400px;
  }
  
  .name-cell {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .table-pagination {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }
  
  /* Responsive table adjustments */
  .summary-table,
  .breakdown-table {
    font-size: 10px;
  }
  
  .summary-table th,
  .summary-table td {
    padding: var(--space-xs) var(--space-sm);
  }
  
  .breakdown-table {
    min-width: 700px;
  }
  
  .breakdown-table th,
  .breakdown-table td {
    padding: 4px 6px;
  }
  
  .breakdown-table th:first-child,
  .breakdown-table td:first-child {
    min-width: 120px;
    padding-left: var(--space-sm);
  }
  
  .trends-container {
    padding: var(--space-lg);
  }
  
  .trend-chart-component {
    height: 250px;
  }
  
  .trend-stats {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .stat-item {
    padding: var(--space-sm);
  }
  
  .error-icon {
    font-size: 36px;
  }
  
  .trend-error h3 {
    font-size: var(--text-lg);
  }
}

@media (max-width: 480px) {
  .dashboard-header {
    margin-bottom: 0.25rem;
    margin-top: 0;
    padding: 0;
    border: none;
    background: transparent;
  }

  .dashboard-title {
    font-size: 1.25rem;
    margin: 0;
  }

  .dashboard-subtitle {
    font-size: 0.75rem;
    margin: 0;
  }
  
  .section-header {
    padding: var(--space-md);
  }
  
  .dashboard-table th,
  .dashboard-table td,
  .summary-table th,
  .summary-table td {
    padding: var(--space-xs) var(--space-sm);
  }
  
  .breakdown-table {
    min-width: 600px;
  }
  
  .breakdown-table th,
  .breakdown-table td {
    padding: 2px 4px;
    font-size: 9px;
  }
  
  .breakdown-table th:first-child,
  .breakdown-table td:first-child {
    min-width: 100px;
    padding-left: var(--space-xs);
  }
  
  .table-pagination {
    padding: var(--space-sm);
  }
}

/* Compact Layout Styles */
.dashboard-section {
  margin-bottom: var(--space-lg);
}

.section-header {
  padding: var(--space-md) var(--space-xl);
}

.dashboard-table td,
.summary-table td,
.breakdown-table td {
  padding: var(--space-xs) var(--space-md);
}

/* Separator row styling for DETALIERE SOLD NET */
.separator-row td {
  border-top: 2px solid var(--color-border);
  padding-top: var(--space-sm);
}

/* Compact dashboard layout */
.dashboard-section {
  margin-bottom: var(--space-lg); /* Reduce from xl */
}

.section-header {
  padding: var(--space-md) var(--space-lg); /* Reduce vertical padding */
}

.breakdown-table td,
.summary-table td {
  padding: var(--space-xs) var(--space-md); /* More compact cells */
}

/* Period column styling for the new table */
.breakdown-table th.restant-7,
.breakdown-table td:nth-child(3) {
  background: rgba(34, 197, 94, 0.1);
}

.breakdown-table th.restant-14,
.breakdown-table td:nth-child(4) {
  background: rgba(59, 130, 246, 0.1);
}

.breakdown-table th.restant-30,
.breakdown-table td:nth-child(5) {
  background: rgba(245, 158, 11, 0.1);
}

.breakdown-table th.restant-60,
.breakdown-table td:nth-child(6) {
  background: rgba(239, 68, 68, 0.1);
}

.breakdown-table th.restant-90,
.breakdown-table td:nth-child(7) {
  background: rgba(239, 68, 68, 0.15);
}

.breakdown-table th.restant-90plus,
.breakdown-table td:nth-child(8) {
  background: rgba(239, 68, 68, 0.2);
}

/* Enhanced Print Styles */
@media print {
  @page {
    margin: 0.5in;
    size: A4;
  }
  
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  .section-header,
  .table-pagination,
  .trends-container,
  .no-print {
    display: none !important;
  }
  
  .dashboard-header {
    text-align: center;
    margin-bottom: var(--space-lg);
    page-break-after: avoid;
  }
  
  .dashboard-title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-xs);
  }
  
  .dashboard-subtitle {
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
  }
  
  .dashboard-table,
  .summary-table,
  .breakdown-table {
    font-size: 9px;
    width: 100%;
    border-collapse: collapse;
    page-break-inside: auto;
  }
  
  .dashboard-table th,
  .summary-table th,
  .breakdown-table th {
    background: var(--color-bg-muted) !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    padding: 3px 5px;
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
    page-break-inside: avoid;
    page-break-after: avoid;
  }
  
  .dashboard-table td,
  .summary-table td,
  .breakdown-table td {
    border: 1px solid #666 !important;
    padding: 3px 5px;
    background: white !important;
    color: #000 !important;
    page-break-inside: avoid;
  }
  
  .dashboard-table .amount-cell,
  .summary-table .amount-cell,
  .breakdown-table .amount-cell {
    font-family: 'Courier New', monospace;
    text-align: right;
  }
  
  .grand-total-row td,
  .breakdown-total-row td {
    background: var(--color-border) !important;
    font-weight: bold !important;
    border: 2px solid #000 !important;
    font-size: 9px;
  }

  .dashboard-section {
    page-break-inside: avoid;
    margin-bottom: 15px;
    border: 1px solid #ccc;
  }

  .breakdown-table .total-column {
    background: var(--color-bg-secondary) !important;
    border-left: 2px solid #000 !important;
  }
  
  .positive {
    color: var(--color-success) !important;
    font-weight: bold;
  }

  .negative {
    color: var(--color-error) !important;
    font-weight: bold;
  }
  
  .status-badge {
    border: 1px solid #000 !important;
    background: white !important;
    color: #000 !important;
    font-size: 7px;
    padding: 1px 3px;
  }
  
  .loading-state,
  .company-selection {
    display: none !important;
  }
}

/* Mobile Table Styles - Prevent text shrinking */
@media (max-width: 768px) {
  /* Horizontal scroll for table containers */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -1rem;
    padding: 0 1rem;
  }
  
  /* Minimum table width to prevent compression */
  .summary-table,
  .breakdown-table,
  .dashboard-table {
    min-width: 600px !important;
  }
  
  /* Maintain readable text size */
  .summary-table td,
  .summary-table th,
  .breakdown-table td,
  .breakdown-table th {
    font-size: 14px !important; /* Never go below 14px */
    padding: 0.5rem;
    white-space: nowrap;
    min-width: 80px;
  }
  
  /* Amount cells should never shrink */
  .amount-cell {
    font-size: 14px !important;
    font-family: monospace;
    white-space: nowrap;
  }
  
  /* Stack controls vertically */
  .section-controls {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }
  
  .section-controls > * {
    width: 100%;
  }
  
  /* Button groups on mobile */
  .button-group {
    display: flex;
    gap: 0.5rem;
    width: 100%;
  }
  
  .button-group .btn {
    flex: 1;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  .summary-table,
  .breakdown-table {
    min-width: 500px !important;
    font-size: 13px !important;
  }
  
  /* Stack button groups vertically on very small screens */
  .button-group {
    flex-direction: column;
  }
  
  .button-group .btn {
    width: 100%;
  }
}

/* Secțiune Carduri Noi */
.metrics-cards-section {
  margin-bottom: 2rem;
  padding: 0 var(--space-md);
}

/* Rând metrici principale */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Responsive pentru metrics-row */
@media (max-width: 1200px) {
  .metrics-row {
    grid-template-columns: 1fr;
  }
}

/* Rând analize */
.analysis-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Rând comparație */
.comparison-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Separator */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
  padding: 0 var(--space-xl);
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.section-divider span {
  color: var(--color-text-secondary);
  font-weight: var(--font-medium);
}

.toggle-btn {
  padding: 0.25rem 0.75rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
  .analysis-row {
    grid-template-columns: 1fr;
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .metrics-cards-section {
    padding: 0 0.25rem;
  }
}

@media (max-width: 480px) {
  .metrics-cards-section {
    padding: 0;
    margin-bottom: 1rem;
  }

  .analysis-row {
    grid-template-columns: 1fr;
  }
  
  /* Auto-hide tables on mobile */
  .dashboard-section,
  .table-container {
    display: none;
  }
  
  .section-divider {
    margin: 1rem 0;
  }
}

/* Card styles comune */
.metric-card,
.performance-card,
.cashflow-card,
.maturity-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--space-lg);
  transition: all 0.3s ease;
}

.metric-card:hover,
.performance-card:hover,
.cashflow-card:hover,
.maturity-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
</style>