<template>
  <div class="balance-dual-card">
    <!-- Header -->
    <div class="card-header">
      <span class="card-icon">💰</span>
      <span class="card-title">SOLD CLIENȚI / FURNIZORI</span>
    </div>

    <!-- Main values section - Split layout -->
    <div class="values-section">
      <!-- Clienți Section -->
      <div class="value-block clienti">
        <div class="value-label">Clienți</div>
        <div class="value-amount" :class="getBalanceClass(clientiTotal)">
          {{ formatCurrency(clientiTotal) }}
        </div>
        <div
          class="value-trend"
          :class="getTrendClass(clientiTrend)"
          v-if="clientiTrend"
        >
          <span class="trend-icon">{{ getTrendIcon(clientiTrend) }}</span>
          <span class="trend-value"
            >{{ Math.round(Math.abs(clientiTrend.value)) }}%</span
          >
        </div>
      </div>

      <!-- Divider -->
      <div class="divider"></div>

      <!-- Furnizori Section -->
      <div class="value-block furnizori">
        <div class="value-label">Furnizori</div>
        <div class="value-amount" :class="getBalanceClass(furnizoriTotal)">
          {{ formatCurrency(furnizoriTotal) }}
        </div>
        <div
          class="value-trend"
          :class="getTrendClass(furnizoriTrend)"
          v-if="furnizoriTrend"
        >
          <span class="trend-icon">{{ getTrendIcon(furnizoriTrend) }}</span>
          <span class="trend-value"
            >{{ Math.round(Math.abs(furnizoriTrend.value)) }}%</span
          >
        </div>
      </div>
    </div>

    <!-- Dual sparkline charts - stacked vertical -->
    <div class="sparkline-dual-container" v-if="hasSparklineData">
      <!-- Grafic Clienți -->
      <div class="sparkline-wrapper">
        <div class="sparkline-label">Clienți</div>
        <div class="sparkline-chart">
          <canvas ref="clientiCanvas" class="sparkline-canvas"></canvas>
        </div>
      </div>

      <!-- Grafic Furnizori -->
      <div class="sparkline-wrapper">
        <div class="sparkline-label">Furnizori</div>
        <div class="sparkline-chart">
          <canvas ref="furnizoriCanvas" class="sparkline-canvas"></canvas>
        </div>
      </div>
    </div>

    <!-- Breakdown section -->
    <div class="breakdown-section" v-if="breakdown">
      <!-- Clienți Breakdown -->
      <div class="breakdown-group">
        <div class="breakdown-header" @click="toggleClientiExpanded">
          <div class="breakdown-header-left">
            <span class="collapse-icon">{{
              isClientiExpanded ? "▼" : "▶"
            }}</span>
            <span class="breakdown-label">Clienți - Detaliere</span>
          </div>
          <span class="breakdown-value">{{
            formatCurrency(breakdown.clienti.total)
          }}</span>
        </div>

        <!-- Clienți Sub-items -->
        <div v-show="isClientiExpanded" class="breakdown-subitems">
          <!-- În termen -->
          <div class="breakdown-subitem">
            <span class="breakdown-sublabel">În termen</span>
            <span class="breakdown-subvalue">{{
              formatCurrency(breakdown.clienti.in_termen.total)
            }}</span>
          </div>

          <!-- Restant cu sub-perioade -->
          <div class="breakdown-subitem-group">
            <div
              class="breakdown-subitem-header"
              @click="toggleClientiRestantExpanded"
            >
              <div class="subitem-header-left">
                <span class="collapse-icon-small">{{
                  isClientiRestantExpanded ? "▼" : "▶"
                }}</span>
                <span class="breakdown-sublabel">Restant</span>
              </div>
              <span class="breakdown-subvalue">{{
                formatCurrency(breakdown.clienti.restant.total)
              }}</span>
            </div>

            <!-- Perioade restante -->
            <div v-show="isClientiRestantExpanded" class="breakdown-perioade">
              <div
                class="perioada-item"
                v-for="(value, key) in breakdown.clienti.restant.perioade"
                :key="key"
              >
                <span class="perioada-label">{{ formatPeriodLabel(key) }}</span>
                <span class="perioada-value">{{ formatCurrency(value) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Furnizori Breakdown -->
      <div class="breakdown-group">
        <div class="breakdown-header" @click="toggleFurnizoriExpanded">
          <div class="breakdown-header-left">
            <span class="collapse-icon">{{
              isFurnizoriExpanded ? "▼" : "▶"
            }}</span>
            <span class="breakdown-label">Furnizori - Detaliere</span>
          </div>
          <span class="breakdown-value">{{
            formatCurrency(breakdown.furnizori.total)
          }}</span>
        </div>

        <!-- Furnizori Sub-items -->
        <div v-show="isFurnizoriExpanded" class="breakdown-subitems">
          <!-- În termen -->
          <div class="breakdown-subitem">
            <span class="breakdown-sublabel">În termen</span>
            <span class="breakdown-subvalue">{{
              formatCurrency(breakdown.furnizori.in_termen.total)
            }}</span>
          </div>

          <!-- Restant cu sub-perioade -->
          <div class="breakdown-subitem-group">
            <div
              class="breakdown-subitem-header"
              @click="toggleFurnizoriRestantExpanded"
            >
              <div class="subitem-header-left">
                <span class="collapse-icon-small">{{
                  isFurnizoriRestantExpanded ? "▼" : "▶"
                }}</span>
                <span class="breakdown-sublabel">Restant</span>
              </div>
              <span class="breakdown-subvalue">{{
                formatCurrency(breakdown.furnizori.restant.total)
              }}</span>
            </div>

            <!-- Perioade restante -->
            <div v-show="isFurnizoriRestantExpanded" class="breakdown-perioade">
              <div
                class="perioada-item"
                v-for="(value, key) in breakdown.furnizori.restant.perioade"
                :key="key"
              >
                <span class="perioada-label">{{ formatPeriodLabel(key) }}</span>
                <span class="perioada-value">{{ formatCurrency(value) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  nextTick,
} from "vue";
import { Chart, registerables } from "chart.js";

Chart.register(...registerables);

const props = defineProps({
  clientiTotal: {
    type: Number,
    required: true,
  },
  furnizoriTotal: {
    type: Number,
    required: true,
  },
  clientiTrend: {
    type: Object,
    default: null,
  },
  furnizoriTrend: {
    type: Object,
    default: null,
  },
  clientiSparklineData: {
    type: Array,
    default: () => [],
  },
  furnizoriSparklineData: {
    type: Array,
    default: () => [],
  },
  sparklineLabels: {
    type: Array,
    default: () => [],
  },
  breakdown: {
    type: Object,
    default: null,
  },
});

// Refs pentru 2 canvas-uri separate
const clientiCanvas = ref(null);
const furnizoriCanvas = ref(null);
let clientiChartInstance = null;
let furnizoriChartInstance = null;
const isClientiExpanded = ref(false);
const isFurnizoriExpanded = ref(false);
const isClientiRestantExpanded = ref(false);
const isFurnizoriRestantExpanded = ref(false);

// Toggle functions
const toggleClientiExpanded = () => {
  isClientiExpanded.value = !isClientiExpanded.value;
};

const toggleFurnizoriExpanded = () => {
  isFurnizoriExpanded.value = !isFurnizoriExpanded.value;
};

const toggleClientiRestantExpanded = () => {
  isClientiRestantExpanded.value = !isClientiRestantExpanded.value;
};

const toggleFurnizoriRestantExpanded = () => {
  isFurnizoriRestantExpanded.value = !isFurnizoriRestantExpanded.value;
};

// Format currency
const formatCurrency = (amount) => {
  if (!amount && amount !== 0) return "0 RON";
  return new Intl.NumberFormat("ro-RO", {
    style: "currency",
    currency: "RON",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(Math.abs(amount));
};

// Format period label
const formatPeriodLabel = (key) => {
  const labelMap = {
    "7_zile": "7 zile",
    "14_zile": "14 zile",
    "30_zile": "30 zile",
    "60_zile": "60 zile",
    "90_zile": "90 zile",
    peste_90_zile: "Peste 90 zile",
  };
  return labelMap[key] || key;
};

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

// Trend class
const getTrendClass = (trend) => {
  if (!trend) return "";
  return {
    "trend-up": trend.direction === "up",
    "trend-down": trend.direction === "down",
    "trend-neutral": trend.direction === "neutral",
  };
};

// Trend icon
const getTrendIcon = (trend) => {
  if (!trend) return "";
  switch (trend.direction) {
    case "up":
      return "▲";
    case "down":
      return "▼";
    case "neutral":
      return "▶";
    default:
      return "";
  }
};

// Check if sparkline data exists
const hasSparklineData = computed(() => {
  return (
    props.clientiSparklineData.length > 0 &&
    props.furnizoriSparklineData.length > 0
  );
});

// Initialize Clienți chart
const initializeClientiChart = async () => {
  if (!clientiCanvas.value || props.clientiSparklineData.length === 0) {
    return;
  }

  // Destroy existing chart
  if (clientiChartInstance) {
    clientiChartInstance.destroy();
    clientiChartInstance = null;
  }

  await nextTick();

  const ctx = clientiCanvas.value.getContext("2d");

  // Generate labels
  const labels =
    props.sparklineLabels.length > 0
      ? props.sparklineLabels
      : props.clientiSparklineData.map((_, i) => `L${i + 1}`);

  // Calculează limite pentru clienți
  const clientiMin = Math.min(...props.clientiSparklineData);
  const clientiMax = Math.max(...props.clientiSparklineData);
  const clientiRange = clientiMax - clientiMin;
  const clientiPadding = clientiRange * 0.05;

  clientiChartInstance = new Chart(ctx, {
    type: "line",
    data: {
      labels: labels,
      datasets: [
        {
          label: "Clienți",
          data: props.clientiSparklineData,
          borderColor: "#10b981",
          backgroundColor: "rgba(16, 185, 129, 0.1)",
          borderWidth: 2,
          fill: true,
          tension: 0.4,
          pointRadius: 0, // Ascunde punctele pentru a economisi spațiu
          pointHoverRadius: 4,
          pointHoverBackgroundColor: "#10b981",
          pointHoverBorderColor: "#ffffff",
          pointHoverBorderWidth: 2,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: {
        intersect: false,
        mode: "index",
      },
      plugins: {
        legend: {
          display: false, // Ascunde legenda - e clar din label că e "Clienți"
        },
        tooltip: {
          backgroundColor: "rgba(0, 0, 0, 0.8)",
          titleColor: "#ffffff",
          bodyColor: "#ffffff",
          borderColor: "rgba(255, 255, 255, 0.2)",
          borderWidth: 1,
          cornerRadius: 6,
          displayColors: false,
          callbacks: {
            title: (context) => context[0].label || "",
            label: (context) => {
              const value = context.parsed.y;
              const formatted = new Intl.NumberFormat("ro-RO", {
                style: "currency",
                currency: "RON",
                minimumFractionDigits: 0,
                maximumFractionDigits: 0,
              }).format(value);
              return formatted;
            },
          },
        },
      },
      scales: {
        x: {
          display: true,
          grid: {
            display: false,
            drawBorder: false,
          },
          ticks: {
            color: "rgba(107, 114, 128, 0.7)",
            font: {
              size: 10,
              family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
            },
            maxRotation: 45,
            minRotation: 45,
            maxTicksLimit: 6,
          },
          border: {
            display: false,
          },
        },
        y: {
          display: true,
          min: clientiMin - clientiPadding,
          max: clientiMax + clientiPadding,
          grid: {
            color: "rgba(107, 114, 128, 0.1)",
            drawBorder: false,
          },
          ticks: {
            color: "#10b981",
            font: {
              size: 11,
              family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
            },
            maxTicksLimit: 3,
            callback: function (value) {
              if (value >= 1000000) {
                return (value / 1000000).toFixed(1) + "M";
              } else if (value >= 1000) {
                return (value / 1000).toFixed(0) + "k";
              }
              return value.toFixed(0);
            },
          },
          border: {
            display: false,
          },
        },
      },
    },
  });
};

// Initialize Furnizori chart
const initializeFurnizoriChart = async () => {
  if (!furnizoriCanvas.value || props.furnizoriSparklineData.length === 0) {
    return;
  }

  // Destroy existing chart
  if (furnizoriChartInstance) {
    furnizoriChartInstance.destroy();
    furnizoriChartInstance = null;
  }

  await nextTick();

  const ctx = furnizoriCanvas.value.getContext("2d");

  // Generate labels
  const labels =
    props.sparklineLabels.length > 0
      ? props.sparklineLabels
      : props.furnizoriSparklineData.map((_, i) => `L${i + 1}`);

  // Calculează limite pentru furnizori
  const furnizoriMin = Math.min(...props.furnizoriSparklineData);
  const furnizoriMax = Math.max(...props.furnizoriSparklineData);
  const furnizoriRange = furnizoriMax - furnizoriMin;
  const furnizoriPadding = furnizoriRange * 0.05;

  furnizoriChartInstance = new Chart(ctx, {
    type: "line",
    data: {
      labels: labels,
      datasets: [
        {
          label: "Furnizori",
          data: props.furnizoriSparklineData,
          borderColor: "#ef4444",
          backgroundColor: "rgba(239, 68, 68, 0.1)",
          borderWidth: 2,
          fill: true,
          tension: 0.4,
          pointRadius: 0,
          pointHoverRadius: 4,
          pointHoverBackgroundColor: "#ef4444",
          pointHoverBorderColor: "#ffffff",
          pointHoverBorderWidth: 2,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: {
        intersect: false,
        mode: "index",
      },
      plugins: {
        legend: {
          display: false,
        },
        tooltip: {
          backgroundColor: "rgba(0, 0, 0, 0.8)",
          titleColor: "#ffffff",
          bodyColor: "#ffffff",
          borderColor: "rgba(255, 255, 255, 0.2)",
          borderWidth: 1,
          cornerRadius: 6,
          displayColors: false,
          callbacks: {
            title: (context) => context[0].label || "",
            label: (context) => {
              const value = context.parsed.y;
              const formatted = new Intl.NumberFormat("ro-RO", {
                style: "currency",
                currency: "RON",
                minimumFractionDigits: 0,
                maximumFractionDigits: 0,
              }).format(value);
              return formatted;
            },
          },
        },
      },
      scales: {
        x: {
          display: true,
          grid: {
            display: false,
            drawBorder: false,
          },
          ticks: {
            color: "rgba(107, 114, 128, 0.7)",
            font: {
              size: 10,
              family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
            },
            maxRotation: 45,
            minRotation: 45,
            maxTicksLimit: 6,
          },
          border: {
            display: false,
          },
        },
        y: {
          display: true,
          min: furnizoriMin - furnizoriPadding,
          max: furnizoriMax + furnizoriPadding,
          grid: {
            color: "rgba(107, 114, 128, 0.1)",
            drawBorder: false,
          },
          ticks: {
            color: "#ef4444",
            font: {
              size: 11,
              family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
            },
            maxTicksLimit: 3,
            callback: function (value) {
              if (value >= 1000000) {
                return (value / 1000000).toFixed(1) + "M";
              } else if (value >= 1000) {
                return (value / 1000).toFixed(0) + "k";
              }
              return value.toFixed(0);
            },
          },
          border: {
            display: false,
          },
        },
      },
    },
  });
};

// Watch for data changes
watch(
  () => [
    props.clientiSparklineData,
    props.furnizoriSparklineData,
    props.sparklineLabels,
  ],
  async () => {
    await Promise.all([initializeClientiChart(), initializeFurnizoriChart()]);
  },
  { deep: true },
);

// Lifecycle hooks
onMounted(async () => {
  await Promise.all([initializeClientiChart(), initializeFurnizoriChart()]);
});

onBeforeUnmount(() => {
  if (clientiChartInstance) {
    clientiChartInstance.destroy();
    clientiChartInstance = null;
  }
  if (furnizoriChartInstance) {
    furnizoriChartInstance.destroy();
    furnizoriChartInstance = null;
  }
});
</script>

<style scoped>
.balance-dual-card {
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--card-radius, 8px);
  padding: var(--space-lg, 1.5rem);
  transition: all 0.3s ease;
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.balance-dual-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: var(--color-primary, #3b82f6);
}

/* Header */
.card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.card-icon {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--color-bg-secondary, #f8fafc);
  border-radius: var(--radius-sm, 4px);
}

.card-title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-semibold, 600);
  color: var(--color-text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Values section - Split layout */
.values-section {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: start;
}

.value-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.value-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-medium, 500);
  color: var(--color-text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.value-amount {
  font-size: var(--text-xl, 1.5rem);
  font-weight: var(--font-bold, 700);
  line-height: 1.2;
}

.value-amount.positive {
  color: var(--color-success, #10b981);
}

.value-amount.negative {
  color: var(--color-danger, #ef4444);
}

.value-amount.neutral {
  color: var(--color-text, #111827);
}

.value-trend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-medium, 500);
}

.trend-up {
  color: var(--color-success, #10b981);
}

.trend-down {
  color: var(--color-danger, #ef4444);
}

.trend-neutral {
  color: var(--color-text-secondary, #6b7280);
}

.trend-icon {
  font-size: 0.75rem;
}

.divider {
  width: 1px;
  height: 100%;
  background: var(--color-border, #e5e7eb);
  min-height: 60px;
}

/* Dual sparkline container - stack vertical */
.sparkline-dual-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

.sparkline-wrapper {
  width: 100%;
  background: var(--color-bg-secondary, #f8fafc);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 4px;
  padding: 0.5rem;
}

.sparkline-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-semibold, 600);
  color: var(--color-text-secondary, #6b7280);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Culori distinctive pentru label-uri */
.sparkline-wrapper:first-child .sparkline-label {
  color: #10b981; /* Verde pentru Clienți */
}

.sparkline-wrapper:last-child .sparkline-label {
  color: #ef4444; /* Roșu pentru Furnizori */
}

.sparkline-chart {
  width: 100%;
  height: 120px; /* Înălțime mărită pentru fiecare grafic individual */
  position: relative;
}

.sparkline-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Breakdown section */
.breakdown-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.breakdown-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.breakdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 0.5rem;
  border-radius: var(--radius-sm, 4px);
  transition: all 0.2s ease;
  font-weight: var(--font-semibold, 600);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.breakdown-header:hover {
  background: var(--color-bg-secondary, #f8fafc);
}

.breakdown-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.collapse-icon {
  font-size: 0.75rem;
  color: var(--color-text-secondary, #6b7280);
  transition: transform 0.2s ease;
  display: inline-block;
  width: 1rem;
}

.breakdown-label {
  font-size: 0.9rem;
  color: var(--color-text, #111827);
}

.breakdown-value {
  font-size: 1rem;
  font-weight: var(--font-semibold, 600);
  font-family: monospace;
  color: var(--color-text, #111827);
}

.breakdown-subitems {
  padding-left: 0;
  animation: slideDown 0.2s ease-out;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

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

.breakdown-subitem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0.5rem;
}

.breakdown-subitem-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.breakdown-subitem-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-sm, 4px);
  transition: all 0.2s ease;
}

.breakdown-subitem-header:hover {
  background: var(--color-bg-secondary, #f8fafc);
}

.subitem-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.collapse-icon-small {
  font-size: 0.65rem;
  color: var(--color-text-secondary, #6b7280);
  transition: transform 0.2s ease;
  display: inline-block;
  width: 0.75rem;
}

.breakdown-sublabel {
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.9rem;
}

.breakdown-subvalue {
  font-weight: var(--font-medium, 500);
  font-family: monospace;
  font-size: 1rem;
  color: var(--color-text, #111827);
}

.breakdown-perioade {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  animation: slideDown 0.2s ease-out;
}

.perioada-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

.perioada-label {
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.9rem;
}

.perioada-value {
  font-family: monospace;
  font-weight: var(--font-medium, 500);
  color: var(--color-text, #111827);
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .balance-dual-card {
    min-height: 380px;
    padding: var(--space-md, 1rem);
  }

  .values-section {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .divider {
    width: 100%;
    height: 1px;
    min-height: 1px;
  }

  .value-amount {
    font-size: var(--text-lg, 1.125rem);
  }

  .sparkline-chart {
    height: 100px;
  }
}

@media (max-width: 480px) {
  .balance-dual-card {
    min-height: 340px;
    padding: 0.5rem 0.25rem;
    gap: 0.5rem;
    border-radius: 0;
  }

  .card-header {
    padding: 0.25rem;
    margin-bottom: 0.25rem;
  }

  .card-icon {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.875rem;
  }

  .card-title {
    font-size: 0.625rem;
  }

  .value-amount {
    font-size: var(--text-base, 1rem);
  }

  .sparkline-chart {
    height: 120px;
  }

  .sparkline-wrapper {
    padding: 0;
    border: none;
  }

  .values-section {
    gap: 0.5rem;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .balance-dual-card {
    --color-bg: #1f2937;
    --color-bg-secondary: #374151;
    --color-border: #4b5563;
    --color-text: #f9fafb;
    --color-text-secondary: #d1d5db;
  }
}
</style>
