/* ============================================================
   KS Home Manager — Dashboard design v2 (mockup "Property Dashboard")
   2026-07-29 — Sorgente unica del NUOVO design dashboard, usato sia
   come ANTEPRIMA nel gate (scalata, .kshm-gp-board) sia come DASHBOARD
   reale post-registrazione. Markup: templates/dashboard-card.php.
   Prefisso classi: .kdv-  (Claude/dev)
   ============================================================ */

.kdv {
    --kdv-ink:      oklch(22% 0.02 260);
    --kdv-ink-soft: oklch(35% 0.02 260);
    --kdv-muted:    oklch(55% 0.02 260);
    --kdv-line:     oklch(90% 0.01 80);
    --kdv-blue:     oklch(38% 0.09 258);
    --kdv-blue-2:   oklch(48% 0.14 255);
    --kdv-eyebrow:  oklch(55% 0.06 258);
    --kdv-bg:       oklch(97.5% 0.008 80);
    /* 2026-07-29 — Font del sito (Plus Jakarta Sans) per TUTTO, titoli inclusi.
       (Rimosso Fraunces su richiesta utente.) */
    --kdv-serif:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--kdv-ink);
    background: var(--kdv-bg);
    box-sizing: border-box;
}
.kdv *, .kdv *::before, .kdv *::after { box-sizing: border-box; }

.kdv-wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 48px); }

