/* ============================================================
   MANUAGERE_V4 — Design System CSS
   ============================================================
   Classi utility derivate dai marchi ufficiali:
   • manuagere.ai  → Blu (#0077CC), Cyan (#00AAEE)
   • fattoria dei talenti → Verde (#1B5E3B), Oro (#E8A838)
   ============================================================ */

/* ---- Colori Brand: Manuagere.ai ---- */
.text-mng-primary       { color: var(--mng-primary) !important; }
.text-mng-primary-dark  { color: var(--mng-primary-dark) !important; }
.text-mng-primary-light { color: var(--mng-primary-light) !important; }
.bg-mng-primary         { background-color: var(--mng-primary) !important; }
.bg-mng-primary-dark    { background-color: var(--mng-primary-dark) !important; }
.bg-mng-primary-light   { background-color: var(--mng-primary-light) !important; }
.bg-mng-gradient-blue   { background: var(--mng-gradient-blue) !important; }
.border-mng-primary     { border-color: var(--mng-primary) !important; }

/* ---- Colori Brand: Fattoria dei Talenti ---- */
.text-fdt-green         { color: var(--mng-fdt-green) !important; }
.text-fdt-green-light   { color: var(--mng-fdt-green-light) !important; }
.bg-fdt-green           { background-color: var(--mng-fdt-green) !important; }
.bg-fdt-green-light     { background-color: var(--mng-fdt-green-light) !important; }
.bg-fdt-gradient-green  { background: var(--mng-gradient-green) !important; }
.border-fdt-green       { border-color: var(--mng-fdt-green) !important; }

/* ---- Accent Oro (Talenti) ---- */
.text-mng-accent        { color: var(--mng-accent) !important; }
.bg-mng-accent          { background-color: var(--mng-accent) !important; }
.border-mng-accent      { border-color: var(--mng-accent) !important; }

/* ---- Semantici ---- */
.text-mng-success       { color: var(--mng-success) !important; }
.text-mng-warning       { color: var(--mng-warning) !important; }
.text-mng-danger        { color: var(--mng-danger) !important; }
.bg-mng-success         { background-color: var(--mng-success) !important; }
.bg-mng-warning         { background-color: var(--mng-warning) !important; }
.bg-mng-danger          { background-color: var(--mng-danger) !important; }

/* ---- Semaforo Pre-screening ---- */
.semaforo-verde   { color: var(--mng-success); }
.semaforo-giallo  { color: var(--mng-warning); }
.semaforo-rosso   { color: var(--mng-danger); }
.semaforo-bg-verde  { background-color: var(--mng-success); color: white; }
.semaforo-bg-giallo { background-color: var(--mng-warning); color: #1A202C; }
.semaforo-bg-rosso  { background-color: var(--mng-danger); color: white; }

/* ---- Bottoni Brand ---- */
.btn-mng-primary {
    background-color: var(--mng-primary);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}
.btn-mng-primary:hover {
    background-color: var(--mng-primary-dark);
    transform: translateY(-1px);
}

.btn-mng-accent {
    background-color: var(--mng-accent);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}
.btn-mng-accent:hover {
    background-color: #D49930;
    transform: translateY(-1px);
}

.btn-fdt-green {
    background-color: var(--mng-fdt-green);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}
.btn-fdt-green:hover {
    background-color: #164E30;
    transform: translateY(-1px);
}

.btn-outline-primary {
    background: transparent;
    color: var(--mng-primary);
    border: 2px solid var(--mng-primary);
    padding: 8px 22px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-outline-primary:hover {
    background-color: var(--mng-primary);
    color: white;
}

/* ---- Card Brand ---- */
.card-mng {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #E2E8F0;
    overflow: hidden;
}
.card-mng-header {
    background: var(--mng-gradient-blue);
    color: white;
    padding: 16px 20px;
    font-weight: 600;
}
.card-fdt-header {
    background: var(--mng-gradient-green);
    color: white;
    padding: 16px 20px;
    font-weight: 600;
}

/* ---- Badge ---- */
.badge-mng      { background: rgba(0,119,204,0.1); color: var(--mng-primary); padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.badge-fdt      { background: rgba(27,94,59,0.1); color: var(--mng-fdt-green); padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.badge-accent   { background: rgba(232,168,56,0.1); color: var(--mng-accent); padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }

/* ---- Report AT: Essere, Fare, Avere ---- */
.at-essere  { border-left: 4px solid var(--mng-fdt-green); }
.at-fare    { border-left: 4px solid var(--mng-primary); }
.at-avere   { border-left: 4px solid var(--mng-accent); }

/* ---- Tooltip & Popover ---- */
.tooltip-mng {
    background: var(--mng-primary-dark);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ---- Footer FdT ---- */
.fdt-powered-by {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--mng-text-light);
}
.fdt-powered-by img { height: 28px; }

/* ---- Animazioni ---- */
@keyframes mng-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,119,204,0.3); }
    50% { box-shadow: 0 0 0 8px rgba(0,119,204,0); }
}
.mng-pulse { animation: mng-pulse 2s infinite; }

/* ── Analisi del Talento — Bipolare bar ─────────────────────────────────── */
.bipolare-track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(59,130,246,0.85) 0%,
    rgba(59,130,246,0.25) 35%,
    rgba(59,130,246,0.10) 50%,
    rgba(245,158,11,0.25) 65%,
    rgba(245,158,11,0.85) 100%);
}
.bipolare-track.cat-essere { background: linear-gradient(90deg, rgba(99,102,241,0.85), rgba(99,102,241,0.10) 50%, rgba(245,158,11,0.85)); }
.bipolare-track.cat-fare   { background: linear-gradient(90deg, rgba(16,185,129,0.85), rgba(16,185,129,0.10) 50%, rgba(245,158,11,0.85)); }
.bipolare-track.cat-avere  { background: linear-gradient(90deg, rgba(236,72,153,0.85), rgba(236,72,153,0.10) 50%, rgba(245,158,11,0.85)); }
.bipolare-pill {
  position: absolute; top: -10px; transform: translateX(-50%);
  min-width: 32px; padding: 2px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  color: white; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.bipolare-pill.cat-essere { background: #6366F1; --cat-color: #6366F1; }
.bipolare-pill.cat-fare   { background: #10B981; --cat-color: #10B981; }
.bipolare-pill.cat-avere  { background: #EC4899; --cat-color: #EC4899; }
.bipolare-pill.estremo    { box-shadow: 0 0 0 2px white, 0 0 0 4px var(--cat-color, currentColor); }
.bipolare-poli {
  display: flex; justify-content: space-between;
  font-size: 11px; color: #6B7280; margin-top: 4px;
}

/* ── Analisi del Talento — Stampa scheda candidato ──────────────────────── */
@media print {
  body.printing-scheda * { visibility: hidden; }
  body.printing-scheda #drawer, body.printing-scheda #drawer * { visibility: visible; }
  body.printing-scheda #drawer { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; transform: none !important; }
  body.printing-scheda .drw-tab-btn { display: none !important; }
  body.printing-scheda .drw-no-print { display: none !important; }
  @page { size: A4 portrait; margin: 1.5cm; }
  body.printing-scheda .print-header { padding-top: 2cm; text-align: center; }
  body.printing-scheda #box-ragnatela { page-break-after: always; height: 12cm; }
  body.printing-scheda .drw-tab { page-break-inside: avoid; }
}