/* ── Panoramica Studio VIsH ──────────────────────────────────────────────── */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.pan-wrapper {
    padding: 10px 14px;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
}

/* ── Sezioni piatte (sostituisce .pan-card) ──────────────────────────────── */

.pan-section {
    padding: 10px 0 12px;
    border-bottom: 1px solid #f0f4f8;
}
.pan-section:last-child {
    border-bottom: none;
}

/* Riga compatta — prima riga di ogni sezione */
.pan-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Pills / badge inline ─────────────────────────────────────────────────── */

.pan-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2px 9px;
    font-size: 11px;
    color: #4a5568;
    white-space: nowrap;
}
.pan-pill-lbl {
    font-size: 9px;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.pan-pill-click {
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.pan-pill-click:hover {
    background: #ebf8ff;
    border-color: #90cdf4;
}

/* ── Pulsante azione inline (sezione) ────────────────────────────────────── */

.pan-action-btn {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 2px 7px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.5;
    color: #718096;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
}
.pan-action-btn:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
    color: #4a5568;
}

/* ── Pulsante azione nel pannello destro ─────────────────────────────────── */

.pan-icon-btn {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 3px 7px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    color: #718096;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.pan-icon-btn:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
    color: #4a5568;
}

/* ── Elementi Business ───────────────────────────────────────────────────── */

.pan-company-name {
    font-size: 13px;
    font-weight: 700;
    color: #1a202c;
}

/* ── Elementi Management ─────────────────────────────────────────────────── */

.pan-vsep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: #e2e8f0;
    flex-shrink: 0;
}

