/* ============================================================
   DESIGN SYSTEM — components.css
   Reproduz os componentes de REFERENCIA.png. Carregado por ÚLTIMO,
   então prevalece sobre dashboard.css. Usa os tokens de colors/
   spacing/typography. Padroniza: cards, botões, inputs, selects,
   badges/chips, sidebar, header, tabelas, estados vazios, upload,
   e os blocos do dashboard (saudação, banner de perfil, KPIs).
   ============================================================ */

/* ---------- 1. LAYOUT BASE ---------- */
.main-content{background:var(--background)}
.dash-ref .main-content{padding:28px clamp(20px,3vw,40px) 56px}
.dash-ref .main-content > *{max-width:var(--content-max);margin-inline:auto}

/* ---------- 2. CARDS ---------- */
.card{
  background:var(--card-background);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}

/* ---------- 3. BOTÕES ---------- */
.btn{border-radius:var(--radius-sm);font-weight:var(--fw-bold);font-size:var(--fs-sm);transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);box-shadow:0 6px 16px -8px rgba(37,99,235,.5)}
.btn-ghost{background:#fff;color:var(--text-primary);border:1px solid var(--border-color)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-soft{background:var(--primary-soft);color:var(--primary)}
.btn-danger{background:var(--danger-soft);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}

/* ---------- 4. INPUTS / SELECTS / TEXTAREA ---------- */
.field input,.field select,.field textarea,
.search input,.global-search input,.filter-select,.sort-select{
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:#fff;color:var(--text-primary);
}
.field input,.field select{height:44px;padding:0 14px}
.field textarea{padding:12px 14px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)
}
.field label{color:var(--text-secondary);font-weight:var(--fw-bold)}

/* ---------- 5. BADGES & CHIPS ---------- */
.badge{border-radius:var(--radius-pill);font-weight:var(--fw-bold);font-size:var(--fs-2xs)}
.badge.ok,.badge.eval,.badge.interview,.badge.ko,.badge.sent{padding:4px 10px}

