/* ============================================================
   Indirizzi Prigioneri - CSS
   ============================================================ */

#ip-app {
    --nero: #111;
    --rosso: #f30202;
    --giallo: #f3bd02;
    --bianco: #fff;
    --grigio: #e5e5e5;
    --testo: #222;
    --verde: #1e8449;

    max-width: 800px;
    margin: 20px auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--testo);
}

#ip-app * { box-sizing: border-box; margin: 0; padding: 0; }

/* ============ PULSANTE INSERISCI ============ */
#ip-contenitore-pulsante {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px 0 0 0;
}

#ip-bottone-inserisci {
    background: var(--rosso);
    color: var(--bianco);
    border: 2px solid var(--nero);
    padding: 14px 40px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}
#ip-bottone-inserisci:hover { background: var(--nero); color: var(--bianco); }

/* ============ LISTA CARD ============ */
#ip-lista-schede {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

#ip-lista-schede .ip-card,
.ip-card {
    background: #fff !important;
    border: 1px solid var(--grigio) !important;
    border-left: 8px solid var(--giallo) !important;
    border-radius: 4px !important;
    padding: 22px 28px 22px 44px !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    display: block !important;
    width: 100% !important;
    position: relative !important;
}
#ip-lista-schede .ip-card:hover,
.ip-card:hover {
    background: #fafafa !important;
    border-left-color: var(--rosso) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Nome */
#ip-lista-schede .ip-card-nome,
.ip-card .ip-card-nome,
.ip-card-nome {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: var(--nero) !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    transition: color 0.15s;
    display: block !important;
    letter-spacing: normal !important;
}
#ip-lista-schede .ip-card-nome:hover,
.ip-card-nome:hover { color: var(--rosso) !important; }

/* Meta (carcere, indirizzo, data) su tre righe */
#ip-lista-schede .ip-card-meta,
.ip-card .ip-card-meta,
.ip-card-meta {
    font-size: 13px !important;
    color: #888 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
}
#ip-lista-schede .ip-card-meta .ip-carcere,
.ip-card-meta .ip-carcere {
    color: var(--rosso) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}
#ip-lista-schede .ip-card-meta .ip-indirizzo,
.ip-card-meta .ip-indirizzo {
    color: var(--nero) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}
#ip-lista-schede .ip-card-meta .ip-data,
.ip-card-meta .ip-data {
    color: #888 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

.ip-caricamento,
.ip-nessun-risultato {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 14px;
    font-style: italic;
}

/* ============ MODALI ============ */
.ip-sfondo-modale {
    display: none;
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 3000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-y: auto;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ip-sfondo-modale.ip-attivo { display: flex; }

.ip-riquadro-modale {
    background: var(--bianco);
    border: 3px solid var(--nero);
    border-radius: 6px;
    width: 620px;
    max-width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
}

.ip-testa {
    background: var(--nero);
    color: var(--bianco);
    padding: 18px 24px;
    border-bottom: 4px solid var(--rosso);
}
.ip-testa h2 {
    font-size: 19px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin: 0;
}
.ip-testa p {
    font-size: 12px;
    color: var(--giallo);
    margin-top: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Corpo dettaglio */
.ip-corpo-dettaglio {
    padding: 28px 32px;
}
.ip-etichette {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}
.ip-badge {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
}
.ip-badge.ip-carcere { background: var(--rosso); color: var(--bianco); }
.ip-badge.ip-indirizzo { background: #eee; color: var(--nero); }
.ip-badge.ip-data { background: var(--nero); color: var(--giallo); }

.ip-note {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    white-space: pre-wrap;
    word-wrap: break-word;
    border-left: 4px solid var(--rosso);
    padding-left: 18px;
    min-height: 40px;
}

/* Pulsanti azioni dettaglio */
.ip-azioni-dettaglio {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 20px 32px 24px 32px;
    border-top: 1px solid #eee;
    flex-wrap: wrap;
}
.ip-azioni-dettaglio button {
    padding: 12px 26px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid var(--nero);
}
.ip-bottone-aggiorna { background: var(--giallo); color: var(--nero); }
.ip-bottone-aggiorna:hover { background: var(--nero); color: var(--bianco); }
.ip-bottone-elimina { background: var(--rosso); color: var(--bianco); }
.ip-bottone-elimina:hover { background: var(--nero); }
.ip-bottone-chiudi { background: #eee; color: var(--nero); border-color: transparent; }
.ip-bottone-chiudi:hover { background: #ddd; }

/* Modale form */
.ip-riquadro-modale form { padding: 24px 26px; }
.ip-campo { margin-bottom: 20px; }
.ip-campo label {
    display: block;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    color: var(--nero);
}
.ip-campo label .ip-obbligatorio { color: var(--rosso); }
.ip-campo label .ip-opzionale {
    color: #999;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}
.ip-campo input[type="text"],
.ip-campo textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    background: var(--bianco);
    color: var(--nero);
}
.ip-campo textarea {
    min-height: 200px;
    resize: vertical;
    line-height: 1.6;
}
.ip-campo input:focus,
.ip-campo textarea:focus { outline: none; border-color: var(--rosso); }

.ip-campo.ip-errore input,
.ip-campo.ip-errore textarea { border-color: var(--rosso); background: #fff5f5; }
.ip-campo .ip-messaggio-errore {
    display: none;
    color: var(--rosso);
    font-size: 12px;
    font-weight: 700;
    margin-top: 6px;
}
.ip-campo.ip-errore .ip-messaggio-errore { display: block; }

.ip-azioni-modale {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid #eee;
}
.ip-azioni-modale button {
    padding: 12px 26px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ip-bottone-annulla { background: #eee; color: var(--nero); border: 2px solid transparent; }
.ip-bottone-annulla:hover { background: #ddd; }
.ip-bottone-invia {
    background: var(--rosso);
    color: var(--bianco);
    border: 2px solid var(--nero);
}
.ip-bottone-invia:hover { background: var(--nero); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
    #ip-app { max-width: 100%; padding: 0 16px; }

    #ip-lista-schede .ip-card,
    .ip-card {
        padding: 18px 20px 18px 36px !important;
    }
    #ip-lista-schede .ip-card-nome,
    .ip-card-nome { font-size: 17px !important; }
    #ip-lista-schede .ip-card-meta,
    .ip-card-meta { font-size: 11.5px !important; }

    .ip-corpo-dettaglio { padding: 22px 24px; }
    .ip-azioni-dettaglio { padding: 18px 24px 22px 24px; }
    .ip-azioni-dettaglio button { flex: 1; padding: 10px 14px; font-size: 12px; }
    .ip-note { font-size: 14px; }
}

@media (max-width: 600px) {
    .ip-testa { padding: 14px 20px; }
    .ip-testa h2 { font-size: 16px; }
    .ip-riquadro-modale form { padding: 18px 20px; }
    .ip-azioni-modale button { padding: 10px 18px; font-size: 12px; }
    .ip-bottone-inserisci { padding: 12px 28px; font-size: 13px; }
    .ip-card-nome { font-size: 16px !important; }
    .ip-card-meta { font-size: 11px !important; }
}