/* ═══════════════════════════════════════════════════════════════════
   CecchinatoHR — Calcolatore Costo Collaboratore (CoCoCo)
   Stesso design system: Luxury corporate · DM Sans
═══════════════════════════════════════════════════════════════════ */

#collab-calc {
  --navy:   #0f1e3d;
  --navy-2: #162847;
  --navy-3: #1e3560;
  --gold:   #c9a84c;
  --gold-l: #e4c47a;
  --teal:   #0ea5a0;
  --green:  #059669;
  --red:    #dc2626;
  --amber:  #d97706;
  --bg:     #f4f6f9;
  --card:   #ffffff;
  --line:   #e4e9f0;
  --line-2: #d0d8e4;
  --text:   #0f1e3d;
  --muted:  #64748b;
  --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-xl: 28px;
  --s1: 0 1px 3px rgba(15,30,61,.06), 0 4px 12px rgba(15,30,61,.05);
  --s2: 0 4px 20px rgba(15,30,61,.10), 0 1px 4px rgba(15,30,61,.06);
  --s3: 0 12px 40px rgba(15,30,61,.14);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  color: var(--text); line-height: 1.5; background: transparent;
}
#collab-calc * { box-sizing: border-box; }

#collab-calc .container { max-width: 1100px; margin: 36px auto; padding: 0 18px; }

/* ── Hero ── */
#collab-calc .wpc-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 60%, #264d8c 100%);
  border-radius: var(--r-xl); padding: 28px 34px; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  box-shadow: var(--s3), 0 0 0 1px rgba(255,255,255,.06) inset;
  position: relative; overflow: hidden;
}
#collab-calc .wpc-hero::before {
  content: ''; position: absolute; right: -60px; top: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.15) 0%, transparent 70%);
  pointer-events: none;
}
#collab-calc .wpc-hero-text h2 {
  margin: 0 0 5px; color: #fff;
  font-size: 1.45rem; font-weight: 800; letter-spacing: -.3px;
}
#collab-calc .wpc-hero-text p { margin: 0; color: rgba(255,255,255,.65); font-size: .9rem; }
#collab-calc .wpc-hero-badge { display: none; }

/* ── Mode card ── */
#collab-calc .mode-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px; margin-bottom: 18px;
  box-shadow: var(--s2);
}
#collab-calc .mode-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#collab-calc .mode-title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--navy); }
#collab-calc .mode-sub { margin: 2px 0 0; color: var(--muted); font-size: .88rem; }
#collab-calc .mode-options { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { #collab-calc .mode-options { grid-template-columns: repeat(3, 1fr); } }
#collab-calc .mode-opt {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1.5px solid var(--line);
  background: var(--card); border-radius: var(--r); cursor: pointer;
  transition: all .18s ease; min-height: 78px;
}
#collab-calc .mode-opt:hover { border-color: var(--navy-3); box-shadow: var(--s2); transform: translateY(-1px); }
#collab-calc .mode-opt.active {
  border-color: var(--navy);
  background: linear-gradient(135deg, #f0f4ff 0%, #f8faff 100%);
  box-shadow: 0 0 0 3px rgba(15,30,61,.08), var(--s2); transform: translateY(-1px);
}
#collab-calc .mode-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#collab-calc .mode-ico {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; color: #fff; flex-shrink: 0; box-shadow: var(--s1);
}
#collab-calc .mode-ico svg { width: 19px; height: 19px; }
#collab-calc .c1 { background: linear-gradient(135deg, var(--navy), var(--navy-3)); }
#collab-calc .c2 { background: linear-gradient(135deg, var(--teal), #0e9a95); }
#collab-calc .c3 { background: linear-gradient(135deg, var(--gold), #b8922a); }
#collab-calc .mode-opt .label { font-weight: 700; font-size: .93rem; color: var(--navy); }
#collab-calc .mode-opt .sub { color: var(--muted); font-size: .82rem; margin-top: 2px; }

/* ── Widget / Card ── */
#collab-calc .widget {
  background: var(--card); border-radius: var(--r-xl);
  border: 1px solid var(--line); box-shadow: var(--s3); overflow: hidden;
}
#collab-calc .content { padding: 24px; }
#collab-calc .grid { display: grid; gap: 16px; }
@media (min-width: 860px) {
  #collab-calc .grid-3 { grid-template-columns: repeat(3, 1fr); }
  #collab-calc .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
#collab-calc .panel {
  background: #fafbfd; border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px;
}
#collab-calc .card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px;
}
#collab-calc .section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
  margin: 18px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
#collab-calc .section-label::before {
  content: ''; display: block; width: 3px; height: 14px;
  background: var(--gold); border-radius: 2px;
}

