/* ============================================
   LAYOUT MODERNO PER SCHEDA PRATICA CRM
   ============================================ */

/* ===== VERSIONE FLEXBOX (larghezze dinamiche) ===== */
.crm-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.crm-flex-card {
    flex: 1 1 350px;  /* Cresce, si restringe, larghezza base 350px */
    max-width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.crm-flex-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.crm-flex-card-full {
    flex: 1 1 100%;  /* Occupa tutta la larghezza */
    width: 100%;
}

.crm-flex-card-small {
    flex: 0 0 280px;  /* Larghezza fissa piccola */
}

.crm-flex-card-medium {
    flex: 0 0 450px;  /* Larghezza fissa media */
}

.crm-flex-card-large {
    flex: 0 0 600px;  /* Larghezza fissa grande */
}

.crm-flex-card table {
    width: 100%;
    margin: 0;
    table-layout: auto;
}

.crm-flex-card table td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* ===== VERSIONE GRID (griglia rigida, larghezze uguali) ===== */
.crm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin: 20px 0;
    align-items: start;
}

.crm-grid-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    min-width: 0;
}

.crm-grid-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.crm-grid-card-full {
    grid-column: 1 / -1;  /* Occupa tutte le colonne */
}

.crm-grid-card table {
    width: 100%;
    margin: 0;
    table-layout: fixed; /* Larghezze colonne uniformi */
}

.crm-grid-card table td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Responsive per tablet */
@media (max-width: 1024px) {
    .crm-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 15px;
    }
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .crm-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 15px 0;
    }
}

/* Rimozione vecchi stili float se necessario */
.crm-grid .fleft,
.crm-grid .fright {
    float: none;
}

.crm-grid .box {
    width: auto;
    margin: 0;
}