/* ==========================================================================
   Card Component - Wholesum Design System
   Unified card styles: base card + modifiers + shared note-card component.
   Version: 1.0 | Phase 3 of CSS Unification
   ========================================================================== */

/* ===== BASE CARD STYLES ===== */
.card {
  background-color: var(--color-bg-primary);
  border: 1.5px solid #e8e8e8;
  border-radius: var(--radius-xl);             /* 16px — standard card radius */
  padding: var(--spacing-4);                    /* 16px */
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* ===== ELEVATION MODIFIERS ===== */
.card.elevation-sm {
  box-shadow: var(--shadow-sm);
}

.card.elevation-md {
  box-shadow: var(--shadow-md);
}

.card.elevation-lg {
  box-shadow: var(--shadow-lg);
}

.card.elevation-none {
  box-shadow: none;
}

/* Interactive elevation on hover */
.card.interactive {
  cursor: pointer;
}

.card.interactive:hover {
  box-shadow: var(--shadow-hover);
}

/* ===== PADDING MODIFIERS ===== */
.card.p-sm {
  padding: var(--spacing-2);                    /* 8px */
}

.card.p-md {
  padding: var(--spacing-4);                    /* 16px — default */
}

.card.p-lg {
  padding: var(--spacing-6);                    /* 24px */
}

.card.p-xl {
  padding: var(--spacing-8);                    /* 32px */
}

/* ===== BORDER MODIFIERS ===== */
.card.border-none {
  border: none;
}

.card.border-accent {
  border-left: 4px solid var(--color-primary);
}

.card.border-success {
  border-left: 4px solid var(--color-success);
}

.card.border-warning {
  border-left: 4px solid var(--color-warning);
}

.card.border-error {
  border-left: 4px solid var(--color-error);
}

/* ===== BACKGROUND MODIFIERS ===== */
.card.bg-secondary {
  background-color: var(--color-bg-secondary);
}

.card.bg-tertiary {
  background-color: var(--color-bg-tertiary);
}

.card.bg-success-light {
  background-color: var(--color-success-light);
}

.card.bg-warning-light {
  background-color: var(--color-warning-light);
}

.card.bg-error-light {
  background-color: var(--color-error-light);
}

/* ===== CARD STRUCTURE COMPONENTS ===== */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-4);
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: var(--spacing-4);
}

.card-header.no-border {
  border-bottom: none;
  margin-bottom: var(--spacing-2);
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  margin-top: var(--spacing-2);
}

.card-body {
  flex: 1;
}

.card-body > *:not(:last-child) {
  margin-bottom: var(--spacing-4);
}

.card-footer {
  display: flex;
  gap: var(--spacing-2);
  padding-top: var(--spacing-4);
  border-top: 1px solid #f0f0f0;
  margin-top: var(--spacing-4);
}

.card-footer.no-border {
  border-top: none;
  margin-top: var(--spacing-2);
}

/* ===== DENSITY MODIFIERS ===== */
.card.dense {
  padding: var(--spacing-2);
}

.card.dense .card-header,
.card.dense .card-body > *:not(:last-child) {
  margin-bottom: var(--spacing-2);
}

.card.comfortable {
  padding: var(--spacing-6);
}

.card.spacious {
  padding: var(--spacing-8);
}


/* ==========================================================================
   NOTE CARD — Shared component (used in notes.html + session.html)
   Extracted from duplicated inline styles.
   ========================================================================== */

.note-card {
  background: var(--color-bg-primary);
  border: 1.5px solid #e8e8e8;
  border-radius: var(--radius-xl);              /* 16px */
  padding: var(--spacing-4);                    /* 16px */
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}

.note-card:hover {
  box-shadow: var(--shadow-hover);
}

/* Done state */
.note-card.done {
  background: var(--color-bg-tertiary);
  border-color: #e8e8e8;
}

/* ── Note text ── */
.note-text {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text-primary);
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.note-card.done .note-text {
  color: var(--color-gray-400);
  text-decoration: line-through;
}

/* ── Note footer ── */
.note-footer {
  display: flex;
  align-items: center;
  margin-top: var(--spacing-3);                 /* 12px */
}

/* ── Note checkbox ── */
.note-checkbox {
  width: 20px;
  height: 20px;
  border: 1.5px solid #ccc;
  border-radius: var(--radius-sm);              /* 4px */
  background: var(--color-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}

.note-card.done .note-checkbox {
  border-color: #bbb;
  background: var(--color-bg-tertiary);
}


/* ==========================================================================
   CARD GRID — Responsive grid layout for cards
   ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-4);                        /* 16px — standardized */
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}