/* ═══════════════════════════════════════════════════════════
   COMPONENTS.CSS — Cards, tabs, buttons, tooltips, modals
   ═══════════════════════════════════════════════════════════ */

/* ─── Score colour classes (background + text) ────────────── */
.sc1 { background: #FEE2E2; color: #991B1B; }
.sc2 { background: #FFEDD5; color: #9A3412; }
.sc3 { background: #FEF9C3; color: #854D0E; }
.sc4 { background: #DCFCE7; color: #166534; }
.sc5 { background: #BBF7D0; color: #14532D; }

/* ─── Score bar classes ───────────────────────────────────── */
.sb1 { background: #EF4444; }
.sb2 { background: #F97316; }
.sb3 { background: #EAB308; }
.sb4 { background: #22C55E; }
.sb5 { background: #16A34A; }

/* ─── Heatmap cell classes ────────────────────────────────── */
.hm1 { background: #FCA5A5; }
.hm2 { background: #FED7AA; }
.hm3 { background: #FDE68A; }
.hm4 { background: #86EFAC; }
.hm5 { background: #34D399; }

/* ─── Rating buttons ──────────────────────────────────────── */
.rbtn {
  width: 44px; height: 44px; border: 2px solid #CBD5E1; border-radius: 8px;
  background: white; color: #64748B; font-weight: 700; font-size: 15px;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  display: flex; align-items: center; justify-content: center; user-select: none;
}
.rbtn:hover { border-color: #1565C0; color: #1565C0; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(21,101,192,.2); }
.rbtn.sel1 { background: #EF4444; border-color: #EF4444; color: white; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(239,68,68,.3); }
.rbtn.sel2 { background: #F97316; border-color: #F97316; color: white; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(249,115,22,.3); }
.rbtn.sel3 { background: #EAB308; border-color: #EAB308; color: white; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(234,179,8,.3); }
.rbtn.sel4 { background: #22C55E; border-color: #22C55E; color: white; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(34,197,94,.3); }
.rbtn.sel5 { background: #16A34A; border-color: #16A34A; color: white; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(22,163,74,.3); }

/* ─── Cards ───────────────────────────────────────────────── */
.card    { background: white; border-radius: var(--radius-card);    box-shadow: var(--shadow-card); }
.card-sm { background: white; border-radius: var(--radius-card-sm); box-shadow: var(--shadow-card-sm); }

/* ─── Tabs ────────────────────────────────────────────────── */
.tab {
  padding: 12px 20px; color: var(--color-text-muted); font-weight: 500; font-size: 14px;
  cursor: pointer; border-bottom: 3px solid transparent;
  transition: color .2s, border-color .2s; white-space: nowrap;
}
.tab:hover { color: var(--color-ntblue); }
.tab.active { color: var(--color-ntblue); border-bottom-color: var(--color-ntblue); font-weight: 600; }

/* ─── Tooltip (top) ───────────────────────────────────────── */
.tooltip { position: relative; }
.tooltip:hover .tip { opacity: 1; pointer-events: auto; transform: translateY(0); }
.tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-navy); color: white; padding: 6px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 100;
}
.tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--color-navy);
}

/* ─── Rating tooltip variant (below) ─────────────────────── */
.tip-r {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--color-navy); color: white; padding: 8px 11px; border-radius: 8px;
  font-size: 11px; font-weight: 400; white-space: normal; width: 148px; text-align: center;
  line-height: 1.45; opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s; z-index: 200;
}
.tip-r strong { display: block; font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.tip-r::after {
  content: ''; position: absolute; bottom: 100%; top: auto; left: 50%;
  transform: translateX(-50%); border: 5px solid transparent;
  border-bottom-color: var(--color-navy);
}
.tooltip:hover .tip-r { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── Skill row hover ─────────────────────────────────────── */
.skill-row:hover { background: #F8FAFC; }

/* ─── Engineer card hover ─────────────────────────────────── */
.eng-card { transition: transform .2s, box-shadow .2s; }
.eng-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(10,22,40,.12); cursor: pointer; }

/* ─── Modal backdrop ──────────────────────────────────────── */
#modal-backdrop { background: rgba(10,22,40,.6); backdrop-filter: blur(4px); }