/*
 * Card Component
 *
 * A reusable card component with header, body, and footer sections.
 * Used for issue cards, user cards, and content grouping throughout the application.
 *
 * Usage:
 *   <%= render 'shared/card', header: 'Title' do %>
 *     Card content here
 *   <% end %>
 *
 * With all sections:
 *   <%= render 'shared/card', header: 'Title', footer: footer_content do %>
 *     Card content here
 *   <% end %>
 */

@layer components {

/* ============================================
 * BASE CARD STYLES
 * ============================================ */

.card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  /* ============================================
   * CARD VARIANTS
   * ============================================ */

  /* ============================================
   * CARD STATUS VARIANTS
   * ============================================ */

  /* ============================================
   * RESPONSIVE ADJUSTMENTS
   * ============================================ */
}

  /* ============================================
   * CARD HEADER
   * ============================================ */

  .card-header {
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);

    /* ============================================
     * CARD WITH ICON IN HEADER
     * ============================================ */
  }

    .card-header-content {
      flex: 1;
      min-inline-size: 0;
    }

    .card-header-actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-shrink: 0;
    }

    .card-header-icon {
      inline-size: 40px;
      block-size: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: var(--color-bg-tertiary);
      color: var(--color-text-secondary);
    }

      .card-header-icon svg {
        inline-size: 20px;
        block-size: 20px;
      }

      .card-header-icon--primary {
        background: var(--color-primary-50);
        color: var(--color-primary-600);
      }

      .card-header-icon--success {
        background: var(--color-success-50);
        color: var(--color-success-600);
      }

      .card-header-icon--warning {
        background: var(--color-warning-50);
        color: var(--color-warning-600);
      }

      .card-header-icon--error {
        background: var(--color-error-50);
        color: var(--color-error-600);
      }

  .card-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
  }

  .card-subtitle {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
  }

  /* ============================================
   * CARD BODY
   * ============================================ */

  .card-body {
    padding: var(--space-4);
    flex: 1;
  }

    .card-body:empty {
      display: none;
    }

    /* Empty state styling */
    .card-body-empty {
      color: var(--color-text-tertiary);
      font-size: var(--text-sm);
      font-style: italic;
      text-align: center;
      padding: var(--space-8) var(--space-4);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: var(--space-2);
    }

  /* ============================================
   * CARD FOOTER
   * ============================================ */

  .card-footer {
    padding: var(--space-4);
    border-block-start: 1px solid var(--color-border-primary);
    background: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

    .card-footer-start {
      flex: 1;
      min-inline-size: 0;
    }

    .card-footer-end {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-shrink: 0;
    }

    /* Footer with only buttons (right-aligned) */
    .card-footer--actions {
      justify-content: flex-end;
    }

    /* Footer with link */
    .card-footer-link {
      font-size: var(--text-sm);
      color: var(--color-text-link);
      text-decoration: none;
      transition: color 0.15s ease;
    }

      .card-footer-link:hover {
        color: var(--color-text-link-hover);
        text-decoration: underline;
      }

  /* ============================================
   * CARD DIVIDER
   * ============================================ */

  .card-divider {
    block-size: 1px;
    background: var(--color-border-primary);
    margin: 0;
    border: none;
  }

  /* ============================================
   * CARD LIST (for cards containing lists)
   * ============================================ */

  .card-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

    .card-list-item {
      padding: var(--space-3) 0;
      border-block-end: 1px solid var(--color-border-primary);
    }

      .card-list-item:first-child {
        padding-block-start: 0;
      }

      .card-list-item:last-child {
        padding-block-end: 0;
        border-block-end: none;
      }

  /* Elevated card with shadow */
  .card--elevated {
    box-shadow: var(--shadow-md);
    border-color: transparent;
  }

  /* Interactive card (clickable) */
  .card--interactive {
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }

    .card--interactive:hover {
      box-shadow: var(--shadow-lg);
      border-color: var(--color-border-secondary);
    }

    .card--interactive:active {
      transform: translateY(1px);
    }

  /* Compact card with smaller padding */
    .card--compact .card-header {
      padding: var(--space-3);
    }

    .card--compact .card-body {
      padding: var(--space-3);
    }

    .card--compact .card-footer {
      padding: var(--space-3);
    }

  /* Full-height card (fills container) */
  .card--full-height {
    block-size: 100%;
  }

  /* Card without header border */
    .card--seamless .card-header {
      border-block-end: none;
      padding-block-end: var(--space-2);
    }

    .card--seamless .card-body {
      padding-block-start: 0;
    }

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

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

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

  .card--info {
    border-inline-start: 4px solid var(--color-primary-500);
  }

  @media (width <= 640px) {
    .card-header {
      padding: var(--space-3);
      flex-direction: column;
      align-items: flex-start;
    }

      .card-header-actions {
        inline-size: 100%;
        justify-content: flex-end;
        margin-block-start: var(--space-2);
      }

    .card-body {
      padding: var(--space-3);
    }

    .card-footer {
      padding: var(--space-3);
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-2);
    }

      .card-footer-end {
        justify-content: flex-end;
      }
  }

} /* @layer components */