/**
 * Card Component System
 *
 * Standardized card/container styles using CSS variables.
 * Replaces 11 different card types with unified system.
 *
 * Usage:
 *   <div class="card">Basic card</div>
 *   <div class="card card-compact">Compact padding</div>
 *   <div class="card card-hover">Hoverable card</div>
 */

/* ========================================
   CARD VARIABLES
======================================== */

:root {
    /* Card sizing - Aliases to global design tokens */
    --card-padding: var(--spacing-lg);      /* 16px */
    --card-padding-sm: var(--spacing-md);   /* 12px */
    --card-padding-lg: var(--spacing-2xl);  /* 24px */

    --card-radius: var(--radius-lg);                  /* 8px */
    --card-border-width: var(--border-width-thin);    /* 1px */

    /* Card shadows - Using global shadow scale */
    --card-shadow: var(--shadow-sm);        /* 0 1px 3px rgba(0,0,0,0.1) */
    --card-shadow-hover: var(--shadow-md);  /* 0 4px 6px rgba(0,0,0,0.15) */

    /* Transitions */
    --card-transition: var(--transition-base); /* 200ms ease */
}

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

.card {
    /* Sizing */
    padding: var(--card-padding);
    border-radius: var(--card-radius);

    /* Styling */
    background: var(--theme-card-bg);
    border: var(--card-border-width) solid var(--theme-card-border);
    box-shadow: var(--card-shadow);

    /* Behavior */
    transition: var(--card-transition);

    /* Layout */
    display: block;
}

/* ========================================
   SIZE VARIANTS
======================================== */

.card-compact,
.card-sm {
    padding: var(--card-padding-sm);
}

.card-spacious,
.card-lg {
    padding: var(--card-padding-lg);
}

/* ========================================
   STATE VARIANTS
======================================== */

/* Hoverable Card */
.card-hover {
    cursor: pointer;
}

.card-hover:hover {
    background: var(--theme-card-hover-bg);
    border-color: var(--theme-card-hover-border);
    box-shadow: var(--card-shadow-hover);
}

/* Active/Selected Card */
.card-active,
.card.active {
    background: var(--theme-card-active-bg);
    border-color: var(--theme-card-active-border);
    box-shadow: var(--card-shadow-hover);
}

/* Highlighted Card */
.card-highlight {
    border-color: var(--theme-btn-primary-bg);
    box-shadow: 0 0 0 2px var(--theme-purple-overlay-lightest);
}

/* Scrollable Card */
.card-scrollable {
    overflow: auto;
}

/* ========================================
   SPECIAL VARIANTS
======================================== */

/* Transparent Card */
.card-transparent {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Outlined Card */
.card-outlined {
    background: transparent;
    border: 2px solid var(--theme-card-border);
    box-shadow: none;
}

/* Elevated Card */
.card-elevated {
    box-shadow: 0 4px 16px var(--theme-shadow-lightest);
}

/* ========================================
   CARD HEADER & FOOTER
======================================== */

.card-header {
    padding: var(--card-padding);
    margin: calc(var(--card-padding) * -1);
    margin-bottom: var(--card-padding);
    border-bottom: 1px solid var(--theme-card-border);
    background: var(--theme-card-header-bg, rgba(0, 0, 0, 0.05));
}

.card-footer {
    padding: var(--card-padding);
    margin: calc(var(--card-padding) * -1);
    margin-top: var(--card-padding);
    border-top: 1px solid var(--theme-card-border);
    background: var(--theme-card-footer-bg, rgba(0, 0, 0, 0.05));
}

/* .card-title - MOVED TO components/typography.css (text styling, not card structure) */

.card-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--theme-text-secondary);
}

.card-body {
    /* Default body styling - no extra padding needed */
}

/* ========================================
   CARD LAYOUTS
======================================== */

/* Card Grid */
.card-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Card List */
.card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Card Row (horizontal card) */
.card-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* ========================================
   LEGACY CLASS MAPPINGS (Temporary)
   Remove these after HTML is updated
======================================== */

/* Store Cards */
.store-preview-card,
.store-summary-card {
    padding: var(--card-padding-sm);
    border-radius: var(--card-radius);
    background: var(--theme-card-bg);
    border: var(--card-border-width) solid var(--theme-card-border);
}

/* Points Boxes - REMOVED: Commerce-specific, belongs in commerce.css:742 */

/* Feature Items */
.feature-item {
    padding: var(--card-padding-lg);
    border-radius: var(--card-radius);
    background: var(--theme-card-bg);
    border: var(--card-border-width) solid var(--theme-card-border);
    transition: var(--card-transition);
}

.feature-item:hover {
    background: var(--theme-card-hover-bg);
    border-color: var(--theme-card-hover-border);
}

/* Cart Items - MOVED TO commerce.css (commerce-specific styling) */

/* ========================================
   SPECIFIC CARD TYPES (Common Patterns)
======================================== */

/* List Item Card (for forum posts, tickets, etc.) */
.card-list-item {
    padding: var(--card-padding);
    border-radius: var(--card-radius);
    background: var(--theme-card-bg);
    border: var(--card-border-width) solid var(--theme-card-border);
    margin-bottom: 8px;
    transition: var(--card-transition);
}

.card-list-item:hover {
    background: var(--theme-card-hover-bg);
}

.card-list-item.unread {
    border-left: 4px solid var(--theme-btn-danger-bg);
}

/* Stat Card (for dashboard statistics) */
.card-stat {
    padding: var(--card-padding-lg);
    border-radius: var(--card-radius);
    background: var(--theme-card-bg);
    border: var(--card-border-width) solid var(--theme-card-border);
    text-align: center;
}

.card-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--theme-card-hover-bg);
    margin-bottom: 8px;
}

.card-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-secondary);
}

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

@media (max-width: 768px) {
    .card {
        padding: 12px;
    }

    .card-compact {
        padding: 8px;
    }

    .card-spacious {
        padding: 16px;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }
}