<template>
  <div class="financial-indicators-card" :class="{ 'mobile-layout': mobile }">
    <!-- Header -->
    <div class="card-header">
      <h3 class="card-title">
        Indicatori Financiari
      </h3>
      <div class="period-selector-wrapper">
        <Dropdown
          v-model="selectedPeriod"
          :options="periodOptions"
          optionLabel="label"
          optionValue="value"
          placeholder="Selectează perioada"
          class="period-dropdown"
          :disabled="loading"
          @change="handlePeriodChange"
        />
      </div>
    </div>

    <!-- Loading State -->
    <div v-if="loading" class="loading-state">
      <div class="loading-spinner"></div>
      <p>Se încarcă indicatorii financiari...</p>
    </div>

    <!-- Error State -->
    <div v-else-if="error" class="error-state">
      <i class="pi pi-exclamation-triangle error-icon"></i>
      <p>{{ error }}</p>
    </div>

    <!-- Content -->
    <div v-else class="card-content">
      <!-- Collapsed View: 4 Key Indicators -->
      <div v-if="!expanded" class="collapsed-view">
        <div class="key-indicators-grid">
          <!-- Lichiditate Imediată (Quick Ratio) -->
          <IndicatorItem
            v-if="lichiditate?.lichiditate_imediata"
            label="Lichiditate Imediată"
            description="Capacitatea de plată imediată (fără stocuri). (Trezorerie + Clienți) / Furnizori • Ideal: >1.0"
            :value="lichiditate.lichiditate_imediata.value"
            :status="lichiditate.lichiditate_imediata.status"
            :sparkline-data="lichiditate.lichiditate_imediata.sparkline_data"
            :sparkline-labels="lichiditate.lichiditate_imediata.sparkline_labels"
            :thresholds="lichiditate.lichiditate_imediata"
            :decimals="2"
          />

          <!-- DSO -->
          <IndicatorItem
            v-if="eficienta?.dso"
            label="DSO (Zile încasare)"
            description="Câte zile durează încasarea creanțelor. (Sold Clienți / Facturări) × 30 • Ideal: <45 zile"
            :value="eficienta.dso.value"
            unit="zile"
            :status="eficienta.dso.status"
            :sparkline-data="eficienta.dso.sparkline_data"
            :sparkline-labels="eficienta.dso.sparkline_labels"
            :thresholds="eficienta.dso"
            :decimals="0"
          />

          <!-- Creanțe Restante % -->
          <IndicatorItem
            v-if="risc?.creante_restante_pct"
            label="Creanțe Restante"
            description="Procentul facturilor depășite la plată. Restante / Total Clienți × 100 • Ideal: <20%"
            :value="risc.creante_restante_pct.value"
            unit="%"
            :status="risc.creante_restante_pct.status"
            :sparkline-data="risc.creante_restante_pct.sparkline_data"
            :sparkline-labels="risc.creante_restante_pct.sparkline_labels"
            :thresholds="risc.creante_restante_pct"
            :decimals="1"
          />

          <!-- Z-Score -->
          <IndicatorItem
            v-if="altman_zscore?.zscore"
            label="Altman Z-Score"
            description="Scor de sănătate financiară. 6.56×X1 + 3.26×X2 + 6.72×X3 + 1.05×X4 • >2.6 = sigur, <1.1 = risc"
            :value="altman_zscore.zscore.value"
            :status="altman_zscore.zscore.status"
            :sparkline-data="altman_zscore.zscore.sparkline_data"
            :sparkline-labels="altman_zscore.zscore.sparkline_labels"
            :thresholds="altman_zscore.zscore"
            :decimals="2"
          />
        </div>
      </div>

      <!-- Expanded View: Grouped Layout (similar to mobile Bottom Sheet) -->
      <div
        class="expanded-view"
        :class="{ 'is-expanded': expanded }"
      >
        <div v-if="expanded" class="indicators-grouped">
          <!-- Lichiditate -->
          <div class="indicator-section" v-if="lichiditate">
            <h4 class="section-title" @click="toggleSubIndicators('lichiditate')">
              <span>Lichiditate</span>
              <i class="pi" :class="subIndicatorsExpanded.lichiditate ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
            </h4>
            <div class="section-items">
              <div class="indicator-row" v-if="lichiditate?.lichiditate_curenta">
                <div class="indicator-info">
                  <span class="indicator-name">Lichiditate Curentă</span>
                  <span class="indicator-desc">Capacitatea de acoperire a datoriilor curente. Active Curente / Datorii Curente • Ideal: >1.5</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(lichiditate.lichiditate_curenta.status)">
                  {{ formatValue(lichiditate.lichiditate_curenta.value, 2) }}
                </span>
              </div>
              <div class="indicator-row" v-if="lichiditate?.lichiditate_imediata">
                <div class="indicator-info">
                  <span class="indicator-name">Lichiditate Imediată</span>
                  <span class="indicator-desc">Capacitatea de plată imediată (fără stocuri). (Trezorerie + Clienți) / Furnizori • Ideal: >1.0</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(lichiditate.lichiditate_imediata.status)">
                  {{ formatValue(lichiditate.lichiditate_imediata.value, 2) }}
                </span>
              </div>
              <div class="indicator-row" v-if="lichiditate?.lichiditate_vedere">
                <div class="indicator-info">
                  <span class="indicator-name">Lichiditate la Vedere</span>
                  <span class="indicator-desc">Numerar disponibil pentru plăți imediate. Trezorerie / Furnizori • Ideal: >0.2</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(lichiditate.lichiditate_vedere.status)">
                  {{ formatValue(lichiditate.lichiditate_vedere.value, 2) }}
                </span>
              </div>
              <!-- Sub-indicatori pentru verificare (collapsible) -->
              <div v-show="subIndicatorsExpanded.lichiditate" class="sub-indicators-group">
                <div class="indicator-row sub-indicator" v-if="lichiditate?.active_curente">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Active Curente</span>
                    <span class="indicator-desc">Stocuri + Creanțe + Disponibilități</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(lichiditate.active_curente.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="lichiditate?.disponibilitati">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Disponibilități</span>
                    <span class="indicator-desc">Bancă (512x) + Casă (531x)</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(lichiditate.disponibilitati.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="lichiditate?.creante">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Creanțe</span>
                    <span class="indicator-desc">Clienți (411x) + Debitori (461x)</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(lichiditate.creante.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="lichiditate?.datorii_curente">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Datorii Curente</span>
                    <span class="indicator-desc">Furnizori + TVA + Salarii + etc.</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(lichiditate.datorii_curente.value) }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- Eficiență -->
          <div class="indicator-section" v-if="eficienta">
            <h4 class="section-title" @click="toggleSubIndicators('eficienta')">
              <span>Eficiență</span>
              <i class="pi" :class="subIndicatorsExpanded.eficienta ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
            </h4>
            <div class="section-items">
              <div class="indicator-row" v-if="eficienta?.dso">
                <div class="indicator-info">
                  <span class="indicator-name">DSO (Zile încasare)</span>
                  <span class="indicator-desc">Câte zile durează încasarea creanțelor. (Sold Clienți / Facturări) × 30 • Ideal: <45 zile</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(eficienta.dso.status)">
                  {{ formatValue(eficienta.dso.value, 0) }} zile
                </span>
              </div>
              <div class="indicator-row" v-if="eficienta?.dpo">
                <div class="indicator-info">
                  <span class="indicator-name">DPO (Zile plată)</span>
                  <span class="indicator-desc">Câte zile durează plata furnizorilor. (Sold Furnizori / Achiziții) × 30 • Ideal: 30-60 zile</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(eficienta.dpo.status)">
                  {{ formatValue(eficienta.dpo.value, 0) }} zile
                </span>
              </div>
              <div class="indicator-row" v-if="eficienta?.cash_conversion_cycle">
                <div class="indicator-info">
                  <span class="indicator-name">Ciclu Conversie Cash</span>
                  <span class="indicator-desc">Timpul de conversie în numerar. DSO - DPO • Ideal: cât mai mic (sau negativ)</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(eficienta.cash_conversion_cycle.status)">
                  {{ formatValue(eficienta.cash_conversion_cycle.value, 0) }} zile
                </span>
              </div>
              <div class="indicator-row" v-if="eficienta?.rata_incasare">
                <div class="indicator-info">
                  <span class="indicator-name">Rata Încasare</span>
                  <span class="indicator-desc">Procentul facturilor încasate. Încasări / Facturări × 100 • Ideal: >85%</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(eficienta.rata_incasare.status)">
                  {{ formatValue(eficienta.rata_incasare.value, 1) }}%
                </span>
              </div>
              <div class="indicator-row" v-if="eficienta?.rata_plata">
                <div class="indicator-info">
                  <span class="indicator-name">Rata Plată</span>
                  <span class="indicator-desc">Disciplina de plată către furnizori. Plăți / Achiziții × 100 • Ideal: 70-90%</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(eficienta.rata_plata.status)">
                  {{ formatValue(eficienta.rata_plata.value, 1) }}%
                </span>
              </div>
              <!-- Sub-indicatori pentru verificare (collapsible) -->
              <div v-show="subIndicatorsExpanded.eficienta" class="sub-indicators-group">
                <div class="indicator-row sub-indicator" v-if="eficienta?.sold_clienti">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Sold Clienți</span>
                    <span class="indicator-desc">Sold clienți la final de lună</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(eficienta.sold_clienti.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="eficienta?.facturari_lunare">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Facturări Lunare</span>
                    <span class="indicator-desc">Media facturărilor (3 luni)</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(eficienta.facturari_lunare.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="eficienta?.sold_furnizori">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Sold Furnizori</span>
                    <span class="indicator-desc">Sold furnizori la final de lună</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(eficienta.sold_furnizori.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="eficienta?.achizitii_lunare">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Achiziții Lunare</span>
                    <span class="indicator-desc">Media achizițiilor (3 luni)</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(eficienta.achizitii_lunare.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="eficienta?.incasari_luna">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Încasări Lunare</span>
                    <span class="indicator-desc">Media încasărilor (3 luni)</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(eficienta.incasari_luna.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="eficienta?.plati_luna">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Plăți Lunare</span>
                    <span class="indicator-desc">Media plăților (3 luni)</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(eficienta.plati_luna.value) }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- Risc -->
          <div class="indicator-section" v-if="risc">
            <h4 class="section-title" @click="toggleSubIndicators('risc')">
              <span>Risc</span>
              <i class="pi" :class="subIndicatorsExpanded.risc ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
            </h4>
            <div class="section-items">
              <div class="indicator-row" v-if="risc?.creante_restante_pct">
                <div class="indicator-info">
                  <span class="indicator-name">Creanțe Restante</span>
                  <span class="indicator-desc">Procentul facturilor depășite la plată. Restante / Total × 100 • Ideal: <20%</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(risc.creante_restante_pct.status)">
                  {{ formatValue(risc.creante_restante_pct.value, 1) }}%
                </span>
              </div>
              <div class="indicator-row" v-if="risc?.creante_90plus_pct">
                <div class="indicator-info">
                  <span class="indicator-name">Creanțe >90 zile</span>
                  <span class="indicator-desc">Creanțe vechi cu risc mare de neîncasare. Restant 90+ / Total × 100 • Ideal: <5%</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(risc.creante_90plus_pct.status)">
                  {{ formatValue(risc.creante_90plus_pct.value, 1) }}%
                </span>
              </div>
              <div class="indicator-row" v-if="risc?.datorii_restante_pct">
                <div class="indicator-info">
                  <span class="indicator-name">Datorii Restante</span>
                  <span class="indicator-desc">Disciplina de plată către furnizori. Restante / Total × 100 • Ideal: <10%</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(risc.datorii_restante_pct.status)">
                  {{ formatValue(risc.datorii_restante_pct.value, 1) }}%
                </span>
              </div>
              <div class="indicator-row" v-if="risc?.raport_datorii_trezorerie">
                <div class="indicator-info">
                  <span class="indicator-name">Datorii/Trezorerie</span>
                  <span class="indicator-desc">Câte lei de datorii pe fiecare leu în casă. Furnizori / Trezorerie • Ideal: <3.0</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(risc.raport_datorii_trezorerie.status)">
                  {{ formatValue(risc.raport_datorii_trezorerie.value, 2) }}x
                </span>
              </div>
              <!-- Sub-indicatori pentru verificare (collapsible) -->
              <div v-show="subIndicatorsExpanded.risc" class="sub-indicators-group">
                <div class="indicator-row sub-indicator" v-if="risc?.total_clienti">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Total Clienți</span>
                    <span class="indicator-desc">Sold total clienți (411x)</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(risc.total_clienti.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="risc?.clienti_restanti">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Clienți Restanți</span>
                    <span class="indicator-desc">Sold clienți cu facturi restante</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(risc.clienti_restanti.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="risc?.clienti_90plus">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Clienți >90 zile</span>
                    <span class="indicator-desc">Sold clienți restant >90 zile</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(risc.clienti_90plus.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="risc?.total_furnizori">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Total Furnizori</span>
                    <span class="indicator-desc">Sold total furnizori (401x)</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(risc.total_furnizori.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="risc?.furnizori_restanti">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Furnizori Restanți</span>
                    <span class="indicator-desc">Sold furnizori cu facturi restante</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(risc.furnizori_restanti.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="risc?.trezorerie">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Trezorerie</span>
                    <span class="indicator-desc">Disponibilități (512x + 531x)</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(risc.trezorerie.value) }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- Cash Flow -->
          <div class="indicator-section" v-if="cash_flow">
            <h4 class="section-title" @click="toggleSubIndicators('cashflow')">
              <span>Cash Flow</span>
              <i class="pi" :class="subIndicatorsExpanded.cashflow ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
            </h4>
            <div class="section-items">
              <div class="indicator-row" v-if="cash_flow?.flux_net_lunar">
                <div class="indicator-info">
                  <span class="indicator-name">Flux Net Lunar</span>
                  <span class="indicator-desc">Cash generat sau consumat luna curentă. Încasări - Plăți • Ideal: >0 (pozitiv)</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(cash_flow.flux_net_lunar.status)">
                  {{ formatCurrency(cash_flow.flux_net_lunar.value) }}
                </span>
              </div>
              <div class="indicator-row" v-if="cash_flow?.cash_flow_ytd">
                <div class="indicator-info">
                  <span class="indicator-name">Cash Flow YTD</span>
                  <span class="indicator-desc">Flux cumulat de la începutul anului. Σ(Încasări - Plăți) • Ideal: pozitiv</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(cash_flow.cash_flow_ytd.status)">
                  {{ formatCurrency(cash_flow.cash_flow_ytd.value) }}
                </span>
              </div>
              <div class="indicator-row" v-if="cash_flow?.flux_net_yoy_pct">
                <div class="indicator-info">
                  <span class="indicator-name">Flux Net YoY</span>
                  <span class="indicator-desc">Evoluția față de anul trecut. (CF curent - CF anterior) / CF anterior × 100 • Ideal: >0%</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(cash_flow.flux_net_yoy_pct.status)">
                  {{ formatValue(cash_flow.flux_net_yoy_pct.value, 1) }}%
                </span>
              </div>
              <div class="indicator-row" v-if="cash_flow?.acoperire_cash_flow">
                <div class="indicator-info">
                  <span class="indicator-name">Acoperire CF</span>
                  <span class="indicator-desc">Capacitatea de plată din flux. Cash Flow / Datorii Restante • Ideal: >0.5</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(cash_flow.acoperire_cash_flow.status)">
                  {{ formatValue(cash_flow.acoperire_cash_flow.value, 2) }}x
                </span>
              </div>
              <!-- Sub-indicatori pentru verificare (collapsible) -->
              <div v-show="subIndicatorsExpanded.cashflow" class="sub-indicators-group">
                <div class="indicator-row sub-indicator" v-if="cash_flow?.incasari_luna">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Încasări Luna</span>
                    <span class="indicator-desc">Încasări luna curentă</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(cash_flow.incasari_luna.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="cash_flow?.plati_luna">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Plăți Luna</span>
                    <span class="indicator-desc">Plăți luna curentă</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(cash_flow.plati_luna.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="cash_flow?.cf_an_precedent">
                  <div class="indicator-info">
                    <span class="indicator-name">└ CF An Precedent</span>
                    <span class="indicator-desc">Cash Flow YTD an precedent</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(cash_flow.cf_an_precedent.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="cash_flow?.datorii_restante">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Datorii Restante</span>
                    <span class="indicator-desc">Datorii cu scadență depășită</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(cash_flow.datorii_restante.value) }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- Dinamică -->
          <div class="indicator-section" v-if="dinamica">
            <h4 class="section-title" @click="toggleSubIndicators('dinamica')">
              <span>Dinamică</span>
              <i class="pi" :class="subIndicatorsExpanded.dinamica ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
            </h4>
            <div class="section-items">
              <div class="indicator-row" v-if="dinamica?.crestere_vanzari_yoy">
                <div class="indicator-info">
                  <span class="indicator-name">Creștere Vânzări YoY</span>
                  <span class="indicator-desc">Trendul vânzărilor față de anul trecut. (Vânz curent - Vânz anterior) / Vânz anterior × 100 • Ideal: >5%</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(dinamica.crestere_vanzari_yoy.status)">
                  {{ formatValue(dinamica.crestere_vanzari_yoy.value, 1) }}%
                </span>
              </div>
              <div class="indicator-row" v-if="dinamica?.crestere_achizitii_yoy">
                <div class="indicator-info">
                  <span class="indicator-name">Creștere Achiziții YoY</span>
                  <span class="indicator-desc">Trendul achizițiilor față de anul trecut. (Ach curent - Ach anterior) / Ach anterior × 100 • Corelat cu vânzări</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(dinamica.crestere_achizitii_yoy.status)">
                  {{ formatValue(dinamica.crestere_achizitii_yoy.value, 1) }}%
                </span>
              </div>
              <div class="indicator-row" v-if="dinamica?.marja_implicita">
                <div class="indicator-info">
                  <span class="indicator-name">Marjă Implicită</span>
                  <span class="indicator-desc">Profitabilitatea brută estimată. (Vânzări - Achiziții) / Vânzări × 100 • Ideal: >20%</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(dinamica.marja_implicita.status)">
                  {{ formatValue(dinamica.marja_implicita.value, 1) }}%
                </span>
              </div>
              <!-- Sub-indicatori pentru verificare (collapsible) -->
              <div v-show="subIndicatorsExpanded.dinamica" class="sub-indicators-group">
                <div class="indicator-row sub-indicator" v-if="dinamica?.vanzari_an_curent">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Cifra de Afaceri An Curent</span>
                    <span class="indicator-desc">Clasa 7 (70x) fără TVA</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(dinamica.vanzari_an_curent.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="dinamica?.vanzari_an_precedent">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Cifra de Afaceri An Precedent</span>
                    <span class="indicator-desc">Clasa 7 (70x) fără TVA</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(dinamica.vanzari_an_precedent.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="dinamica?.achizitii_an_curent">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Achiziții Totale An Curent</span>
                    <span class="indicator-desc">Stocuri + cheltuieli directe, fără TVA</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(dinamica.achizitii_an_curent.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="dinamica?.achizitii_an_precedent">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Achiziții Totale An Precedent</span>
                    <span class="indicator-desc">Stocuri + cheltuieli directe, fără TVA</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(dinamica.achizitii_an_precedent.value) }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- Profitabilitate -->
          <div class="indicator-section" v-if="profitabilitate">
            <h4 class="section-title" @click="toggleSubIndicators('profitabilitate')">
              <span>Profitabilitate</span>
              <i class="pi" :class="subIndicatorsExpanded.profitabilitate ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
            </h4>
            <div class="section-items">
              <div class="indicator-row" v-if="profitabilitate?.cifra_afaceri">
                <div class="indicator-info">
                  <span class="indicator-name">Cifra de Afaceri</span>
                  <span class="indicator-desc">Total venituri din activitatea operațională. Clasa 70x • Ideal: în creștere</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(profitabilitate.cifra_afaceri.status)">
                  {{ formatCurrency(profitabilitate.cifra_afaceri.value) }}
                </span>
              </div>
              <div class="indicator-row" v-if="profitabilitate?.cheltuieli_totale">
                <div class="indicator-info">
                  <span class="indicator-name">Cheltuieli Totale</span>
                  <span class="indicator-desc">Operaționale + Financiare. Clasa 60x-68x</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(profitabilitate.cheltuieli_totale.status)">
                  {{ formatCurrency(profitabilitate.cheltuieli_totale.value) }}
                </span>
              </div>
              <div class="indicator-row" v-if="profitabilitate?.profit_brut">
                <div class="indicator-info">
                  <span class="indicator-name">Profit Brut (EBIT)</span>
                  <span class="indicator-desc">Venituri - Cheltuieli operaționale • Ideal: pozitiv</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(profitabilitate.profit_brut.status)">
                  {{ formatCurrency(profitabilitate.profit_brut.value) }}
                </span>
              </div>
              <div class="indicator-row" v-if="profitabilitate?.marja_profit_brut">
                <div class="indicator-info">
                  <span class="indicator-name">Marja Profit</span>
                  <span class="indicator-desc">Procentul de profit din vânzări. Profit / Venituri × 100 • Ideal: >10%</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(profitabilitate.marja_profit_brut.status)">
                  {{ formatValue(profitabilitate.marja_profit_brut.value, 1) }}%
                </span>
              </div>
              <div class="indicator-row" v-if="profitabilitate?.roa">
                <div class="indicator-info">
                  <span class="indicator-name">Randament Active (ROA)</span>
                  <span class="indicator-desc">Profit / Active Totale × 100 • Ideal: >5%</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(profitabilitate.roa.status)">
                  {{ formatValue(profitabilitate.roa.value, 2) }}%
                </span>
              </div>
              <div class="indicator-row" v-if="profitabilitate?.roe">
                <div class="indicator-info">
                  <span class="indicator-name">Randament Capitaluri (ROE)</span>
                  <span class="indicator-desc">Profit / Capital Propriu × 100 • Ideal: >10%</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(profitabilitate.roe.status)">
                  {{ formatValue(profitabilitate.roe.value, 2) }}%
                </span>
              </div>
              <!-- Sub-indicatori pentru verificare (collapsible) -->
              <div v-show="subIndicatorsExpanded.profitabilitate" class="sub-indicators-group">
                <div class="indicator-row sub-indicator" v-if="profitabilitate?.cheltuieli_operationale">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Cheltuieli Operaționale</span>
                    <span class="indicator-desc">Clasa 60x-65x + 68x (fără dobânzi 66x). Cheltuieli din activitatea curentă.</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(profitabilitate.cheltuieli_operationale.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="profitabilitate?.cheltuieli_financiare">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Cheltuieli Financiare</span>
                    <span class="indicator-desc">Clasa 66x. Dobânzi, diferențe de curs valutar, etc.</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(profitabilitate.cheltuieli_financiare.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="profitabilitate?.venituri">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Venituri (Clasa 7)</span>
                    <span class="indicator-desc">Total venituri pentru verificare calcul EBIT</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(profitabilitate.venituri.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="profitabilitate?.active_totale">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Active Totale</span>
                    <span class="indicator-desc">Baza calcul ROA. Active Imobilizate + Active Curente</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(profitabilitate.active_totale.value) }}
                  </span>
                </div>
                <div class="indicator-row sub-indicator" v-if="profitabilitate?.capitaluri_proprii">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Capitaluri Proprii</span>
                    <span class="indicator-desc">Baza calcul ROE. Capital Social (101-106) + Rezultat (117,121)</span>
                  </div>
                  <span class="indicator-value">
                    {{ formatCurrency(profitabilitate.capitaluri_proprii.value) }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- Altman Z-Score -->
          <div class="indicator-section" v-if="altman_zscore">
            <h4 class="section-title" @click="toggleSubIndicators('altman')">
              <span>Altman Z-Score</span>
              <i class="pi" :class="subIndicatorsExpanded.altman ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
            </h4>
            <div class="section-items">
              <div class="indicator-row" v-if="altman_zscore?.zscore">
                <div class="indicator-info">
                  <span class="indicator-name">Z-Score</span>
                  <span class="indicator-desc">Scor de sănătate financiară. 6.56×X1 + 3.26×X2 + 6.72×X3 + 1.05×X4 • >2.6 = sigur, <1.1 = risc</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(altman_zscore.zscore.status)">
                  {{ formatValue(altman_zscore.zscore.value, 2) }}
                </span>
              </div>
              <!-- Subindicatori X1-X4 (collapsible) -->
              <div v-show="subIndicatorsExpanded.altman" class="sub-indicators-group">
                <div class="indicator-row sub-indicator" v-if="altman_zscore?.x1">
                  <div class="indicator-info">
                    <span class="indicator-name">└ X1 (Lichiditate)</span>
                    <span class="indicator-desc">Capital de lucru / Active totale. Măsoară lichiditatea pe termen scurt.</span>
                  </div>
                  <span class="indicator-value">{{ formatValue(altman_zscore.x1.value, 3) }}</span>
                </div>
                <div class="indicator-row sub-indicator" v-if="altman_zscore?.x2">
                  <div class="indicator-info">
                    <span class="indicator-name">└ X2 (Profitabilitate)</span>
                    <span class="indicator-desc">Rezultat reportat / Active totale. Măsoară profiturile reinvestite.</span>
                  </div>
                  <span class="indicator-value">{{ formatValue(altman_zscore.x2.value, 3) }}</span>
                </div>
                <div class="indicator-row sub-indicator" v-if="altman_zscore?.x3">
                  <div class="indicator-info">
                    <span class="indicator-name">└ X3 (Eficiență)</span>
                    <span class="indicator-desc">EBIT / Active totale. Măsoară productivitatea activelor.</span>
                  </div>
                  <span class="indicator-value">{{ formatValue(altman_zscore.x3.value, 3) }}</span>
                </div>
                <div class="indicator-row sub-indicator" v-if="altman_zscore?.x4">
                  <div class="indicator-info">
                    <span class="indicator-name">└ X4 (Solvabilitate)</span>
                    <span class="indicator-desc">Capital propriu / Datorii totale. Măsoară gradul de îndatorare.</span>
                  </div>
                  <span class="indicator-value">{{ formatValue(altman_zscore.x4.value, 3) }}</span>
                </div>
                <!-- Valori absolute pentru verificare manuală în balanță -->
                <div class="indicator-row sub-indicator" v-if="altman_zscore?.capital_de_lucru?.value !== null && altman_zscore?.capital_de_lucru?.value !== undefined">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Capital de Lucru</span>
                    <span class="indicator-desc">Active Curente - Datorii Curente (3xx+4xx activ+5xx) - (401,404,4xx pasiv)</span>
                  </div>
                  <span class="indicator-value">{{ formatCurrency(altman_zscore.capital_de_lucru.value) }}</span>
                </div>
                <div class="indicator-row sub-indicator" v-if="altman_zscore?.active_totale?.value !== null && altman_zscore?.active_totale?.value !== undefined">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Active Totale</span>
                    <span class="indicator-desc">Active Imobilizate (2xx net) + Active Curente (3xx+4xx activ+5xx)</span>
                  </div>
                  <span class="indicator-value">{{ formatCurrency(altman_zscore.active_totale.value) }}</span>
                </div>
                <div class="indicator-row sub-indicator" v-if="altman_zscore?.datorii_totale?.value !== null && altman_zscore?.datorii_totale?.value !== undefined">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Datorii Totale</span>
                    <span class="indicator-desc">Datorii Curente (401,404,4xx pasiv) + Datorii Termen Lung (16x)</span>
                  </div>
                  <span class="indicator-value">{{ formatCurrency(altman_zscore.datorii_totale.value) }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- Solvabilitate -->
          <div class="indicator-section" v-if="solvabilitate">
            <h4 class="section-title" @click="toggleSubIndicators('solvabilitate')">
              <span>Solvabilitate</span>
              <i class="pi" :class="subIndicatorsExpanded.solvabilitate ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
            </h4>
            <div class="section-items">
              <div class="indicator-row" v-if="solvabilitate?.activ_net_contabil">
                <div class="indicator-info">
                  <span class="indicator-name">Activ Net Contabil (ANC)</span>
                  <span class="indicator-desc">Total Active - Total Datorii. Valoarea netă a firmei. • Ideal: pozitiv</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(solvabilitate.activ_net_contabil.status)">
                  {{ formatCurrency(solvabilitate.activ_net_contabil.value) }}
                </span>
              </div>
              <div class="indicator-row" v-if="solvabilitate?.rata_anc_capital">
                <div class="indicator-info">
                  <span class="indicator-name">Rata ANC / Capital Social</span>
                  <span class="indicator-desc">ANC / Capital Social × 100. Sub 50% → restricții legale (din 2026). • Ideal: ≥100%</span>
                </div>
                <span class="indicator-value" :class="getStatusClass(solvabilitate.rata_anc_capital.status)">
                  {{ formatValue(solvabilitate.rata_anc_capital.value, 1) }}%
                </span>
              </div>
              <!-- Subindicatori pentru verificare (collapsible) -->
              <div v-show="subIndicatorsExpanded.solvabilitate" class="sub-indicators-group">
                <div class="indicator-row sub-indicator" v-if="solvabilitate?.total_active">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Total Active</span>
                    <span class="indicator-desc">Active Imobilizate + Active Curente (baza de calcul ANC)</span>
                  </div>
                  <span class="indicator-value">{{ formatCurrency(solvabilitate.total_active.value) }}</span>
                </div>
                <div class="indicator-row sub-indicator" v-if="solvabilitate?.total_datorii">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Total Datorii</span>
                    <span class="indicator-desc">Datorii Curente + Datorii pe Termen Lung (se scade din active)</span>
                  </div>
                  <span class="indicator-value">{{ formatCurrency(solvabilitate.total_datorii.value) }}</span>
                </div>
                <div class="indicator-row sub-indicator" v-if="solvabilitate?.capital_social">
                  <div class="indicator-info">
                    <span class="indicator-name">└ Capital Social</span>
                    <span class="indicator-desc">Capital subscris și vărsat (doar cont 101) - baza calcul Rata ANC</span>
                  </div>
                  <span class="indicator-value">{{ formatCurrency(solvabilitate.capital_social.value) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Footer with expand/collapse button - desktop -->
    <div v-if="!loading && !error && !mobile" class="card-footer">
      <button
        class="expand-toggle-btn"
        @click="toggleExpanded"
        :aria-expanded="expanded"
        aria-label="Extinde/Restrânge detalii"
      >
        <span class="expand-label">{{ expanded ? 'Vezi mai puțin' : 'Vezi toți indicatorii' }}</span>
        <i class="pi" :class="expanded ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
      </button>
    </div>

    <!-- Footer with "Vezi toți" button - mobile only -->
    <div v-if="!loading && !error && mobile" class="card-footer mobile-footer">
      <button
        class="expand-toggle-btn"
        @click="showAllIndicators = true"
        aria-label="Vezi toți indicatorii"
      >
        <span class="expand-label">Vezi toți indicatorii</span>
        <i class="pi pi-chevron-up"></i>
      </button>
    </div>

    <!-- Cache Footer -->
    <CacheFooter
      :cache-hit="cacheInfo?.hit"
      :response-time-ms="cacheInfo?.time"
      :cache-source="cacheInfo?.source"
    />

    <!-- Bottom Sheet with all indicators (mobile) -->
    <BottomSheet v-model="showAllIndicators">
      <div class="all-indicators-sheet">
        <h3 class="sheet-title">Toți Indicatorii Financiari</h3>

        <!-- Lichiditate -->
        <div class="indicator-category">
          <h4 class="category-title" @click="toggleSubIndicators('lichiditate')">
            <span>Lichiditate</span>
            <i class="pi" :class="subIndicatorsExpanded.lichiditate ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
          </h4>
          <div class="category-items">
            <div class="sheet-indicator-item" v-if="lichiditate?.lichiditate_curenta">
              <div class="item-info">
                <span class="item-label">Lichiditate Curentă</span>
                <span class="item-description">Capacitatea de acoperire a datoriilor curente. Active Curente / Datorii Curente • Ideal: >1.5</span>
              </div>
              <span class="item-value" :class="getStatusClass(lichiditate.lichiditate_curenta.status)">
                {{ formatValue(lichiditate.lichiditate_curenta.value, 2) }}
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="lichiditate?.lichiditate_imediata">
              <div class="item-info">
                <span class="item-label">Lichiditate Imediată</span>
                <span class="item-description">Capacitatea de plată imediată (fără stocuri). (Trezorerie + Clienți) / Furnizori • Ideal: >1.0</span>
              </div>
              <span class="item-value" :class="getStatusClass(lichiditate.lichiditate_imediata.status)">
                {{ formatValue(lichiditate.lichiditate_imediata.value, 2) }}
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="lichiditate?.lichiditate_vedere">
              <div class="item-info">
                <span class="item-label">Lichiditate la Vedere</span>
                <span class="item-description">Numerar disponibil pentru plăți imediate. Trezorerie / Furnizori • Ideal: >0.2</span>
              </div>
              <span class="item-value" :class="getStatusClass(lichiditate.lichiditate_vedere.status)">
                {{ formatValue(lichiditate.lichiditate_vedere.value, 2) }}
              </span>
            </div>
            <!-- Sub-indicatori pentru verificare (collapsible) -->
            <div v-show="subIndicatorsExpanded.lichiditate" class="sub-indicators-group-mobile">
              <div class="sheet-indicator-item sub-item" v-if="lichiditate?.active_curente">
                <div class="item-info">
                  <span class="item-label">└ Active Curente</span>
                  <span class="item-description">Stocuri + Creanțe + Disponibilități</span>
                </div>
                <span class="item-value">{{ formatCurrency(lichiditate.active_curente.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="lichiditate?.disponibilitati">
                <div class="item-info">
                  <span class="item-label">└ Disponibilități</span>
                  <span class="item-description">Bancă + Casă</span>
                </div>
                <span class="item-value">{{ formatCurrency(lichiditate.disponibilitati.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="lichiditate?.creante">
                <div class="item-info">
                  <span class="item-label">└ Creanțe</span>
                  <span class="item-description">Clienți + Debitori</span>
                </div>
                <span class="item-value">{{ formatCurrency(lichiditate.creante.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="lichiditate?.datorii_curente">
                <div class="item-info">
                  <span class="item-label">└ Datorii Curente</span>
                  <span class="item-description">Furnizori + TVA + Salarii</span>
                </div>
                <span class="item-value">{{ formatCurrency(lichiditate.datorii_curente.value) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Eficiență -->
        <div class="indicator-category">
          <h4 class="category-title" @click="toggleSubIndicators('eficienta')">
            <span>Eficiență</span>
            <i class="pi" :class="subIndicatorsExpanded.eficienta ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
          </h4>
          <div class="category-items">
            <div class="sheet-indicator-item" v-if="eficienta?.dso">
              <div class="item-info">
                <span class="item-label">DSO (Zile încasare)</span>
                <span class="item-description">Câte zile durează încasarea creanțelor. (Sold Clienți / Facturări) × 30 • Ideal: <45 zile</span>
              </div>
              <span class="item-value" :class="getStatusClass(eficienta.dso.status)">
                {{ formatValue(eficienta.dso.value, 0) }} zile
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="eficienta?.dpo">
              <div class="item-info">
                <span class="item-label">DPO (Zile plată)</span>
                <span class="item-description">Câte zile durează plata furnizorilor. (Sold Furnizori / Achiziții) × 30 • Ideal: 30-60 zile</span>
              </div>
              <span class="item-value" :class="getStatusClass(eficienta.dpo.status)">
                {{ formatValue(eficienta.dpo.value, 0) }} zile
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="eficienta?.cash_conversion_cycle">
              <div class="item-info">
                <span class="item-label">Ciclu Conversie Cash</span>
                <span class="item-description">Timpul de conversie în numerar. DSO - DPO • Ideal: cât mai mic (sau negativ)</span>
              </div>
              <span class="item-value" :class="getStatusClass(eficienta.cash_conversion_cycle.status)">
                {{ formatValue(eficienta.cash_conversion_cycle.value, 0) }} zile
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="eficienta?.rata_incasare">
              <div class="item-info">
                <span class="item-label">Rata Încasare</span>
                <span class="item-description">Procentul facturilor încasate. Încasări / Facturări × 100 • Ideal: >85%</span>
              </div>
              <span class="item-value" :class="getStatusClass(eficienta.rata_incasare.status)">
                {{ formatValue(eficienta.rata_incasare.value, 1) }}%
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="eficienta?.rata_plata">
              <div class="item-info">
                <span class="item-label">Rata Plată</span>
                <span class="item-description">Disciplina de plată către furnizori. Plăți / Achiziții × 100 • Ideal: 70-90%</span>
              </div>
              <span class="item-value" :class="getStatusClass(eficienta.rata_plata.status)">
                {{ formatValue(eficienta.rata_plata.value, 1) }}%
              </span>
            </div>
            <!-- Sub-indicatori pentru verificare (collapsible) -->
            <div v-show="subIndicatorsExpanded.eficienta" class="sub-indicators-group-mobile">
              <div class="sheet-indicator-item sub-item" v-if="eficienta?.sold_clienti">
                <div class="item-info">
                  <span class="item-label">└ Sold Clienți</span>
                  <span class="item-description">La final de lună</span>
                </div>
                <span class="item-value">{{ formatCurrency(eficienta.sold_clienti.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="eficienta?.facturari_lunare">
                <div class="item-info">
                  <span class="item-label">└ Facturări</span>
                  <span class="item-description">Media lunară (3 luni)</span>
                </div>
                <span class="item-value">{{ formatCurrency(eficienta.facturari_lunare.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="eficienta?.sold_furnizori">
                <div class="item-info">
                  <span class="item-label">└ Sold Furnizori</span>
                  <span class="item-description">La final de lună</span>
                </div>
                <span class="item-value">{{ formatCurrency(eficienta.sold_furnizori.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="eficienta?.achizitii_lunare">
                <div class="item-info">
                  <span class="item-label">└ Achiziții</span>
                  <span class="item-description">Media lunară (3 luni)</span>
                </div>
                <span class="item-value">{{ formatCurrency(eficienta.achizitii_lunare.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="eficienta?.incasari_luna">
                <div class="item-info">
                  <span class="item-label">└ Încasări</span>
                  <span class="item-description">Media lunară (3 luni)</span>
                </div>
                <span class="item-value">{{ formatCurrency(eficienta.incasari_luna.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="eficienta?.plati_luna">
                <div class="item-info">
                  <span class="item-label">└ Plăți</span>
                  <span class="item-description">Media lunară (3 luni)</span>
                </div>
                <span class="item-value">{{ formatCurrency(eficienta.plati_luna.value) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Risc -->
        <div class="indicator-category">
          <h4 class="category-title" @click="toggleSubIndicators('risc')">
            <span>Risc</span>
            <i class="pi" :class="subIndicatorsExpanded.risc ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
          </h4>
          <div class="category-items">
            <div class="sheet-indicator-item" v-if="risc?.creante_restante_pct">
              <div class="item-info">
                <span class="item-label">Creanțe Restante</span>
                <span class="item-description">Procentul facturilor depășite la plată. Restante / Total × 100 • Ideal: <20%</span>
              </div>
              <span class="item-value" :class="getStatusClass(risc.creante_restante_pct.status)">
                {{ formatValue(risc.creante_restante_pct.value, 1) }}%
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="risc?.creante_90plus_pct">
              <div class="item-info">
                <span class="item-label">Creanțe >90 zile</span>
                <span class="item-description">Creanțe vechi cu risc mare de neîncasare. Restant 90+ / Total × 100 • Ideal: <5%</span>
              </div>
              <span class="item-value" :class="getStatusClass(risc.creante_90plus_pct.status)">
                {{ formatValue(risc.creante_90plus_pct.value, 1) }}%
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="risc?.datorii_restante_pct">
              <div class="item-info">
                <span class="item-label">Datorii Restante</span>
                <span class="item-description">Disciplina de plată către furnizori. Restante / Total × 100 • Ideal: <10%</span>
              </div>
              <span class="item-value" :class="getStatusClass(risc.datorii_restante_pct.status)">
                {{ formatValue(risc.datorii_restante_pct.value, 1) }}%
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="risc?.raport_datorii_trezorerie">
              <div class="item-info">
                <span class="item-label">Datorii/Trezorerie</span>
                <span class="item-description">Câte lei de datorii pe fiecare leu în casă. Furnizori / Trezorerie • Ideal: <3.0</span>
              </div>
              <span class="item-value" :class="getStatusClass(risc.raport_datorii_trezorerie.status)">
                {{ formatValue(risc.raport_datorii_trezorerie.value, 2) }}x
              </span>
            </div>
            <!-- Sub-indicatori pentru verificare (collapsible) -->
            <div v-show="subIndicatorsExpanded.risc" class="sub-indicators-group-mobile">
              <div class="sheet-indicator-item sub-item" v-if="risc?.total_clienti">
                <div class="item-info">
                  <span class="item-label">└ Total Clienți</span>
                  <span class="item-description">Sold total clienți</span>
                </div>
                <span class="item-value">{{ formatCurrency(risc.total_clienti.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="risc?.clienti_restanti">
                <div class="item-info">
                  <span class="item-label">└ Clienți Restanți</span>
                  <span class="item-description">Cu facturi restante</span>
                </div>
                <span class="item-value">{{ formatCurrency(risc.clienti_restanti.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="risc?.clienti_90plus">
                <div class="item-info">
                  <span class="item-label">└ Clienți >90 zile</span>
                  <span class="item-description">Restant >90 zile</span>
                </div>
                <span class="item-value">{{ formatCurrency(risc.clienti_90plus.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="risc?.total_furnizori">
                <div class="item-info">
                  <span class="item-label">└ Total Furnizori</span>
                  <span class="item-description">Sold total furnizori</span>
                </div>
                <span class="item-value">{{ formatCurrency(risc.total_furnizori.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="risc?.furnizori_restanti">
                <div class="item-info">
                  <span class="item-label">└ Furnizori Restanți</span>
                  <span class="item-description">Cu facturi restante</span>
                </div>
                <span class="item-value">{{ formatCurrency(risc.furnizori_restanti.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="risc?.trezorerie">
                <div class="item-info">
                  <span class="item-label">└ Trezorerie</span>
                  <span class="item-description">Disponibilități</span>
                </div>
                <span class="item-value">{{ formatCurrency(risc.trezorerie.value) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Cash Flow -->
        <div class="indicator-category">
          <h4 class="category-title" @click="toggleSubIndicators('cashflow')">
            <span>Cash Flow</span>
            <i class="pi" :class="subIndicatorsExpanded.cashflow ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
          </h4>
          <div class="category-items">
            <div class="sheet-indicator-item" v-if="cash_flow?.flux_net_lunar">
              <div class="item-info">
                <span class="item-label">Flux Net Lunar</span>
                <span class="item-description">Cash generat sau consumat luna curentă. Încasări - Plăți • Ideal: >0 (pozitiv)</span>
              </div>
              <span class="item-value" :class="getStatusClass(cash_flow.flux_net_lunar.status)">
                {{ formatCurrency(cash_flow.flux_net_lunar.value) }}
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="cash_flow?.cash_flow_ytd">
              <div class="item-info">
                <span class="item-label">Cash Flow YTD</span>
                <span class="item-description">Flux cumulat de la începutul anului. Σ(Încasări - Plăți) • Ideal: pozitiv</span>
              </div>
              <span class="item-value" :class="getStatusClass(cash_flow.cash_flow_ytd.status)">
                {{ formatCurrency(cash_flow.cash_flow_ytd.value) }}
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="cash_flow?.flux_net_yoy_pct">
              <div class="item-info">
                <span class="item-label">Flux Net YoY</span>
                <span class="item-description">Evoluția față de anul trecut. (CF curent - CF anterior) / CF anterior × 100 • Ideal: >0%</span>
              </div>
              <span class="item-value" :class="getStatusClass(cash_flow.flux_net_yoy_pct.status)">
                {{ formatValue(cash_flow.flux_net_yoy_pct.value, 1) }}%
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="cash_flow?.acoperire_cash_flow">
              <div class="item-info">
                <span class="item-label">Acoperire CF</span>
                <span class="item-description">Capacitatea de plată din flux. Cash Flow / Datorii Restante • Ideal: >0.5</span>
              </div>
              <span class="item-value" :class="getStatusClass(cash_flow.acoperire_cash_flow.status)">
                {{ formatValue(cash_flow.acoperire_cash_flow.value, 2) }}x
              </span>
            </div>
            <!-- Sub-indicatori pentru verificare (collapsible) -->
            <div v-show="subIndicatorsExpanded.cashflow" class="sub-indicators-group-mobile">
              <div class="sheet-indicator-item sub-item" v-if="cash_flow?.incasari_luna">
                <div class="item-info">
                  <span class="item-label">└ Încasări Luna</span>
                  <span class="item-description">Luna curentă</span>
                </div>
                <span class="item-value">{{ formatCurrency(cash_flow.incasari_luna.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="cash_flow?.plati_luna">
                <div class="item-info">
                  <span class="item-label">└ Plăți Luna</span>
                  <span class="item-description">Luna curentă</span>
                </div>
                <span class="item-value">{{ formatCurrency(cash_flow.plati_luna.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="cash_flow?.cf_an_precedent">
                <div class="item-info">
                  <span class="item-label">└ CF An Precedent</span>
                  <span class="item-description">YTD an precedent</span>
                </div>
                <span class="item-value">{{ formatCurrency(cash_flow.cf_an_precedent.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="cash_flow?.datorii_restante">
                <div class="item-info">
                  <span class="item-label">└ Datorii Restante</span>
                  <span class="item-description">Scadență depășită</span>
                </div>
                <span class="item-value">{{ formatCurrency(cash_flow.datorii_restante.value) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Dinamică -->
        <div class="indicator-category">
          <h4 class="category-title" @click="toggleSubIndicators('dinamica')">
            <span>Dinamică</span>
            <i class="pi" :class="subIndicatorsExpanded.dinamica ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
          </h4>
          <div class="category-items">
            <div class="sheet-indicator-item" v-if="dinamica?.crestere_vanzari_yoy">
              <div class="item-info">
                <span class="item-label">Creștere Vânzări YoY</span>
                <span class="item-description">Trendul vânzărilor față de anul trecut. (Vânz curent - Vânz anterior) / Vânz anterior × 100 • Ideal: >5%</span>
              </div>
              <span class="item-value" :class="getStatusClass(dinamica.crestere_vanzari_yoy.status)">
                {{ formatValue(dinamica.crestere_vanzari_yoy.value, 1) }}%
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="dinamica?.crestere_achizitii_yoy">
              <div class="item-info">
                <span class="item-label">Creștere Achiziții YoY</span>
                <span class="item-description">Trendul achizițiilor față de anul trecut. (Ach curent - Ach anterior) / Ach anterior × 100 • Corelat cu vânzări</span>
              </div>
              <span class="item-value" :class="getStatusClass(dinamica.crestere_achizitii_yoy.status)">
                {{ formatValue(dinamica.crestere_achizitii_yoy.value, 1) }}%
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="dinamica?.marja_implicita">
              <div class="item-info">
                <span class="item-label">Marjă Implicită</span>
                <span class="item-description">Profitabilitatea brută estimată. (Vânzări - Achiziții) / Vânzări × 100 • Ideal: >20%</span>
              </div>
              <span class="item-value" :class="getStatusClass(dinamica.marja_implicita.status)">
                {{ formatValue(dinamica.marja_implicita.value, 1) }}%
              </span>
            </div>
            <!-- Sub-indicatori pentru verificare (collapsible) -->
            <div v-show="subIndicatorsExpanded.dinamica" class="sub-indicators-group-mobile">
              <div class="sheet-indicator-item sub-item" v-if="dinamica?.vanzari_an_curent">
                <div class="item-info">
                  <span class="item-label">└ CA An Curent</span>
                  <span class="item-description">Clasa 7 fără TVA</span>
                </div>
                <span class="item-value">{{ formatCurrency(dinamica.vanzari_an_curent.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="dinamica?.vanzari_an_precedent">
                <div class="item-info">
                  <span class="item-label">└ CA An Precedent</span>
                  <span class="item-description">Clasa 7 fără TVA</span>
                </div>
                <span class="item-value">{{ formatCurrency(dinamica.vanzari_an_precedent.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="dinamica?.achizitii_an_curent">
                <div class="item-info">
                  <span class="item-label">└ Achiziții Totale An Curent</span>
                  <span class="item-description">Stocuri + cheltuieli directe, fără TVA</span>
                </div>
                <span class="item-value">{{ formatCurrency(dinamica.achizitii_an_curent.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-item" v-if="dinamica?.achizitii_an_precedent">
                <div class="item-info">
                  <span class="item-label">└ Achiziții Totale An Precedent</span>
                  <span class="item-description">Stocuri + cheltuieli directe, fără TVA</span>
                </div>
                <span class="item-value">{{ formatCurrency(dinamica.achizitii_an_precedent.value) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Altman Z-Score -->
        <div class="indicator-category">
          <h4 class="category-title" @click="toggleSubIndicators('altman')">
            <span>Altman Z-Score</span>
            <i class="pi" :class="subIndicatorsExpanded.altman ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
          </h4>
          <div class="category-items">
            <div class="sheet-indicator-item" v-if="altman_zscore?.zscore">
              <div class="item-info">
                <span class="item-label">Z-Score</span>
                <span class="item-description">Scor de sănătate financiară. 6.56×X1 + 3.26×X2 + 6.72×X3 + 1.05×X4 • >2.6 = sigur, <1.1 = risc</span>
              </div>
              <span class="item-value" :class="getStatusClass(altman_zscore.zscore.status)">
                {{ formatValue(altman_zscore.zscore.value, 2) }}
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="altman_zscore?.x1">
              <div class="item-info">
                <span class="item-label">X1 (Lichiditate)</span>
                <span class="item-description">Capital de lucru / Active totale. Măsoară lichiditatea pe termen scurt.</span>
              </div>
              <span class="item-value">{{ formatValue(altman_zscore.x1.value, 3) }}</span>
            </div>
            <div class="sheet-indicator-item" v-if="altman_zscore?.x2">
              <div class="item-info">
                <span class="item-label">X2 (Profitabilitate)</span>
                <span class="item-description">Rezultat reportat / Active totale. Măsoară profiturile reinvestite.</span>
              </div>
              <span class="item-value">{{ formatValue(altman_zscore.x2.value, 3) }}</span>
            </div>
            <div class="sheet-indicator-item" v-if="altman_zscore?.x3">
              <div class="item-info">
                <span class="item-label">X3 (Eficiență)</span>
                <span class="item-description">EBIT / Active totale. Măsoară productivitatea activelor.</span>
              </div>
              <span class="item-value">{{ formatValue(altman_zscore.x3.value, 3) }}</span>
            </div>
            <div class="sheet-indicator-item" v-if="altman_zscore?.x4">
              <div class="item-info">
                <span class="item-label">X4 (Solvabilitate)</span>
                <span class="item-description">Capital propriu / Datorii totale. Măsoară gradul de îndatorare.</span>
              </div>
              <span class="item-value">{{ formatValue(altman_zscore.x4.value, 3) }}</span>
            </div>
            <!-- Subindicatori pentru verificare (collapsible) -->
            <div v-show="subIndicatorsExpanded.altman" class="sub-indicators-group-mobile">
              <div class="sheet-indicator-item sub-indicator" v-if="altman_zscore?.capital_de_lucru">
                <div class="item-info">
                  <span class="item-label">Capital de Lucru</span>
                  <span class="item-description">Active Curente - Datorii Curente (3xx+4xx activ+5xx) - (401,404,4xx pasiv)</span>
                </div>
                <span class="item-value">{{ formatCurrency(altman_zscore.capital_de_lucru.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-indicator" v-if="altman_zscore?.active_totale">
                <div class="item-info">
                  <span class="item-label">Active Totale</span>
                  <span class="item-description">Active Imobilizate (2xx net) + Active Curente (3xx+4xx activ+5xx)</span>
                </div>
                <span class="item-value">{{ formatCurrency(altman_zscore.active_totale.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-indicator" v-if="altman_zscore?.datorii_totale">
                <div class="item-info">
                  <span class="item-label">Datorii Totale</span>
                  <span class="item-description">Datorii Curente (401,404,4xx pasiv) + Datorii Termen Lung (16x)</span>
                </div>
                <span class="item-value">{{ formatCurrency(altman_zscore.datorii_totale.value) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Profitabilitate -->
        <div class="indicator-category" v-if="profitabilitate">
          <h4 class="category-title" @click="toggleSubIndicators('profitabilitate')">
            <span>Profitabilitate</span>
            <i class="pi" :class="subIndicatorsExpanded.profitabilitate ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
          </h4>
          <div class="category-items">
            <div class="sheet-indicator-item" v-if="profitabilitate?.cifra_afaceri">
              <div class="item-info">
                <span class="item-label">Cifra de Afaceri</span>
                <span class="item-description">Total venituri din activitatea operațională. Clasa 70x • Ideal: în creștere</span>
              </div>
              <span class="item-value" :class="getStatusClass(profitabilitate.cifra_afaceri.status)">
                {{ formatCurrency(profitabilitate.cifra_afaceri.value) }}
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="profitabilitate?.cheltuieli_totale">
              <div class="item-info">
                <span class="item-label">Cheltuieli Totale</span>
                <span class="item-description">Operaționale + Financiare. Clasa 60x-68x</span>
              </div>
              <span class="item-value" :class="getStatusClass(profitabilitate.cheltuieli_totale.status)">
                {{ formatCurrency(profitabilitate.cheltuieli_totale.value) }}
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="profitabilitate?.profit_brut">
              <div class="item-info">
                <span class="item-label">Profit Brut (EBIT)</span>
                <span class="item-description">Venituri - Cheltuieli operaționale • Ideal: pozitiv</span>
              </div>
              <span class="item-value" :class="getStatusClass(profitabilitate.profit_brut.status)">
                {{ formatCurrency(profitabilitate.profit_brut.value) }}
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="profitabilitate?.marja_profit_brut">
              <div class="item-info">
                <span class="item-label">Marja Profit</span>
                <span class="item-description">Procentul de profit din vânzări. Profit / Venituri × 100 • Ideal: >10%</span>
              </div>
              <span class="item-value" :class="getStatusClass(profitabilitate.marja_profit_brut.status)">
                {{ formatValue(profitabilitate.marja_profit_brut.value, 1) }}%
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="profitabilitate?.roa">
              <div class="item-info">
                <span class="item-label">Randament Active (ROA)</span>
                <span class="item-description">Profit / Active Totale × 100 • Ideal: >5%</span>
              </div>
              <span class="item-value" :class="getStatusClass(profitabilitate.roa.status)">
                {{ formatValue(profitabilitate.roa.value, 2) }}%
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="profitabilitate?.roe">
              <div class="item-info">
                <span class="item-label">Randament Capitaluri (ROE)</span>
                <span class="item-description">Profit / Capital Propriu × 100 • Ideal: >10%</span>
              </div>
              <span class="item-value" :class="getStatusClass(profitabilitate.roe.status)">
                {{ formatValue(profitabilitate.roe.value, 2) }}%
              </span>
            </div>
            <!-- Subindicatori pentru verificare (collapsible) -->
            <div v-show="subIndicatorsExpanded.profitabilitate" class="sub-indicators-group-mobile">
              <div class="sheet-indicator-item sub-indicator" v-if="profitabilitate?.cheltuieli_operationale">
                <div class="item-info">
                  <span class="item-label">Cheltuieli Operaționale</span>
                  <span class="item-description">Clasa 60x-65x + 68x (fără dobânzi 66x). Cheltuieli din activitatea curentă.</span>
                </div>
                <span class="item-value">{{ formatCurrency(profitabilitate.cheltuieli_operationale.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-indicator" v-if="profitabilitate?.cheltuieli_financiare">
                <div class="item-info">
                  <span class="item-label">Cheltuieli Financiare</span>
                  <span class="item-description">Clasa 66x. Dobânzi, diferențe de curs valutar, etc.</span>
                </div>
                <span class="item-value">{{ formatCurrency(profitabilitate.cheltuieli_financiare.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-indicator" v-if="profitabilitate?.active_totale">
                <div class="item-info">
                  <span class="item-label">Active Totale</span>
                  <span class="item-description">Baza calcul ROA. Active Imobilizate + Active Curente</span>
                </div>
                <span class="item-value">{{ formatCurrency(profitabilitate.active_totale.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-indicator" v-if="profitabilitate?.capitaluri_proprii">
                <div class="item-info">
                  <span class="item-label">Capitaluri Proprii</span>
                  <span class="item-description">Baza calcul ROE. Capital Social (101-106) + Rezultat (117,121)</span>
                </div>
                <span class="item-value">{{ formatCurrency(profitabilitate.capitaluri_proprii.value) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Solvabilitate -->
        <div class="indicator-category" v-if="solvabilitate">
          <h4 class="category-title" @click="toggleSubIndicators('solvabilitate')">
            <span>Solvabilitate</span>
            <i class="pi" :class="subIndicatorsExpanded.solvabilitate ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
          </h4>
          <div class="category-items">
            <div class="sheet-indicator-item" v-if="solvabilitate?.activ_net_contabil">
              <div class="item-info">
                <span class="item-label">Activ Net Contabil (ANC)</span>
                <span class="item-description">Total Active - Total Datorii. Valoarea netă a firmei. • Ideal: pozitiv</span>
              </div>
              <span class="item-value" :class="getStatusClass(solvabilitate.activ_net_contabil.status)">
                {{ formatCurrency(solvabilitate.activ_net_contabil.value) }}
              </span>
            </div>
            <div class="sheet-indicator-item" v-if="solvabilitate?.rata_anc_capital">
              <div class="item-info">
                <span class="item-label">Rata ANC / Capital Social</span>
                <span class="item-description">ANC / Capital Social × 100. Sub 50% → restricții legale (din 2026). • Ideal: ≥100%</span>
              </div>
              <span class="item-value" :class="getStatusClass(solvabilitate.rata_anc_capital.status)">
                {{ formatValue(solvabilitate.rata_anc_capital.value, 1) }}%
              </span>
            </div>
            <!-- Subindicatori pentru verificare (collapsible) -->
            <div v-show="subIndicatorsExpanded.solvabilitate" class="sub-indicators-group-mobile">
              <div class="sheet-indicator-item sub-indicator" v-if="solvabilitate?.total_active">
                <div class="item-info">
                  <span class="item-label">Total Active</span>
                  <span class="item-description">Active Imobilizate + Active Curente (baza de calcul ANC)</span>
                </div>
                <span class="item-value">{{ formatCurrency(solvabilitate.total_active.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-indicator" v-if="solvabilitate?.total_datorii">
                <div class="item-info">
                  <span class="item-label">Total Datorii</span>
                  <span class="item-description">Datorii Curente + Datorii pe Termen Lung (se scade din active)</span>
                </div>
                <span class="item-value">{{ formatCurrency(solvabilitate.total_datorii.value) }}</span>
              </div>
              <div class="sheet-indicator-item sub-indicator" v-if="solvabilitate?.capital_social">
                <div class="item-info">
                  <span class="item-label">Capital Social</span>
                  <span class="item-description">Capital subscris și vărsat (doar cont 101) - baza calcul Rata ANC</span>
                </div>
                <span class="item-value">{{ formatCurrency(solvabilitate.capital_social.value) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </BottomSheet>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import Dropdown from 'primevue/dropdown'
import IndicatorItem from './IndicatorItem.vue'
import BottomSheet from '@/shared/components/mobile/BottomSheet.vue'
import CacheFooter from '@/shared/components/CacheFooter.vue'

// Props
const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  error: {
    type: String,
    default: null
  },
  data: {
    type: Object,
    default: null
  },
  /**
   * Mobile mode - enables compact layout for SwipeableCards carousel
   * Single column layout, smaller elements, no expand button
   */
  mobile: {
    type: Boolean,
    default: false
  },
  /**
   * Initial period from parent (typically from period store)
   * Used to sync the period selector with the global selection
   */
  initialPeriod: {
    type: Object,
    default: null,
    validator: (val) => val === null || (typeof val === 'object' && 'luna' in val && 'an' in val)
  },
  /**
   * Cache info from API response
   */
  cacheInfo: {
    type: Object,
    default: () => ({ hit: false, time: 0, source: null })
  }
})

// Emits
const emit = defineEmits(['period-change'])

// State
const expanded = ref(false)
const showAllIndicators = ref(false)

// Initialize selectedPeriod from prop or default to null
const selectedPeriod = ref(
  props.initialPeriod
    ? { luna: props.initialPeriod.luna, an: props.initialPeriod.an }
    : { luna: null, an: null }
)

// Watch for initialPeriod changes from parent (when user changes global period selector)
watch(
  () => props.initialPeriod,
  (newPeriod) => {
    if (newPeriod && (newPeriod.luna !== selectedPeriod.value?.luna || newPeriod.an !== selectedPeriod.value?.an)) {
      selectedPeriod.value = { luna: newPeriod.luna, an: newPeriod.an }
    }
  },
  { deep: true }
)

// Toggle expanded state
const toggleExpanded = () => {
  expanded.value = !expanded.value
}

// Period options for dropdown
const periodOptions = computed(() => {
  const currentDate = new Date()
  const currentYear = currentDate.getFullYear()
  const currentMonth = currentDate.getMonth() + 1

  const options = []

  // Add current month and previous 11 months
  for (let i = 0; i < 12; i++) {
    let month = currentMonth - i
    let year = currentYear

    if (month <= 0) {
      month += 12
      year -= 1
    }

    const monthName = new Date(year, month - 1, 1).toLocaleDateString('ro-RO', { month: 'long' })

    options.push({
      label: `${monthName.charAt(0).toUpperCase() + monthName.slice(1)} ${year}`,
      value: { luna: month, an: year }
    })
  }

  return options
})

// Sub-indicators collapsed state per category
const subIndicatorsExpanded = ref({
  lichiditate: false,
  eficienta: false,
  risc: false,
  cashflow: false,
  dinamica: false,
  profitabilitate: false,
  altman: false,
  solvabilitate: false
})

// Toggle sub-indicators for a category
const toggleSubIndicators = (category) => {
  subIndicatorsExpanded.value[category] = !subIndicatorsExpanded.value[category]
}

// Computed getters for indicator categories
const lichiditate = computed(() => props.data?.lichiditate)
const eficienta = computed(() => props.data?.eficienta)
const risc = computed(() => props.data?.risc)
const cash_flow = computed(() => props.data?.cash_flow)
const dinamica = computed(() => props.data?.dinamica)
const altman_zscore = computed(() => props.data?.altman_zscore)
const profitabilitate = computed(() => props.data?.profitabilitate)
const solvabilitate = computed(() => props.data?.solvabilitate)

// Computed: All indicators for DataTable
const allIndicatorsTableData = computed(() => {
  const indicators = []

  // Helper to add indicator if it exists
  const addIndicator = (name, category, data, description, unit = '', decimals = 2) => {
    if (data?.value !== null && data?.value !== undefined) {
      indicators.push({
        indicator: name,
        category: category,
        description: description,
        value: data.value,
        formattedValue: `${Number(data.value).toFixed(decimals)}${unit ? ` ${unit}` : ''}`,
        status: data.status,
        sparklineData: data.sparkline_data || [],
        thresholds: data
      })
    }
  }

  // Lichiditate
  if (lichiditate.value) {
    addIndicator('Lichiditate Curentă', 'Lichiditate', lichiditate.value.lichiditate_curenta,
      'Capacitatea de acoperire a datoriilor curente. Active Curente / Datorii Curente • Ideal: >1.5', '', 2)
    addIndicator('Quick Ratio', 'Lichiditate', lichiditate.value.lichiditate_imediata,
      'Capacitatea de plată imediată (fără stocuri). (Trezorerie + Clienți) / Furnizori • Ideal: >1.0', '', 2)
    addIndicator('Cash Ratio', 'Lichiditate', lichiditate.value.lichiditate_vedere,
      'Numerar disponibil pentru plăți imediate. Trezorerie / Furnizori • Ideal: >0.2', '', 2)
  }

  // Eficiență
  if (eficienta.value) {
    addIndicator('DSO (Zile încasare)', 'Eficiență', eficienta.value.dso,
      'Câte zile durează încasarea creanțelor. (Sold Clienți / Facturări) × 30 • Ideal: <45 zile', 'zile', 0)
    addIndicator('DPO (Zile plată)', 'Eficiență', eficienta.value.dpo,
      'Câte zile durează plata furnizorilor. (Sold Furnizori / Achiziții) × 30 • Ideal: 30-60 zile', 'zile', 0)
    addIndicator('Ciclu Conversie Cash', 'Eficiență', eficienta.value.cash_conversion_cycle,
      'Timpul de conversie în numerar. DSO - DPO • Ideal: cât mai mic (sau negativ)', 'zile', 0)
    addIndicator('Rata Încasare', 'Eficiență', eficienta.value.rata_incasare,
      'Procentul facturilor încasate. Încasări / Facturări × 100 • Ideal: >85%', '%', 1)
    addIndicator('Rata Plată', 'Eficiență', eficienta.value.rata_plata,
      'Disciplina de plată către furnizori. Plăți / Achiziții × 100 • Ideal: 70-90%', '%', 1)
  }

  // Risc
  if (risc.value) {
    addIndicator('Creanțe Restante', 'Risc', risc.value.creante_restante_pct,
      'Procentul facturilor depășite la plată. Restante / Total × 100 • Ideal: <20%', '%', 1)
    addIndicator('Creanțe >90 zile', 'Risc', risc.value.creante_90plus_pct,
      'Creanțe vechi cu risc mare de neîncasare. Restant 90+ / Total × 100 • Ideal: <5%', '%', 1)
    addIndicator('Datorii Restante', 'Risc', risc.value.datorii_restante_pct,
      'Disciplina de plată față de furnizori. Restante / Total × 100 • Ideal: <10%', '%', 1)
    addIndicator('Datorii/Trezorerie', 'Risc', risc.value.raport_datorii_trezorerie,
      'Câte ori datoriile depășesc numerarul disponibil. Furnizori / Trezorerie • Ideal: <3.0x', 'x', 2)
  }

  // Cash Flow
  if (cash_flow.value) {
    addIndicator('Flux Net Lunar', 'Cash Flow', cash_flow.value.flux_net_lunar,
      'Numerar generat (+) sau consumat (-) în lună. Încasări - Plăți • Ideal: pozitiv', 'RON', 0)
    addIndicator('Cash Flow YTD', 'Cash Flow', cash_flow.value.cash_flow_ytd,
      'Flux cumulat de la început de an. Σ(Încasări - Plăți) • Ideal: pozitiv', 'RON', 0)
    addIndicator('Flux Net YoY', 'Cash Flow', cash_flow.value.flux_net_yoy_pct,
      'Evoluția fluxului vs anul precedent. (CF_curent - CF_prev) / CF_prev × 100 • Ideal: >0%', '%', 1)
    addIndicator('Acoperire Cash Flow', 'Cash Flow', cash_flow.value.acoperire_cash_flow,
      'Capacitate plată datorii din cash flow. Cash Flow / Datorii Restante • Ideal: >0.5x', 'x', 2)
  }

  // Dinamică
  if (dinamica.value) {
    addIndicator('Creștere Vânzări YoY', 'Dinamică', dinamica.value.crestere_vanzari_yoy,
      'Creșterea Cifrei de Afaceri vs anul trecut (Clasa 7, fără TVA). (CA_curent - CA_prev) / CA_prev × 100 • Ideal: >5%', '%', 1)
    addIndicator('Creștere Achiziții YoY', 'Dinamică', dinamica.value.crestere_achizitii_yoy,
      'Evoluția achizițiilor totale (stocuri + cheltuieli directe, fără TVA). Trebuie corelată cu vânzările.', '%', 1)
    addIndicator('Marjă Implicită', 'Dinamică', dinamica.value.marja_implicita,
      'Profitabilitate brută estimată. (CA - Achiziții totale) / CA × 100 • Ideal: >20%', '%', 1)
  }

  // Altman Z-Score
  if (altman_zscore.value?.zscore) {
    addIndicator('Altman Z-Score', 'Z-Score', altman_zscore.value.zscore,
      'Scor predicție faliment. >2.6=sigur, 1.1-2.6=gri, <1.1=risc • Formula: 6.56×X1+3.26×X2+6.72×X3+1.05×X4', '', 2)
  }

  // Profitabilitate
  if (profitabilitate.value) {
    addIndicator('Cifra de Afaceri', 'Profitabilitate', profitabilitate.value.cifra_afaceri,
      'Total venituri din activitatea operațională. Clasa 70x • Ideal: în creștere', 'RON', 0)
    addIndicator('Cheltuieli Totale', 'Profitabilitate', profitabilitate.value.cheltuieli_totale,
      'Total cheltuieli operaționale. Clasa 60x (fără dobânzi)', 'RON', 0)
    addIndicator('Profit Brut', 'Profitabilitate', profitabilitate.value.profit_brut,
      'EBIT = Venituri - Cheltuieli operaționale • Ideal: pozitiv', 'RON', 0)
    addIndicator('Marja Profit', 'Profitabilitate', profitabilitate.value.marja_profit_brut,
      'Procentul de profit din vânzări. Profit / Venituri × 100 • Ideal: >10%', '%', 1)
    addIndicator('ROA', 'Profitabilitate', profitabilitate.value.roa,
      'Return on Assets. Profit / Active Totale × 100 • Ideal: >5%', '%', 2)
    addIndicator('ROE', 'Profitabilitate', profitabilitate.value.roe,
      'Return on Equity. Profit / Capital Propriu × 100 • Ideal: >10%', '%', 2)
  }

  // Solvabilitate
  if (solvabilitate.value) {
    addIndicator('Activ Net Contabil (ANC)', 'Solvabilitate', solvabilitate.value.activ_net_contabil,
      'Total Active - Total Datorii. Valoarea netă a firmei. • Ideal: pozitiv', 'RON', 2)
    addIndicator('Rata ANC / Capital Social', 'Solvabilitate', solvabilitate.value.rata_anc_capital,
      'ANC / Capital Social × 100. Sub 50% → restricții legale (din 2026). • Ideal: ≥100%', '%', 1)
  }

  return indicators
})

// Methods
const formatValue = (value, decimals = 2) => {
  if (value === null || value === undefined) return '-'
  return Number(value).toFixed(decimals)
}

// Format currency with thousands separator
const formatCurrency = (value) => {
  if (value === null || value === undefined) return '-'
  const num = Number(value)
  const formatted = Math.abs(num).toLocaleString('ro-RO', {
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  })
  const sign = num < 0 ? '-' : num > 0 ? '+' : ''
  return `${sign}${formatted}`
}

// Normalize status for consistent styling
const normalizeStatus = (status) => {
  const statusMap = {
    'safe': 'good',
    'grey': 'warning',
    'distress': 'danger'
  }
  return statusMap[status] || status || 'neutral'
}

// Get status class for Bottom Sheet items
const getStatusClass = (status) => {
  const normalized = normalizeStatus(status)
  return `status-${normalized}`
}

// Status color class for value cell
const getStatusColorClass = (status) => {
  const normalized = normalizeStatus(status)
  return `status-${normalized}`
}

// Status badge class
const getStatusBadgeClass = (status) => {
  const normalized = normalizeStatus(status)
  return `badge-${normalized}`
}

// Status icon
const getStatusIcon = (status) => {
  const normalized = normalizeStatus(status)
  const iconMap = {
    'good': 'pi pi-check-circle',
    'warning': 'pi pi-exclamation-circle',
    'danger': 'pi pi-times-circle',
    'neutral': 'pi pi-minus-circle'
  }
  return iconMap[normalized] || iconMap['neutral']
}

// Status label
const getStatusLabel = (status) => {
  const normalized = normalizeStatus(status)
  const labelMap = {
    'good': 'Bun',
    'warning': 'Atenție',
    'danger': 'Risc',
    'neutral': '-'
  }
  return labelMap[normalized] || labelMap['neutral']
}

// Trend calculations
const getTrendClass = (sparklineData) => {
  if (!sparklineData || sparklineData.length < 2) return 'trend-neutral'
  const validData = sparklineData.filter(v => v !== null && v !== undefined)
  if (validData.length < 2) return 'trend-neutral'

  const first = validData[0]
  const last = validData[validData.length - 1]
  if (last > first) return 'trend-up'
  if (last < first) return 'trend-down'
  return 'trend-neutral'
}

const getTrendIcon = (sparklineData) => {
  if (!sparklineData || sparklineData.length < 2) return 'pi pi-minus'
  const validData = sparklineData.filter(v => v !== null && v !== undefined)
  if (validData.length < 2) return 'pi pi-minus'

  const first = validData[0]
  const last = validData[validData.length - 1]
  if (last > first) return 'pi pi-arrow-up'
  if (last < first) return 'pi pi-arrow-down'
  return 'pi pi-minus'
}

const getTrendText = (sparklineData) => {
  if (!sparklineData || sparklineData.length < 2) return '-'
  const validData = sparklineData.filter(v => v !== null && v !== undefined)
  if (validData.length < 2) return '-'

  const first = validData[0]
  const last = validData[validData.length - 1]

  if (first === 0) return last > 0 ? '+∞' : last < 0 ? '-∞' : '0%'

  const change = ((last - first) / Math.abs(first)) * 100
  const sign = change > 0 ? '+' : ''
  return `${sign}${change.toFixed(1)}%`
}

// Row class for DataTable
const getRowClass = (data) => {
  const normalized = normalizeStatus(data.status)
  return `row-${normalized}`
}

const handlePeriodChange = () => {
  if (selectedPeriod.value) {
    emit('period-change', selectedPeriod.value)
  }
}
</script>

<style scoped>
/* Card Container */
.financial-indicators-card {
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Header */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-color);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.card-title i {
  color: var(--color-primary);
}

.period-selector-wrapper {
  min-width: 160px;
}

.period-dropdown {
  width: 100%;
}

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

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

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

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

.error-icon {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-md);
}

/* Card Content */
.card-content {
  flex: 1;
}

/* Collapsed View: Key Indicators Grid (2x2) */
.collapsed-view {
  animation: fadeIn var(--transition-normal);
}

.key-indicators-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}

/* Expanded View: DataTable */
.expanded-view {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), opacity var(--transition-normal);
  opacity: 0;
}

.expanded-view.is-expanded {
  max-height: none;
  overflow: visible;
  opacity: 1;
  animation: fadeIn var(--transition-normal);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ================================================
   Grouped Layout for Expanded View (Desktop)
   ================================================ */
.indicators-grouped {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
}

/* Each category section */
.indicator-section {
  background: transparent;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border: 1px solid var(--surface-border);
}

/* Section title - clickable to toggle sub-indicators */
.section-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-color);
  margin: 0 0 var(--space-sm) 0;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--surface-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-fast);
}

.section-title:hover {
  color: var(--primary-color);
}

.section-title i {
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.section-title:hover i {
  color: var(--primary-color);
}

/* Sub-indicators collapsible group */
.sub-indicators-group {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section items container */
.section-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Each indicator row */
.indicator-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-xs) 0;
}

/* Subindicators with indent */
.indicator-row.sub-indicator {
  padding-left: var(--space-lg);
  border-left: 2px solid var(--surface-border);
  margin-left: var(--space-sm);
}

.sub-indicator .indicator-name {
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
}

.sub-indicator .indicator-value {
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
}

/* Indicator info (name + description) */
.indicator-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

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

.indicator-desc {
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
  line-height: 1.3;
}

/* Indicator value */
.indicator-value {
  font-weight: var(--font-semibold);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: nowrap;
  margin-left: var(--space-md);
}

/* Legacy classes kept for compatibility */
.indicator-category {
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
}

.description-cell {
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
  line-height: 1.4;
}

/* Value Cell */
.value-cell {
  font-weight: var(--font-semibold);
  font-family: var(--font-mono);
}

/* Status Badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.badge-good {
  background: var(--green-50);
  color: var(--green-600);
}

.badge-warning {
  background: var(--yellow-50);
  color: var(--yellow-600);
}

.badge-danger {
  background: var(--red-50);
  color: var(--red-600);
}

.badge-neutral {
  background: var(--surface-ground);
  color: var(--text-color-secondary);
}

/* Dark mode: use darker backgrounds and lighter text (400) for badges */
[data-theme="dark"] .badge-good {
  background: var(--green-900);
  color: var(--green-400);
}

[data-theme="dark"] .badge-warning {
  background: var(--yellow-900);
  color: var(--yellow-400);
}

[data-theme="dark"] .badge-danger {
  background: var(--red-900);
  color: var(--red-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .badge-good {
    background: var(--green-900);
    color: var(--green-400);
  }

  :root:not([data-theme]) .badge-warning {
    background: var(--yellow-900);
    color: var(--yellow-400);
  }

  :root:not([data-theme]) .badge-danger {
    background: var(--red-900);
    color: var(--red-400);
  }
}

/* Trend Cell */
.trend-cell {
  display: flex;
  align-items: center;
}

.trend-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.trend-up {
  color: var(--green-600);
}

.trend-down {
  color: var(--red-600);
}

.trend-neutral {
  color: var(--text-color-secondary);
}

.trend-na {
  color: var(--text-color-secondary);
}

/* Dark mode: use lighter variants (400) for trend colors */
[data-theme="dark"] .trend-up {
  color: var(--green-400);
}

[data-theme="dark"] .trend-down {
  color: var(--red-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .trend-up {
    color: var(--green-400);
  }

  :root:not([data-theme]) .trend-down {
    color: var(--red-400);
  }
}

/* Status Colors - use 600 variants in light mode, 400 variants in dark mode for better contrast */
.status-good {
  color: var(--green-600);
}

.status-warning {
  color: var(--yellow-600);
}

.status-danger {
  color: var(--red-600);
}

.status-neutral {
  color: var(--text-color-secondary);
}

/* Dark mode: use lighter variants (400) for better visibility on dark backgrounds */
[data-theme="dark"] .status-good {
  color: var(--green-400);
}

[data-theme="dark"] .status-warning {
  color: var(--yellow-400);
}

[data-theme="dark"] .status-danger {
  color: var(--red-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .status-good {
    color: var(--green-400);
  }

  :root:not([data-theme]) .status-warning {
    color: var(--yellow-400);
  }

  :root:not([data-theme]) .status-danger {
    color: var(--red-400);
  }
}

/* Card Footer with Expand/Collapse Button */
.card-footer {
  display: flex;
  justify-content: center;
  padding-top: var(--space-sm);
}

.expand-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.expand-toggle-btn:hover {
  background: var(--surface-hover);
}

.expand-toggle-btn:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.expand-toggle-btn i {
  font-size: var(--text-lg);
  transition: transform var(--transition-fast);
}

/* Responsive */
@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: stretch;
  }

  .period-selector-wrapper {
    width: 100%;
  }

  .key-indicators-grid {
    grid-template-columns: 1fr;
  }

  .expand-toggle-btn {
    width: 100%;
    justify-content: center;
  }

  /* Make DataTable scroll horizontally on mobile */
  .indicators-datatable {
    font-size: var(--text-sm);
  }
}

/* ================================================
   Mobile Layout (US-015)
   Compact layout for SwipeableCards carousel
   ================================================ */

.financial-indicators-card.mobile-layout {
  /* Remove padding for SwipeableCards context (padding is handled by card-slide) */
  padding: 0;
  /* Full height for carousel */
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mobile-layout .card-header {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
  padding: var(--space-sm);
}

.mobile-layout .card-title {
  font-size: var(--text-base);
  justify-content: center;
}

.mobile-layout .card-title i {
  font-size: var(--text-base);
}

.mobile-layout .period-selector-wrapper {
  width: 100%;
}

/* Smaller dropdown for mobile */
.mobile-layout .period-dropdown {
  font-size: var(--text-sm);
}

.mobile-layout .card-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-sm);
}

/* Single column layout on mobile */
.mobile-layout .key-indicators-grid {
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  padding: 0;
}

/* Compact loading state */
.mobile-layout .loading-state {
  padding: var(--space-lg);
}

.mobile-layout .loading-spinner {
  width: 32px;
  height: 32px;
}

/* Compact error state */
.mobile-layout .error-state {
  padding: var(--space-lg);
}

.mobile-layout .error-icon {
  font-size: var(--text-2xl);
}

/* ================================================
   Mobile Footer (Vezi toți button)
   ================================================ */
.mobile-footer {
  padding: var(--space-sm);
  background: transparent;
}

/* ================================================
   Bottom Sheet - All Indicators (Mobile)
   ================================================ */
.all-indicators-sheet {
  padding: var(--space-md);
  max-height: 70vh;
  overflow-y: auto;
}

.sheet-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-color);
  margin: 0 0 var(--space-md) 0;
  text-align: center;
}

/* Category sections */
.indicator-category {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.category-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-color);
  margin: 0 0 var(--space-sm) 0;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--surface-border);
  /* Mobile BottomSheet - clickable header */
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.category-title:active {
  opacity: 0.7;
}

.category-title i {
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
  transition: transform 0.2s ease;
}

/* Sub-indicators group animation (mobile) */
.sub-indicators-group-mobile {
  animation: slideDown 0.2s ease-out;
}

.category-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Individual indicator item in sheet */
.sheet-indicator-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-sm);
  background: var(--surface-card);
  border-radius: var(--radius-sm);
  gap: var(--space-sm);
}

/* Sub-indicator items in sheet - smaller and indented */
.sheet-indicator-item.sub-item {
  margin-left: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-ground);
  border-left: 2px solid var(--surface-border);
}

.sheet-indicator-item.sub-item .item-label {
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
}

.sheet-indicator-item.sub-item .item-description {
  font-size: 10px;
}

.sheet-indicator-item.sub-item .item-value {
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

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

.item-description {
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
  line-height: 1.3;
  opacity: 0.85;
}

.item-value {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: var(--font-mono);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Dark mode adjustments for Bottom Sheet */
[data-theme="dark"] .sheet-indicator-item {
  background: var(--surface-hover);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .sheet-indicator-item {
    background: var(--surface-hover);
  }
}

/* Sub-indicator styles for Bottom Sheet (mobile) */
.sheet-indicator-item.sub-indicator {
  padding-left: var(--space-lg);
  border-left: 2px solid var(--surface-border);
  margin-left: var(--space-sm);
  background: transparent;
}

.sheet-indicator-item.sub-indicator .item-label {
  font-size: var(--text-xs);
  color: var(--text-color-secondary);
}

.sheet-indicator-item.sub-indicator .item-value {
  font-size: var(--text-xs);
}
</style>
