/* ==================================================================================
   KEEPGREEN COMPONENT LIBRARY - CARDS
   ==================================================================================
   Card components with BEM naming convention.
   Extracted from inline styles across plant forms, identity pages, and admin dashboard.

   Usage: Apply base .kg-card class, then add modifiers for variants.
   Example: <div class="kg-card kg-card--elevated kg-card--rounded-lg">
   ================================================================================== */

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

.kg-card {
    background: var(--kg-bg-card-default);
    border: 0;
    border-radius: var(--kg-radius-2xl); /* 15px - default card rounding */
    box-shadow: var(--kg-shadow-sm);
}

/* Card with no border (Bootstrap override) */
.kg-card--no-border {
    border: 0 !important;
}

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

/* ==================================================================================
   BORDER RADIUS VARIANTS
   ================================================================================== */

.kg-card--rounded-sm {
    border-radius: var(--kg-radius-md); /* 8px */
}

.kg-card--rounded-md {
    border-radius: var(--kg-radius-xl); /* 12px */
}

.kg-card--rounded-lg {
    border-radius: var(--kg-radius-2xl); /* 15px */
}

.kg-card--rounded-xl {
    border-radius: var(--kg-radius-4xl); /* 18px */
}

.kg-card--rounded-2xl {
    border-radius: var(--kg-radius-5xl); /* 20px */
}

/* ==================================================================================
   COLOR VARIANTS (for Privacy page, Identity pages, etc.)
   ================================================================================== */

.kg-card--primary {
    background: var(--kg-color-primary-bg-light);
    border: 1px solid var(--kg-border-light) !important;
}

.kg-card--success {
    background: var(--kg-bg-card-success);
    border: 1px solid var(--kg-border-light) !important;
}

.kg-card--warning {
    background: var(--kg-bg-card-warning);
    border: 1px solid #f2e2db !important; /* Light orange border */
}

.kg-card--info {
    background: var(--kg-bg-card-info);
    border: 1px solid #dfe6f7 !important; /* Light blue border */
}

/* ==================================================================================
   CARD ELEMENTS (BEM __element naming)
   ================================================================================== */

.kg-card__header {
    background: var(--kg-color-white);
    border: 0;
    padding-top: var(--kg-spacing-3xl);
    padding-left: var(--kg-spacing-lg);
    padding-right: var(--kg-spacing-lg);
}

.kg-card__body {
    padding: var(--kg-spacing-lg);
}

.kg-card__body--lg {
    padding: var(--kg-spacing-2xl);
}

.kg-card__title {
    color: var(--kg-color-primary);
    font-weight: var(--kg-font-weight-semibold);
    margin: 0;
}

.kg-card__title--success {
    color: var(--kg-color-success);
}

.kg-card__title--warning {
    color: var(--kg-color-accent-purple);
}

.kg-card__title--info {
    color: var(--kg-color-accent-blue);
}

.kg-card__text {
    color: var(--kg-color-gray-800);
}

.kg-card__text--small {
    color: var(--kg-color-gray-800);
    font-size: var(--kg-font-size-sm);
}

/* ==================================================================================
   ADMIN DASHBOARD CARDS
   ================================================================================== */

.kg-admin-card {
    border-radius: var(--kg-radius-4xl); /* 18px */
    overflow: hidden;
}

.kg-admin-card__gradient {
    background: var(--kg-gradient-primary);
    border-radius: var(--kg-radius-5xl); /* 20px */
}

.kg-admin-card__gradient--secondary {
    background: var(--kg-gradient-secondary);
}

.kg-admin-card__padding {
    padding: var(--kg-spacing-lg);
}

.kg-admin-card__padding--responsive {
    padding: var(--kg-spacing-md);
}

@media (min-width: 768px) {
    .kg-admin-card__padding--responsive {
        padding: var(--kg-spacing-lg);
    }
}

/* ==================================================================================
   OVERFLOW & SPECIAL EFFECTS
   ================================================================================== */

.kg-card--overflow-hidden {
    overflow: hidden;
}

/* Mobile container for cards */
.kg-mobile-container {
    max-width: var(--kg-container-sm);
    margin: 0 auto;
    padding-bottom: var(--kg-spacing-4xl);
}

.kg-mobile-form-container {
    max-width: var(--kg-container-sm);
    margin: 0 auto;
    padding-bottom: var(--kg-spacing-4xl);
}

.kg-mobile-privacy-container {
    max-width: var(--kg-container-md);
    padding-top: var(--kg-spacing-md);
    padding-bottom: var(--kg-spacing-5xl);
}