/**
 * IFINSTA Unified Card System
 *
 * A comprehensive, BEM-based card system that consolidates all card variations
 * into a single, maintainable structure.
 *
 * Principles:
 * 1. Single base class (.ifinsta-card) for all cards
 * 2. Modifiers for variations (--modifier)
 * 3. Elements for children (__element)
 * 4. Composition over duplication
 *
 * Usage:
 *   Base: <div class="ifinsta-card">...</div>
 *   With modifiers: <div class="ifinsta-card ifinsta-card--interactive ifinsta-card--p-6">...</div>
 *   With elements:
 *     <div class="ifinsta-card">
 *       <div class="ifinsta-card__header">...</div>
 *       <div class="ifinsta-card__body">...</div>
 *     </div>
 */

@import url('../variables.css');

/* ==========================================================================
   BASE CARD
   Single source of truth for ALL cards
   ========================================================================== */
.ifinsta-card {
    /* Core card properties */
    background: var(--ifinsta-bg-elevated);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-xl);
    box-shadow: var(--ifinsta-shadow-sm);
    overflow: hidden;
    transition: var(--ifinsta-transition-base);

    /* Default spacing */
    padding: var(--ifinsta-space-4);
}

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

/* ==========================================================================
   CARD MODIFIERS
   Composable variations without duplication
   ========================================================================== */

/* ---------- Interactive (clickable) cards ---------- */
.ifinsta-card--interactive {
    cursor: pointer;
}

.ifinsta-card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--ifinsta-shadow-lg);
    border-color: var(--ifinsta-primary-200);
}

.ifinsta-card--interactive:active {
    transform: translateY(0);
    box-shadow: var(--ifinsta-shadow-sm);
}

/* Link cards */
.ifinsta-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ---------- Padding variants ---------- */
.ifinsta-card--p-0 { padding: 0; }
.ifinsta-card--p-2 { padding: var(--ifinsta-space-2); }
.ifinsta-card--p-3 { padding: var(--ifinsta-space-3); }
.ifinsta-card--p-4 { padding: var(--ifinsta-space-4); }
.ifinsta-card--p-5 { padding: var(--ifinsta-space-5); }
.ifinsta-card--p-6 { padding: var(--ifinsta-space-6); }
.ifinsta-card--p-8 { padding: var(--ifinsta-space-8); }

/* ---------- Visual style variants ---------- */

/* Flat (no shadow) */
.ifinsta-card--flat {
    box-shadow: none;
}

/* Elevated (more shadow) */
.ifinsta-card--elevated {
    box-shadow: var(--ifinsta-shadow-lg);
}

.ifinsta-card--elevated:hover {
    box-shadow: var(--ifinsta-shadow-xl);
}

/* Bordered accent variants */
.ifinsta-card--primary { border-color: var(--ifinsta-primary-200); }
.ifinsta-card--success { border-color: var(--ifinsta-success-200); }
.ifinsta-card--warning { border-color: var(--ifinsta-warning-200); }
.ifinsta-card--danger { border-color: var(--ifinsta-danger-200); }

.ifinsta-card--primary.ifinsta-card--interactive:hover { border-color: var(--ifinsta-primary); }
.ifinsta-card--success.ifinsta-card--interactive:hover { border-color: var(--ifinsta-success); }
.ifinsta-card--warning.ifinsta-card--interactive:hover { border-color: var(--ifinsta-warning); }
.ifinsta-card--danger.ifinsta-card--interactive:hover { border-color: var(--ifinsta-danger); }

/* ---------- Layout variants ---------- */

/* Vertical stack layout */
.ifinsta-card--vertical {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-3);
}

/* Horizontal layout */
.ifinsta-card--horizontal {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--ifinsta-space-4);
}