.pan-insider-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.pan-insider-green  { background:#f0fff4; color:#276749; border:1px solid #68d391; }
.pan-insider-yellow { background:#fffbeb; color:#744210; border:1px solid #f6ad55; }
.pan-insider-red    { background:#fff5f5; color:#742a2a; border:1px solid #fc8181; }

/* ── Label di sezione (piccolo, muted) ───────────────────────────────────── */

.pan-section-lbl {
    font-size: 10px;
    font-weight: 700;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

/* ── Sparklines bilanci ───────────────────────────────────────────────────── */

.pan-sparkline-grid {
    display: grid;
    /* minmax(0,1fr), non 1fr nudo: senza il minimo esplicito a 0 le
       colonne crescono oltre lo spazio disponibile se una card ha un
       min-content più largo (es. il valore numerico) — mai emerso finché
       Panoramica girava solo dentro la colonna fissa da 1100px di Studio. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.pan-sparkline-card {
    background: #f8fafc;
    border-radius: 7px;
    padding: 9px 11px;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s, box-shadow 0.12s;
}
.pan-sparkline-card:hover {
    background: #ebf8ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(66,153,225,0.12);
}
.pan-sparkline-label {
    font-size: 11px;
    color: #718096;
    margin-bottom: 2px;
    font-weight: 500;
}
.pan-sparkline-value {
    font-size: 12px;
    font-weight: 700;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 4px;
}
.pan-trend-up   { color: #48bb78; font-size: 11px; }
.pan-trend-down { color: #fc8181; font-size: 11px; }
.pan-trend-flat { color: #a0aec0; font-size: 11px; }

/* Media storica nella sparkline card */
.pan-spark-hist {
    font-size: 9px;
    color: #a0aec0;
    margin-top: 3px;
}

/* ── Tabella Analisi ──────────────────────────────────────────────────────── */

.pan-ratio-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pan-ratio-table th {
    padding: 5px 8px;
    text-align: left;
    background: #f7fafc;
    color: #718096;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}
.pan-ratio-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f4f8;
}
.pan-ratio-table tr:last-child td { border-bottom: none; }
.pan-ratio-table tbody tr:hover td { background: #f7fafc; }

/* ── Aggiornamenti ────────────────────────────────────────────────────────── */

.pan-aggiornamenti-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.pan-doc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid #f0f4f8;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
}
.pan-doc-item:hover { background: #f7fafc; padding: 5px 5px; margin: 0 -5px; }
.pan-doc-item:last-child { border-bottom: none; }

.pan-news-item {
    padding: 5px 0;
    border-bottom: 1px solid #f0f4f8;
}
.pan-news-item:last-child { border-bottom: none; }
.pan-news-title {
    font-size: 11px;
    color: #4a5568;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
}
.pan-news-title:hover { color: #2b6cb0; }
.pan-news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3px;
}
.pan-news-source { font-size: 10px; color: #a0aec0; }
.pan-news-translate-btn {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 10px;
    cursor: pointer;
    color: #718096;
    transition: background 0.1s;
}
.pan-news-translate-btn:hover { background: #f7fafc; }

/* ── Analisti ─────────────────────────────────────────────────────────────── */

.pan-analisti-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.pan-analisti-title {
    font-size: 10px;
    font-weight: 700;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* ── Warning badges ───────────────────────────────────────────────────────── */

.pan-flag-badge {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
    margin-bottom: 4px;
}
.pan-flag-w { background: #fff5f5; color: #742a2a; border: 1px solid #feb2b2; }
.pan-flag-p { background: #f0fff4; color: #22543d; border: 1px solid #9ae6b4; }
.pan-flag-s { background: #fffbeb; color: #744210; border: 1px solid #fbd38d; }

/* ── VIsH stella radar ────────────────────────────────────────────────────── */

.pano-stella-wrap { text-align: center; }
.pano-stella-svg { width: 180px; height: 180px; }
.pano-vish-label {
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
    text-align: center;
}
.pano-vish-eccellente { color: #276749; }
.pano-vish-ottimo     { color: #2f855a; }
.pano-vish-buono      { color: #2b6cb0; }
.pano-vish-discreto   { color: #744210; }
.pano-vish-debole     { color: #c05621; }
.pano-vish-critico    { color: #c53030; }
.pano-vish-nd         { color: #a0aec0; }

/* ── Pannello destro ──────────────────────────────────────────────────────── */

.pan-panel-wrap {
    padding: 16px;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
}
.pan-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}
.pan-profile-text {
    font-size: 12px;
    color: #4a5568;
    line-height: 1.75;
    white-space: pre-wrap;
}
.pan-translate-btns {
    display: flex;
    gap: 6px;
    margin-top: 14px;
}
.pan-lang-btn {
    padding: 5px 14px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #f7fafc;
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.15s;
}
.pan-lang-btn.active,
.pan-lang-btn:hover {
    background: #4299e1;
    border-color: #4299e1;
    color: #fff;
}
.pan-translate-progress {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
    margin: 8px 0;
}
.pan-translate-progress-bar {
    height: 100%;
    background: #4299e1;
    border-radius: 2px;
    transition: width 0.3s;
}

/* ── Bilanci + Analisi affiancati (STEP 2) ───────────────────────────────── */

.pan-bilanci-analisi-grid {
  display: grid;
  /* minmax(0,1fr): .pan-analisi-col contiene .pan-ratio-table, il cui
     min-content (celle numeriche) può superare lo spazio disponibile su
     schermi stretti — stesso blowout di .pan-sparkline-grid sopra. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* ── Tabella peer nella Panoramica ───────────────────────────────────────── */

.pan-peer-wrap { margin-top: 4px; }

.pan-peer-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pan-peer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.pan-peer-table th {
  padding: 5px 8px;
  background: #f7fafc;
  color: #718096;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
  text-align: right;
}

.pan-peer-table th:nth-child(1),
.pan-peer-table th:nth-child(2) {
  text-align: left;
}

.pan-peer-th {
  cursor: pointer;
  user-select: none;
}

.pan-peer-th:hover {
  background: #edf2f7;
  color: #2d3748;
}

.pan-peer-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #f0f4f8;
  white-space: nowrap;
  vertical-align: middle;
  text-align: right;
}

.pan-peer-table td:nth-child(1),
.pan-peer-table td:nth-child(2) {
  text-align: left;
}

.pan-peer-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pan-peer-row--current {
  background: #EBF1F8;
}

.pan-peer-row--current td {
  color: #2E5FA3;
}

.pan-peer-row:hover td {
  background: #f0fdf4;
  color: #0f5c4d;
}

.pan-peer-row--current:hover td {
  background: #dbeafe;
  color: #1e40af;
}

.pan-peer-row--median td {
  background: #f8fafc;
  font-style: italic;
  font-size: 10px;
  color: #6b7280;
  border-top: 1px solid #e2e8f0;
}

/* ── Pulsante finale ──────────────────────────────────────────────────────── */

.pan-cta-btn {
    display: block;
    margin: 4px auto 8px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 30px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.4px;
    transition: opacity 0.15s, transform 0.15s;
}
.pan-cta-btn:hover { opacity: 0.92; transform: translateY(-1px); }

/* ── Icona tutorial (?) accanto ai tab del menu Studio ──────────────────── */

.studio-help-btn {
    display: inline;
    font-size: 10px;
    cursor: pointer;
    margin-right: 2px;
    vertical-align: middle;
    background: none;
    border: none;
    padding: 0;
    opacity: 0.65;
    transition: opacity 0.15s, transform 0.15s;
    line-height: 1;
}
.studio-help-btn:hover {
    opacity: 1;
    transform: scale(1.2);
}

/* ── Competitor non cliccabili per utenti non Premium (Panoramica) ──────── */
body.vish-free .pan-peer-row[data-peer-ticker] {
    cursor: default !important;
    pointer-events: none;
}
body.vish-free .pan-peer-row[data-peer-ticker]:hover td {
    background: inherit;
}

/* =========================================================
   RESPONSIVE — STUDIO MOBILE (Fase 1)
   Stessa soglia di studio.css (900px): le griglie a 2 colonne di
   Panoramica diventano colonna singola. minmax(0,1fr) (vedi sopra)
   evita il grid-blowout, ma non basta per .pan-ratio-table: un
   <table> con table-layout:auto non si comprime sotto il proprio
   min-content — meglio dargli tutta la riga (colonna singola) che
   farlo scrollare in una metà di colonna stretta.
========================================================= */
@media (max-width: 900px) {
    .pan-bilanci-analisi-grid,
    .pan-aggiornamenti-grid,
    .pan-analisti-grid {
        grid-template-columns: 1fr;
    }
}