/* ── Form ── */
#collab-calc label {
  display: block; font-weight: 600; font-size: .88rem;
  color: var(--navy); margin: 0 0 6px; letter-spacing: .01em;
}
#collab-calc .field { display: flex; flex-direction: column; }
#collab-calc input,
#collab-calc select,
#collab-calc textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  background: #fff; color: var(--text);
  font-family: inherit; font-size: .92rem;
  outline: none; transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none;
}
#collab-calc input:focus,
#collab-calc select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15,30,61,.10);
}
#collab-calc .help { font-size: .82rem; color: var(--muted); margin-top: 4px; min-height: 20px; }
#collab-calc .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#collab-calc .row label {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500; cursor: pointer; margin: 0;
  padding: 6px 12px; border: 1.5px solid var(--line-2);
  border-radius: 999px; font-size: .88rem; transition: all .15s;
}
#collab-calc .row label:has(input:checked) {
  border-color: var(--navy); background: #f0f4ff; color: var(--navy); font-weight: 700;
}
#collab-calc .row label input[type="radio"] {
  width: 15px; height: 15px; accent-color: var(--navy);
  padding: 0; flex-shrink: 0;
}
#collab-calc .seg input { position: absolute; opacity: 0; }
#collab-calc .seg label {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1.5px solid var(--line-2);
  border-radius: 999px; background: #fff; cursor: pointer;
  font-weight: 600; font-size: .88rem; transition: all .15s; margin-right: 6px;
}
#collab-calc .seg input:checked + label {
  border-color: var(--navy); background: #f0f4ff;
  color: var(--navy); box-shadow: 0 0 0 3px rgba(15,30,61,.08);
}

/* ── Buttons ── */
#collab-calc .actions {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; margin: 16px 0 0; justify-content: center;
}
#collab-calc .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 22px; border-radius: var(--r-sm);
  font-family: inherit; font-weight: 700; font-size: .93rem;
  cursor: pointer; transition: all .18s ease; border: none;
}
#collab-calc .btn:hover { transform: translateY(-1px); }
#collab-calc .btn.primary {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
  color: #fff; box-shadow: 0 6px 20px rgba(15,30,61,.28);
}
#collab-calc .btn.primary:hover { box-shadow: 0 10px 28px rgba(15,30,61,.38); }
#collab-calc .btn.secondary {
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--line-2);
}
#collab-calc .btn.secondary:hover { border-color: var(--navy); background: #f4f6fb; }
#collab-calc .btn.success {
  background: linear-gradient(135deg, var(--green), #047857);
  color: #fff; box-shadow: 0 6px 20px rgba(5,150,105,.28);
}

/* ── Risultati ── */
#collab-calc .result-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; background: linear-gradient(135deg, #f0f4ff 0%, #f8faff 100%);
  border: 1px solid #d4dfff; border-radius: var(--r);
  padding: 14px 16px;
}
#collab-calc .result-head h3 { margin: 0; font-size: .95rem; font-weight: 700; color: var(--navy); }
#collab-calc .chip {
  display: inline-flex; align-items: center; padding: 8px 16px;
  border-radius: 999px; font-weight: 800; font-size: 1rem;
  background: var(--navy); color: #fff;
  box-shadow: 0 4px 14px rgba(15,30,61,.25);
  font-family: 'DM Mono', monospace;
}
#collab-calc .chip-green {
  background: linear-gradient(135deg, var(--green), #047857);
  box-shadow: 0 4px 14px rgba(5,150,105,.28);
}

/* KV rows */
#collab-calc .kv {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line);
}
#collab-calc .kv:last-child { border-bottom: none; }
#collab-calc .kv .k { color: var(--muted); font-size: .88rem; }
#collab-calc .kv .v { font-weight: 700; font-family: 'DM Mono', monospace; font-size: .88rem; }

/* Alert / cap-row */
#collab-calc .err-box {
  background: #fee2e2; border: 1px solid #fecaca; color: #7f1d1d;
  border-radius: var(--r-sm); padding: 12px 14px; font-weight: 700;
  display: none; margin-top: 8px;
}
#collab-calc .alert-red {
  background: #fee2e2; border: 1px solid #fecaca;
  color: #7f1d1d; border-radius: var(--r); padding: 12px 14px;
}
#collab-calc .cap-row {
  margin-top: 10px; padding: 10px 14px;
  background: #fffbeb; border: 1px solid #fde68a;
  color: #7a5a00; border-radius: var(--r-sm); font-weight: 600;
}
#collab-calc .cap-row strong { font-weight: 800; margin-right: 6px; }

/* Grafico bar */
#collab-calc .gap-card { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#collab-calc #barChart { display: block; width: 100%; max-width: 700px; }

/* ═══════════════ v2.1 — WOW layer ═══════════════ */
#collab-calc .chr-wow-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px;
}
#collab-calc .chr-wow-item{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(160deg,#204070 0%,#2B5290 100%);
  border-radius:14px; padding:14px 10px 12px; color:#fff;
  box-shadow:0 6px 18px rgba(32,64,112,.25);
}
#collab-calc .chr-wow-item::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-18deg); animation:chrSheenC 3.6s ease-in-out infinite;
}
#collab-calc .chr-wow-num{
  font-size:1.45rem; font-weight:800; letter-spacing:.01em; color:#7FD4FF;
  font-variant-numeric:tabular-nums;
}
#collab-calc .chr-wow-lab{ font-size:.76rem; opacity:.92; margin-top:2px }
#collab-calc .chr-kv-green .help,
#collab-calc .chr-kv-green strong{ color:#059669; font-weight:700 }
#collab-calc .chr-reveal{ animation:chrFadeUpC .55s cubic-bezier(.22,.9,.3,1) both }
@keyframes chrFadeUpC{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
@keyframes chrSheenC{ 0%,55%{left:-60%} 85%,100%{left:130%} }
@media (max-width:640px){
  #collab-calc .chr-wow-strip{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion: reduce){
  #collab-calc .chr-wow-item::after{ animation:none; display:none }
  #collab-calc .chr-reveal{ animation:none }
}
@media print{
  #collab-calc .chr-wow-item::after{ display:none }
}