/* ── HERO ─────────────────────────────────────────── */
.kdv-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 420px;
    background: oklch(20% 0.02 260);
    margin-top: 8px;
}
.kdv-hero__photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.kdv-hero__grad {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top,
        rgba(6,9,20,0.88) 0%, rgba(6,9,20,0.6) 40%,
        rgba(6,9,20,0.28) 70%, rgba(6,9,20,0.15) 100%);
}
.kdv-hero__body {
    position: relative;
    min-height: 420px;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 20px 28px 26px;
    gap: 20px;
}
.kdv-hero__top { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.kdv-pill {
    background: rgba(255,255,255,0.95);
    padding: 10px 16px; border-radius: 10px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.4px;
    color: var(--kdv-ink-soft); white-space: nowrap;
}
.kdv-pill__state { display: flex; align-items: center; gap: 6px; color: oklch(55% 0.19 25); }
.kdv-pill__state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.kdv-pill--btn { background: #fff; color: var(--kdv-ink); cursor: pointer; }
.kdv-pill--icon { width: 40px; height: 40px; flex: none; justify-content: center; font-size: 16px; }

.kdv-hero__main { display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.kdv-hero__txt { color: #fff; min-width: 0; flex: 1 1 420px; }
.kdv-hero__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; opacity: 0.85; margin: 0 0 10px; }
.kdv-hero__addr { font-family: var(--kdv-serif); font-size: clamp(22px, 3.4vw, 38px); font-weight: 700; line-height: 1.18; margin: 0 0 6px; }
.kdv-hero__sub { font-size: 15px; opacity: 0.85; margin: 0 0 18px; }

.kdv-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.kdv-chip {
    background: rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    padding: 9px 16px; border-radius: 999px;
    font-size: 13.5px; font-weight: 600; white-space: nowrap; color: #fff;
}
.kdv-chip--accent { background: var(--kdv-blue); font-weight: 700; }

.kdv-valuecard {
    background: #fff; border-radius: 14px; padding: 20px 26px;
    min-width: 260px; flex: 0 1 340px;
}
.kdv-valuecard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kdv-valuecard__lbl { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--kdv-blue); }
.kdv-valuecard__refresh { font-size: 15px; color: var(--kdv-muted); }
.kdv-valuecard__num { font-family: var(--kdv-serif); font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; color: var(--kdv-ink); white-space: nowrap; }
.kdv-valuecard__note { font-size: 12.5px; color: var(--kdv-muted); margin-top: 8px; }

/* ── Sezioni + griglia ────────────────────────────── */
.kdv-section { padding-top: 40px; }
.kdv-section__title { font-size: 13px; font-weight: 700; letter-spacing: 1.2px; color: var(--kdv-eyebrow); margin: 0 0 18px; }
.kdv-grid { display: grid; gap: 20px; }
.kdv-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kdv-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ── Card generiche ───────────────────────────────── */
.kdv-card { background: #fff; border-radius: 16px; padding: 26px; border: 1px solid var(--kdv-line); }
.kdv-card__label { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--kdv-eyebrow); margin: 0 0 16px; }

/* Migliora la stima */
.kdv-progress { height: 8px; border-radius: 999px; background: oklch(92% 0.01 80); overflow: hidden; margin-bottom: 12px; }
.kdv-progress__fill { height: 100%; background: linear-gradient(90deg, oklch(30% 0.09 258), var(--kdv-blue-2)); border-radius: 999px; transition: width .6s ease; }
.kdv-progress-note { font-size: 14.5px; color: var(--kdv-ink-soft); margin: 0 0 20px; }
.kdv-tile { display: flex; align-items: center; gap: 14px; border-radius: 12px; padding: 16px; }
.kdv-tile + .kdv-tile { margin-top: 12px; }
.kdv-tile--blue { background: oklch(95% 0.02 250); }
.kdv-tile--cream { background: oklch(96% 0.02 80); }
.kdv-tile__ico { font-size: 22px; line-height: 1; }
.kdv-tile__body { flex: 1; min-width: 0; }
.kdv-tile__t { font-size: 14.5px; font-weight: 700; }
.kdv-tile__s { font-size: 13px; color: var(--kdv-muted); }
.kdv-tile__arrow { font-size: 16px; color: var(--kdv-blue); }

/* Card WhatsApp */
.kdv-card--wa { background: oklch(64% 0.14 155); color: #fff; display: flex; flex-direction: column; border: 0; }
.kdv-card--wa .kdv-card__ico { font-size: 26px; margin-bottom: 16px; }
.kdv-card__title { font-family: var(--kdv-serif); font-size: 23px; font-weight: 700; line-height: 1.25; margin: 0 0 12px; }
.kdv-card__text { font-size: 14.5px; opacity: 0.9; line-height: 1.5; margin: 0 0 auto; }
.kdv-btn { display: block; text-align: center; padding: 13px; border-radius: 10px; font-size: 14.5px; font-weight: 700; margin-top: 22px; cursor: pointer; text-decoration: none; }
.kdv-btn--wa { background: #fff; color: oklch(30% 0.1 155); }

/* Card valutazione professionale */
.kdv-card--pro { background: oklch(30% 0.09 258); color: #fff; display: flex; flex-direction: column; border: 0; }
.kdv-card--pro .kdv-card__label { opacity: 0.75; color: #fff; }
.kdv-card__list { display: flex; flex-direction: column; gap: 10px; font-size: 14px; opacity: 0.92; margin: 0 0 auto; }
.kdv-card__list > div { display: flex; gap: 10px; align-items: flex-start; }
.kdv-btn--pro { background: #fff; color: oklch(30% 0.09 258); }
.kdv-card__fine { font-size: 12.5px; opacity: 0.65; margin-top: 12px; }

/* Mercato OMI */
.kdv-omi__comune { font-size: 13.5px; font-weight: 700; color: var(--kdv-ink-soft); margin-bottom: 14px; text-transform: uppercase; }
.kdv-omi__big { font-family: var(--kdv-serif); font-size: 30px; font-weight: 700; margin-bottom: 8px; }
.kdv-omi__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kdv-omi__unit { font-size: 13px; color: var(--kdv-muted); }
.kdv-badge--trend { background: oklch(92% 0.09 150); color: oklch(38% 0.12 150); font-size: 12.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.kdv-badge--trend.is-down { background: oklch(92% 0.09 25); color: oklch(50% 0.15 25); }

/* Vivibilità */
.kdv-scores { display: flex; gap: 28px; }
.kdv-score__num { font-family: var(--kdv-serif); font-size: 30px; font-weight: 700; }
.kdv-score__lbl { font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; color: var(--kdv-muted); }

/* Nelle vicinanze */
.kdv-nearby { display: flex; flex-direction: column; gap: 14px; }
.kdv-nearby__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kdv-nearby__name { display: flex; align-items: center; gap: 10px; font-size: 14.5px; min-width: 0; }
.kdv-nearby__dist { font-size: 13px; color: var(--kdv-muted); white-space: nowrap; }

/* Interesse */
.kdv-interest__num { font-family: var(--kdv-serif); font-size: 30px; font-weight: 700; margin-bottom: 8px; }
.kdv-interest__lbl { font-size: 13.5px; color: var(--kdv-muted); margin-bottom: 16px; }
.kdv-interest__bar { height: 6px; border-radius: 999px; background: oklch(92% 0.01 80); overflow: hidden; }
.kdv-interest__fill { height: 100%; background: var(--kdv-blue); border-radius: 999px; }

/* ── Stato "esempio" (anteprima): micro-etichetta sui valori campione ── */
.kdv-sample { position: relative; }
.kdv-sample::after {
    content: "esempio";
    position: absolute; top: -7px; right: -6px;
    font-size: 8.5px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--kdv-muted); background: rgba(255,255,255,0.85);
    padding: 1px 5px; border-radius: 999px;
    border: 1px solid var(--kdv-line);
}

/* ── 2026-07-29 — Rifiniture ───────────────────────────
   1) Titolo indirizzo: Salient forza il colore degli <h2> (navy) → l'indirizzo
      dell'hero appariva BLU su foto invece che bianco. Forziamo bianco + serif.
   2) Anteprima (peek): piccolo respiro in cima così la finestra di ritaglio non
      taglia il bordo superiore dell'hero/immagine. */
.kdv .kdv-hero__addr {
    color: #fff !important;
    font-family: var(--kdv-serif) !important;
}
.kdv-card-root[data-ctx="preview"] { padding-top: 14px; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 720px) {
    .kdv-hero__body { padding: 16px 16px 20px; }
    .kdv-valuecard { flex-basis: 100%; }
    .kdv-section { padding-top: 28px; }
    .kdv-card { padding: 20px; }
}

/* 2026-11-04 — Correzioni del Direttore (ks_wizard_fix, attributo data-fix): pillole vuote nascoste, valore che va a capo
   invece di uscire dalla card, niente punteggi Walk/Transit senza fonte. (Claude/dev) */
.kdv-card-root[data-fix] .kdv-chip:empty { display: none; }
.kdv-card-root[data-fix] .kdv-valuecard__num { white-space: normal; font-size: clamp(20px, 2vw, 28px); overflow-wrap: anywhere; }
.kdv-card-root[data-fix] .kdv-card--scores { display: none; }