/* ============================================================
   Design system Rentme — condiviso tra le pagine dell'area utente.
   Stessa palette e stessi componenti della homepage (index.php).
   ============================================================ */
:root {
    --colore-primario:      #D3145A;
    --colore-primario-dark: #A50F46;
    --colore-accento:       #FEC747;
    --colore-testo:         #1A1A2E;
    --colore-testo-chiaro:  #5A5A6E;
    --colore-sfondo:        #FFFFFF;
    --colore-sfondo-alt:    #FBF3F6;
    --colore-bordo:         #EFDCE4;
    --colore-errore:        #C0263B;
    --colore-errore-bg:     #FCE9EC;
    --colore-successo:      #1E8A63;
    --colore-successo-bg:   #E6FAF3;
    --raggio:               10px;
    --ombra: 0 4px 16px rgba(211, 20, 90, 0.10);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--colore-testo);
    background: var(--colore-sfondo-alt);
    line-height: 1.55;
}

a { color: var(--colore-primario); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.container-stretta { max-width: 560px; margin: 0 auto; padding: 0 24px; }

/* --- Header --- */
header.sito {
    border-bottom: 1px solid var(--colore-bordo);
    background: #fff;
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; max-width: 960px; margin: 0 auto; gap: 16px;
}
.header-inner nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.header-inner nav a { color: var(--colore-testo); font-weight: 500; font-size: 0.95rem; }
.header-inner nav a:hover { color: var(--colore-primario); text-decoration: none; }
.header-inner nav a.nav-attiva { color: var(--colore-primario); font-weight: 700; }

/* --- Contenuto --- */
main { padding: 48px 0 70px; }
h1 { font-size: 1.7rem; margin: 0 0 24px; letter-spacing: -0.5px; }
h2 { font-size: 1.25rem; margin: 32px 0 14px; }

/* --- Card --- */
.card {
    background: #fff; border: 1px solid var(--colore-bordo); border-radius: var(--raggio);
    box-shadow: var(--ombra); padding: 32px;
}
.slogan-vero-form {
    display: inline-block; margin: 0 0 22px; padding: 8px 16px;
    background: #FEF3D6; color: #8A6200; border: 1px solid #F5DFA0;
    border-radius: 999px; font-weight: 700; font-size: 0.85rem;
}

/* --- Selettore lingua (usato in login.php, register.php) --- */
.lang-select-wrap select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    border: 1.5px solid var(--colore-bordo); border-radius: 999px;
    padding: 6px 30px 6px 14px; font-size: 0.82rem; font-weight: 700;
    color: var(--colore-primario-dark); background: #FBE8F0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23A50F46'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
}
.lang-select-wrap select:hover { border-color: var(--colore-primario); }

/* --- Form --- */
.campo { margin-bottom: 18px; }
.campo-riga { display: flex; gap: 14px; }
.campo-riga .campo { flex: 1; }
.campo label {
    display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px;
    color: var(--colore-testo);
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="tel"],
.campo textarea {
    width: 100%; padding: 11px 14px; border: 1.5px solid var(--colore-bordo);
    border-radius: 8px; font-size: 0.95rem; font-family: inherit;
    background: #fff; color: var(--colore-testo);
}
.campo input:focus, .campo textarea:focus {
    outline: none; border-color: var(--colore-primario);
}

/* --- Bottoni --- */
.btn {
    display: inline-block; padding: 11px 24px; border-radius: var(--raggio);
    font-weight: 600; text-decoration: none; transition: opacity .15s ease;
    cursor: pointer; border: none; font-size: 0.95rem;
}
.btn:hover { opacity: 0.9; text-decoration: none; }
.btn-primario { background: var(--colore-primario); color: #fff; }
.btn-secondario { background: transparent; color: var(--colore-primario); border: 1.5px solid var(--colore-primario); }
.btn-blocco { width: 100%; text-align: center; }

/* --- Messaggi --- */
.alert {
    border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; font-size: 0.92rem;
}
.alert ul { margin: 0; padding-left: 20px; }
.alert-errore { background: var(--colore-errore-bg); color: var(--colore-errore); }
.alert-successo { background: var(--colore-successo-bg); color: var(--colore-successo); }

/* --- Info list (profilo, dashboard) --- */
.info-riga {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid var(--colore-bordo);
    font-size: 0.95rem;
}
.info-riga:last-child { border-bottom: none; }
.info-riga .etichetta { color: var(--colore-testo-chiaro); }
.info-riga .valore { font-weight: 600; text-align: right; }

/* --- Link azioni dashboard --- */
.azioni-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px; margin-top: 24px;
}
.azione-card {
    display: block; background: #fff; border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio); padding: 22px; box-shadow: var(--ombra);
    color: var(--colore-testo); transition: transform .1s ease;
}
.azione-card:hover { text-decoration: none; transform: translateY(-2px); }
.azione-card .titolo { font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.azione-card .desc { font-size: 0.88rem; color: var(--colore-testo-chiaro); margin: 0; }
.badge-admin {
    display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--colore-primario-dark); background: #FBE8F0;
    padding: 3px 9px; border-radius: 999px;
}

