/**
 * Maxim API Plugin - Sistema Card Unificato
 * Consolida tutti gli stili card in un unico file
 * 
 * @version 2.8.1
 * @changelog 2.8.1: Aggiunto supporto completo per dimensioni ridotte in griglia 3 colonne
 * @changelog 2.8.0: Aggiunta gestione immagini preview per card prodotti/scatole
 * @changelog 2.7.0: Aggiunta variante Tip Card per suggerimenti e guide
 * @requires components-core.css, components-grids.css
 */

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

/* Card container base - usato da TUTTE le card */
.maxim-card {
    background: #FFFFFF;
    border: 2px solid transparent;
    border-top: 3px solid var(--maxim-primary);
    border-radius: var(--maxim-radius-medium);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all var(--maxim-transition-base);
    position: relative;
}

/* Margini di default - vengono rimossi quando in griglia */
.maxim-card {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0;
}

/* Card hover base */
.maxim-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 12px -1px rgba(0, 0, 0, 0.15), 
                0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

/* Card sections */
.maxim-card-header {
    padding: var(--maxim-space-5) var(--maxim-space-5);
    border-bottom: 1px solid var(--maxim-border-light);
    background: linear-gradient(135deg, #FAFBFC 0%, #FFFFFF 100%);
}

.maxim-card-body {
    padding: 20px;
}

.maxim-card-footer {
    padding: var(--maxim-space-4) var(--maxim-space-5);
    border-top: 1px solid var(--maxim-border-light);
    background: #F9FAFB;
}

/* =========================================================================
   CARD SPACING (Solo quando NON in griglia)
   ========================================================================= */

/* Spacing tra card consecutive SOLO se non sono in una griglia */
.maxim-card + .maxim-card {
    margin-top: var(--maxim-space-6);
}

/* Rimuovi spacing quando le card sono in una griglia */
.maxim-grid .maxim-card + .maxim-card {
    margin-top: 0;
}

/* =========================================================================
   STAT CARD VARIANT
   ========================================================================= */

/* Stat Card - usata in dashboard, stock, etc. */
.maxim-card.stat {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: var(--maxim-space-4);
    min-height: 100px;
}

.maxim-card.stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 12px -1px rgba(0, 0, 0, 0.15), 
                0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

/* Stat card elements */
.maxim-card.stat .card-icon {
    background: linear-gradient(135deg, var(--maxim-primary) 0%, var(--maxim-primary-light) 100%);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(130, 38, 89, 0.3);
    font-size: 22px;
}

.maxim-card.stat .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.maxim-card.stat .card-number {
    font-size: var(--maxim-font-size-2xlarge);
    font-weight: var(--maxim-font-weight-bold);
    color: var(--maxim-text-primary);
    line-height: 1;
}

.maxim-card.stat .card-label {
    font-size: var(--maxim-font-size-small);
    color: var(--maxim-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--maxim-font-weight-medium);
    /* Gestione overflow per testi lunghi */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* =========================================================================
   TIP CARD VARIANT
   ========================================================================= */

/* Tip Card - per suggerimenti e guide */
.maxim-card.tip {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.maxim-card.tip .maxim-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Tip Header con icona e titolo */
.maxim-card.tip .tip-header {
    display: flex;
    align-items: center;
    gap: var(--maxim-space-2);
    margin-bottom: var(--maxim-space-3);
}

.maxim-card.tip .tip-icon {
    font-size: 20px;
    color: var(--maxim-text-secondary);
}

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

/* Contenuto della tip */
.maxim-card.tip .tip-content {
    flex: 1;
    color: var(--maxim-text-muted);
    margin-bottom: var(--maxim-space-4);
    line-height: var(--maxim-line-height-relaxed);
}

.maxim-card.tip .tip-content p {
    margin: 0;
}

/* Azione della tip (bottone) */
.maxim-card.tip .tip-action {
    margin-top: auto; /* Spinge il bottone in fondo */
}

/* Varianti colore per tip cards */
.maxim-card.tip.primary .tip-icon {
    color: var(--maxim-primary);
}

.maxim-card.tip.success .tip-icon {
    color: var(--maxim-success);
}

.maxim-card.tip.warning .tip-icon {
    color: var(--maxim-warning);
}

.maxim-card.tip.info .tip-icon {
    color: var(--maxim-info);
}

/* =========================================================================
   STAT CARD ICON MODIFIERS
   ========================================================================= */

/* Icona circolare */
.maxim-card.stat .card-icon.circle {
    border-radius: 50%;
}

/* Icona grande (usata solo con 1-2 colonne) */
.maxim-card.stat .card-icon.large {
    width: 56px;
    height: 56px;
    font-size: 24px;
}

/* =========================================================================
   SELECTABLE CARD PATTERN
   ========================================================================= */

/* Card selezionabile con checkbox */
.maxim-card.selectable {
    position: relative;
    padding-top: var(--maxim-space-2) !important;
    overflow: visible; /* Permette elementi in overflow */
}

/* Overlay per controlli di selezione */
.maxim-card-control-overlay {
    position: absolute;
    top: var(--maxim-space-2);
    right: var(--maxim-space-2);
    z-index: 10;
    margin: 0 !important;
}

/* Stile per checkbox in overlay */
.maxim-card-control-overlay .maxim-form-check {
    margin: 0;
    padding: var(--maxim-space-1);
    background: var(--maxim-bg-surface);
    border-radius: var(--maxim-radius-base);
    box-shadow: var(--maxim-shadow-xsmall);
}

/* Stati card selezionabile */
.maxim-card.selectable.selected {
    border-color: var(--maxim-primary);
    background: var(--maxim-primary-bg-10);
    box-shadow: 0 0 0 2px var(--maxim-primary-bg-20);
}

/* Badge overlay generico */
.maxim-card-badge-overlay {
    position: absolute;
    top: var(--maxim-space-2);
    left: var(--maxim-space-2);
    z-index: 9;
}

/* Permetti overflow quando in griglia */
.maxim-grid .maxim-card.selectable {
    overflow: visible;
}

/* =========================================================================
   STAT CARD COLOR VARIANTS
   ========================================================================= */

.maxim-card.stat .card-icon.primary {
    background: linear-gradient(135deg, var(--maxim-primary) 0%, var(--maxim-primary-light) 100%);
    box-shadow: 0 2px 8px var(--maxim-primary-bg-30);
}

.maxim-card.stat .card-icon.success {
    background: linear-gradient(135deg, var(--maxim-success) 0%, var(--maxim-success-light) 100%);
    box-shadow: 0 2px 8px var(--maxim-success-bg-30);
}

.maxim-card.stat .card-icon.warning {
    background: linear-gradient(135deg, var(--maxim-warning) 0%, var(--maxim-warning-light) 100%);
    box-shadow: 0 2px 8px var(--maxim-warning-bg-30);
}

.maxim-card.stat .card-icon.error {
    background: linear-gradient(135deg, var(--maxim-error) 0%, var(--maxim-error-light) 100%);
    box-shadow: 0 2px 8px var(--maxim-error-bg-30);
}

.maxim-card.stat .card-icon.info {
    background: linear-gradient(135deg, var(--maxim-info) 0%, var(--maxim-info-light) 100%);
    box-shadow: 0 2px 8px var(--maxim-info-bg-30);
}

/* =========================================================================
   STAT CARD RESPONSIVE BY COLUMN COUNT
   ========================================================================= */

/* 2 colonne */
.maxim-grid.cols-2 .maxim-card.stat .card-icon {
    width: 50px;
    height: 50px;
    font-size: 22px;
}

/* 3 colonne - dimensioni ulteriormente ridotte */
.maxim-grid.cols-3 .maxim-card.stat {
    padding: 16px 18px;
    min-height: 90px;
}

.maxim-grid.cols-3 .maxim-card.stat .card-icon {
    width: 38px;
    height: 38px;
    font-size: 16px;
}

.maxim-grid.cols-3 .maxim-card.stat .card-number {
    font-size: 1.25rem; /* Ridotto da 1.375rem */
}

.maxim-grid.cols-3 .maxim-card.stat .card-label {
    font-size: 0.625rem; /* Ridotto da 0.65rem */
    letter-spacing: 0.02em;
}

/* 4 colonne */
.maxim-grid.cols-4 .maxim-card.stat {
    padding: 18px 20px;
}

.maxim-grid.cols-4 .maxim-card.stat .card-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
}

.maxim-grid.cols-4 .maxim-card.stat .card-number {
    font-size: 1.375rem;
}

.maxim-grid.cols-4 .maxim-card.stat .card-label {
    font-size: 0.65rem;
    letter-spacing: 0.03em;
}

/* 5 colonne */
.maxim-grid.cols-5 .maxim-card.stat {
    padding: 16px 18px;
}

.maxim-grid.cols-5 .maxim-card.stat .card-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
}

.maxim-grid.cols-5 .maxim-card.stat .card-number {
    font-size: 1.125rem;
}

.maxim-grid.cols-5 .maxim-card.stat .card-label {
    font-size: 0.6rem;
    letter-spacing: 0.02em;
}

/* 6 colonne */
.maxim-grid.cols-6 .maxim-card.stat {
    padding: 14px 16px;
}

.maxim-grid.cols-6 .maxim-card.stat .card-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.maxim-grid.cols-6 .maxim-card.stat .card-number {
    font-size: 1rem;
}

.maxim-grid.cols-6 .maxim-card.stat .card-label {
    font-size: 0.6rem;
    letter-spacing: 0.02em;
}

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

/* Layout verticale centrato */
.maxim-card.stat.vertical {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}

.maxim-card.stat.vertical .card-icon {
    margin-right: 0;
    margin-bottom: 12px;
}

.maxim-card.stat.vertical .card-content {
    align-items: center;
}

/* =========================================================================
   OTHER CARD TYPES
   ========================================================================= */

/* Status Card */
.maxim-card.status {
    transition: all var(--maxim-transition-base);
}

/* Product Card */
.maxim-card.product {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Info/Alert Card */
.maxim-card.info {
    border-left: 4px solid var(--maxim-primary);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Compact Card */
.maxim-card.compact {
    padding: var(--maxim-space-4);
}

/* Elevated Card */
.maxim-card.elevated {
    box-shadow: 0 10px 20px -2px rgba(0, 0, 0, 0.1), 
                0 6px 10px -2px rgba(0, 0, 0, 0.06);
    border-top-width: 4px;
}

/* Status card variant - card compatte per stato sistema */
.maxim-card.status-compact {
    min-height: 120px;
    height: 120px;
}

.maxim-card.status-compact .maxim-card-header {
    padding: 12px 16px;
}

.maxim-card.status-compact .maxim-card-body {
    padding: 12px 16px;
}
/* =========================================================================
   CARD IMAGE PREVIEW SYSTEM
   ========================================================================= */

/* Container immagine per card compatte */
.maxim-card .maxim-image-preview {
    height: 100px;
    background: var(--maxim-gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--maxim-radius-base) var(--maxim-radius-base) 0 0;
    position: relative;
}

/* Altezza variabile per preview immagini */
.maxim-card .maxim-image-preview.height-80 {
    height: 80px;
}

.maxim-card .maxim-image-preview.height-120 {
    height: 120px;
}

.maxim-card .maxim-image-preview.height-150 {
    height: 150px;
}

/* Immagine dentro preview */
.maxim-card .maxim-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

/* Placeholder quando manca immagine */
.maxim-card .maxim-image-placeholder {
    font-size: 32px;
    color: var(--maxim-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Card compatta senza padding quando ha immagine */
.maxim-card.compact.has-image {
    padding: 0;
}

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

/* Card prodotto/scatola inattiva */
.maxim-card.inactive {
    opacity: 0.7;
}

/* =========================================================================
   CARD STATUS MODIFIERS
   ========================================================================= */

.maxim-card.success {
    border-top-color: var(--maxim-success);
    background: linear-gradient(to bottom, rgba(0, 163, 42, 0.03), #FFFFFF);
}

.maxim-card.warning {
    border-top-color: var(--maxim-warning);
    background: linear-gradient(to bottom, rgba(245, 110, 40, 0.03), #FFFFFF);
}

.maxim-card.error {
    border-top-color: var(--maxim-error);
    background: linear-gradient(to bottom, rgba(214, 54, 56, 0.03), #FFFFFF);
}

/* =========================================================================
   CARD SIZE MODIFIERS
   ========================================================================= */

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

.maxim-card.large {
    padding: var(--maxim-space-8);
}

/* =========================================================================
   CARD BACKGROUND CONTRAST
   ========================================================================= */

/* Content area con sfondo contrastato */
.maxim-content-main {
    padding: var(--maxim-space-6);
    background-color: #F3F4F6;
}

/* =========================================================================
   CARD HEIGHT UNIFORMITY IN GRIDS
   ========================================================================= */

/* Altezza minima per card in griglia */
.maxim-grid .maxim-card {
    min-height: 120px;
}

.maxim-grid .maxim-card-body,
.maxim-grid .maxim-card .maxim-status-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =========================================================================
   STATS SECTION SPECIFIC
   ========================================================================= */

/* Centra la griglia delle statistiche */
.maxim-stats-section .maxim-grid {
    max-width: 1200px;
    margin: 0 auto;
}

/* Altezza ridotta per tutte le stat card */
.maxim-stats-section .maxim-card.stat {
    padding: 10px 18px;
    min-height: 75px;
}

/* =========================================================================
   TIPS SECTION SPECIFIC
   ========================================================================= */

/* Assicura altezza uniforme per le tip cards in griglia */
.maxim-tips-section .maxim-grid .maxim-card.tip {
    min-height: 200px;
}

.maxim-tips-section {
    padding: 0 20px;
    margin: 0 0 var(--maxim-space-12) 0;
    width: 100%;
    box-sizing: border-box;
}

.maxim-tips-section .maxim-grid {
    margin: 0 0 var(--maxim-space-6) 0;
    width: 100%;
}

/* =========================================================================
   CARD FOOTER ACTIONS (Full Width)
   ========================================================================= */

/* Footer actions che si estendono per tutta la larghezza della card */
.maxim-card .maxim-card-footer-actions {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--maxim-border-default);
    background: linear-gradient(to bottom, var(--maxim-gray-50), var(--maxim-gray-100));
    border-radius: 0 0 var(--maxim-radius-medium) var(--maxim-radius-medium);
    overflow: hidden;
    display: flex;
    gap: 0;
}

/* Quando in card compatte, compensa il padding del body */
.maxim-card.compact .maxim-card-footer-actions {
    margin: -12px -12px 0 -12px;
}

.maxim-card.compact.has-image .maxim-card-footer-actions {
    margin: -12px -12px 0 -12px;
}

/* Bottoni nel footer actions */
.maxim-card-footer-actions .maxim-btn {
    flex: 1;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--maxim-border-default);
    padding: var(--maxim-space-2) var(--maxim-space-3);
    background: transparent;
    transition: background-color var(--maxim-transition-fast);
}

.maxim-card-footer-actions .maxim-btn:last-child {
    border-right: none;
}

.maxim-card-footer-actions .maxim-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Mantieni colori hover per varianti */
.maxim-card-footer-actions .maxim-btn.primary:hover {
    background-color: var(--maxim-primary);
    color: white;
}

.maxim-card-footer-actions .maxim-btn.secondary:hover {
    background-color: var(--maxim-secondary);
    color: white;
}

.maxim-card-footer-actions .maxim-btn.accent:hover,
.maxim-card-footer-actions .maxim-btn.danger:hover {
    background-color: var(--maxim-error);
    color: white;
}

.maxim-card-footer-actions .maxim-btn.success:hover {
    background-color: var(--maxim-success);
    color: white;
}

/* =========================================================================
   CARD FOOTER ACTIONS (Full Width Buttons)
   ========================================================================= */

/* Container per azioni full-width in fondo alla card */
.maxim-card-actions {
    display: flex;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--maxim-border-default);
    background: linear-gradient(to bottom, var(--maxim-gray-50), var(--maxim-gray-100));
    border-radius: 0 0 var(--maxim-radius-medium) var(--maxim-radius-medium);
    overflow: hidden;
    gap: 0;
}

/* Quando in card compatte, compensa il padding */
.maxim-card.compact .maxim-card-actions {
    margin: 0 -12px -12px -12px;
}

/* Se la card ha padding custom */
.maxim-card.compact.has-image .maxim-card-actions {
    margin: 0;
}

/* Bottoni nelle card actions */
.maxim-card-actions .maxim-btn {
    flex: 1;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--maxim-border-default);
    margin: 0;
    padding: var(--maxim-space-2) var(--maxim-space-3);
    justify-content: center;
    background: transparent;
    transition: background-color var(--maxim-transition-fast), color var(--maxim-transition-fast);
}

.maxim-card-actions .maxim-btn:last-child {
    border-right: none;
}

/* Disabilita movimento verticale sull'hover */
.maxim-card-actions .maxim-btn:hover {
    transform: none;
}

/* Prepara padding del body quando ci sono actions */
.maxim-card.has-actions .maxim-card-body {
    padding-bottom: var(--maxim-space-3);
}

.maxim-card.compact.has-actions .maxim-card-body {
    padding-bottom: 0;
}

/* =========================================================================
   CARD ACTIONS FILLED VARIANT
   ========================================================================= */

/* Variante filled - mantiene i colori pieni dei bottoni */
.maxim-card-actions.filled .maxim-btn {
    /* Mantiene il colore di sfondo originale del bottone */
    opacity: 1;
}

/* Override specifici per ogni colore nella variante filled */
.maxim-card-actions.filled .maxim-btn.primary {
    background-color: var(--maxim-btn-primary-bg);
    color: var(--maxim-btn-primary-text);
}
.maxim-card-actions.filled .maxim-btn.primary:hover {
    background-color: var(--maxim-btn-primary-bg-hover);
}

.maxim-card-actions.filled .maxim-btn.secondary {
    background-color: var(--maxim-btn-secondary-bg);
    color: var(--maxim-btn-secondary-text);
}
.maxim-card-actions.filled .maxim-btn.secondary:hover {
    background-color: var(--maxim-btn-secondary-bg-hover);
}

.maxim-card-actions.filled .maxim-btn.success {
    background-color: var(--maxim-success);
    color: white;
}
.maxim-card-actions.filled .maxim-btn.success:hover {
    background-color: var(--maxim-success-dark);
}

.maxim-card-actions.filled .maxim-btn.warning {
    background-color: var(--maxim-warning);
    color: white;
}
.maxim-card-actions.filled .maxim-btn.warning:hover {
    background-color: var(--maxim-warning-dark);
}

.maxim-card-actions.filled .maxim-btn.error,
.maxim-card-actions.filled .maxim-btn.danger {
    background-color: var(--maxim-error);
    color: white;
}
.maxim-card-actions.filled .maxim-btn.error:hover,
.maxim-card-actions.filled .maxim-btn.danger:hover {
    background-color: var(--maxim-error-dark);
}

.maxim-card-actions.filled .maxim-btn.info {
    background-color: var(--maxim-info);
    color: white;
}
.maxim-card-actions.filled .maxim-btn.info:hover {
    background-color: var(--maxim-info-dark);
}

.maxim-card-actions.filled .maxim-btn.dark {
    background-color: var(--maxim-btn-dark-bg);
    color: var(--maxim-btn-dark-text);
}
.maxim-card-actions.filled .maxim-btn.dark:hover {
    background-color: var(--maxim-btn-dark-bg-hover);
}

/* =========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================= */

@media (min-width: 1600px) {
    .maxim-tips-section {
        padding: 0 40px;
    }
}   

@media (max-width: 1200px) {
    /* Ripristina dimensioni quando le colonne si riducono */
    .maxim-grid.cols-5 .maxim-card.stat .card-icon,
    .maxim-grid.cols-6 .maxim-card.stat .card-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    
    .maxim-grid.cols-5 .maxim-card.stat .card-number,
    .maxim-grid.cols-6 .maxim-card.stat .card-number {
        font-size: 1.5rem;
    }
}

@media (max-width: 1024px) {
    /* Ripristina dimensioni per 2 colonne */
    .maxim-grid.cols-4 .maxim-card.stat {
        padding: 20px 24px;
    }
    
    .maxim-grid.cols-4 .maxim-card.stat .card-icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }
    
    .maxim-grid.cols-4 .maxim-card.stat .card-number {
        font-size: 1.5rem;
    }
    
    .maxim-grid.cols-4 .maxim-card.stat .card-label {
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }
}

@media (max-width: 782px) {
    .maxim-tips-section {
        padding: 0 10px;
    }
}

@media (max-width: 768px) {
    /* Ripristina dimensioni standard su mobile */
    .maxim-grid .maxim-card.stat {
        padding: var(--maxim-space-4) !important;
    }
    
    .maxim-grid .maxim-card.stat .card-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 22px !important;
    }
    
    .maxim-grid .maxim-card.stat .card-number {
        font-size: 1.5rem !important;
    }
    
    .maxim-grid .maxim-card.stat .card-label {
        font-size: 0.75rem !important;
        letter-spacing: 0.5px !important;
        white-space: normal !important;
    }
    
    /* Tip cards su mobile */
    .maxim-card.tip .tip-header {
        flex-wrap: wrap;
    }
    
    .maxim-card.tip .tip-title {
        font-size: var(--maxim-font-size-base);
    }
}

@media (max-width: 480px) {
    .maxim-card.stat {
        padding: 16px;
    }
    
    .maxim-grid .maxim-card.stat .card-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
    
    .maxim-grid .maxim-card.stat .card-number {
        font-size: 1.25rem !important;
    }
}