/* Centered content */
.ifinsta-card--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Full height */
.ifinsta-card--full-height {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ifinsta-card--full-height .ifinsta-card__body {
    flex: 1;
}

/* ==========================================================================
   CARD ELEMENTS
   Children of cards using BEM elements
   ========================================================================== */

/* ---------- Header ---------- */
.ifinsta-card__header {
    padding: var(--ifinsta-space-5) var(--ifinsta-space-6);
    border-bottom: 1px solid var(--ifinsta-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ifinsta-space-3);
}

.ifinsta-card--p-4 .ifinsta-card__header,
.ifinsta-card--p-2 .ifinsta-card__header,
.ifinsta-card--p-3 .ifinsta-card__header {
    padding: var(--ifinsta-space-4);
}

.ifinsta-card--p-6 .ifinsta-card__header,
.ifinsta-card--p-8 .ifinsta-card__header {
    padding: var(--ifinsta-space-6);
}

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

.ifinsta-card__header-subtitle {
    font-size: var(--ifinsta-text-sm);
    color: var(--ifinsta-text-muted);
    margin: var(--ifinsta-space-1) 0 0;
}

.ifinsta-card__header-actions {
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
    margin-left: auto;
}

/* ---------- Body ---------- */
.ifinsta-card__body {
    padding: var(--ifinsta-space-6);
    flex: 1;
}

.ifinsta-card--p-4 .ifinsta-card__body,
.ifinsta-card--p-2 .ifinsta-card__body,
.ifinsta-card--p-3 .ifinsta-card__body {
    padding: var(--ifinsta-space-4);
}

.ifinsta-card--p-6 .ifinsta-card__body,
.ifinsta-card--p-8 .ifinsta-card__body {
    padding: var(--ifinsta-space-6);
}

/* ---------- Footer ---------- */
.ifinsta-card__footer {
    padding: var(--ifinsta-space-4) var(--ifinsta-space-6);
    border-top: 1px solid var(--ifinsta-border);
    background: var(--ifinsta-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ifinsta-space-3);
}

.ifinsta-card--p-4 .ifinsta-card__footer,
.ifinsta-card--p-2 .ifinsta-card__footer,
.ifinsta-card--p-3 .ifinsta-card__footer {
    padding: var(--ifinsta-space-4);
}

.ifinsta-card--p-6 .ifinsta-card__footer,
.ifinsta-card--p-8 .ifinsta-card__footer {
    padding: var(--ifinsta-space-6);
}

/* ---------- Title & Text ---------- */
.ifinsta-card__title {
    font-size: var(--ifinsta-text-lg);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text);
    margin: 0 0 var(--ifinsta-space-2);
}

.ifinsta-card__text {
    font-size: var(--ifinsta-text-base);
    color: var(--ifinsta-text-secondary);
    line-height: var(--ifinsta-leading-relaxed);
    margin: 0;
}

.ifinsta-card__text--muted {
    color: var(--ifinsta-text-muted);
    font-size: var(--ifinsta-text-sm);
}

/* ---------- Icon ---------- */
.ifinsta-card__icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--ifinsta-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ifinsta-text-xl);
    flex-shrink: 0;
}

.ifinsta-card__icon--sm {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--ifinsta-text-lg);
}

.ifinsta-card__icon--lg {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--ifinsta-radius-xl);
    font-size: 1.5rem;
}

.ifinsta-card__icon--xl {
    width: 4rem;
    height: 4rem;
    border-radius: var(--ifinsta-radius-xl);
    font-size: 2rem;
}

/* Icon color variants */
.ifinsta-card__icon--primary { background: var(--ifinsta-primary-100); color: var(--ifinsta-primary-600); }
.ifinsta-card__icon--success { background: var(--ifinsta-success-100); color: var(--ifinsta-success-600); }
.ifinsta-card__icon--warning { background: var(--ifinsta-warning-100); color: var(--ifinsta-warning-600); }
.ifinsta-card__icon--danger { background: var(--ifinsta-danger-100); color: var(--ifinsta-danger-600); }
.ifinsta-card__icon--secondary { background: var(--ifinsta-bg-tertiary); color: var(--ifinsta-text-secondary); }

/* ==========================================================================
   SPECIALIZED CARD COMPOSITIONS
   Common patterns using the base card + modifiers
   ========================================================================== */

/* ---------- Stat Card ---------- */
.ifinsta-card--stat {
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-6);
}

.ifinsta-card--stat.ifinsta-card--interactive:hover {
    border-color: var(--ifinsta-primary-200);
}

.ifinsta-card__stat-label {
    font-size: var(--ifinsta-text-sm);
    color: var(--ifinsta-text-muted);
    font-weight: var(--ifinsta-font-medium);
}

.ifinsta-card__stat-value {
    font-size: var(--ifinsta-text-3xl);
    font-weight: var(--ifinsta-font-bold);
    color: var(--ifinsta-text);
    letter-spacing: -0.025em;
}