/* --- Filtri bacheca --- */
.filtri-bar {
    display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--colore-bordo); border-radius: var(--raggio);
    padding: 20px; margin-bottom: 28px;
}
.filtri-bar .campo { margin-bottom: 0; min-width: 180px; }
.filtri-bar select {
    width: 100%; padding: 11px 14px; border: 1.5px solid var(--colore-bordo);
    border-radius: 8px; font-size: 0.95rem; font-family: inherit; background: #fff;
}
.filtri-bar .azzera { font-size: 0.9rem; color: var(--colore-testo-chiaro); }

/* --- Griglia task (bacheca + dettaglio) --- */
.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.task-card {
    border: 1px solid var(--colore-bordo); border-radius: var(--raggio);
    padding: 22px; box-shadow: var(--ombra); background: #fff;
    display: flex; flex-direction: column;
}
.task-card .skill-tag {
    display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--colore-primario-dark); background: #FBE8F0;
    padding: 3px 10px; border-radius: 999px; margin-bottom: 12px; align-self: flex-start;
}
.task-card h3 { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.35; }
.task-card .meta {
    color: var(--colore-testo-chiaro); font-size: 0.86rem; margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.task-card .compenso {
    font-size: 1.25rem; font-weight: 800; color: var(--colore-primario);
    margin: 10px 0 16px;
}
.task-card .btn { margin-top: auto; text-align: center; }
.stato-pill {
    display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 4px 12px;
    border-radius: 999px; text-transform: capitalize;
}
.stato-aperto      { background: #E6FAF3; color: #1E8A63; }
.stato-assegnato    { background: #FFF3D6; color: #8A6200; }
.stato-in_corso      { background: #E8F0FE; color: #1450A3; }
.stato-completato   { background: #E6E9FA; color: #3730A3; }
.stato-annullato    { background: #F1F1F4; color: #5A5A6E; }
.vuoto-box {
    text-align: center; color: var(--colore-testo-chiaro); padding: 40px;
    border: 1px dashed var(--colore-bordo); border-radius: var(--raggio); background: #fff;
}

/* --- Footer --- */
footer.sito {
    border-top: 1px solid var(--colore-bordo); padding: 24px 0;
    color: var(--colore-testo-chiaro); font-size: 0.85rem; text-align: center;
}

/* ============================================================
   PANNELLO ADMIN
   ============================================================ */
.admin-header { background: #fff; border-bottom: 1px solid var(--colore-bordo); }
.admin-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; max-width: 1600px; margin: 0 auto; gap: 14px; flex-wrap: wrap;
}
.admin-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-nav a {
    padding: 7px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
    color: var(--colore-testo-chiaro); background: var(--colore-sfondo-alt);
}
.admin-nav a:hover { background: #FBE8F0; color: var(--colore-primario); text-decoration: none; }
.admin-nav a.attiva { background: var(--colore-primario); color: #fff; }
.admin-right { display: flex; gap: 14px; align-items: center; font-size: 0.85rem; }

.admin-main { max-width: 1600px; margin: 0 auto; padding: 32px 24px 70px; }
.admin-title { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; flex-wrap: wrap; }
.admin-title h1 { margin: 0; font-size: 1.5rem; }
.admin-torna { display: inline-block; margin-bottom: 16px; font-size: 0.9rem; color: var(--colore-testo-chiaro); }

.form-card {
    background: #fff; border: 1px solid var(--colore-bordo); border-radius: var(--raggio);
    box-shadow: var(--ombra); padding: 26px; margin-bottom: 28px;
}
.form-card h2 { margin-top: 0; font-size: 1.1rem; }

.tabella-wrap { overflow-x: auto; }
.tabella-admin {
    width: 100%; border-collapse: collapse; background: #fff;
    border: 1px solid var(--colore-bordo); border-radius: var(--raggio);
    box-shadow: var(--ombra); overflow: hidden;
}
.tabella-admin th {
    text-align: left; background: var(--colore-sfondo-alt); padding: 10px 12px;
    font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--colore-testo-chiaro); border-bottom: 1px solid var(--colore-bordo); white-space: nowrap;
}
.tabella-admin td {
    padding: 9px 12px; border-bottom: 1px solid var(--colore-bordo);
    font-size: 0.87rem; vertical-align: middle;
}
.tabella-admin tr:last-child td { border-bottom: none; }
.tabella-admin tr:hover td { background: #FDF7F9; }

/* Celle con più pulsanti/form (es. "Azioni"): impilati invece che affiancati,
   così la colonna resta stretta invece di allargare tutta la tabella */
.azioni-cella { white-space: normal !important; }
.azioni-cella form, .azioni-cella > a { display: block; margin-bottom: 4px; }
.azioni-cella form:last-child, .azioni-cella > a:last-child, .azioni-cella > *:last-child { margin-bottom: 0; }
.azioni-cella .btn { width: 100%; text-align: center; box-sizing: border-box; }

/* Testo lungo troncato con puntini, con il testo completo visibile al passaggio del mouse */
.testo-troncato {
    max-width: 220px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; display: block;
}

.btn-piccolo { padding: 6px 13px; font-size: 0.8rem; border-radius: 8px; }
.btn-outline { background: #fff; border: 1.5px solid var(--colore-bordo); color: var(--colore-testo); }
.btn-outline:hover { border-color: var(--colore-primario); color: var(--colore-primario); text-decoration: none; }
.btn-pericolo { background: #fff; border: 1.5px solid #E0A0AE; color: var(--colore-errore); }
.btn-pericolo:hover { background: var(--colore-errore); border-color: var(--colore-errore); color: #fff; text-decoration: none; }
.btn-successo { background: #fff; border: 1.5px solid #9BD8BE; color: var(--colore-successo); }
.btn-successo:hover { background: var(--colore-successo); border-color: var(--colore-successo); color: #fff; text-decoration: none; }

.badge {
    display: inline-block; font-size: 0.74rem; font-weight: 700; padding: 4px 11px;
    border-radius: 999px; text-transform: capitalize; white-space: nowrap;
}
.badge-attivo, .badge-si, .badge-approva { background: #E6FAF3; color: #1E8A63; }
.badge-in_attesa, .badge-avviso { background: #FFF3D6; color: #8A6200; }
.badge-sospeso, .badge-disattivata, .badge-no { background: #F1F1F4; color: #5A5A6E; }
.badge-eliminato, .badge-errore { background: #FCE9EC; color: #C0263B; }
.badge-conteggio {
    background: #FFF3D6; color: #8A6200; font-size: 0.65em; padding: 4px 10px;
    border-radius: 999px; vertical-align: middle; font-weight: 700;
}

.admin-vuoto {
    text-align: center; padding: 40px; color: var(--colore-testo-chiaro);
    border: 1px dashed var(--colore-bordo); border-radius: var(--raggio); background: #fff;
}
.admin-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--colore-bordo); }
.admin-avatar-vuoto {
    width: 38px; height: 38px; border-radius: 50%; background: var(--colore-sfondo-alt);
    display: flex; align-items: center; justify-content: center; color: var(--colore-testo-chiaro); font-size: 0.8rem;
}
.chiave-box {
    border: 2px solid var(--colore-successo); background: #E6FAF3; border-radius: var(--raggio);
    padding: 14px 18px; margin-bottom: 22px; font-size: 0.92rem;
}
.chiave-box code { display: block; margin-top: 6px; font-size: 1rem; word-break: break-all; background: #fff; padding: 8px 10px; border-radius: 6px; }
.form-inline { display: inline-block; }
.filtro-bar-admin {
    display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--colore-bordo); border-radius: 10px;
    padding: 12px 16px; margin-bottom: 12px; font-size: 0.9rem;
}
.filtro-bar-admin a {
    padding: 6px 14px; border-radius: 999px; background: var(--colore-sfondo-alt);
    color: var(--colore-testo-chiaro); font-weight: 500; white-space: nowrap;
}
.filtro-bar-admin a:hover, .filtro-bar-admin a.attiva { background: var(--colore-primario); color: #fff; text-decoration: none; }
.filtro-bar-admin .filtro-etichetta {
    color: var(--colore-testo); font-weight: 700; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 0.3px; margin-right: 2px;
}
.filtro-bar-admin .filtro-separatore { width: 1px; align-self: stretch; background: var(--colore-bordo); margin: 0 6px; }

/* --- Selezione competenze a tendina (accordion), usata in profile.php --- */
.skill-accordion {
    border: 1px solid var(--colore-bordo); border-radius: 8px; margin-bottom: 10px; overflow: hidden;
}
.skill-accordion summary {
    padding: 12px 16px; cursor: pointer; font-weight: 600; font-size: 0.92rem;
    background: var(--colore-sfondo-alt); display: flex; justify-content: space-between; align-items: center;
    list-style: none;
}
.skill-accordion summary::-webkit-details-marker { display: none; }
.skill-accordion summary::after {
    content: '▾'; color: var(--colore-testo-chiaro); transition: transform .15s ease; margin-left: 10px;
}
.skill-accordion[open] summary::after { transform: rotate(180deg); }
.skill-accordion .skill-accordion-conteggio {
    font-size: 0.72rem; font-weight: 700; background: #FBE8F0; color: var(--colore-primario-dark);
    padding: 2px 9px; border-radius: 999px; margin-left: 8px;
}
.skill-accordion-corpo { padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.skill-accordion-corpo label {
    display: flex; align-items: center; gap: 6px; border: 1px solid var(--colore-bordo);
    padding: 7px 12px; border-radius: 999px; font-size: 0.87rem; cursor: pointer; font-weight: 500;
}

/* --- Zona pericolosa (elimina account) --- */
.zona-pericolo {
    border: 1.5px solid #F2C6D0; background: #FEF6F8; border-radius: var(--raggio);
    padding: 22px; margin-top: 32px;
}
.zona-pericolo h2 { color: var(--colore-errore); margin-top: 0; }

@media (max-width: 600px) {
    .header-inner { flex-direction: column; align-items: flex-start; }
    .card { padding: 22px; }
}

/* --- Things: avvisi (step 2) --- */
.alert-avviso { background: #FFF3D6; color: #8A6200; }

/* --- Things (step 3) --- */
.campo select,
.campo input[type="number"] {
    width: 100%; padding: 11px 14px; border: 1.5px solid var(--colore-bordo);
    border-radius: 8px; font-size: 0.95rem; font-family: inherit;
    background: #fff; color: var(--colore-testo);
}
.campo select:focus { outline: none; border-color: var(--colore-primario); }
.nota-campo { color: var(--colore-testo-chiaro); margin-top: -6px; font-size: 0.85rem; }

.things-griglia {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px; margin-top: 20px;
}
.thing-card {
    background: #fff; border: 1px solid var(--colore-bordo); border-radius: var(--raggio);
    overflow: hidden; box-shadow: var(--ombra); display: flex; flex-direction: column;
}
.thing-card-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.thing-card-foto-vuota {
    display: flex; align-items: center; justify-content: center; font-size: 2.4rem;
    background: var(--colore-sfondo-alt);
}
.thing-card-corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.thing-card-titolo { font-weight: 700; }
.thing-card-meta { color: var(--colore-testo-chiaro); font-size: 0.85rem; }
.thing-card-prezzi { display: flex; flex-wrap: wrap; gap: 6px 12px; font-weight: 600; color: var(--colore-primario-dark); font-size: 0.9rem; }
.thing-card-nota { background: var(--colore-errore-bg); color: var(--colore-errore); border-radius: 8px; padding: 8px 10px; font-size: 0.85rem; }
.thing-card-azioni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }

.thing-foto-gestione { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.thing-foto-item {
    width: 120px; display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem;
}
.thing-foto-item img {
    width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--colore-bordo);
}
.thing-foto-item label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.thing-foto-item input { width: auto; }

@media (max-width: 600px) {
    .campo-riga { flex-direction: column; gap: 0; }
}

/* --- Things: altezza fissa delle foto (Chrome/Opera/Android) --- */
.thing-card-foto { height: 190px; min-height: 0; max-width: 100%; flex: none; aspect-ratio: auto; }

/* --- Noleggi (step 5) --- */
.campo input[type="date"] {
    width: 100%; padding: 10px 14px; border: 1.5px solid var(--colore-bordo);
    border-radius: 8px; font-size: 0.95rem; font-family: inherit; background: #fff; color: var(--colore-testo);
}
.schede-vista { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.schede-vista a {
    padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--colore-bordo);
    color: var(--colore-testo); font-weight: 600; font-size: 0.9rem; background: #fff;
}
.schede-vista a.attiva, .schede-vista a:hover { background: var(--colore-primario); border-color: var(--colore-primario); color: #fff; text-decoration: none; }
.noleggio-testa { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.noleggio-testa img { width: 80px; height: 60px; object-fit: cover; border-radius: 8px; flex: none; }
.noleggio-titolo { font-weight: 700; margin-top: 4px; }
.noleggio-importo { text-align: right; }
.noleggio-importo strong { display: block; font-size: 1.2rem; color: var(--colore-primario); }
.noleggio-importo span { font-size: 0.78rem; color: var(--colore-testo-chiaro); }
.noleggio-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.noleggio-azioni input[type="text"] {
    flex: 1 1 220px; padding: 7px 12px; border: 1.5px solid var(--colore-bordo); border-radius: 8px; font-family: inherit; font-size: 0.88rem;
}
.prenota-totale {
    display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 4px;
    border-top: 1px solid var(--colore-bordo); margin-top: 8px;
}
.prenota-totale strong { font-size: 1.5rem; color: var(--colore-primario); }