/* =========================================
   card.css
   カード共通スタイルとダークモード対応
   ========================================= */

/* ========== Base Card Styles ========== */
.card {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: var(--spacing-lg);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background-color: var(--bg-primary);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.1), 0 4px 8px -1px rgba(0, 0, 0, 0.06);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--border-light);
  padding: 1.25rem 1.5rem;
}

.card-body {
  padding: 1.5rem;
}

.card-footer {
  background-color: var(--bg-secondary);
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-light);
}

.card-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

/* Shadow Card */
.card.shadow {
  box-shadow: var(--shadow-md);
}

/* ========== Dark Mode Support ========== */
.dark-mode .card,
[data-theme="dark"] .card {
  background-color: var(--dm-card);
  border: 1px solid var(--dm-border);
}

.dark-mode .card:hover,
[data-theme="dark"] .card:hover {
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-2px);
}

.dark-mode .card-header,
[data-theme="dark"] .card-header {
  background-color: transparent;
  border-bottom-color: var(--dm-border);
}

.dark-mode .card-body,
[data-theme="dark"] .card-body {
  color: var(--dm-foreground);
}

.dark-mode .card-footer,
[data-theme="dark"] .card-footer {
  background-color: rgba(71, 85, 105, 0.3);
  border-top-color: var(--dm-border);
}

.dark-mode .card-title,
[data-theme="dark"] .card-title {
  color: var(--dm-foreground);
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
  .card-header {
    padding: 1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .card-footer {
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 576px) {
  .card {
    margin-bottom: 1rem;
  }
}