.ifinsta-card__stat-trend {
    font-size: var(--ifinsta-text-sm);
    font-weight: var(--ifinsta-font-medium);
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-1);
}

.ifinsta-card__stat-trend--up { color: var(--ifinsta-success); }
.ifinsta-card__stat-trend--down { color: var(--ifinsta-danger); }

.ifinsta-card__stat-meta {
    font-size: var(--ifinsta-text-xs);
    color: var(--ifinsta-text-muted);
}

/* ---------- Settings Card ---------- */
.ifinsta-card--settings {
    display: flex;
    flex-direction: column;
    padding: var(--ifinsta-space-6);
    text-decoration: none;
    color: inherit;
}

.ifinsta-card--settings:hover {
    border-color: var(--ifinsta-primary);
}

.ifinsta-card__settings-icon {
    width: 56px;
    height: 56px;
    background: var(--ifinsta-primary-100);
    border-radius: var(--ifinsta-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ifinsta-space-4);
    font-weight: bold;
    color: var(--ifinsta-primary);
    font-size: 1.5rem;
}

/* ---------- Empty State Card ---------- */
.ifinsta-card--empty {
    text-align: center;
    padding: var(--ifinsta-space-12) var(--ifinsta-space-8);
}

.ifinsta-card__empty-icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto var(--ifinsta-space-6);
    background: var(--ifinsta-bg-tertiary);
    border-radius: var(--ifinsta-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

.ifinsta-card__empty-title {
    font-size: var(--ifinsta-text-xl);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text);
    margin: 0 0 var(--ifinsta-space-2);
}

.ifinsta-card__empty-text {
    font-size: var(--ifinsta-text-base);
    color: var(--ifinsta-text-muted);
    margin: 0 0 var(--ifinsta-space-6);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Plan/Pricing Card ---------- */
.ifinsta-card--plan {
    padding: var(--ifinsta-space-6);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ifinsta-card--plan-featured {
    border-color: var(--ifinsta-primary);
    box-shadow: var(--ifinsta-shadow-lg), 0 0 0 2px var(--ifinsta-primary-alpha-20);
}

.ifinsta-card__plan-header {
    text-align: center;
    padding-bottom: var(--ifinsta-space-6);
    border-bottom: 1px solid var(--ifinsta-border);
    margin-bottom: var(--ifinsta-space-6);
}

.ifinsta-card__plan-name {
    font-size: var(--ifinsta-text-xl);
    font-weight: var(--ifinsta-font-bold);
    color: var(--ifinsta-text);
    margin: 0 0 var(--ifinsta-space-2);
}

.ifinsta-card__plan-price {
    font-size: var(--ifinsta-text-4xl);
    font-weight: var(--ifinsta-font-extrabold);
    color: var(--ifinsta-text);
    letter-spacing: -0.02em;
}

.ifinsta-card__plan-price span {
    font-size: var(--ifinsta-text-lg);
    font-weight: var(--ifinsta-font-normal);
    color: var(--ifinsta-text-muted);
}

.ifinsta-card__plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--ifinsta-space-6);
    flex: 1;
}

.ifinsta-card__plan-features li {
    padding: var(--ifinsta-space-2) 0;
    color: var(--ifinsta-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
}

.ifinsta-card__plan-cta {
    margin-top: auto;
}

/* ==========================================================================
   CARD GROUPS / GRIDS
   Layout patterns for multiple cards
   ========================================================================== */

.ifinsta-card-grid {
    display: grid;
    gap: var(--ifinsta-space-6);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.ifinsta-card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.ifinsta-card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.ifinsta-card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .ifinsta-card-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ifinsta-card-grid,
    .ifinsta-card-grid--2,
    .ifinsta-card-grid--3,
    .ifinsta-card-grid--4 {
        grid-template-columns: 1fr;
    }
}

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

@media (max-width: 768px) {
    .ifinsta-card {
        padding: var(--ifinsta-space-3);
        border-radius: var(--ifinsta-radius-lg);
    }

    .ifinsta-card__header,
    .ifinsta-card__body,
    .ifinsta-card__footer {
        padding: var(--ifinsta-space-4);
    }

    .ifinsta-card--stat .ifinsta-card__stat-value {
        font-size: var(--ifinsta-text-2xl);
    }

    .ifinsta-card--horizontal {
        flex-direction: column;
    }
}

/* ==========================================================================
COMPATIBILITY SUPPORT
   Keep old classes working during migration
   ========================================================================== */

/* Classic stat card support */
.ifinsta-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-3);
    padding: var(--ifinsta-space-6);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-xl);
    background: var(--ifinsta-card-bg);
    box-shadow: var(--ifinsta-shadow-sm);
    overflow: hidden;
}

