/* console-ceo.css — stili per il lato business/economico + sicurezza della Console CEO.
   Riusa i token brand (tokens.css) e si affianca a console.css. */

/* ─── Linea di sicurezza (in cima al main) ─── */
.safety-line {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; margin: 0 0 16px; border-radius: 10px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent;
}
.safety-line--ok { background: rgba(46, 160, 67, 0.12); border-color: rgba(46, 160, 67, 0.4); color: #8FE3A1; }
.safety-line--alarm { background: rgba(229, 72, 77, 0.16); border-color: rgba(229, 72, 77, 0.55); color: #FFB4B7; animation: ceoPulse 1.4s ease-in-out infinite; }
@keyframes ceoPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ─── Intestazioni / note di sezione ─── */
.ceo-objective { font-size: 13px; color: var(--brand-orange-400, #F2A65A); margin: 0 0 14px; font-style: italic; }
.ceo-note { font-size: 12px; color: var(--neutral-300, #B9B2A8); margin: 12px 0; line-height: 1.5; }
.ceo-h { margin: 22px 0 10px; font-size: 15px; color: var(--neutral-50, #F5F1EB); }

/* ─── Form inline ─── */
.ceo-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 4px; }
.ceo-form input, .ceo-form select {
  padding: 8px 11px; background: var(--neutral-950, #15120E); color: var(--neutral-50, #F5F1EB);
  border: 1px solid var(--neutral-600, #4A453E); border-radius: 8px; font-size: 13px; font-family: inherit;
}
.ceo-form input:focus, .ceo-form select:focus { outline: 2px solid var(--brand-orange-500, #E0701A); border-color: var(--brand-orange-500, #E0701A); }
.ceo-form label { font-size: 12px; color: var(--neutral-300, #B9B2A8); display: inline-flex; align-items: center; gap: 6px; }
.ceo-check { gap: 6px; }

/* ─── Due colonne (coorti/motivi, storico/movimenti) ─── */
.ceo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .ceo-cols { grid-template-columns: 1fr; } }

/* ─── KPI extra ─── */
.kpi-sub { font-size: 11px; color: var(--neutral-400, #8A8378); margin-top: 4px; }
.kpi-good { color: #8FE3A1 !important; }
.kpi-bad { color: #FF8A8D !important; }

/* ─── Chip di stato (lead/integrazioni) ─── */
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,0.08); color: var(--neutral-200, #D8D2C8); text-transform: uppercase; letter-spacing: 0.02em; }
.chip--lead { background: rgba(120,130,150,0.18); color: #C2CBDA; }
.chip--demo { background: rgba(224,144,40,0.18); color: #F2C089; }
.chip--trial { background: rgba(120,90,200,0.20); color: #C9B6F2; }
.chip--won, .chip--live { background: rgba(46,160,67,0.20); color: #8FE3A1; }
.chip--lost, .chip--incident { background: rgba(229,72,77,0.20); color: #FFB4B7; }
.chip--roadmap, .chip--planned { background: rgba(224,144,40,0.16); color: #F2C089; }
.chip--dismesso { background: rgba(120,120,120,0.18); color: #B0AAA0; }

/* ─── Bottone mini (azioni in tabella) ─── */
.btn-mini { padding: 3px 9px; font-size: 12px; border-radius: 6px; background: var(--neutral-800, #2A2620); color: var(--neutral-200, #D8D2C8); border: 1px solid var(--neutral-600, #4A453E); cursor: pointer; }
.btn-mini:hover { background: var(--neutral-700, #383229); }

/* ─── Toggle ruolo attivo ─── */
#roleToggleBtn.active { background: var(--brand-orange-500, #E0701A); color: #1A0A02; border-color: var(--brand-orange-500, #E0701A); }

/* ═══ Vista d'apertura (la console in 30 secondi) ═══ */
.cockpit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 14px; }
.cockpit-card {
  background: var(--neutral-900, #1C1813); border: 1px solid var(--neutral-700, #383229);
  border-radius: 14px; padding: 18px 18px 16px; position: relative; overflow: hidden;
}
.cockpit-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--neutral-600, #4A453E); }
.cockpit-card--star { border-color: rgba(224,144,40,0.5); background: linear-gradient(180deg, rgba(224,144,40,0.10), rgba(224,144,40,0.02)); }
.cockpit-card--star::before { background: var(--brand-orange-500, #E0701A); }
.cockpit-card--runway::before { background: #4DABF7; }
.cockpit-card__label { font-size: 12px; color: var(--neutral-300, #B9B2A8); text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cockpit-card__value { font-size: 30px; font-weight: 800; margin: 8px 0 6px; color: var(--neutral-50, #F5F1EB); line-height: 1.1; }
.cockpit-card--star .cockpit-card__value { color: var(--brand-orange-400, #F2A65A); }
.cockpit-card__obj { font-size: 12px; color: var(--neutral-400, #8A8378); line-height: 1.4; }

/* ═══ Badge di attivazione (phasing) ═══ */
.phase-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.phase-pill--lancio { background: rgba(224,144,40,0.18); color: #F2C089; }
.phase-pill--scala { background: rgba(120,90,200,0.20); color: #C9B6F2; }
.phase-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--neutral-300, #B9B2A8); line-height: 1.4;
  padding: 9px 14px; margin: 0 0 16px; border-radius: 10px;
  background: var(--neutral-900, #1C1813); border: 1px dashed var(--neutral-600, #4A453E);
}

/* ═══ Separazione visiva dei mondi nella sidebar ═══ */
.nav-group { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--neutral-800, #2A2620); }
.nav-group:last-child { border-bottom: none; }
.nav-group[data-world="apertura"] .nav-group__title { color: var(--brand-orange-400, #F2A65A); }
.nav-group[data-world="sicurezza"] .nav-group__title { color: #FFB4B7; }
.nav-group[data-world="diagnostica"] { opacity: 0.85; }
/* puntino "dormiente" accanto alle voci non ancora attive */
.nav-item[data-phase]::after { content: '•'; margin-left: 6px; color: var(--neutral-500, #6E675C); font-weight: 700; }
.nav-item[data-phase="lancio"]::after { color: #F2C089; }
.nav-item[data-phase="scala"]::after { color: #C9B6F2; }