/* chip (pílula com ícone) — usado no banner de perfil */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:var(--radius-pill);
  background:#fff;border:1px solid var(--border-color);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-primary);
}
.chip svg{width:15px;height:15px;flex:none}
.chip--blue svg{color:var(--primary)}
.chip--violet svg{color:#7C3AED}
.chip--green svg{color:var(--success)}

/* ---------- 6. SIDEBAR ---------- */
.sidebar{width:var(--sidebar-w)}
.snav{border-radius:var(--radius-sm);font-weight:var(--fw-semibold);color:#475467}
.snav.active{background:var(--primary-soft);color:var(--primary);font-weight:var(--fw-bold)}
.snav.active .snav-ico{color:var(--primary)}
.snav.active::before{background:var(--primary)}

/* ---------- 7. ESTADOS VAZIOS ---------- */
.cand-empty,.cv-empty,.offers-area .empty{
  background:var(--card-background);border:1px solid var(--border-color);border-radius:var(--radius-lg)
}
.cand-empty-ico,.cv-empty-ico{background:var(--primary-soft);color:var(--primary)}

/* ---------- 8. UPLOAD CV ---------- */
.dropzone{
  border:2px dashed var(--emea-blue-line);border-radius:var(--radius-md);
  background:var(--primary-soft)
}
.dropzone strong{color:var(--primary)}
.dropzone svg{color:var(--primary)}

/* ============================================================
   9. DASHBOARD (REFERENCIA.png) — saudação, banner, KPIs
   ============================================================ */

/* 9.1 — Saudação */
.dash-ref .page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.dash-ref .greeting{font-size:var(--fs-display);font-weight:var(--fw-extra);letter-spacing:-.02em;color:var(--text-primary);display:flex;align-items:center;gap:10px}
.dash-ref .greeting .wave{font-size:26px}
.dash-ref .greeting-sub{margin-top:6px;color:var(--text-secondary);font-size:15px;font-weight:var(--fw-medium)}

/* 9.2 — Banner "Il tuo profilo è completo!" */
.profile-complete-card{
  display:flex;align-items:center;gap:28px;
  padding:24px 28px;margin-bottom:22px;
  background:var(--card-background);border:1px solid var(--border-color);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card);
}
.pcc-ring{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.ring{
  position:relative;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
  /* DEFAULT NEUTRO: senza --pstate/--pct il cerchio è grigio e VUOTO (0%).
     Mai verde, mai 100%. Il verde appare SOLO con .pstate-complete (impostato
     da JS, dopo i dati). Questo elimina lo stato "completo" di default. */
  background:conic-gradient(var(--pstate,var(--ring-track)) calc(var(--pct,0) * 1%), var(--ring-track) 0);
}
.ring::after{content:"";position:absolute;inset:11px;background:var(--card-background);border-radius:50%}
.ring-val{position:relative;z-index:1;font-size:24px;font-weight:var(--fw-extra);color:var(--text-primary)}
.pcc-ring-check{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);z-index:2;width:26px;height:26px;border-radius:50%;background:var(--pstate,var(--text-muted,#98A2B3));color:#fff;display:grid;place-items:center;border:3px solid var(--card-background)}
.pcc-ring-check svg{width:13px;height:13px}
.pcc-ring-label{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}
.pcc-body{flex:1;min-width:0}
.pcc-title{font-size:var(--fs-h2);font-weight:var(--fw-extra);color:var(--text-primary);display:flex;align-items:center;gap:8px}
.pcc-sub{margin-top:5px;color:var(--text-secondary);font-size:var(--fs-body)}
.pcc-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pcc-illo{flex:none;width:150px;display:grid;place-items:center}
.pcc-illo svg{width:130px;height:auto}

/* 9.2.1 — Estados de progresso do profilo (req.: <80 giallo, 80-99 arancio, 100 verde) */
.pstate-low{--pstate:#F59E0B;--pstate-soft:#FEF3E2}      /* giallo  */
.pstate-mid{--pstate:#F97316;--pstate-soft:#FFE8D5}      /* arancio */
.pstate-complete{--pstate:#22C55E;--pstate-soft:#E3F9EC} /* verde   */

/* Badge di stato (eyebrow) no banner — carrega o testo dello stato */
.pcc-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;padding:5px 12px;border-radius:var(--radius-pill);background:var(--pstate-soft);color:var(--pstate);font-weight:var(--fw-bold);font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
.pcc-badge svg{width:13px;height:13px;flex:none}

/* Ícone do documento (ilustração): cor do estado + marca correta */
.pcc-illo-badge{fill:var(--pstate,var(--text-muted,#98A2B3))}  /* default neutro: mai verde senza stato */
/* REGRA: nunca check verde abaixo de 100% — só a marca de alerta aparece */
.profile-complete-card:not(.pstate-complete) .pcc-illo-check{display:none}
.profile-complete-card.pstate-complete .pcc-illo-alert{display:none}
/* Check do anel só no estado completo */
.profile-complete-card:not(.pstate-complete) .pcc-ring-check{display:none}

/* ============================================================
   9.2.2 — STATO DI CARICAMENTO (skeleton → render unico, zero stati falsi)
   Causa del bug originale: l'HTML conteneva uno stato "100% / completo"
   statico, mostrato finché non arrivavano i dati da Supabase.
   Soluzione: l'HTML NON contiene più alcuno stato di profilo; durante il
   caricamento `body.profile-loading` mostra SOLO gli scheletri [data-skeleton]
   e tiene nascosto ogni contenuto reale [data-real]. Quando TUTTI i dati sono
   pronti si rimuove la classe → unica rivelazione, senza flicker.
   ============================================================ */
[data-skeleton]{display:none}
body.profile-loading [data-skeleton]{display:flex}
body.profile-loading [data-real]{display:none !important}
/* Difesa extra: un eventuale banner con [hidden] resta comunque nascosto. */
.profile-complete-card[hidden]{display:none !important}

/* Skeleton del banner profilo (stessa scatola di .profile-complete-card).
   NB: `display` è fornito SOLO da `body.profile-loading [data-skeleton]`,
   così dopo il caricamento `[data-skeleton]{display:none}` vince senza conflitti. */
.profile-skeleton{
  align-items:center;gap:28px;
  padding:24px 28px;margin-bottom:22px;
  background:var(--card-background);border:1px solid var(--border-color);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card);
}
.profile-skeleton .sk-ring{width:104px;height:104px;border-radius:50%;flex:none}
.profile-skeleton .sk-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.sk-line{height:14px;border-radius:8px;width:100%}
.sk-line--badge{width:128px;height:22px;border-radius:999px}
.sk-line--title{width:56%;height:22px}
.sk-line--sub{width:78%}
.sk-chips{display:flex;gap:10px;margin-top:4px}
.sk-chips span{width:104px;height:26px;border-radius:999px;display:block}

/* Skeleton interno delle KPI card (display fornito dalla regola di loading) */
.rkpi-skeleton{flex-direction:column;gap:10px;padding:2px 0}
.sk-card-line{height:13px;border-radius:7px}
.sk-card-line.w40{width:40%}.sk-card-line.w60{width:60%}.sk-card-line.w80{width:80%}

/* Shimmer condiviso */
.sk-ring,.sk-line,.sk-chips span,.sk-card-line{
  background:linear-gradient(90deg,var(--ring-track) 25%,#EFF2F8 37%,var(--ring-track) 63%);
  background-size:400% 100%;
  animation:sk-shimmer 1.4s ease-in-out infinite;
}
@keyframes sk-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion: reduce){
  .sk-ring,.sk-line,.sk-chips span,.sk-card-line{animation:none}
}

/* Card "Profilo completato": ícone, percentual e status seguem o estado */
.rkpi.pstate-low .rkpi-ico,
.rkpi.pstate-mid .rkpi-ico,
.rkpi.pstate-complete .rkpi-ico{background:var(--pstate-soft);color:var(--pstate)}
.rkpi-pct{color:var(--pstate,var(--text-primary))}
.rkpi.pstate-complete .rkpi-note.ok{color:var(--pstate)}

/* 9.3 — KPI cards (reference) */
.dash-ref .grid-kpi{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rkpi{
  display:flex;flex-direction:column;gap:14px;padding:18px;
  background:var(--card-background);border:1px solid var(--border-color);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);min-width:0;
  transition:transform .2s,box-shadow .2s,border-color .2s;color:inherit;
}
a.rkpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--emea-blue-line)}
.rkpi-top{display:flex;align-items:center;gap:10px}
.rkpi-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.rkpi-ico svg{width:20px;height:20px;stroke-width:1.9}
.rkpi--blue .rkpi-ico{background:var(--primary-soft);color:var(--primary)}
.rkpi--teal .rkpi-ico{background:var(--secondary-soft);color:var(--secondary)}
.rkpi--green .rkpi-ico{background:var(--success-soft);color:var(--success)}
.rkpi-label{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);line-height:1.2}
.rkpi-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.rkpi-value{font-size:var(--fs-value);font-weight:var(--fw-extra);letter-spacing:-.02em;line-height:1;color:var(--text-primary)}
.rkpi-value.sm{font-size:15px;font-weight:var(--fw-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rkpi-note{font-size:var(--fs-sm);color:var(--text-secondary);display:flex;align-items:center;gap:6px}
.rkpi-note.ok{color:var(--success);font-weight:var(--fw-semibold)}
.rkpi-note svg{width:14px;height:14px;flex:none}
.rkpi-bar{height:7px;border-radius:var(--radius-pill);background:var(--ring-track);overflow:hidden}
.rkpi-bar span{display:block;height:100%;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--primary),var(--secondary))}
.rkpi-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-pill);font-size:var(--fs-2xs);font-weight:var(--fw-bold)}
.rkpi-badge svg{width:12px;height:12px}
.rkpi-badge.green{background:var(--success-soft);color:var(--success)}
.rkpi-stats{display:flex;gap:10px}
.rkpi-stat{flex:1;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:8px 10px;text-align:center}
.rkpi-stat b{display:block;font-size:20px;font-weight:var(--fw-extra);color:var(--text-primary);line-height:1.1}
.rkpi-stat span{font-size:var(--fs-2xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}
.rkpi-foot{margin-top:auto;padding-top:4px}
.rkpi-cta{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--primary)}
.rkpi-cta svg{width:15px;height:15px}
a.rkpi:hover .rkpi-cta{gap:9px}
/* Lista "Informazioni mancanti" (card Profilo quando < 100%) */
.rkpi-missing{display:flex;flex-direction:column;gap:4px;margin:2px 0 0;padding:0;list-style:none}
.rkpi-missing li{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.2}
.rkpi-missing li svg{width:13px;height:13px;flex:none;color:var(--danger)}
.rkpi-missing li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rkpi-missing .rkpi-missing-more{padding-left:20px;font-size:var(--fs-2xs);font-weight:var(--fw-semibold);color:var(--text-secondary)}

/* ---------- 10. RESPONSIVO ---------- */
@media (max-width:1100px){
  .dash-ref .grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-complete-card{flex-wrap:wrap}
  .pcc-illo{display:none}
}
@media (max-width:680px){
  .dash-ref .grid-kpi{grid-template-columns:1fr}
  .dash-ref .page-head{flex-direction:column}
  .profile-complete-card{gap:18px}
}

/* ---------- 11. Anteprima CV — modal fullscreen (preview reale del PDF) ---------- */
body.cv-modal-open{overflow:hidden}
.cv-pdf-modal{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:rgba(11,18,32,.72);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cv-pdf-modal__bar{display:flex;align-items:center;gap:14px;padding:12px 18px;background:var(--card-background);border-bottom:1px solid var(--border-color)}
.cv-pdf-modal__title{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary)}
.cv-pdf-modal__title>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-pdf-modal__title svg{width:16px;height:16px;color:var(--primary);flex:none}
.cv-pdf-modal__newtab{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--primary);white-space:nowrap}
.cv-pdf-modal__newtab svg{width:15px;height:15px}
.cv-pdf-modal__close{flex:none;width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--card-background);color:var(--text-secondary);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.cv-pdf-modal__close:hover{background:var(--background);color:var(--text-primary)}
.cv-pdf-modal__close svg{width:18px;height:18px}
.cv-pdf-modal__body{flex:1;min-height:0;display:flex;padding:16px}
.cv-pdf-modal__body iframe{flex:1;width:100%;border:0;border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-card)}
@media (max-width:680px){
  .cv-pdf-modal__newtab span,.cv-pdf-modal__newtab{font-size:var(--fs-xs)}
  .cv-pdf-modal__body{padding:10px}
}