.ifinsta-stat-card__icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--ifinsta-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ifinsta-stat-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.ifinsta-stat-card__icon--primary {
    background: var(--ifinsta-primary-100);
    color: var(--ifinsta-primary-600);
}

.ifinsta-stat-card__icon--success {
    background: var(--ifinsta-success-100);
    color: var(--ifinsta-success-600);
}

.ifinsta-stat-card__icon--info {
    background: var(--ifinsta-info-100);
    color: var(--ifinsta-info-600);
}

.ifinsta-stat-card__icon--warning {
    background: var(--ifinsta-warning-100);
    color: var(--ifinsta-warning-600);
}

.ifinsta-stat-card__icon--danger {
    background: var(--ifinsta-danger-100);
    color: var(--ifinsta-danger-600);
}

.ifinsta-stat-card__icon--secondary {
    background: var(--ifinsta-bg-tertiary);
    color: var(--ifinsta-text-secondary);
}

.ifinsta-stat-card__label {
    font-size: var(--ifinsta-text-sm);
    color: var(--ifinsta-text-muted);
    font-weight: var(--ifinsta-font-medium);
}

.ifinsta-stat-card__value {
    font-size: var(--ifinsta-text-3xl);
    font-weight: var(--ifinsta-font-bold);
    color: var(--ifinsta-text);
    letter-spacing: -0.025em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ifinsta-stat-card__trend {
    font-size: var(--ifinsta-text-sm);
    font-weight: var(--ifinsta-font-medium);
    color: var(--ifinsta-text-muted);
    display: flex;
    align-items: center;
    gap: var(--ifinsta-space-2);
}

.ifinsta-stat-card__trend::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ifinsta-success);
    flex-shrink: 0;
}

.ifinsta-stat-card__trend--up {
    color: var(--ifinsta-success);
}

.ifinsta-stat-card__trend--up::before {
    background: var(--ifinsta-success);
}

.ifinsta-stat-card__trend--down {
    color: var(--ifinsta-danger);
}

.ifinsta-stat-card__trend--down::before {
    background: var(--ifinsta-danger);
}

.ifinsta-stat-card__trend--neutral::before {
    background: var(--ifinsta-text-muted);
}

/* Classic settings card support */
.ifinsta-settings-card {
    /* From ifinsta-card base */
    background: var(--ifinsta-bg-elevated);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-xl);
    box-shadow: var(--ifinsta-shadow-sm);
    overflow: hidden;
    transition: var(--ifinsta-transition-base);
    
    /* From ifinsta-card--settings */
    display: flex;
    flex-direction: column;
    padding: var(--ifinsta-space-6);
    text-decoration: none;
    color: inherit;
}

.ifinsta-settings-card:hover {
    /* From ifinsta-card--interactive */
    transform: translateY(-2px);
    box-shadow: var(--ifinsta-shadow-lg);
    border-color: var(--ifinsta-primary-200);
}

.ifinsta-settings-card:active {
    transform: translateY(0);
    box-shadow: var(--ifinsta-shadow-sm);
}

.ifinsta-settings-card__icon {
    width: 56px;
    height: 56px;
    background: var(--ifinsta-primary-100);
    border-radius: var(--ifinsta-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ifinsta-space-4);
    font-weight: bold;
    color: var(--ifinsta-primary);
    font-size: 1.5rem;
}

.ifinsta-settings-card__icon svg {
    width: 28px;
    height: 28px;
}

.ifinsta-settings-card__title {
    font-size: var(--ifinsta-text-lg);
    font-weight: var(--ifinsta-font-semibold);
    color: var(--ifinsta-text);
    margin-bottom: var(--ifinsta-space-2);
    line-height: var(--ifinsta-leading-tight);
}

.ifinsta-settings-card__desc {
    font-size: var(--ifinsta-text-sm);
    color: var(--ifinsta-text-secondary);
    margin: 0;
    line-height: var(--ifinsta-leading-relaxed);
}