/**
 * Shared Financial Card Components
 * Used by both Watchlist and Portfolio (Stocks)
 * Contains base styles, variables, and common components
 *
 * @since 1.1.5
 */

/* ==========================================================================
   CSS Variables - All reusable values
   ========================================================================== */

:root {
  /* Card Base */
  --pfm-card-padding: 18px;
  --pfm-card-border-radius: 8px;
  --pfm-card-border-color: #dee2e6;
  --pfm-card-bg: #fff;
  --pfm-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --pfm-card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.08);

  /* Typography */
  --pfm-font-size-price: 22px;
  --pfm-font-size-change: 14px;
  --pfm-font-size-label: 12px;
  --pfm-font-size-symbol: 18px;
  --pfm-font-size-badge: 11px;

  --pfm-font-weight-price: 700;
  --pfm-font-weight-change: 600;
  --pfm-font-weight-symbol: 600;
  --pfm-font-weight-badge: 600;

  /* Colors */
  --pfm-color-text-primary: #212529;
  --pfm-color-text-secondary: #6c757d;
  --pfm-color-positive: #155724;
  --pfm-color-positive-bg: #d4edda;
  --pfm-color-negative: #721c24;
  --pfm-color-negative-bg: #f8d7da;

  /* Badges */
  --pfm-badge-stock-bg: #007bff;
  --pfm-badge-stock-color: #fff;
  --pfm-badge-crypto-bg: #6f42c1;
  --pfm-badge-crypto-color: #fff;

  /* Chart Heights */
  --pfm-chart-height-sm: 120px;
  --pfm-chart-height-md: 150px;
  --pfm-chart-height-lg: 300px;

  /* Grid */
  --pfm-grid-gap: 16px;
  --pfm-grid-minmax: 375px;
}

/* ==========================================================================
   Card Base Components
   ========================================================================== */

/* Base card structure - applies to both watchlist items and stock cards */
.pfm-card,
.pn-personal-finance-manager-watchlist-item,
.pn-personal-finance-manager-stock-card {
  background-color: var(--pfm-card-bg);
  border: 1px solid var(--pfm-card-border-color);
  border-radius: var(--pfm-card-border-radius);
  padding: var(--pfm-card-padding);
  transition: box-shadow 0.2s ease;
}

.pfm-card:hover,
.pn-personal-finance-manager-watchlist-item:hover,
.pn-personal-finance-manager-stock-card:hover {
  box-shadow: var(--pfm-card-shadow-hover);
}

/* Card Header */
.pfm-card__header,
.pn-personal-finance-manager-watchlist-item-header,
.pn-personal-finance-manager-stock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* Card Body */
.pfm-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Symbol/Name Display */
.pfm-card-symbol,
.pn-personal-finance-manager-watchlist-item-symbol {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pfm-card-symbol-text,
.pn-personal-finance-manager-watchlist-display-name {
  font-size: var(--pfm-font-size-symbol);
  font-weight: var(--pfm-font-weight-symbol);
  color: var(--pfm-color-text-primary);
}

.pfm-card-symbol-name,
.pn-personal-finance-manager-watchlist-symbol-name {
  font-size: var(--pfm-font-size-label);
  color: var(--pfm-color-text-secondary);
  margin-top: 2px;
}

/* ==========================================================================
   Type Badges
   ========================================================================== */

.pfm-card-badge,
.pn-personal-finance-manager-watchlist-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--pfm-font-size-badge);
  font-weight: var(--pfm-font-weight-badge);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pfm-card-badge--stock,
.pn-personal-finance-manager-watchlist-type-stock {
  background-color: var(--pfm-badge-stock-bg);
  color: var(--pfm-badge-stock-color);
}

.pfm-card-badge--crypto,
.pn-personal-finance-manager-watchlist-type-crypto {
  background-color: var(--pfm-badge-crypto-bg);
  color: var(--pfm-badge-crypto-color);
}

/* ==========================================================================
   Price Display Components
   ========================================================================== */

/* Price Section Container */
.pfm-card-price-section,
.pn-personal-finance-manager-watchlist-price-section {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* Current Price */
.pfm-card-price,
.pn-personal-finance-manager-watchlist-price-value,
.pn-personal-finance-manager-stock-price {
  font-size: var(--pfm-font-size-price);
  font-weight: var(--pfm-font-weight-price);
  color: var(--pfm-color-text-primary);
}

/* Price Change */
.pfm-card-change,
.pn-personal-finance-manager-watchlist-change-value,
.pn-personal-finance-manager-stock-change {
  font-size: var(--pfm-font-size-change);
  font-weight: var(--pfm-font-weight-change);
}

/* Positive/Negative States */
.pfm-card-change--positive,
.pn-personal-finance-manager-watchlist-price-change.positive .pn-personal-finance-manager-watchlist-change-value,
.pn-personal-finance-manager-stock-change.positive {
  color: var(--pfm-color-positive);
  background-color: var(--pfm-color-positive-bg);
  padding: 6px 12px;
  border-radius: 6px;
}

.pfm-card-change--negative,
.pn-personal-finance-manager-watchlist-price-change.negative .pn-personal-finance-manager-watchlist-change-value,
.pn-personal-finance-manager-stock-change.negative {
  color: var(--pfm-color-negative);
  background-color: var(--pfm-color-negative-bg);
  padding: 6px 12px;
  border-radius: 6px;
}

/* Labels */
.pfm-card-label,
.pn-personal-finance-manager-watchlist-price-label,
.pn-personal-finance-manager-watchlist-change-label {
  display: block;
  font-size: var(--pfm-font-size-label);
  color: var(--pfm-color-text-secondary);
  margin-bottom: 4px;
}

/* ==========================================================================
   Chart Components
   ========================================================================== */

/* Chart Container */
.pfm-card-chart,
.pn-personal-finance-manager-watchlist-chart-section,
.pn-personal-finance-manager-stock-chart {
  margin-bottom: 12px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

/* Chart canvas wrapper */
.pfm-card-chart-container,
.pn-personal-finance-manager-watchlist-chart-section .pn-personal-finance-manager-chart-container {
  position: relative;
  height: var(--pfm-chart-height-sm);
}

.pn-personal-finance-manager-stock-chart {
  height: var(--pfm-chart-height-md);
}

.pfm-card-chart canvas,
.pn-personal-finance-manager-watchlist-chart-section canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ==========================================================================
   Grid Layouts
   ========================================================================== */

/* Grid container for cards */
.pfm-card-grid,
.pn-personal-finance-manager-watchlist-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pfm-grid-minmax), 1fr));
  gap: var(--pfm-grid-gap);
}

.pn-personal-finance-manager-stocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.pfm-card-actions,
.pn-personal-finance-manager-watchlist-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
  .pfm-card-grid,
  .pn-personal-finance-manager-watchlist-items,
  .pn-personal-finance-manager-stocks-grid {
    grid-template-columns: 1fr;
  }

  .pfm-card-price-section,
  .pn-personal-finance-manager-watchlist-price-section {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 600px) {
  :root {
    --pfm-card-padding: 16px;
    --pfm-font-size-price: 20px;
  }
}