/* Scheda ospite — testata (App\Livewire\GuestProfilePanel).
 *
 * Perché un CSS a mano invece delle utility Tailwind: il deploy è PHP-only,
 * senza build npm (vedi JoornaTheme), quindi valgono SOLO le classi già
 * presenti nel CSS precompilato di Filament. Le utility che non usa — griglie
 * a 3 colonne, dimensioni fisse, col-span — semplicemente non esistono, e
 * scritte nel blade non producono nulla: la prima versione di questa scheda
 * usciva a colonna unica con l'avatar schiacciato proprio per questo.
 *
 * Tutto è sotto .jo-gp per non toccare il resto del pannello.
 */

/* Grigio dei testi secondari: una variabile sola, così la variante scura
 * non va rincorsa in venti punti. */
.jo-gp,
.jo-gp-card {
    --jo-gp-muted: rgb(75 85 99);
}

.dark .jo-gp,
.dark .jo-gp-card {
    --jo-gp-muted: rgb(161 161 170);
}

.jo-gp {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .jo-gp {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        align-items: start;
    }
}

.jo-gp-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.jo-gp-card {
    background-color: var(--jo-surface, #fff);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 5%);
}

.dark .jo-gp-card {
    background-color: rgb(24 24 27);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 10%);
}

/* ── Identità ─────────────────────────────────────────────── */

.jo-gp-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.jo-gp-avatar {
    width: 5rem;
    height: 5rem;
    flex: 0 0 5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #7400ff, #9d4dff);
}

.jo-gp-name {
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.jo-gp-badges {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
}

/* ── Bottoni di contatto ──────────────────────────────────── */

.jo-gp-contact {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.jo-gp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.jo-gp-btn:hover {
    opacity: 0.9;
}

.jo-gp-btn svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}

.jo-gp-btn--wa {
    background-color: #25d366;
}

.jo-gp-btn--mail {
    background-color: #7400ff;
}

.jo-gp-btn--off {
    background-color: rgb(0 0 0 / 5%);
    color: rgb(156 163 175);
    cursor: not-allowed;
    font-weight: 500;
}

.dark .jo-gp-btn--off {
    background-color: rgb(255 255 255 / 5%);
}

.jo-gp-warning {
    margin-top: 0.5rem;
    border-radius: 0.5rem;
    background-color: rgb(254 243 199);
    color: rgb(146 64 14);
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1.4;
}

.dark .jo-gp-warning {
    background-color: rgb(245 158 11 / 12%);
    color: rgb(252 211 77);
}

/* ── Anagrafica ───────────────────────────────────────────── */

.jo-gp-facts {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgb(0 0 0 / 6%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.dark .jo-gp-facts {
    border-top-color: rgb(255 255 255 / 10%);
}

.jo-gp-fact {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.jo-gp-fact dt {
    flex: 0 0 auto;
    color: var(--jo-gp-muted);
}

.jo-gp-fact dd {
    text-align: right;
    font-weight: 500;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* ── KPI ──────────────────────────────────────────────────── */

.jo-gp-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 1280px) {
    .jo-gp-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.jo-gp-kpi {
    padding: 1rem;
}

.jo-gp-kpi-label {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--jo-gp-muted);
}

.jo-gp-kpi-value {
    margin-top: 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    /* "€ 204.237,47" non deve spezzarsi fra simbolo e cifra: si legge come
       due numeri diversi. Se non ci sta, rimpicciolisce. */
    white-space: nowrap;
    overflow-wrap: normal;
}

@media (max-width: 1400px) {
    .jo-gp-kpi-value {
        font-size: 1.35rem;
    }
}

.jo-gp-kpi-caption {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--jo-gp-muted);
}

/* ── Sezioni ──────────────────────────────────────────────── */

.jo-gp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.jo-gp-title {
    font-size: 1rem;
    font-weight: 600;
}

.jo-gp-empty {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--jo-gp-muted);
}

.jo-gp-chips {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.jo-gp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.jo-gp-chip button {
    opacity: 0.6;
    font-size: 1rem;
    line-height: 1;
}

.jo-gp-chip button:hover {
    opacity: 1;
}

.jo-gp-chip--plain {
    background-color: rgb(0 0 0 / 6%);
    color: rgb(55 65 81);
    font-size: 0.75rem;
    padding: 0.15rem 0.6rem;
}

.dark .jo-gp-chip--plain {
    background-color: rgb(255 255 255 / 10%);
    color: rgb(229 231 235);
}

.jo-gp-legend {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(0 0 0 / 6%);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--jo-gp-muted);
}

.dark .jo-gp-legend {
    border-top-color: rgb(255 255 255 / 10%);
}

.jo-gp-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.jo-gp-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
}

/* ── Preferenze ───────────────────────────────────────────── */

.jo-gp-split {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .jo-gp-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.jo-gp-sub {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--jo-gp-muted);
}

.jo-gp-list {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.jo-gp-muted {
    color: var(--jo-gp-muted);
}

/* ── Grafico soggiorni ────────────────────────────────────── */

.jo-gp-chart {
    margin-top: 1.25rem;
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    height: 11rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.jo-gp-bar-col {
    display: flex;
    flex: 1 1 0;
    min-width: 3.5rem;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.jo-gp-bar {
    width: 100%;
    border-radius: 0.375rem 0.375rem 0 0;
    background: linear-gradient(180deg, #7400ff, #b07cff);
}

.jo-gp-bar-value {
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.jo-gp-bar-label {
    font-size: 0.75rem;
    color: var(--jo-gp-muted);
}

/* ── Camere in cui ha dormito ──────────────────────────────── */

.jo-gp-rooms {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}

.jo-gp-room {
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 7%);
}

.dark .jo-gp-room {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 12%);
}

.jo-gp-room-photo {
    display: block;
    width: 100%;
    height: 8rem;
    object-fit: cover;
    background-color: rgb(0 0 0 / 4%);
}

.jo-gp-room-photo--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--jo-gp-muted);
}

.jo-gp-room-body {
    padding: 0.65rem 0.75rem;
}

.jo-gp-room-name {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
}

.jo-gp-room-meta {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--jo-gp-muted);
}